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.
On this page
Manage the colors
Base colors
What is the base color?
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.
A warning message will be displayed if the user chooses 2 base colors with similar contrast.
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?
Can I remove a site accent color?
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. |
- 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
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 support@boostcommerce.net.