HTML2Liquid converts structured HTML into a Shopify Liquid section draft. Paste HTML into the editor, choose AI or Manual conversion, and review the Liquid markup with its matching {% schema %} block. Copy the complete result into a section file in a development theme, then validate the schema, accessibility, responsive behaviour, and compatibility before publishing it.
Free HTML-to-Shopify section tooling
HTML to Liquid Converter
Convert a focused HTML fragment into Liquid markup and a matching section schema. Review the result, test it in a development theme, and keep full control of the final code.
HTML
Paste your markup
Liquid
Generate a section
Schema
Customize in Shopify
What the tool does
From fixed HTML to merchant-editable section settings
HTML2Liquid is a free starting point for Shopify theme developers, designers learning Liquid, and store owners who can review theme code. It reads a self-contained HTML fragment and maps common content—headings, paragraphs, images, links, buttons, lists, and repeated cards—to Liquid output and section schema.
Shopify section schema is the strict JSON object inside {% schema %}. It defines the controls a merchant sees in the theme editor. Text fields, rich text, image pickers, URLs, checkboxes, select menus, blocks, and presets belong there; the Liquid markup reads their saved values through section.settings or block.settings.
Conversion cannot infer your theme's CSS architecture, JavaScript components, translations, product data model, performance budget, or desired accessibility behavior. Generated code therefore needs a developer review before it reaches a live theme.
Small example
What HTML-to-Liquid conversion changes
The static copy becomes editor-controlled data. The output below is deliberately small: a real section can also need URL settings, image settings, responsive CSS, blocks, translations, and theme-specific integration.
HTML input
A small static promotional section before conversion.
Note: Keep the input focused and use semantic HTML for more predictable output.
Liquid and schema pattern
The same content exposed as merchant-editable section settings.
Note: Review and test generated Liquid in a development theme before publishing.
Choose the right starting point
HTML converter
Generate a complete section draft from a focused HTML fragment.
Open resource →Schema builder
Build settings, blocks, and presets without hand-writing the JSON structure.
Open resource →Liquid cheatsheet
Look up practical filters, loops, objects, image patterns, and schema examples.
Open resource →Shopify tutorials
Follow complete examples and manual-review checklists for theme work.
Open resource →Built and maintained by Lavkush Varma
Lavkush Varma maintains the converter, schema builder, Liquid reference, and tutorials. The documentation explains the choices made by this codebase and links to Shopify's official developer documentation for platform rules. If an example is wrong or a conversion behaves unexpectedly, report it through the contact page with a reduced input and the result you expected.
How It Works
A practical workflow from static markup to a tested Shopify section:
1
Paste Your HTML
Enter your HTML code in the input field.
2
Inspect the Mapping
Review which values became section settings, which repeated items became blocks, and what still needs manual work.
3
Copy & Use
Copy the complete .liquid file, add it to a development theme, run Theme Check, and test it in the editor.
Supported Features
The deterministic converter handles common section markup. Optional AI assistance can propose a structure for more complex input, but every result still needs theme-specific review.
Text Fields
Headings become escaped text settings; paragraphs become rich-text settings rendered without invalid nested paragraphs.
Image Pickers
Image tags become Shopify image pickers rendered through image_url and image_tag for reviewable theme output.
Link Settings
Anchor labels and destinations become separate text and URL settings while safe static attributes are retained.
Buttons
Button elements and button-styled links receive text and URL settings with customizable style options.
Color Pickers
Recognized inline foreground and background colors can become Shopify color settings.
Section Blocks
Repeated lists and consistent card structures can be modeled as merchant-reorderable section blocks.
Rich Text
Paragraph content maps to Shopify rich text and is rendered in a neutral RTE container for valid markup.
Video
Hosted video and supported YouTube or Vimeo embeds map to the appropriate Shopify setting types.
Why Choose HTML2Liquid?
Use the manual converter for deterministic section generation, or sign in for optional AI-assisted conversion. Review the generated Liquid and schema before adding the section to a theme.
A Faster First Draft
Automate repetitive setting and schema scaffolding, then focus review time on the storefront behavior that depends on your theme.
Intelligent Schema
Goes beyond simple code conversion. Automatically builds complete Shopify schema settings for links, images, text, and more.
Keep the Important Decisions
You decide content modeling, accessibility, responsive behavior, and theme integration; the tool handles the mechanical starting point.
Simple & Straightforward
No complex setup or configuration required. A clean, powerful tool that does one thing exceptionally well.
Optional AI Assistance
Signed-in users can ask the AI mode to propose a structure for complex markup. Its output is untrusted code until reviewed and tested.
Reviewable Section Output
Generate a complete Liquid section and strict JSON schema, then review it with Shopify Theme Check and test it in a development theme before release.
Frequently asked questions
Practical answers about conversion, privacy, limits, and theme testing.
Still have a question?
Send a reduced HTML example and what you expected to happen. That helps us reproduce conversion issues and answer faster.