Shopify theme editor: design tokens merchants can edit

The article explains that Shopify themes use a `config/settings_schema.json` file to control which design elements, such as button colors, fonts, and border thickness, merchants can edit in the theme editor without needing to code. These settings are accessed in Liquid templates via a global variable and are often compiled into CSS custom properties for consistent styling across the theme. The key is to expose meaningful, non-technical controls that allow merchants to experiment safely without breaking the theme.

A merchant wants to experiment with design elements in the theme editor - button colors, font choices, border thickness, opacity. They're not comfortable editing Liquid code; they want to click, preview, save. The question for the developer: how do you expose the right knobs to the theme editor without giving merchants a way to break the theme? Shopify themes have a specific file that controls which settings merchants see in the theme editor: config/settings schema.json. This schema defines: A well-designed settings schema gives merchants meaningful control without overwhelming them with technical knobs. config/settings schema.json defines what the merchant sees: config/settings data.json holds the merchant's saved values. This file isn't edited by developers directly - it's updated every time the merchant saves settings in the theme editor. Liquid templates consume the settings via settings.color button primary, settings.font heading, etc. The file that controls merchant-editable design is config/settings schema.json. Adding a new setting there makes it appear in the theme editor's global settings. Merchants click, preview, save; the change propagates across every section that references the setting. This is distinct from: Shopify's settings schema supports many types. For design tokens, the useful ones: For the scenario at the top - button colors, fonts, border thickness, opacity - the right setting types are color, font picker, and range respectively. In Liquid, settings are accessed via the global settings variable: For bulk CSS styling, many themes compile settings into CSS custom properties in the layout: Then component CSS uses the custom properties: This separation means design-system changes in the theme editor propagate everywhere in one place. Modern Shopify themes support color schemes - named combinations of background, text, button, and accent colors that apply to sections. A merchant can define "Light scheme" and "Dark scheme" and apply either to any section. Color schemes live in the schema too but have their own structure: This is the pattern Dawn and modern OS 2.0 themes use. Merchants pick a scheme per section; the theme renders with the scheme's colors consistently. For fonts, the font picker setting type returns a font object with a family name and loading URL. Themes use the font url filter to load the right stylesheet: This emits the proper @font-face declaration for the chosen font. Merchants can pick any of Shopify's library fonts Google Fonts + system and the theme adapts automatically. A well-organized settings schema: A schema with 100 ungrouped settings is unusable even by technical merchants. A schema with 15 well-organized settings lets non-technical merchants confidently experiment. Not every theme value belongs in the settings schema. Good candidates: Bad candidates: The boundary: if a wrong value breaks the theme meaningfully, it doesn't belong in merchant-editable settings. A theme that supports non-technical merchant self-service has: Merchants who can self-serve design tokens stay happier with their theme. The developer's work is making the right set of knobs available without offering footguns.