{"slug": "shopify-theme-editor-design-tokens-merchants-can-edit", "title": "Shopify theme editor: design tokens merchants can edit", "summary": "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.", "body_md": "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?\nShopify themes have a specific file that controls which settings merchants see in the theme editor: config/settings_schema.json.\nThis schema defines:\nA well-designed settings schema gives merchants meaningful control without overwhelming them with technical knobs.\nconfig/settings_schema.json defines what the merchant sees:\nconfig/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.\nLiquid templates consume the settings via settings.color_button_primary, settings.font_heading, etc.\nThe 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.\nThis is distinct from:\nShopify's settings schema supports many types. For design tokens, the useful ones:\nFor the scenario at the top - button colors, fonts, border thickness, opacity - the right setting types are color, font_picker, and range respectively.\nIn Liquid, settings are accessed via the global settings variable:\nFor bulk CSS styling, many themes compile settings into CSS custom properties in the layout:\nThen component CSS uses the custom properties:\nThis separation means design-system changes in the theme editor propagate everywhere in one place.\nModern 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.\nColor schemes live in the schema too but have their own structure:\nThis 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.\nFor 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:\nThis 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.\nA well-organized settings schema:\nA schema with 100 ungrouped settings is unusable even by technical merchants. A schema with 15 well-organized settings lets non-technical merchants confidently experiment.\nNot every theme value belongs in the settings schema. Good candidates:\nBad candidates:\nThe boundary: if a wrong value breaks the theme meaningfully, it doesn't belong in merchant-editable settings.\nA theme that supports non-technical merchant self-service has:\nMerchants 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.", "url": "https://wpnews.pro/news/shopify-theme-editor-design-tokens-merchants-can-edit", "canonical_source": "https://dev.to/sapotacorp/shopify-theme-editor-design-tokens-merchants-can-edit-377i", "published_at": "2026-05-24 05:20:05+00:00", "updated_at": "2026-05-24 06:03:20.804082+00:00", "lang": "en", "topics": ["developer-tools", "products", "enterprise-software"], "entities": ["Shopify", "Liquid"], "alternates": {"html": "https://wpnews.pro/news/shopify-theme-editor-design-tokens-merchants-can-edit", "markdown": "https://wpnews.pro/news/shopify-theme-editor-design-tokens-merchants-can-edit.md", "text": "https://wpnews.pro/news/shopify-theme-editor-design-tokens-merchants-can-edit.txt", "jsonld": "https://wpnews.pro/news/shopify-theme-editor-design-tokens-merchants-can-edit.jsonld"}}