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.
Setting a default color palette for your site is currently available for part of the accounts.

To set the default color palette for your site:

  1. From your store admin, go to Website → Edit Site.
  2. Click Settings at the top and then Site Style.
  3. On the opened page, click the Palette bar on the left:
    Color palette.png
  4. 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.
  5. 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.

Changing the color scheme for site sections is currently available for part of the accounts.

To change the color scheme for a site section:

  1. From your store admin, go to Website → Edit Site.
  2. Сlick the section.
  3. Switch to the Design tab:
    Design tab.png
  4. Choose your option from the Color scheme list. You can see the changes in the preview on the right.
    Color scheme.png
  5. 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:

  1. From your store admin, go to Website → Edit Site.
  2. Сlick the section.
  3. Switch to the Design tab:
    Design tab.png
  4. 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.
    Element color.png
  5. Click the Publish button in the top right corner of the editor to apply changes.
     
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
0 out of 0 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline