Themes / New for developers

Color palettes in Themes
A new setting that lets you manage your theme's colors all at once in a single grid

New color_palette setting type introduced. Merchants can edit the color grid directly, and changes apply across the entire theme. Individual color / color_background settings can reference palette colors as their default, and can still be overridden at the section or block level.

On this page
  1. What exactly was added (understand it in 30 seconds)
  2. How it works: palettes, references, and overrides
  3. Relationship with color schemes (existing)
  4. color schemes vs color palettes comparison
  5. Scope, prerequisites, and what's not covered
  6. Try it out (3 steps)
  7. 5 points developers should know
  8. 3 use cases you can apply to your work
  9. A one-line summary you can use in proposals

1What exactly was added

A new new color_palette setting type was added to themes.
Merchants can edit the color grid (palette) directly in one place and those changes apply across the entire theme.

Palette: edit the color grid directly

Merchants can edit colors as a single grid. A change in one place propagates across the entire theme.

Reference & override

Individual color / color_background settings can reference palette colors as their default. Merchants can override any color at the section or block level for local control.

2How it works: palettes, references, and overrides

color_palette Edit a single grid Reference via default color setting Palette value as default color_background setting Palette value as default Override when needed Section / block Keeps the palette default Override only here Local control Everything else follows palette changes
The key point is the two-layer structure of "centralized control (the palette) + exceptions (individual overrides)". Normally, editing the palette in one place keeps colors consistent across the whole theme, while you can override only the specific spots you really need to change at the section/block level.

3Relationship with color schemes (existing)

Backward compatible

color schemes continue to work

Existing themes require no changes. You can keep using your existing color schemes as-is.

Optional

Not required even for new themes

color palettes are not made mandatory for new themes or for Theme Store submissions.

Recommended

Recommended for new builds

To deliver a better editing experience, future development will focus on palettes. Palettes are recommended when building new themes.

As an example implementation the latest version of Horizon (4.0.0) is featured. Horizon 4.0.0 adopts the new palette system throughout, so you can see it working in practice.

4color schemes vs color palettes comparison

Itemcolor schemes (existing)color palettes (new)
Editing experience Manage colors per scheme A single gridedited directly and applied across the whole theme
Integration with individual settings — (not mentioned in the article) color / color_background reference palette valuesas the default
Local override — (not mentioned in the article) Any color can be overridden at the section/block level
Impact on existing themes Works as-is No migration needed (existing themes require no changes)
New themes / Theme Store submission Usable as before Not required(but recommended for new themes)
Future development direction — Area of focus(centered on palettes)

5Sorting out scope, prerequisites, and what's unstated

What the article explicitly states

New setting type color_palette added / grid editing of palettes and site-wide application / default references from color and color_background / overrides at the section and block level / existing color schemes continue to work / recommended for new themes / adopted by Horizon 4.0.0.

Not stated (don't infer)

The maximum number of colors a palette can hold and naming conventions, the concrete syntax in Liquid / settings_schema.json, version requirements for supported Online Store / theme architectures, an automatic migration path from color schemes, and the availability by region or any staged rollout are not covered in this article Not stated. Check the developer documentation for details.

Before diving into implementation, always color_palette check the setting syntax and constraints in the developer documentation. This article is an overview announcement; the API-level specification is left to a separate page.

6Give it a try (3 steps)

1

Check out Horizon 4.0.0

The latest Horizon fully adopts the palette system, so you can see the actual editing experience.

2

Define a color_palette

Add the new setting type to your theme and configure color / color_background to reference the palette values by default.

3

Edit → confirm site-wide application

Edit the palette in one place and confirm it applies site-wide. Override only the sections / blocks that need it.

* The fine details of the steps (the admin UI flow and syntax) are not described in the article. Refer to the developer documentation and the Horizon 4.0.0 implementation.

75 points engineers should know

1. The new setting type color_palette is the core

Rather than a one-off color setting, this is a setting type that handles a "grid of colors = a palette." It's close to the idea of centralizing design tokens.

2. The way coupling works: default references

color / color_background reference palette values as their "default." Change the palette and the referencing side follows, while individual values can be kept independently.

3. Overrides are at section/block granularity

Local control is at the section or block level. You can pinpoint exceptional color schemes while keeping everything else following the global palette.

4. Non-destructive, no migration needed

color schemes continue to work and existing themes need no changes. Adoption is opt-in, so you can adopt it gradually without breaking existing assets.

Recommended

5. Designing new themes around palettes is the future-safe choice

It's not required, but Shopify has stated that it will focus future development on palettes. Designing new themes starting from color_palette makes it easier to benefit from future feature additions and editing-experience improvements. As a reference implementation, Horizon 4.0.0 has already adopted it fully.

83 use cases you can apply to your work

USE CASE 1

Reflect a brand color change across every page with a "single swap"

Challenge
When changing brand colors for a rebrand or campaign, fixing each section's color setting one by one leads to omissions and inconsistencies.
Solution
Define the brand's base colors in color_palette and unify every color / color_background to reference the palette. Make changes only on the palette side.
Impact
Edits are consolidated into a single place and apply across all pages at once. Reduces color inconsistencies and review effort.
Technical notes
Sections that were overridden individually won't follow along, so take inventory of these exceptions in advance.
USE CASE 2

Standardizing agency theme development around "color token design"

Challenge
Every time you build themes for multiple clients, color management conventions vary, driving up handoff and maintenance costs.
Approach
Make it the in-house standard to design new themes starting from color_palette. Use Horizon 4.0.0's setup as the reference implementation.
Impact
Color management is unified across delivered themes, and merchants' own editing experience improves too. Maintenance and handoff become easier.
Technical notes
To keep color schemes intact, the safe approach is to gradually shift to palettes starting with new projects rather than rushing to migrate existing ones.
USE CASE 3

Merchants switching seasonal color schemes on their own

Challenge
They want to change color schemes for each sale or season, but having to request it from the vendor every time is a bottleneck for speed and cost.
Approach
Build on the premise that the palette can be edited as a single grid, and hand over an operations guide so merchants can swap colors themselves.
Impact
Reduces outsourcing for each campaign and shortens the lead time for color changes. Critical areas can be protected with overrides.
Technical notes
By explicitly overriding the spots you don't want touched at the section/block level, you can isolate them from the impact of palette changes.

9A one-line summary you can use in proposals

"A new setting that lets you centrally manage your theme's colors in a single palette and apply changes across the entire theme at once color_palette.
Existing color schemes continue to work with no migration required—not mandatory, but recommended for new themes.
Individual settings reference the palette, and can also be overridden at the section/block level."