Change the colours of your shop

Your shop's appearance is crucial for creating a memorable brand identity. In this article, we explain how to change the colours of your shop and describe the different setting options so that you can create a visually appealing shop.

Caution

The colour settings are only applied to the currently selected theme. If you change the theme, your selected colours will no longer be used. If you switch back to the previously selected theme, your former colour settings will be applied to your shop again. Note that it is not possible to reset a theme to its original colours!

How to change the colours

  1. In the sidebar of your administration, navigate to Editor.
  2. Select in the bottom bar.
  3. Select the colour square of the colour setting that you want to change.
    The colour palette opens.
  4. Choose your colour or enter a hex colour code (e.g. #123456). A preview of your changes will directly be visible on the page in the background. For further information refer to Learn more about the color settings.
  5. Select Save.

You have changed the colours of your shop. Take a look at the result by selecting View your shop in the top bar.

Colours in your shop

Depending on the theme you have selected, you can make different colour settings. Some of the following options may therefore not be available in your Editor. Also note that each option can have a slightly different effect on different parts of your shop depending on your theme.

Accent colour

Depending on the selected theme, this colour setting can affect how text links, icons, and buttons are highlighted when you select them or hover over them. For some themes, this setting determines the colour of product prices or the default text colour. However, for all text content elements you can also change the colour individually via the formatting settings.

Primary colour

Depending on the selected theme, this colour setting may affect the display of product names/prices, buttons, design elements, breadcrumbs, links, icons, but also the background colour of your header and footer.

Background colour

The background colour determines the background colour of your shop. You can also set different background colours for your content elements. Note that the background colour of your shop cannot be changed in all themes.

Border colour

For some themes, borders or dividers are used as a design element, for instance under your product images. Sometimes, this colour setting is also used to highlight elements in your menu. Note that it is not possible to change the border colour for all themes, even if they are included in the chosen theme.

Header content

The colour of the header content determines the text colour of your header. Be sure to choose a colour that contrasts strongly with the background colour of your header so that the content is easy to read.

With some themes, there might not be an additional setting for the colour of the header content, because it is covered by another setting, e.g. the accent colour, or it is not possible to choose a colour for the header content. In this case, the header content is displayed in either black or white, depending on the header background colour, to ensure readability.

Header background

The background colour of the header determines the colour of your header. Be sure to choose a colour that contrasts strongly with the colour of the header content so that it is easy to read. With some themes there may not be an additional setting for the background colour of the header, as this is covered by another setting, e.g. the primary colour.

Footer content

The colour of the footer content determines the text colour of your footer. Be sure to choose a colour that contrasts strongly with the background colour of your footer so that the content is easy to read.

With some themes, there might not be an additional setting for the colour of the footer content, because it is covered by another setting, e.g. the accent colour, or it is not possible to choose a colour for the footer content. In this case, the footer content is displayed in either black or white, depending on the footer background colour, to ensure readability.

Footer background

The background colour of the footer determines the colour of your footer. Be sure to choose a colour that contrasts strongly with the colour of the footer content so that it is easy to read. With some themes there may not be an additional setting for the background colour of the footer, as this is covered by another setting, e.g. the primary colour.

For some themes, the footer is not highlighted by using an additional colour, but instead uses the background colour of your shop.

Was this article helpful?