A color scheme is a saved set of colors. Every section on your store uses one scheme, so you change colors in one place and every section that uses that scheme follows.
Where to find your schemes
Open the builder, click the gear icon, and open the Colors tab. Under Schemes you see one card per scheme, named Scheme 1, Scheme 2, and so on. Each card shows a small preview of its colors.
- Edit: click a card. A panel opens with a live preview at the top and all the colors below.
- Add: click the plus card at the end. The new scheme starts as a copy of your last scheme.
- Duplicate or Delete: right-click a card, or use the menu button at the top of the scheme panel.
- Reorder: drag a card by its handle.
You can have up to 9 schemes. When you reach 9, the plus card shows (9/9) and Duplicate shows Limit reached. You always keep at least one scheme, so the last one cannot be deleted.
The colors in a scheme
General
- Background: the background of the section.
- Inner background: boxes and cards inside the section.
- Heading: titles.
- Text: paragraphs and normal text.
- Important text: text that must stand out, such as prices and countdown numbers.
- Badge background: the fill of the savings badges, the bundle ribbons, and the bundle saving pills.
- Links and Hover links: links, and links under the mouse.
- Border: lines and dividers.
- Outline: focus rings and outlines, for example when a shopper moves through the page with the keyboard.
- Shadow: the color of shadows.
Primary button and Secondary button
Each has Background, Text, and Border, plus Hover background, Hover text, and Hover border for when the mouse is over the button. The primary button is your main call to action, such as the buy button.
Input
Form fields: Background, Label, Text (what the shopper types), Border, and Hover background.
How sections pick a scheme
Select a section and find its Color scheme setting. Pick a scheme from the list. The list has a link to your color schemes if you want to edit them.
Many blocks inside a section have a Use parent color scheme switch. On, the block uses the colors of the section around it. Off, a Color scheme setting appears so the block can use its own scheme. In the write a review block, Inherit scheme makes its button use the section colors. Off, you pick a Button scheme. Other places that use a scheme include the header menu panels and the maintenance page.
Good to know
- Sections remember the number, not the colors. If you drag Scheme 3 to the first place, every section that used scheme 1 now shows the colors that moved there. Check your pages after reordering.
- Deleting a scheme moves its sections to the scheme just before it (or to the first scheme). Duplicating puts the copy right after the original and keeps every section on its current colors.
- Schemes belong to the market you are editing. Switch market with the flag first if you sell in several markets.
- Changes go live when you click Publish.
Tips
- Keep a calm light scheme for most sections and one bold scheme for the hero and calls to action.
- Make the primary button clearly different from the background.
- Check that text is easy to read on its background, on a phone in daylight too.