Menu Close

Get Support From ShopWired Close

All Systems Are Operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available 9.00am to 7.00pm Monday to Friday
11.00am to 5.00pm Saturday
Quickest response time

Send A Message
Response within 24 hours

Menu Close


Changing colours on your theme

Your theme will be using a number of different colours to make up its design. You can change many of the colours used on the theme through your theme's style editor. (You can access the style editor by clicking 'themes' on the left menu, 'installed themes' and then 'style editor' for the theme you would like to customise).

Customising a theme without affecting your live website

Before you change your themes colours, you may like to read our article How can I customise my theme without affecting my live website?

Your theme's colour settings are grouped together into sections to make it easier for you to know which colours you are customising.

The number of individual colour settings and groups that are available for customisation on your theme are dependent on the theme that you are using and when you installed your theme, later theme versions (particularly Version 3 themes) contain a larger number of groups and individual settings.

Global theme colours

Version 3 themes include a new ShopWired feature called Global Theme Colours.

The global theme colours feature allows you to customise just a small group of colours (between 10-20, depending on what theme you are using) and for those settings to affect all instances of a particular colour setting used in your theme.

Using the global theme colours feature is optional.

Each colour group has a tick box, if the tick box is ticked then all the colour settings within that group will use the corresponding global theme colour.

To set the colours individually for the settings within a particular colour group, untick the 'use global theme colours' tick box. The individual colour settings will then be displayed for you to customise.

Changing colour settings

Colour settings will look similar to the example below.

Each colour setting is listed with a description of what the colour is used for (for example 'main text colour' relates to all the text used throughout the website). We also list the default colour so that you know what you have changed it from.

To change the colour click on the coloured square and a colour picker will appear.

You can then select the new colour using the rectangle at the top and the square in the middle. When you've picked a new colour click the OK button and the coloured square you originally clicked on will now change to the new colour.

You can see in the above example we have changed the search text colour & icon from black to red.

When you've finished click the 'save changes' button at the bottom of the page and then go to your website, click refresh in your browser, and the new colour will be applied.