Color schemes
Color schemes are per-section palette overrides. They are independent
of Theme settings → Colors, which still drive the global :root
tokens for the whole store.
Use a color scheme when one section needs a distinct editorial beat without changing the rest of the page.
The five schemes
| Scheme | Use |
|---|---|
default | Empty rule that inherits :root, so the section tracks the merchant’s customized global colors. Use this when the section should match the rest of the store. |
editorial-dark | Warm-charcoal page with champagne accent. |
warm-neutral | Sand / cream paper with terracotta-brown accent. |
accent-pop | Soft warm-white with vivid clay-red accent. |
soft-contrast | Cool light-grey with deep slate-blue accent. |
The bundled schemes are designed around WCAG 2.1 AA-oriented contrast targets.
Specific ratios live in the source comment block in assets/tokens.css.liquid.
Sections with color_scheme
Seventeen sections expose the color_scheme setting:
image-hotspotlookbookbefore-afterb2b-quick-orderpromo-bannerpromo-tilesfaqfeatured-collectionfeatured-bloghero-magazine-coverslideshowsignature-heritage-mastheadsignature-luxe-singleproductsignature-pop-colorblocksignature-pop-hscrollersignature-tech-specstripsignature-warm-collections
Sections that keep tone
Ten sections deliberately do not expose color_scheme because they
already carry a tone setting:
image-with-textfeatured-productmulti-columnnewslettercollection-navigationpress-coveragepull-quotequiet-luxe-storytestimonialsvideo
Use tone on those sections. Mercer avoids putting tone and
color_scheme on the same section so merchants do not have two
overlapping controls for the same palette layer.
Pick a scheme
Open the Theme Editor, click a section that supports schemes, then use the Color scheme dropdown.
default inherits the global store palette. The other four schemes
redefine the section wrapper’s color tokens, so every child element
inside that section follows the same background / foreground / accent /
border system.
Preset interaction
The four named listing presets each have a scheme that pairs naturally with their aesthetic:
| Preset | Suggested scheme |
|---|---|
bold-pop | accent-pop |
quiet-luxe | editorial-dark |
tech-forward | soft-contrast |
warm-craft | warm-neutral |
This is only a suggested aesthetic pairing, not a default the preset
installs. Presets set preset_active plus the global color and
typography tokens; they do not set any section’s color_scheme. Every
color_scheme setting defaults to default, so after applying a preset
you still choose schemes per section yourself.
Common patterns
Use a contrasting scheme between two default sections to create a
clean editorial pause.
Use editorial-dark for a feature section on an otherwise light page:
lookbook, before / after, or a focused B2B quick-order module.
Use warm-neutral or soft-contrast when a page needs contrast but
the brand should stay quiet.
Use accent-pop sparingly for campaign sections where the CTA needs
more energy than the global palette.