Colors

Build reusable color schemes once, then assign them to sections across your store.

Colors setting panel — color scheme editor overview

---

Schemes

A color scheme is a named palette — background, text, heading, border, and button colors that belong together. Define it once and point sections at it.

Change a color inside a scheme, and every section using that scheme updates instantly — one edit, applied everywhere.

Where schemes are used

Almost every section and block has a Color scheme setting. The area adopts that scheme's background, text, and button colors — letting one store mix a light content area, a dark hero, and a branded footer while staying coherent.

Same page with different color schemes across sections — light content, dark hero, branded footer

How to use them

1. In Theme settings → Colors, create or edit your schemes (duplicate a scheme to start from an existing look).

2. Open any section or block in the theme editor and set its Color scheme.

3. To restyle everywhere at once, edit the scheme itself rather than each section.

Color scheme assigned to a section — scheme selector dropdown in section settings

What a scheme controls

Color	What it affects
Background	The section's background canvas.
Headings	Heading text color.
Heading highlight	Accent color for highlighted words inside a heading.
Text	Body text color.
Border	Border lines on cards, dividers, and inputs.
Sale price	The discounted price color, set per scheme so it stays legible.
Shadow	Drop-shadow color for elevated elements.
Primary button — Background, Label, Hover border, Hover background, Hover label	The primary button in every state.
Secondary button — Background, Label, Hover border, Hover background, Hover label	The secondary button in every state.
Outline & subtle button	A shared accent color for outline and subtle button styles.

Color scheme token editor — all color fields within a single scheme

Hover border is the outline a solid button takes on hover. Set it to the same color as the hover background for a button that stays flat, or to a contrasting color to have an outline appear as the cursor lands on it.

Every color supports an alpha (opacity) value for translucent backgrounds, borders, and shadows.

---

Sale badge

Global colors for the Sale badge on discounted products, applied across every section. Typically red.

Setting	Description
Background color	Fill color of the sale badge.
Text color	Color of the badge label.

---

Sold out badge

Global colors for the Sold out badge on unavailable products. Typically a neutral grey.

Setting	Description
Background color	Fill color of the sold-out badge.
Text color	Color of the badge label.

These are the global default badge colors. For full badge behavior — sale badge type, collection, and custom badges — see Badges.

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket