Colors
Color schemes are named sets of colors for text, backgrounds, buttons, form fields, sliders and prices. Every section, card and drawer picks a scheme rather than individual colors, so changing a scheme here updates every place that uses it.
Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Colors.
Good for
- Matching the whole store to your brand palette in one place
- Building a light, a dark and an accent scheme to alternate down your pages
- Changing the color of every primary button at once
Settings
| Color schemes | Your saved color schemes. Each one is a full set of the colors below. Sections, cards and drawers each pick a scheme, so editing a scheme here changes every place that uses it. |
Drawers and modals
| Color scheme | Applies to popups and overlay panels that open on top of the page. |
Colors in each scheme
Every scheme has the same 29 colors. Set them once per scheme, then pick the scheme in any section.
Text
| Text | The main text color for headings, body copy, product titles and prices in any section that uses this scheme.
Default: #232A39. |
| Text subdued | A softer color for secondary text such as captions, descriptions, section subheadings, breadcrumbs and article bylines. Keep it readable, because it is often used at small sizes.
Default: #6B7080. |
Background
| Background | The solid background color of any section or card that uses this scheme.
Default: #FEFDFB. |
| Background gradient | Replaces the solid background with a gradient. Leave it empty to use the Background color. |
Accent
| Accent | A highlight fill used for filled badges and pills (like icon-list badges and blog tags), the selected tab, the ring around a selected color swatch, and star ratings.
Default: #E5F2F3. |
| Text on accent | The color of text sitting on an Accent fill, such as the label of a filled badge or a selected tab.
Default: #232A39. |
| Icon | The default color of icons, including social media icons, outline badge icons and small UI icons. Also used for the focus outline on accordions and tabs.
Default: #007988. |
Primary button
| Background | The fill of primary buttons, such as Add to cart, Check out and the main button in banners. The button border uses the same color.
Default: #007988. |
| Label | The text and icon color on primary buttons.
Default: #FFFFFF. |
| Background on hover | The fill that sweeps across a primary button when the shopper hovers over it on desktop.
Default: #005D6A. |
| Label on hover | The text color of a primary button while it is hovered on desktop.
Default: #FFFFFF. |
Secondary button
| Border and label | Secondary buttons are outlined: this color is used for both the outline and the label, and the inside stays transparent.
Default: #232A39. |
| Background on hover | The fill that sweeps across a secondary button when the shopper hovers over it on desktop.
Default: #232A39. |
| Label on hover | The text color of a secondary button while it is hovered on desktop. Make sure it stands out against Background on hover.
Default: #FFFFFF. |
Tertiary button
| Label | The color of text-style buttons (no fill, no border) and of links inside rich text, such as product descriptions and blog posts.
Default: #007988. |
Input
| Background | The fill inside form fields, such as newsletter signup, search, contact form, cart note and dropdowns.
Default: #FFFFFF. |
| Text | The color of text typed into form fields, and of the icons inside them.
Default: #232A39. |
| Border | The outline of form fields when they aren't selected.
Default: #DEE1E1. |
| Focus | The outline a field or dropdown gets while the shopper is typing in it or has it open. Also marks the keyboard-focused option in dropdowns and variant pills.
Default: #007988. |
Controls
| Indicator | Shows what is active: the current slider dot or progress bar, checked radio buttons and the selected filter swatch.
Default: #007988. |
| Icon background | The fill of round control buttons, such as slider arrows and video play/pause buttons.
Default: #FFFFFF. |
| Icon border | The outline of slider arrows and play buttons. Leave it transparent for borderless controls.
Default: rgba(0,0,0,0). |
| Icon color | The arrow or play icon inside those control buttons.
Default: #232A39. |
| Icon background on hover | The fill of a slider arrow or play button while it is hovered.
Default: #007988. |
| Icon color on hover | The icon color of a slider arrow or play button while it is hovered.
Default: #FFFFFF. |
Product
| Sale price | The color of the current price when a product is on sale (it has a compare-at price), on product cards and in the cart.
Default: #000000. |
| Offer text | The color of the discount label next to a sale price (for example Sale, Save $10 or 20% off). Also used for discount text in the sticky add-to-cart bar and on subscription options.
Default: #007988. |
Other
| Border | Divider lines and outlines, such as accordion rows, card and table borders, and separators in the cart and footer.
Default: #DEE1E1. |
| Overlay | The dark layer behind open drawers and pop-ups, and the tint laid over images to keep text on them readable.
Default: #232A39. |
Tips
- Start with three schemes. A light, a dark and one accent scheme are enough for most stores. Alternating them down a page gives it rhythm without looking random.
- Check contrast on small text. Body text needs a contrast ratio of at least 4.5:1 against its background, and large headings at least 3:1. Pale Text subdued colors and saturated brand colors often fail. Test any scheme you use behind small text.
- Primary buttons are your calls to action. Add to cart, Check out and the main banner buttons all use the primary colors. Give them your strongest color and keep secondary buttons quieter.
- Links in descriptions use the tertiary color. Text links in product descriptions, pages and blog posts take Tertiary button → Label. Make sure it stands out from Text.
- Hover colors are desktop only. Phones have no hover, so a button must look complete in its normal colors.
Troubleshooting
I changed a color but one section didn't change
That section uses a different scheme. Open the section, check which scheme its Color scheme setting uses, and edit that one, or switch the section to the scheme you changed. Cards inside a section can have their own card scheme too.
The cart drawer and pop-ups don't use my section colors
Panels that open on top of the page use the scheme chosen under Drawers and modals at the top of this page, not the scheme of the section behind them.
My background gradient isn't showing
The gradient replaces the solid color only in sections and cards that use this scheme. Check that the section uses the scheme you edited, and that the gradient isn't fully transparent.
The sale price color doesn't look any different
Sale price only colors a price when the product has a compare-at price higher than its price. Regular prices use Text.