Changing colors on your Instant Site
By default, your Instant Site uses the colors of the theme you choose to go with. You can change that by setting the default site-wide palette (and then changing the color scheme for select site sections based on it if you like), or by changing colors for individual elements.
Setting a default color palette for your site
A color palette is a curated selection of default colors used throughout your site design. It helps you establish brand identity, makes browsing website content easier for visitors, and ensures that the visual elements, such as buttons or backgrounds, look aligned and professional.
The color palette on your Instant Site includes:
- Two brand colors applied to buttons, icons, and other primary elements that stand out.
- A set of core colors applied to texts and backgrounds.
To set the default color palette for your site:
- From your store admin, go to Website → Edit Site.
- Click Settings at the top and then Site Style.
- On the opened page, click the Palette bar on the left:
-
Set brand colors and core colors for your website. You can see the changes in the preview on the right.
Make sure you use contrasting colors so the palette can be applied effectively across your website. It's best to have a set of the following colors: the lightest, lightish, bright, dark-bright, dark, and the darkest. - Click the Publish button in the top right corner of the editor to apply changes.
That’s it. You’ve set the color palette for your Instant Site.
The default color palette will be applied to all your site sections using a set of ready-made color schemes derived from it. You can switch between color schemes for individual site sections if you like.
Changing the color scheme for individual site sections
Color schemes define how colors from your Instant Site palette are applied within an individual site section. You can switch between color schemes to add variety to your website design while keeping it aligned with your brand.
To change the color scheme for a site section:
- From your store admin, go to Website → Edit Site.
- Сlick the section.
- Switch to the Design tab:
- Choose your option from the Color scheme list. You can see the changes in the preview on the right.
- Click the Publish button in the top right corner of the editor to apply changes.
Changing the color of individual elements on your site
You can manually set any color for select elements in individual sections of your site. For example, if you want to make a specific button stand out while keeping the other buttons in line with your default website palette.
To change the color of an individual element on your site:
- From your store admin, go to Website → Edit Site.
- Сlick the section.
- Switch to the Design tab:
- Click an element (for example, Button) in the list on the left, then click Color to set a color for this element. You can select from the palette color list, use the color chooser tool, or enter an existing color code if you already know it.
- Click the Publish button in the top right corner of the editor to apply changes.