Dynamic Shopify Section Settings Explained

From schema id to layout behavior

Every setting id in {% schema %} becomes section.settings.id or block.settings.id at render time. Defaults in schema seed the theme editor; conditionals in Liquid turn those values into visible layout changes.

section.settings vs block.settings

• section.settings — shared heading, background, layout toggle
• block.settings — per-row content inside {% for block in section.blocks %}

Defaults and blank guards

{% assign heading = section.settings.heading | default: 'Featured products' %}
<h2>{{ heading | escape }}</h2>

Schema default values populate new section instances; Liquid default filter handles missing values in templates.

Checkbox conditionals

{% if section.settings.show_vendor and product.vendor != blank %}
  <p class="vendor">{{ product.vendor | escape }}</p>
{% endif %}

Select and case mapping

{% case section.settings.layout %}
  {% when 'grid' %}
    <div class="product-grid">
  {% when 'carousel' %}
    <div class="product-carousel" data-layout="carousel">
  {% else %}
    <div class="product-grid">
{% endcase %}

Option values in schema must match {% when %} strings exactly—typos fail silently with fallback markup.

Range settings to CSS

<div style="--pad-top: {{ section.settings.padding_top }}px; padding-top: var(--pad-top);">

Set min, max, and step in schema to values your CSS actually supports.

Schema-to-Liquid checklist

1. Setting type matches content (url for links, richtext for formatted copy)
2. Every id referenced in Liquid exists in schema
3. Checkbox tests use truthy checks—not string 'true'
4. Richtext output wrapped in .rte

Takeaway

Dynamic settings connect merchant controls to real layout—not just swapped text. Schema fundamentals: Section Schema Explained. Product data: Metafields Tutorial.

Settings should change layout, not just text

Checkbox toggles for optional CTAs, select fields for layout variants, and range sliders for spacing let merchants adapt sections without developer deploys. If a setting only changes copy, it is probably correct—but if layout never changes, you may have over-flat schema.

color_scheme on Dawn forks

{% if section.settings.color_scheme != blank %}
  <div class="color-{{ section.settings.color_scheme }} gradient">
{% endif %}

Prefer theme color schemes over per-section hex pickers when the parent theme supports them—merchants keep brand consistency in admin.

Conditional visibility

When schema supports visible_if, hide advanced toggles until merchants enable a feature—reduces sidebar overwhelm. Group related fields under header settings labeled Advanced layout.

Mistakes

• Twelve top-level settings without grouping—merchants get lost
• Range settings without min/max aligned to CSS limits
• Select options developers understand but merchants do not ("variant_a")