Colors

Colors bring your site to life - they help draw attention to certain areas and can reinforce your storefront's branding.

Using the right color combinations will help leave a memorable impression, and should help conversions too!

Getting started

To change your storefront’s colors, head here:

  1. Admin

  2. Online Store → Themes → Customise

  3. Theme Settings

  4. Colors

Customizing the colors used

Let’s go through each of the color options and see which parts of your site they will affect.

Red has been used throughout to highlight the updated changes occurring.

Tip

You can also select a transparent background and transparent text by clicking the 'None' box in the bottom left of any color pallet window.

General

Text:

Background

Secondary background:

Badges

Sale badge:

Change the color of your sale badges which are displayed when you set a “compare at price”.Note: you can now hide sales badges from your store by deselecting the "Show sale badge" option:

Please note that you can also change the highlight colour for the Compare at Price on the Product Page, to help draw the customer's eye directly to it:

Sold out badge:

Change the color of your sold out badges which are displayed when your inventory falls below a set amount.

Note you can now hide sales badges from your store by deselecting the "Show sold out badge" option:

Badge font color

Changes the text for the badges - we'd recommend a light/dark contrast to keep this easily legible for customer with color-vision difficulties :

Cart indicator

Please note this is a Mobile View-only feature:

Header

Text

Text hover

Background

Borders

Overlay Text

Overlay Background

Please note in the example below, the opacity has been set to 25%, leaving this fairly translucent:

Mobile Menu

Background

Text

Hover

Buttons

Button background / Button text

Refers to the button's default state:

Button background Hover / Button text hover

Refers to the button's colouration when the cursor is over it:

Secondary button background / Secondary button text

Refers to the button's default state:

Secondary button background hover / Secondary button text hover

Refers to the button's colouration when the cursor is over it:

Color schemes

These are split into three groups. Light, feature and dark.

For each of these schemes, there are a pair of colours. You can choose these schemes by selecting them from the options in some sections.

For example, here is the dropdown within the “Featured Collection” section:

You could think of these as simply three different preset options, (A, B and C).

Here is how the options are displayed within “color schemes” and how they are grouped:

Popup

Background

Text

Cart Drawer

Background

Text

Footer

Background

Text