Global Design Tokens
config/settings_schema.json defines theme-wide settings: brand colors, typography, button styles, social links. Merchants edit these in the theme editor sidebar under 'Theme settings'. Values persist in settings_data.json.
JSON
[
{
"name": "theme_info",
"theme_name": "Sturdee Theme",
"theme_version": "1.0.0",
"theme_author": "Sturdee",
"theme_documentation_url": "https://sturdee.online/docs",
"theme_support_url": "https://sturdee.online/support"
},
{
"name": "Colors",
"settings": [
{
"type": "color",
"id": "color_primary",
"label": "Primary brand color",
"default": "#10B981"
},
{
"type": "color",
"id": "color_background",
"label": "Page background",
"default": "#e8ebf0"
}
]
},
{
"name": "Typography",
"settings": [
{
"type": "font_picker",
"id": "font_heading",
"label": "Heading font",
"default": "helvetica_n4"
},
{
"type": "range",
"id": "heading_scale",
"min": 80, "max": 150, "step": 5,
"unit": "%", "label": "Heading scale", "default": 100
}
]
}
]CSS variables from settings
{% style %}
:root {
--color-primary: {{ settings.color_primary }};
--color-background: {{ settings.color_background }};
--font-heading-family: {{ settings.font_heading.family }};
--font-heading-weight: {{ settings.font_heading.weight }};
}
{% endstyle %}
{{ settings.font_heading | font_face: font_display: 'swap' }}Expose settings as CSS custom properties in theme.liquid so sections inherit brand tokens without duplicating color pickers in every section schema.