Color schemes
Color schemes apply a palette to an individual section. Default follows the active global palette. The four named schemes have their own editable colors, so a section can contrast with the rest of the page.
The five schemes
| Editor label | Internal value | Starting palette |
|---|---|---|
| Default | default | Inherits the active body palette: the Style’s curated colors, with any global colors you changed in their place. |
| Editorial dark | editorial-dark | Warm charcoal with a champagne accent. |
| Warm neutral | warm-neutral | Sand / cream with a terracotta-brown accent. |
| Accent pop | accent-pop | Warm white with a clay-red accent. |
| Soft contrast | soft-contrast | Cool light grey with a slate-blue accent. |
The supplied palettes are designed around WCAG AA contrast targets. Recheck text, buttons, and supporting copy after customizing colors or adding imagery.
Pick a scheme
Select a supported section in the Theme Editor and use Section color scheme. Slideshow calls this Control color scheme. It recolors each slide’s primary button, the placeholder shown for a slide without an image, and the hover color and focus ring of links in slide text. The arrows, dots, play/pause button and secondary button keep fixed styling, and each slide sets its own text color and image overlay opacity.
A named scheme overrides the section’s color tokens. There are two additional controls to check: Color block panels have their own background / foreground colors, and Product scroller assigns five background / text pairs by card position. Those literal colors can override the scheme on the panels or cards.
Editing schemes
Open Theme settings → Section color schemes. Each of the four named schemes has nine editable roles, in this order:
- Background
- Text (also used on the scheme’s surfaces)
- Surface
- Accent
- Accent text (text on accent backgrounds)
- Border and divider color
- Strong border color
- Alternate surface
- Secondary text
Editing a role updates every section using that named scheme. Default is not edited here; it inherits the global palette. The theme provides these five choices, without a control for adding another named scheme.
For Accent pop, the supplied Accent value has a darker companion for accent-colored text. Once you customize Accent, that text follows your chosen color, so check its contrast too.
How Colors interact with Style
Theme settings → Colors contains eight global color values. Each value is compared with the palette of the theme style you installed or last applied. A value that still matches it shows the active Style accents → Style curated color, so after a Style accents change the color pickers can show different colors from the storefront.
A value you change replaces only that color. It keeps applying after later Style accents changes, even if it matches another style’s color, while the colors you left unchanged follow the active style. Sections using Default use the same combination. Check each changed color against the style’s colors around it — for example, a new Accent against the Accent text on buttons — especially when switching between the light styles and dark Gridline. Style accents still changes shapes and other interface details, but does not replace your fonts or section layouts.
Changing Background or Text also recalculates secondary text, muted text, and the alternate surface from the resulting pair. Confetti’s supplied Accent has a darker companion for accent-colored text; once you change Accent, that text follows your color, so check its contrast.
Set a value back to its original color to return it to the active style. Applying a Shopify Theme style replaces all eight values, the fonts, and other presentation settings with that style’s own, and makes its palette the new comparison point. It is different from the Style accents control. See Getting started.
Sections with color schemes
Seventeen sections expose color_scheme:
image-hotspotlookbookbefore-afterb2b-quick-orderpromo-bannerpromo-tilesfaqfeatured-collectionfeatured-bloghero-magazine-coverslideshowsignature-heritage-mastheadsignature-luxe-singleproductsignature-pop-colorblocksignature-pop-hscrollersignature-tech-specstripsignature-warm-collections
Sections with Background tone
Ten sections use Background tone (tone) instead of a named scheme. Their
choices are Default, Surface alt, and Ink (inverted), relative to the
active palette:
image-with-textfeatured-productmulti-columnnewslettercollection-navigationpress-coveragepull-quotequiet-luxe-storytestimonialsvideo
No section has both tone and color_scheme.
Schemes supplied by each installation
Individual section schemas default to Default, but the installed home page can supply a named scheme. These are the non-default schemes in the five starting home layouts:
| Installed preset | Pre-applied schemes |
|---|---|
| Mercer | Editorial dark on Featured collection. |
| Tactility | Warm neutral on Warm · collections, Lookbook, Promo tiles, and Featured collection. |
| Confetti | Accent pop on Promo banner, Promo tiles, and Image hotspot. Color block and Product scroller also have their own panel/card colors. |
| Poise | Editorial dark on Lookbook and Featured collection. |
| Gridline | Soft contrast on Featured collection and Image hotspot. Specification strip, Before / after, and FAQ use Default, inheriting Gridline’s dark palette. |
Other home sections use their saved Background tone or inherit the active palette. Changing Style accents or applying a theme style does not replace these template sections or their saved scheme selections. You can change each section’s scheme in the Editor.