Guide
HTML to Shopify section, step by step
Go from static HTML to a Shopify section that ships in real themes—complete with Liquid, schema, blocks, and scoped CSS.
Workflow
How to convert HTML into a Shopify section
The problem this guide solves
You have static HTML that works in a browser preview but is useless to merchants until it becomes a section with schema, presets, and JSON template registration. This guide is the end-to-end path from markup file to theme editor controls.
Who should follow this workflow
Developers handing sections to merchant teams, agencies delivering OS 2.0 themes, and freelancers converting one-off landing slices. Assumes you already know what a section is—focuses on execution order.
Use this workflow when
Design delivered HTML/CSS for a module merchants must edit. You need to register the section on index.json, product.json, or a custom template. Flat vs block decision is already made or pending at export.
Do not use this alone when
You only need schema JSON without markup—use the schema generator. You are building app blocks or checkout UI. You need theme-wide settings in settings_schema.json—these live outside section files.
Section integration mistakes
Section file exists but type string in template JSON does not match filename. Missing from order array on template JSON. No preset—section invisible in Add section. Global CSS breaks header on other templates. Shipping without mobile editor preview.
Step-by-step developer workflow
Inventory editable fields → convert HTML → choose Flat/Block → deploy to sections/ → add instance to templates/*.json → seed preset defaults → QA add/remove/reorder blocks → document fragile settings (video URLs, max_blocks) for handoff.
QA before client handoff
Desktop and mobile theme editor. Empty image_picker states. Block reorder reflects on storefront. Typography matches parent theme tokens. Internal links use url settings. Cross-check HTML to Liquid QA checklist article.
Capabilities
Designed for real HTML-to-section migrations
Connect your existing HTML components to Shopify’s section system with tooling that understands both worlds.
Schema-aware conversion
Automatically infer which HTML fields should become editable settings in the Shopify theme editor.
Block-ready layouts
Turn repeating rows into blocks so merchants can add, remove, and reorder content in the UI.
Scoped section styling
Wrap styles with section.id-based selectors so your new sections coexist cleanly with existing themes.
Guardrails for schema and markup
Validate schema, check for common Liquid issues, and spot problems early—before they reach production.
Patterns inspired by Dawn
Follow section, schema, and block patterns proven in Shopify’s own reference theme.
Export once, reuse everywhere
Ship one HTML to Shopify section conversion and reuse it across multiple templates and storefronts.
Process
HTML to Shopify section in four steps
Keep the workflow simple: start from HTML, let the converter map structure, then refine and ship.
- 01
Paste HTML
Drop in the exact hero, FAQ, or grid markup you want to turn into a section.
- 02
Analyze structure
Identify headings, content groups, and repeatables that should become settings or blocks.
- 03
Generate Liquid
Compile section Liquid with schema and scoped CSS that respect your theme.
- 04
Export section
Paste the generated file into your theme and configure it in JSON templates.
Related
Related tools and guides
Tool
HTML to Liquid Converter
Paste HTML and export Shopify sections in one workspace.
Open tool →Tool
Shopify Schema Generator
Fine-tune the schema behind your converted sections.
Open tool →Reference
Liquid Cheat Sheet
Review common tag, filter, and schema patterns.
Open tool →Tool
Shopify Section Generator
Generate new sections from HTML without starting over.
Open tool →Blog
HTML to section tutorials
Read detailed walkthroughs of real-world conversions.
Open tool →Share
Share this guide
Found this useful? Share it with other Shopify developers.
Convert HTML to Shopify Liquid
Paste HTML & generate Liquid with schema, blocks, and scoped CSS. No signup required.