Linked presets let editor content follow your theme settings. Instead of saving a fixed value such as 32px, the editor saves a CSS reference such as var(--heading-size).
When the theme value changes, every linked use updates without editing the content again.
Define a theme setting
Create settings in config/settings_schema.json. Keep related settings in the groups the editor recognizes:
Connect the setting to a CSS variable
Declare a CSS custom property in layouts/theme.liquid and read the setting into it:
The CSS variable name does not need to match the setting ID. The link comes from the settings.heading_size reference.
When the editor links the preset, it saves the complete var() expression:
It never saves the bare token --heading-size as a property value.
Make presets responsive
Keep the saved content linked to one variable and change the variable in the cascade:
Content that uses var(--content-gap) now adapts without separate mobile and desktop content.
Control typography
Each typography preset can resolve size, family, and weight independently.
For new size settings, use role: "heading" or role: "body". Existing setting IDs that begin with font_size_h continue to behave as headings when no role is present.
Use explicit references when a size preset should follow separate font settings:
The editor resolves each dimension in this order:
- Family: explicit reference, literal value, then the font for the setting’s role.
- Weight: explicit reference, literal value, then the default for the role.
- Size: the setting value and its
unit, defaulting to px.
An explicit reference links to that setting’s CSS variable when one is declared. A literal stays a literal.
Understand value precedence
The editor chooses the first available value:
- An unsaved value in the theme panel
- The saved theme value
- The setting’s schema default
- The editor fallback
This lets the preset menu follow live theme edits before you save.
Link radius and padding
Put radius and spacing settings in the corner_radius and padding groups. Declare a CSS variable for each setting:
When linked, radius and padding controls store var(--card-radius) and var(--section-gap). A linked all-sides control applies the selected preset to every side or corner.
Unlink a preset
Use Unlink Variables in the editor when one content item needs a fixed value. The editor resolves the current CSS values and exposes the individual controls.
Use Link Variables to return to the theme-driven preset workflow.
Prefer linked values for your design system. Unlink only intentional exceptions, because fixed values no longer follow later theme changes.
