Color schemes

Adjust color schemes to use for your whole store, pages, or sections. Note that the best practice when you choose colors for the schemes is to use the 'Text' color contrasting to both 'Foreground' and 'Background' and follow the accessibility rules.

GENERAL

Default color scheme

Choose the color scheme that initially applies to all your newly added store components. This scheme goes under the 'Default' option in the color scheme dropdown list of every section. When you change the 'Default' scheme, it consequently colors all the sections and blocks with the 'Default' option chosen. This way, you can change the look of your whole store with just one click.

COLOR SCHEMES

We recommend that you have a supporting palette, either contrasting or complementary in color, for your main color scheme to highlight certain places within the page or group sections into one meaningful block. To try this approach, use the set of three color schemes - 'Primary', 'Secondary', and 'Contrasting' - that support one another. You can apply them as-is or change the colors to match your store's unique branding.

Primary

The main color scheme of your store to use on an everyday basis.

Secondary

The color scheme that is complementary to 'Primary'.

Contrasting

The dark mode to make contrasting sections, templates, or pages.

Scheme 1 to 5

The additional color schemes to use occasionally for promotional campaigns.