Skip to main content
How to customize the style of elements on a page

In this article, we show you how to customize the style of elements on a page.

Connell Nguyen avatar
Written by Connell Nguyen
Updated over a week ago

📖 In this article, we will learn how to customize most of your element's style in Boost's Theme Visual editor.

⚠️ This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.


Color

Color settings: this parameter allows you to choose the color for the text, background, or border.

Open the color picker, and click the color swatch for the content type color you want to change.

  • To set a specific hex color code, click on the text field to enter the color.

  • To set the color to transparent, click the icon ˆ to change to the rgba code format, and then change the value of the 'a' in ‘rgba’ code to 0.


Font

Font family: You can change the font family for your text label from the drop-down list. We are using the Shopify Library Font.

With every font, you can configure the following parameters:

  • Font style: Select your preferred font style from the drop-down list

  • Font size: Use the slider or input your preferred size in pixels


Text

Text transform: You can change the text transform here. There are 4 options to choose including

  • - : None

  • AG: Uppercase

  • ag: Lowercase

  • Ag: Capitalize


If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at [email protected].

Did this answer your question?