Ship production Shopify sections on Dawn

C1 — Scope CSS to the section instance

{%- style -%}
  #shopify-section-{{ section.id }} .campaign-hero {
    padding-block: {{ section.settings.padding }}px;
  }
{%- endstyle -%}

<section
  id="CampaignHero-{{ section.id }}"
  class="campaign-hero color-{{ section.settings.color_scheme }}"
>
  {% comment %} hero markup {% endcomment %}
</section>

Instance scoping prevents your padding or typography from leaking into Dawn’s native image-banner and multicolumn sections on the same template.

C2 — Minimal schema with color_scheme + preset

{
  "name": "Campaign hero",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Seasonal campaign"
    },
    {
      "type": "range",
      "id": "padding",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding",
      "default": 36
    }
  ],
  "presets": [{ "name": "Campaign hero" }]
}

A non-empty presets array is what makes the section appear under Add section in Dawn’s editor. Missing presets is the #1 “we deployed but merchants can’t find it” failure.

C4 — Flat settings → Liquid outputs

<div class="campaign-hero__inner page-width">
  {% if section.settings.heading != blank %}
    <h2 class="campaign-hero__heading">{{ section.settings.heading }}</h2>
  {% endif %}
  {% if section.settings.subheading != blank %}
    <p class="campaign-hero__subheading">{{ section.settings.subheading }}</p>
  {% endif %}
  {% if section.settings.cta_label != blank %}
    <a class="button" href="{{ section.settings.cta_link }}">
      {{ section.settings.cta_label }}
    </a>
  {% endif %}
</div>

Blank-safe output prevents empty headings from reserving space in the editor preview—merchants notice phantom gaps immediately.

C5 — Blocks loop + shopify_attributes

<div class="campaign-faq">
  {% for block in section.blocks %}
    <div class="campaign-faq__item" {{ block.shopify_attributes }}>
      <h3 class="campaign-faq__question">{{ block.settings.question }}</h3>
      <div class="campaign-faq__answer rte">{{ block.settings.answer }}</div>
    </div>
  {% endfor %}
</div>

block.shopify_attributes is what lets Dawn’s editor highlight and select the correct row. Omitting it makes block editing feel “broken” even when Liquid renders.

Blocks schema sketch (FAQ row)

"blocks": [
  {
    "type": "row",
    "name": "FAQ row",
    "settings": [
      { "type": "text", "id": "question", "label": "Question" },
      { "type": "richtext", "id": "answer", "label": "Answer" }
    ]
  }
],
"presets": [
  {
    "name": "Campaign FAQ",
    "blocks": [
      { "type": "row" },
      { "type": "row" }
    ]
  }
]

Seeding two rows in the preset teaches merchants that repetition is expected—empty block lists look like a broken section.

C3 — templates/index.json instance sketch

{
  "sections": {
    "campaign_hero": {
      "type": "campaign-hero",
      "settings": {
        "color_scheme": "scheme-1",
        "heading": "Summer dispatch"
      }
    }
  },
  "order": [
    "campaign_hero"
  ]
}

If type is wrong, Dawn skips the instance. If the key is missing from order, the section exists in JSON but never paints.

C6 — When not to use header-group

Use header-group.json only for chrome that must load on every template
and must tolerate null product/collection context.

Do NOT place:
  - Seasonal homepage heroes
  - PDP-only upsells
  - Page-specific FAQs

Those belong on templates/index.json, product.json, or a custom page JSON.

This decision note prevents the most expensive Dawn placement bug we see in production audits.