In the theme editor: Customize›Theme settings›Colors
Colors
The colors of the whole store: background, surfaces, text, buttons, and the colors of signals such as sale and errors.
Check the contrast between text and background on a phone in daylight. Small gray text is the first thing to become hard to read.
Settings
Color schemes
- Text
- Page color scheme
- Color schemeThe page background and every section that has no scheme of its own.
- Page background on phones
- ColorEmpty: the background of the page color scheme. Choose a color only if phones should show a different tone.
Each scheme is a full set of colors. Every section picks a scheme, so changing a scheme here changes every section that uses it. Hover states, lines and secondary text are calculated from these colors.
Signals
- Sale badge
- ColorDefault: #94303F
- Sale badge text
- ColorDefault: #FFFFFF
- Badge color
- ColorDefault: #FFFFFFThe pill on product images: Sale, Sold out, or the product's own text. The text on it turns dark or white automatically.
- Badge text color
- ColorEmpty: dark or white, whichever reads better on the badge color.
- Sale price
- ColorBlank: like a regular price, in the text color.
- Error
- ColorDefault: #B3261E
- Success
- ColorDefault: #3B9E68The button that confirms a product was added to the cart, on product cards and in the cart recommendations.
- Text on success
- ColorDefault: #FFFFFF
- Price before discount
- ColorDefault: #555555The crossed-out price next to the sale price.
Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.