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!
To change your storefront’s colors, head here:
Admin
Online Store → Themes → Customise
Theme Settings
Colors
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.
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:
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:
Changes the text for the badges - we'd recommend a light/dark contrast to keep this easily legible for customer with color-vision difficulties :
Please note this is a Mobile View-only feature:
Please note in the example below, the opacity has been set to 25%, leaving this fairly translucent:
Refers to the button's default state:
Refers to the button's colouration when the cursor is over it:
Refers to the button's default state:
Refers to the button's colouration when the cursor is over it:
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:
