Colors

Control all of the color options of your store, including backgrounds, buttons and popups.

Overview

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.

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

Link

Active link (When link is hovered over)

Sale badge

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

Note

Further information on setting a “compare at price” is available here:
https://help.shopify.com/en/manual/promoting-marketing/sales

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:
https://help.shopify.com/en/manual/products/inventory


Header

Background

Text


Sticky header

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


Footer

Background

Text


Main menu

Background

Text


Settings - Page background

Background

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


Site Title

Logo link

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

Logo link hover


Buttons

Background

Background hover

Text


Popup

Background

Text


Image Overlays

Text

Fade

Overlay Opacity

0%:

50%:

95%:


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 :-)