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
Dawn as the reference architecture
Dawn uses JSON templates, section groups for header/footer, color_scheme settings, and utility-first CSS variables. When converting real sections for Dawn, match its patterns: minimal wrapper nesting, color-{{ section.settings.color_scheme }} where applicable, and collapsible-content-style blocks for FAQs.
Dawn-specific customization patterns
Study sections/image-banner.liquid, multicolumn.liquid, and collapsible-content.liquid before shipping custom modules. Dawn merchants expect color scheme pickers and padding controls consistent with native sections—not one-off hex pickers per section unless necessary.
Dawn limitations to plan around
Dawn's minimal CSS means heavy custom animations may need theme-level assets loaded conditionally. Section groups (header) are separate from page JSON—do not assume custom announcement sections belong on index.json without checking theme architecture. App blocks occupy fixed slots—custom sections should not duplicate header markup.
Merchant editing on Dawn stores
Dawn users frequently reorder homepage sections and duplicate image-banner instances. Presets with clear names ('Campaign hero', 'Split promo') reduce confusion. Seed two block rows on FAQ and multicolumn-style modules so repetition is obvious in the editor.
Debugging Dawn integration issues
Section missing on storefront: check template JSON order and type string. Styles clash: verify #shopify-section-{{ section.id }} scoping. Typography wrong: avoid hardcoded font-family; use theme CSS variables. z-index fights with sticky header: test on collection templates, not only homepage.
Dawn deploy checklist
section.liquid in sections/. Preset visible in Add section. color_scheme compatible classes if used. Mobile editor preview. Theme Check pass. Compare spacing beside native image-banner on same template.
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.
View section guide →Announcement bar
Top-bar promos with link and dismiss behavior—typically flat settings with color and typography controls merchants can toggle.
View section guide →Featured collection
Product grids tied to collection objects—schema for collection picker, product limit, and card layout options.
View section guide →Image slider
Slide carousels exported as blocks so Dawn merchants can add, remove, and reorder slides in the editor.
View section guide →FAQ accordion
Collapsible Q&A rows as blocks—mirrors Dawn's collapsible-content pattern with per-block question and answer settings.
View section guide →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.
View section guide →Product highlights
Featured product rows with metafield-friendly markup—settings for product picker, badge text, and layout density.
View section guide →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.
Related
Related tools and theme guides
Guide
HTML to Liquid Converter
Free guide — convert HTML sections for the Dawn theme.
Open guide →Tool
Open converter workspace
Paste HTML and export sections ready for the Dawn theme.
Open guide →Generator
Shopify Section Generator
Generate complete OS 2.0 sections with schema, blocks, and presets.
Open guide →Schema
Liquid Schema Generator
Design section schema JSON that pairs with your converted Liquid.
Open guide →Tool
Shopify Liquid Converter
Convert HTML markup into clean Shopify Liquid templates.
Open guide →Blog
Theme development guides
Read tutorials on sections, schema, and Online Store 2.0 workflows.
Open guide →Theme
HTML to Prestige Theme
Port the same section patterns to Prestige's editorial layouts.
Open guide →Theme
HTML to Broadcast Theme
Adapt sections for Broadcast's storytelling storefronts.
Open guide →Theme
HTML to Impulse Theme
Ship conversion-focused sections on Impulse themes.
Open guide →Component
Convert banner HTML to Liquid
Turn announcement bars and promo strips into editable sections.
Open guide →Component
Convert slider HTML to Liquid
Map carousel markup to block-based slider sections.
Open guide →Component
Convert FAQ HTML to Liquid
Export accordion FAQs as repeatable Shopify blocks.
Open guide →Convert HTML to Shopify Liquid
Paste HTML & generate Liquid with schema, blocks, and scoped CSS. No signup required.