Enhance your store’s visual appeal to increase sales and solidify branding.


Colors bring your site to life. They emphasise and they encourage. They draw attention to certain areas and can reinforce statements.

Colors are known to promote certain emotions and feelings. 

Red, for example, is thought of as being a more “physical” color. 

Here are some of the positive words associated with red:

Physical courage, strength, warmth, energy, basic survival, 'fight or flight', stimulation, masculinity, excitement.

Green, on the other hand is a color of “balance”. 

Positive words associated with green are:

Harmony, balance, refreshment, nature, rest, restoration, reassurance, environmental awareness, equilibrium, peace.

Use color to your advantage and your products will be irresistible!

How do I get started?

To change your storefront’s colors, head here:

  1. Admin
  2. Online Store > Themes > Customise
  3. Theme Settings
  4. Colors

How do I change the colors used on my site?

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 changes occurring.


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





Secondary background:

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:

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:

Cart icon:

Slider arrows:



Text hover:





Button background:

Button background hover:

Button text hover:

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 products” 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:



This affects the “hero” section’s text colour, entered here:


Also affects the “hero” section’s text colour:







You now have all the colors in the rainbow for your site and you know how to use them to reach that pot of gold.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.