Colors and color schemes

The Colors panel sets the color palette for your whole store. It lives under Theme settings in the theme editor. Here you build color schemes (named sets of colors) and set one store-wide Surface color. Each section then picks one of your schemes, so you control the look in one place and reuse it everywhere.

How color schemes work

A color scheme is a saved group of colors with a name. You can keep several schemes (for example a light one and a dark one) and switch a section from one to another without re-picking individual colors. Change a color inside a scheme once, and every section using that scheme updates together.

Open the Colors panel

1. In the theme editor, click Theme settings (the gear icon in the left sidebar).
2. Click Colors.

Edit a color scheme

Each scheme holds the colors below. Click a swatch to set a value.

• Background: the fill color behind a section's content. Supports transparency.
• Text: the color for headings and body copy on that background. Supports transparency.
• Accent: the link and highlight color within the scheme.
• Overlay accent: the accent color used over images and dark overlays, where the standard Accent would not read well.
• Separator: the color of dividers, borders, and hairlines.
• Overlay text: the text color shown over images and dark overlay panels.
• Overlay background: the dark panel color placed behind text that sits over an image, so the text stays legible.
• Primary button background: the fill color of primary buttons.
• Primary button text: the label color on primary buttons.
• Secondary button background: the fill color of secondary (outline style) buttons.
• Secondary button text: the label color and border color on secondary buttons.

Set these once per scheme. Reign maps them to the right roles across the store, so text, background, links, icons, and both button styles all follow the values above.

Assign a scheme to a section

The Colors panel defines the schemes. You choose which scheme a given section or block uses with its Color scheme setting, inside that section. For where that picker sits and how it behaves on blocks, see Common section settings.

Because the assignment lives on the section, two sections on the same page can use different schemes (for example a light scheme for one band and a dark scheme for the next).

Surface

Below the schemes is one global color.

• Surface: the dark glass behind the header and product overlays. This is a single store-wide value, not part of a scheme. It tints the header bar, dropdown menus, and the overlay chips on product cards.

Tips

• Keep at least one light scheme and one dark scheme. Sections that place text over an image rely on a scheme with a light Overlay text so the text stays readable on the photo.
• Background and Text accept transparency. Use it only when a section is meant to show what is behind it. For a normal solid band, keep them opaque.
• Surface is separate from your schemes. Editing a scheme will not change the header glass. Adjust Surface to retint the header and product overlays.