Return to WeTheme.com

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

Change your storefront's 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.


General:

Text -





Text

Link -





Link

Active link -

(When link is hovered over)



Active Link

Sale label -

Sale label


Background -

Header Background

Text -

Header Text


Background -

Footer Background

Text -

Footer Text


Background -

Main Menu Background

Text -

Main Menu Text


Page Background:

Background -





Page Background

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

Page Background Box Shadows


Site Title:

Logo link -

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

Site Title Logo Link

Logo link hover -


Buttons:

Background -





Button Background

Background hover -

Text -

Button Text


Background -

Popup Background

Text -

Popup Text


Image Overlays:

Text -

Image Overlays Text

Fade -

Image Overlays Fade

Overlay Opacity -

0%

(0%) Image Overlays Overlay Opacity

50%

(50%) Image Overlays Overlay Opacity

95%

(95%) Image Overlays Overlay Opacity

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