📖 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?
Click the relevant color in the panel.
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.
Click outside of the color picker.
Click Save.
⚠️ 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.
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:
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.
To change an accent color
Click the color you want to change.
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.
Click outside of the color picker.
Click Save.
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
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:
Click Customize next to the template that you want to customize.
Click the Paintbrush icon, and then click Colors.
Click Advance settings
Click the color swatch for the content type color that you want to change.
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.
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:
Click Customize next to the template that you want to customize
Click the Paintbrush icon, and then click Typography
Choose the text elements that you want to edit and customize their typography
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].