Color system

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

Choosing a palette is the quickest way to give your store a new look, because every color you haven't customized follows it.

STEP 1: Open the settings

Go to Theme settings > Store colors.

STEP 2: Choose a palette

Use the Store colors dropdown to try different palettes and preview the result. The default is Eurus — Sage and Ivory.

STEP 3: Click "Save" to apply changes.

If a palette is almost right, change only the colors that need it and let the rest keep following the palette.

STEP 1: Open the settings

Go to Theme settings > Store colors.

STEP 2: Find the color

Below the palette, colors are grouped into:

• Background & text: backgrounds, headings, heading highlight, text, text links, lines and borders, secondary heading and text, and the image treatment overlay and text.
• Buttons: primary and secondary buttons, their text, and their hover colors.
• Price, accents & delivery estimate: price, sale price, error, success, cart dot, rating icons, and the delivery estimate and tooltip colors.

STEP 3: Fill in your color

Enter the color you want in that cell only. Leave the others empty so they keep following the palette.

STEP 4: Click "Save" to apply changes.

Color schemes let you give some sections a different look, for example a softer background for testimonials or a bold one for a promotion, without setting colors one by one.

STEP 1: Open the scheme

Go to Theme settings and open Color scheme: Soft.

STEP 2: Fill in the colors

Fill in the colors you want this scheme to use: backgrounds, headings, text, links, lines and borders, and buttons. Leave any cell empty to follow Store colors.

STEP 3: Repeat for the other schemes

Set up Color scheme: Bold and Color scheme: Accent in the same way if you want to use them.

STEP 4: Click "Save" to apply changes.

Each section, and many blocks inside them, can follow your Store colors or use one of the three schemes.

STEP 1: Open the section settings

In the Theme Editor, click on the section you want to change, then scroll to its Color scheme setting.

STEP 2: Choose a scheme for the section

Choose Store colors (default) to match the rest of your store, or Soft, Bold, or Accent.

STEP 3 (optional): Make one block stand out

Click on a block inside the section and change its own Color scheme from Adapt to section settings (default) to Store colors, Soft, Bold, or Accent.

STEP 4: Click "Save" to apply changes.

The header and footer each have a complete color set of their own, covering backgrounds, headings, text, links, lines, and buttons. This lets you style a dark footer or a branded header without affecting the rest of the store.

STEP 1: Open the settings

Go to Theme settings > Header colors.

STEP 2: Fill in the colors you want

Fill in any color you want to differ from Store colors. Empty cells follow Store colors.

STEP 3: Repeat for the footer

Open Theme settings > Footer colors and do the same.

STEP 4: Click "Save" to apply changes.

STEP 1: Open the settings

Go to Theme settings > Card and label colors.

STEP 2: Set the product card background

Choose a Card background mode: None, Adapt to section settings, or Custom (default). With Custom, set Background color (light).

STEP 3: Set the label colors

Set the background, text, and border colors you want for the Sale, Sold out, Text, Pre-order, and New labels. One value is used for both light and dark mode, because labels sit on top of product images.

STEP 4: Make label blocks use these colors

In the Product labels and badges section, open each label block and tick Follow store color.

STEP 5: Click "Save" to apply changes.

Theme mode works the same way as before. For how to set it up, see the Theme mode guide.

What changed in version 10.4.0 is where you set the dark mode colors. The separate Colors (Dark Theme) group no longer exists. Instead, the dark version of each color sits right next to its light version, in Store colors, the color schemes, Header colors, and Footer colors. The dark versions appear once Enable theme mode is turned on.

Color schemes is a feature in the Eurus theme that lets you set up ready-made color sets for elements within your store, such as background, heading and title, buttons, etc.

Instead of changing colors one by one, you can choose a color scheme and apply it to sections throughout your online store. This helps your store look consistent and saves time when editing.

Note: Color schemes is an on-demand feature for Eurus users. Please reach out to our support team to enable it for your store.

How to set up Color schemes?

STEP 1: Enable Color schemes in Theme settings

Go to Theme editor > Theme settings > Schemes > Enable Use color scheme.

STEP 2: Set up color schemes

Still at Schemes, you can add a new scheme and adjust the colors for background, heading and title, text, buttons, and so on.

STEP 3: Choose the color scheme to apply

At Colors and Colors (Dark theme), you can choose a color scheme (set up in STEP 2) to apply for each theme mode separately.

STEP 4: Click "Save" to apply changes.

Important notes

• If you update the theme and find issues when switching to use color scheme like this:

Then follow this guide:

Here is the code to embed into Theme editor:

"color_schemes": {
      "scheme-1": {
        "settings": {
          "background_scheme": "#FFFFFF",
          "colors_heading_scheme": "#000000",
          "colors_heading_highlight_scheme": "#000000",
          "colors_text_scheme": "#525151",
          "colors_text_link_scheme": "#FB8500",
          "colors_line_and_borders_scheme": "#F2F2F2",
          "secondary_background_scheme": "#F6F6F6"
        }
      }
    },

• When you enable color schemes, Secondary colors and Buttons settings groups in Colors & Colors (Dark theme) will follow the selected scheme’s main color.
• You can create multiple color schemes and apply each one to different sections as needed.