Colors

Overview

Edit the colouration and visual impact of all the different elements of your storefront.

Getting Started

To change your storefront’s colors, head here:

  1. Admin

  2. Online Store →Themes → Customise

  3. Theme Settings

  4. Colors

Site usages of color

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.

Tip

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

General

Text

Sale badge

Change the color of your sale badges which are displayed when you set a “compare at price”.

Enable sale badge:

Toggle between hidden and visible - this affects your collection pages, product pages and collections list.

Sold out badge

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

Note

Further information on “inventory” is available here:

Header

Background

Text

There are three available options, “background, text and border”:

Footer

Background

Text

Main menu

Choose your background, text and border colours shown in the example below:

Settings - Page background

Background

Show box shadows on product images - (toggle on / off)

Site Title

When text is used for the logo (not an image). This uses the store name from admin > settings:

Buttons

Background

Text

Background

Text

Image Overlays

Text

Fade

Overlay Opacity

0%:

50%

95%