Dawn Theme Section Tutorial

Why Dawn is the reference theme for section development

Dawn demonstrates JSON templates, section groups, app block slots, and scoped CSS patterns Shopify documents publicly. Custom sections that work on Dawn usually port to Prestige and client forks—learn here first, then adapt typography tokens per parent theme.

Dawn section file anatomy

Dawn sections live in sections/*.liquid. Each file combines markup, {% stylesheet %} or inline style tags, Liquid using section.settings, and {% schema %} JSON. Dawn favors utility-style spacing and CSS custom properties—match that rhythm when adding custom sections.

Step 1: Build or convert your section

Start from HTML—Figma export, Tailwind snippet, or component library. Read HTML to Liquid Converter, then paste into the converter workspace and export a section file. Review schema settings, block structure, and scoped CSS. See HTML to Dawn Theme for Dawn-specific notes.

Step 2: Add section.liquid to Dawn

Copy your section file into the theme's sections/ directory. Filename becomes the section type—sections/custom-hero.liquid has type custom-hero. Commit via Git or upload in the code editor.

Step 3: Register on a JSON template

{
  "sections": {
    "custom_hero": {
      "type": "custom-hero",
      "settings": { "heading": "Welcome" }
    }
  },
  "order": ["custom_hero"]
}

Add entries to templates/index.json for homepage, or product.json, collection.json as needed. The type string must match the filename without .liquid.

Step 4: Match Dawn typography and spacing

Dawn uses theme font settings and spacing scale. Avoid hardcoding font-family in custom sections; prefer color_scheme settings or Dawn's existing utility classes where possible. Scope custom CSS with #shopify-section-{{ section.id }}.

Common Dawn section types to study

• image-banner — hero patterns and media settings
• featured-collection — collection picker and product loops
• collapsible-content — FAQ block architecture
• multicolumn — block-based column rows

Testing in the theme editor

Preview on mobile and desktop. Confirm presets appear in Add section. Verify blocks reorder correctly and shopify_attributes highlight in the editor. Read Section Tutorial for general OS 2.0 workflow.

Next steps

Convert component HTML with hero and FAQ guides. Browse Liquid Examples for copy-ready patterns.

Dawn-specific integration pitfalls

Custom sections that hardcode font-family fight Dawn's typography settings. Use color_scheme where possible. Test beside Dawn's image-banner and featured-collection sections—z-index and spacing conflicts show up on collection templates first.

Studying Dawn source before custom builds

• sections/image-banner.liquid — media settings patterns
• sections/collapsible-content.liquid — FAQ blocks
• sections/multicolumn.liquid — block grid architecture

Deploy checklist on Dawn

1. Section file in sections/
2. Type matches filename
3. Entry in target JSON template order
4. Preset appears in Add section
5. Mobile + desktop editor QA