Dawn Theme
HTML to Dawn theme sections that ship clean
Convert static HTML into Dawn-compatible Shopify sections with schema, blocks, and scoped CSS—built for Shopify's reference Online Store 2.0 architecture.
Theme overview
Building custom sections for the Dawn theme
What Dawn is and why developers start here
Dawn is Shopify's free reference theme and the baseline most agencies learn Online Store 2.0 on. It uses JSON templates, section groups in the header and footer, app block support, and a deliberately minimal CSS architecture. When a client says they run Dawn—or a Dawn fork—you are working inside the most documented theme patterns Shopify publishes.
That makes Dawn the natural proving ground for custom sections. If your HTML converts cleanly into a Dawn-compatible section file, it usually ports to other OS 2.0 themes with minor token adjustments.
Why Dawn theme sections get customized constantly
Out of the box, Dawn covers essentials: image banner, featured collection, rich text, multicolumn, and collapsible content. Real storefronts quickly outgrow those defaults. Brands want campaign heroes, comparison tables, ingredient stories, UGC grids, and landing-page slices that Dawn does not ship natively.
The practical workflow is HTML first—designers deliver a slice, developers convert it into a section.liquid file, drop it into the theme's sections folder, and register it on the relevant JSON template. Dawn's predictable structure makes that loop fast when your output respects section.id scoping and valid schema conventions.
Dawn-specific patterns your sections should respect
Dawn favors utility-style spacing, CSS custom properties for colors and typography, and section wrappers that avoid nesting extra divs around the outer section element. Generated sections should expose settings merchants expect: heading, subheading, image_picker, button_label, button_link, color_scheme, and padding range controls where appropriate.
For repeatables—FAQ rows, icon features, logo strips—use blocks with clear type names and limit settings per block so the theme editor stays usable. Dawn merchants are used to dragging blocks in collapsible-content and multicolumn sections; mirror that mental model in your schema labels and presets.
Compatibility with converter output
HTMLToLiquid Converter outputs Online Store 2.0 sections with "{% schema %}", presets, scoped CSS, and optional block loops—the same primitives Dawn is built on. Paste your HTML, run Flat mode for fixed heroes or Block mode for repeatable rows, then add the file to Dawn's sections directory and enable it on index.json, product.json, or a custom landing template.
Because Dawn is the reference implementation, dawn theme sections you generate here are an excellent baseline before adapting the same section to Prestige, Broadcast, or Impulse on multi-theme client work.
Sections
Common Dawn theme section conversions
These layouts appear constantly in Dawn customization projects. Each maps to schema settings, blocks, and merchant-editable controls.
Hero section
Full-width heroes with heading, subheading, CTA, and background media—exposed as text, richtext, url, and image_picker schema settings.
Learn more →Announcement bar
Top-bar promos with link and dismiss behavior—typically flat settings with color and typography controls merchants can toggle.
Learn more →Featured collection
Product grids tied to collection objects—schema for collection picker, product limit, and card layout options.
Learn more →Image slider
Slide carousels exported as blocks so Dawn merchants can add, remove, and reorder slides in the editor.
Learn more →FAQ accordion
Collapsible Q&A rows as blocks—mirrors Dawn's collapsible-content pattern with per-block question and answer settings.
Learn more →Multicolumn features
Icon or image columns with block-based rows—heading, body, and media settings per block for flexible layouts.
Promo banner
Split or full-width campaign strips with schema-driven copy, links, and optional background image customization.
Learn more →Product highlights
Featured product rows with metafield-friendly markup—settings for product picker, badge text, and layout density.
Learn more →Workflow
How HTML conversion works for Dawn
From static markup to a section file you can drop into Dawn's sections folder—production-ready output with scoped CSS and valid schema.
- 01
Paste HTML
Bring in the hero, grid, or FAQ markup you want live on a Dawn storefront.
- 02
Analyze structure
Map headings, media, and repeatables to settings and block candidates.
- 03
Generate Liquid
Compile Dawn-friendly Liquid with section.id-scoped CSS and typed schema fields.
- 04
Create schema
Output "{% schema %}" JSON with presets merchants can insert from the editor.
- 05
Export to theme
Save section.liquid, add to Dawn, and assign it on the target JSON template.
Compatibility
Dawn theme compatibility at a glance
Generated sections align with Dawn's Online Store 2.0 architecture—sections, blocks, presets, and JSON templates.
OS 2.0 sections
Full section.liquid files with valid schema—drop into Dawn's sections directory and enable on any JSON template.
Dynamic blocks
Repeatable rows map to section.blocks loops—same drag-and-drop model Dawn uses in multicolumn and FAQ sections.
Editor presets
Non-empty presets surface your section in Dawn's Add section panel with a clear, merchant-friendly name.
Scoped CSS
Styles scoped with section.id avoid leaking into Dawn's global utility classes or base typography.
App block coexistence
Custom sections sit alongside Dawn's app block slots without conflicting markup or duplicate wrappers.
JSON templates
Register converted sections on index.json, product.json, collection.json, or custom landing templates.
Explore
Related tools and theme guides
Tool
HTML to Liquid Converter
Paste HTML and export sections ready for the Dawn theme.
Open →Generator
Shopify Section Generator
Generate complete OS 2.0 sections with schema, blocks, and presets.
Open →Schema
Liquid Schema Generator
Design section schema JSON that pairs with your converted Liquid.
Open →Tool
Shopify Liquid Converter
Convert HTML markup into clean Shopify Liquid templates.
Open →Blog
Theme development guides
Read tutorials on sections, schema, and Online Store 2.0 workflows.
Open →Theme
HTML to Prestige Theme
Port the same section patterns to Prestige's editorial layouts.
Open →Theme
HTML to Broadcast Theme
Adapt sections for Broadcast's storytelling storefronts.
Open →Theme
HTML to Impulse Theme
Ship conversion-focused sections on Impulse themes.
Open →Component
Convert banner HTML to Liquid
Turn announcement bars and promo strips into editable sections.
Open →Component
Convert slider HTML to Liquid
Map carousel markup to block-based slider sections.
Open →Component
Convert FAQ HTML to Liquid
Export accordion FAQs as repeatable Shopify blocks.
Open →Start converting HTML
Paste your markup and export production-ready Shopify Liquid sections with schema and blocks.
Trust
Built for serious Shopify development
Production-ready sections, validated schema, and workflows theme engineers trust on client projects.
Production-ready output
Export complete section.liquid files with schema, presets, and scoped CSS ready for theme repos.
Built for Shopify developers
Designed for freelancers, agencies, and in-house teams shipping OS 2.0 sections weekly.
OS 2.0 compatible
Output follows Online Store 2.0 conventions—JSON templates, blocks, and valid schema JSON.
Schema validation
Automated checks catch missing presets, invalid setting ids, and common Liquid issues early.
AI-assisted workflow
Optional AI structure detection with deterministic fallback for reliable section generation.
Theme compatibility
Sections align with Dawn, Prestige, Broadcast, Impulse, and custom JSON-template themes.
Generate Shopify sections
Free AI-powered converter — OS 2.0 compatible output with schema validation.