Skip to main content
Manage your template: Style settings

In this article, we show you how to manage your style settings in your template.

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

๐Ÿ“– 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 the Boost app's TURBO version.


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 [email protected].

Did this answer your question?