Dawn Theme Section Tutorial

Why Dawn is the reference theme for section development

Dawn is Shopify's free reference Online Store 2.0 theme. It demonstrates JSON templates, section groups, app blocks, and minimal CSS architecture. Most developers learn sections on Dawn before adapting to Prestige, Broadcast, or custom client themes. If your section works on Dawn, it usually ports cleanly to other OS 2.0 themes.

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. Paste into HTML to Liquid Converter 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.