How to customize the style of elements on a page

📖 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.

On this page

Color

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

Open the color picker, 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 support@boostcommerce.net.