{"templateId":"markdown","sharedDataIds":{},"props":{"codeGuideFiles":[],"dynamicMarkdocComponents":[],"metadata":{"type":"markdown"},"seo":{"title":"Linked CSS Variable Presets","description":"Fluid is the open e-commerce platform built for direct-sales."},"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"linked-css-variable-presets"},"children":["Linked CSS Variable Presets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Several inputs in the page builder support ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["linked CSS variable presets"]}," — instead of hardcoding values like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font-size: 32px"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["border-radius: 8px"]},", the builder inserts CSS variable references. This keeps content in sync with theme settings: when a company changes their heading size, brand color, spacing, or corner radius, all linked values update automatically."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["How values are stored:"]}," When a linked preset is used in the page builder, the persisted value is the full ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var()"]}]}," form — for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["border-radius: var(--corner_radius_md)"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color: var(--color_primary)"]},". It is ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not"]}," stored as a bare custom property token like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--corner_radius_md"]}," alone (that would not be valid in a CSS property value). In ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]}," you still ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["declare"]}," properties as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--name: …"]},"; the storefront and saved builder content ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["reference"]}," them as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var(--name)"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Linked presets are available in:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rich text editor"]}," — text size, font family, and color presets"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Corner radius inputs"]}," — corner radius presets"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Padding inputs"]}," — spacing/padding presets"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"table-of-contents"},"children":["Table of Contents"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#linked-css-variable-presets"},"children":["Linked CSS Variable Presets"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#table-of-contents"},"children":["Table of Contents"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#how-it-works"},"children":["How It Works"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#setup"},"children":["Setup"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#step-1-define-settings-in-settings_schemajson"},"children":["Step 1: Define Settings in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings_schema.json"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#step-2-wire-settings-to-css-variables-in-themeliquid"},"children":["Step 2: Wire Settings to CSS Variables in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]}]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#corner-radius-presets"},"children":["Corner Radius Presets"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#padding-presets"},"children":["Padding Presets"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#how-the-mapping-works"},"children":["How the Mapping Works"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#naming-convention"},"children":["Naming Convention"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#what-gets-linked-and-what-doesnt"},"children":["What Gets Linked and What Doesn't"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#default-behavior-linked-presets"},"children":["Default Behavior (Linked Presets)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#unlinking"},"children":["Unlinking"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works"},"children":["How It Works"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a company selects a linked preset in the rich text editor, the output uses CSS variable references wrapped in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var()"]}]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<span style=\"font-size: var(--font_size_h1); font-family: var(--font_family_heading); font-weight: bold;\">\n  Welcome to our store\n</span>\n<span style=\"color: var(--color_primary);\">\n  Shop now\n</span>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the company ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["unlinks"]}," and switches to manual controls, the resolved values are applied directly instead:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<span style=\"font-size: 32px; font-family: Montserrat; font-weight: bold;\">\n  Welcome to our store\n</span>\n<span style=\"color: #2563eb;\">\n  Shop now\n</span>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For this to work, your theme needs two things: settings defined in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings_schema.json"]}," and CSS variables wired in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]},"."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"setup"},"children":["Setup"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-1-define-settings-in-settings_schema.json"},"children":["Step 1: Define Settings in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings_schema.json"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The builder looks for settings in specific groups by name. Settings in these groups become available as presets:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Group Name"},"children":["Group Name"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"What It Powers"},"children":["What It Powers"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Font size presets in the rich text editor"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color_schema"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color presets in the rich text editor"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["corner_radius"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Corner radius presets"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Padding/spacing presets"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["custom_font_sizes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional custom text size presets (optional)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["custom_colors"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional custom color presets (optional)"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Font family settings (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font_family_heading"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font_family_body"]},") can be in any group — they are resolved by setting ID, not group name."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example typography settings:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"name\": \"typography\",\n  \"settings\": [\n    {\n      \"type\": \"range\",\n      \"id\": \"font_size_h1\",\n      \"label\": \"Heading 1 Size\",\n      \"min\": 16,\n      \"max\": 80,\n      \"step\": 1,\n      \"default\": 40,\n      \"unit\": \"px\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"font_size_h2\",\n      \"label\": \"Heading 2 Size\",\n      \"min\": 16,\n      \"max\": 72,\n      \"step\": 1,\n      \"default\": 32,\n      \"unit\": \"px\"\n    },\n    {\n      \"type\": \"font_picker\",\n      \"id\": \"font_family_heading\",\n      \"label\": \"Heading Font\",\n      \"default\": \"Montserrat\"\n    },\n    {\n      \"type\": \"font_picker\",\n      \"id\": \"font_family_body\",\n      \"label\": \"Body Font\",\n      \"default\": \"Inter\"\n    }\n  ]\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example color settings:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"name\": \"color_schema\",\n  \"settings\": [\n    {\n      \"type\": \"color\",\n      \"id\": \"color_primary\",\n      \"label\": \"Primary Color\",\n      \"default\": \"#2563eb\"\n    },\n    {\n      \"type\": \"color\",\n      \"id\": \"color_body\",\n      \"label\": \"Body Text Color\",\n      \"default\": \"#1a1a2e\"\n    }\n  ]\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-2-wire-settings-to-css-variables-in-theme.liquid"},"children":["Step 2: Wire Settings to CSS Variables in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Inside a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{%- style -%}...{%- endstyle -%}"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<style>...</style>"]}," block in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["layouts/theme.liquid"]},", define CSS custom properties that reference your settings:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"{'%' style '%'}\n  :root {\n    /* Typography */\n    --font_size_h1: {{ settings.font_size_h1 | append: 'px' }};\n    --font_size_h2: {{ settings.font_size_h2 | append: 'px' }};\n    --font_size_h3: {{ settings.font_size_h3 | append: 'px' }};\n    --font_family_heading: {{ settings.font_family_heading | font_family }};\n    --font_family_body: {{ settings.font_family_body | font_family }};\n\n    /* Colors */\n    --color_primary: {{ settings.color_primary }};\n    --color_body: {{ settings.color_body }};\n    --color_heading: {{ settings.color_heading }};\n\n    /* Corner Radius */\n    --corner_radius_sm: {{ settings.corner_radius_sm | append: 'px' }};\n    --corner_radius_md: {{ settings.corner_radius_md | append: 'px' }};\n    --corner_radius_lg: {{ settings.corner_radius_lg | append: 'px' }};\n\n    /* Padding / Spacing */\n    --spacing_sm: {{ settings.spacing_sm | append: 'px' }};\n    --spacing_md: {{ settings.spacing_md | append: 'px' }};\n    --spacing_lg: {{ settings.spacing_lg | append: 'px' }};\n  }\n{'%' endstyle '%'}\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If a setting in a recognized group has a matching CSS variable in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]},", the preset becomes ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["linkable"]}," in the builder."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"corner-radius-presets"},"children":["Corner Radius Presets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Corner radius inputs support linked CSS variable presets. Define corner radius settings in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["corner_radius"]}," group and map them to CSS variables in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings_schema.json"]},":"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"name\": \"corner_radius\",\n  \"settings\": [\n    {\n      \"type\": \"range\",\n      \"id\": \"corner_radius_sm\",\n      \"label\": \"Small\",\n      \"min\": 0,\n      \"max\": 24,\n      \"step\": 1,\n      \"default\": 4,\n      \"unit\": \"px\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"corner_radius_md\",\n      \"label\": \"Medium\",\n      \"min\": 0,\n      \"max\": 32,\n      \"step\": 1,\n      \"default\": 8,\n      \"unit\": \"px\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"corner_radius_lg\",\n      \"label\": \"Large\",\n      \"min\": 0,\n      \"max\": 48,\n      \"step\": 1,\n      \"default\": 16,\n      \"unit\": \"px\"\n    }\n  ]\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a preset is selected, the saved value is the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var()"]}]}," reference (e.g. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var(--corner_radius_md)"]},"), not the bare name ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--corner_radius_md"]},". The input shows the preset label in read-only mode. When corners are linked, the preset applies to all four corners."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"padding-presets"},"children":["Padding Presets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Padding inputs support the same linked preset pattern using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]}," group name."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings_schema.json"]},":"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"name\": \"padding\",\n  \"settings\": [\n    {\n      \"type\": \"range\",\n      \"id\": \"spacing_sm\",\n      \"label\": \"Small\",\n      \"min\": 0,\n      \"max\": 48,\n      \"step\": 1,\n      \"default\": 8,\n      \"unit\": \"px\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"spacing_md\",\n      \"label\": \"Medium\",\n      \"min\": 0,\n      \"max\": 64,\n      \"step\": 1,\n      \"default\": 16,\n      \"unit\": \"px\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"spacing_lg\",\n      \"label\": \"Large\",\n      \"min\": 0,\n      \"max\": 96,\n      \"step\": 1,\n      \"default\": 32,\n      \"unit\": \"px\"\n    }\n  ]\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a preset is selected, the saved value uses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var(--token)"]}]}," on the selected side(s) (for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding-top: var(--spacing_md)"]},"), not bare ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--spacing_md"]},". When sides are linked, the preset applies to all four sides."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-the-mapping-works"},"children":["How the Mapping Works"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The admin parses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]}," and matches this pattern:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"--{css_var_name}: {{ settings.{setting_id} ...\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It builds a map of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setting_id"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["css_var_name"]}," (the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--…"]}," name from the left-hand side of the declaration). When the builder saves a linked preset, it writes that token inside ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var()"]}]}," in the stored style (e.g. mapping ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color_primary"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--color_primary"]}," results in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color: var(--color_primary)"]}," in saved content)."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Line in theme.liquid"},"children":["Line in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Detected Mapping"},"children":["Detected Mapping"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--font_size_h1: {{ settings.font_size_h1 | append: 'px' }};"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font_size_h1"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--font_size_h1"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--color_primary: {{ settings.color_primary }};"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color_primary"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--color_primary"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--font_family_heading: {{ settings.font_family_heading | font_family }};"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font_family_heading"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--font_family_heading"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"naming-convention"},"children":["Naming Convention"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The CSS variable name does ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not"]}," need to match the setting ID. All of these work:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"--font_size_h1: {{ settings.font_size_h1 | append: 'px' }};\n--heading-size-1: {{ settings.font_size_h1 | append: 'px' }};\n--h1-size: {{ settings.font_size_h1 | append: 'px' }};\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The parser matches on the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings.{id}"]}," part, not the variable name. However, keeping names consistent (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--font_size_h1"]}," for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings.font_size_h1"]},") is recommended for clarity."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"what-gets-linked-and-what-doesnt"},"children":["What Gets Linked and What Doesn't"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Not everything becomes a linked preset:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom presets"]}," (from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["custom_font_sizes"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["custom_colors"]}," groups) — these are user-added values that don't map to CSS variables in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]},". They always apply resolved values."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings without a CSS variable in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]}]}," — if a setting exists in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["settings_schema.json"]}," but has no corresponding ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--var: {{ settings.id }}"]}," line in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.liquid"]},", it will still appear as a preset but will apply the resolved value directly."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font weight"]}," — always applied as a resolved value (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bold"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["normal"]},"), not as a CSS variable. There is no theme setting for font weight."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-behavior-linked-presets"},"children":["Default Behavior (Linked Presets)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The toolbar shows two preset pickers: ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Text Presets"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Color Presets"]},". Each preset in the dropdown corresponds to a theme setting. Selecting a preset writes inline styles using ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var(--setting_token)"]}]}," (always the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["var()"]}," wrapper), matching the rich text, corner radius, and padding behavior above."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unlinking"},"children":["Unlinking"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each preset picker has an ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["\"Unlink Variables\""]}," option in its footer. Clicking it:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Resolves any active CSS variable values back to their current concrete values"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Switches the toolbar to manual mode showing individual controls: ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font Family picker"]},", ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font Size picker"]},", and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Color picker"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The toolbar has a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["\"Link Variables\""]}," option to switch back to preset mode."]}]},"headings":[{"value":"Linked CSS Variable Presets","id":"linked-css-variable-presets","depth":1},{"value":"Table of Contents","id":"table-of-contents","depth":2},{"value":"How It Works","id":"how-it-works","depth":2},{"value":"Setup","id":"setup","depth":2},{"value":"Step 1: Define Settings in settings_schema.json","id":"step-1-define-settings-in-settings_schema.json","depth":3},{"value":"Step 2: Wire Settings to CSS Variables in theme.liquid","id":"step-2-wire-settings-to-css-variables-in-theme.liquid","depth":3},{"value":"Corner Radius Presets","id":"corner-radius-presets","depth":2},{"value":"Padding Presets","id":"padding-presets","depth":2},{"value":"How the Mapping Works","id":"how-the-mapping-works","depth":2},{"value":"Naming Convention","id":"naming-convention","depth":2},{"value":"What Gets Linked and What Doesn't","id":"what-gets-linked-and-what-doesnt","depth":2},{"value":"Default Behavior (Linked Presets)","id":"default-behavior-linked-presets","depth":3},{"value":"Unlinking","id":"unlinking","depth":3}],"frontmatter":{"seo":{"title":"Linked CSS Variable Presets"}},"lastModified":"2026-04-02T16:19:48.000Z"},"slug":"/docs/themes/linked-css-variable-presets","userData":{"isAuthenticated":false,"teams":["anonymous"]}}