Manage your template: Style settings

📖 This guide shows you how to edit your template stylings with Boost's Visual Editor. With the power of style customization, you can create a visually pleasing storefront to entice your customers.

⚠ This feature is only applied to customers using Boost app's TURBO version.

On this page


Manage the colors

Base colors

What is the base color?

The base color is the primary background and text color used throughout your template. It forms the foundation for other design elements such as text, labels, and buttons. Selecting a base color that contrasts effectively with the text color is essential for maintaining readability and providing a user-friendly experience.
When you modify your base colors, a gradient of 3 colors is automatically created. To see the hex code of a particular color, you can hover over it.

To change the base colors?

  1. Click the relevant color in the panel.
  2. Choose how you want to select a new base color:
    • Use the cursor to find and select a new color.
    • Enter the color in HEX values.
  3. Click outside of the color picker.
  4. Click Save.

1. Settings details - Colors.png

⚠ What happens when I choose 2 base colors with similar contrast?

A warning message will be displayed if the user chooses 2 base colors with similar contrast.

Screenshot 2024-03-18 at 00.37.57.png

Test the color contrasts

Many sites and browser plugins such as Color Contrast Checker test the color contrast by comparing the foreground and background colors (using the color codes). For example:

Screenshot 2024-03-03 at 02.16.11.png

Accent colors

  • Choose up to 4 site accent colors to add a personal touch to your palette. Each color can be individually adjusted to create a theme that meets your template's design requirements.
  • Accent colors are supplementary colors used throughout your template, such as those in your branding palette or company logo. These colors also appear in the Color Picker each time you select colors for elements of Color Advance settings.

Screenshot 2024-02-23 at 04.06.10.png

To change an accent color

  1. Click the color you want to change.
  2. Choose how you want to select a new color:
    • Use the cursor to find and select a new color.
    • Enter the color in HEX values.
  3. Click outside of the color picker.
  4. Click Save.

Screenshot 2024-03-17 at 17.06.49.png


What happens when you change accent colors?

Updating accent colors is a great way to customize your template, and keep its look fresh.
When you change an accent color, the new shade is automatically applied to all elements you've set to use this color.

Can I remove a site accent color?

Currently, you cannot remove accent colors.

Advance settings

Left sidebar.png

Element Setting Description
Block Background
Color is applied to the background of some sections and the outline button background.

Lines & dividers Color is applied to the line & dividers.
Text Heading Color is applied to the heading text. Ex: Collection title

Label Color is applied to the label text.

Body Color is applied to the section or block text.

Secondary text Color is applied to the secondary text.

Links & actions Color is applied to the links & actions text.
Price Price Color is applied to the price text.

Sale price Color is applied to the sale text.

Compare-at price Color is applied to the compare-at-price text.

Saving text Color is applied to the saving price text.
Button Solid button background Color is applied to the primary button background.

Solid button text Color is applied to the primary button text.

Outline button Color is applied to the secondary button text and border.
Others Sale label background Customer by tag label background

Sold out label background Color is applied to the sold-out label background.

Customer by tag label background Color is applied to the customer by tag label background.
Please observe the following steps:
  1. Click Customize next to the template that you want to customize.
  2. Click the Paintbrush icon, and then click Colors.
  3. Click Advance settings
  4. Click the color swatch for the content type color that you want to change.
  5. To set the color: enter a hex color code or choose a color from the color picker.

    To set the opacity, input the desired percentage into the text field or adjust the second bar.
  6. Click Save.

Manage the typography

A template typography is a collection of various text types (headings, body text, buttons, links, and accents) in different sizes, used throughout your template.

You can selectively choose which font family, style, size, and transformation you want to use for these text elements: Headings, Body, Buttons, and Links & Accents.

To edit the typography of your template, follow these steps:

  1. Click Customize next to the template that you want to customize
  2. Click the Paintbrush icon, and then click Typography
  3. Choose the text elements that you want to edit and customize their typography
  4. Remember to click Save to save your changes


If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at support@boostcommerce.net.