Color scheme settings

These settings live in Theme settings → Color schemes, which you reach through the gear icon at the bottom of the theme editor sidebar. Everything in this group applies store-wide, while the choice of which scheme a particular section wears sits on that section’s own settings. A color scheme is a coordinated set of colors that travels as one unit, so getting a few of them right does more for your store’s look than any other group of settings.

Set up your color schemes

• Color schemes is the list at the top of the group, shown without a heading of its own. Each entry is one complete scheme, and opening it reveals the colors inside: the background it paints, the text color that sits on top, the button colors, borders, and the accent that carries links, highlights, and small details. Your theme style arrives with a set of schemes already built and balanced, so most stores only need to swap in their own brand colors rather than start from nothing. Edit a scheme once and every section using it updates in the same moment. You can add a scheme when a new one earns its place, though a short list almost always looks more deliberate than a long one.
• Color scheme is the store’s default. It colors the page background and anything that has not been given a scheme of its own, so treat it as the base note your whole store is tuned against. Defaults to Scheme 1. Change it when your store should open on a dark canvas instead of a light one (or the other way round), because switching the default is far quicker than re-pointing every section by hand.

Tip

Edit your schemes before you build out your homepage. Sections reference schemes by name, so a scheme you refine early flows into every section you add later. Reworking colors after twenty sections are placed means checking twenty sections.

Apply schemes across your store

Most sections carry their own Color scheme setting. Open a section in the editor, choose a scheme, and the whole section recolors instantly, headings, buttons, and borders included. Alternating two schemes down your homepage gives the page a rhythm and marks where one idea ends and the next begins. The header, footer, and cart drawer follow the same pattern, so you can hold the top and bottom of every page in one scheme and let the content between them vary.

Keep every scheme readable

The clearest way to check a scheme is to look at it in place rather than in the color picker.

• Give every scheme a clear difference in lightness between its text and its background.
• Always set an accent color that reads comfortably where it lands, especially on button labels and links.
• Check a scheme on a product page, not just the homepage. Prices, stock messages, and small labels are the smallest text in the theme and the first place a weak contrast shows.
• View your store on a phone in daylight if you can. It is the harshest test most storefronts get.

For the wider picture of how color works across the theme, see Colors. To see how each theme style handles color out of the box, see Choose a theme style.

Note

Every scheme that ships with the theme is built to meet accessibility contrast guidelines. Bring your brand colors in gradually and glance at the result on a real page, and your store will stay both distinctive and easy to read.