Dhruv Goyani and Nishad Kikani did not set out to launch a SaaS product. We set out to stop retyping {% schema %} JSON on every section handoff. HTML to Liquid Converter is the internal compiler we wished existed in 2021 — now maintained as a free public workspace for freelancers, agencies, and in-house theme teams.
The bottleneck: HTML arrives, schema work begins
Every Shopify section project starts the same way. Design delivers a hero, FAQ, product grid, or landing module as static HTML — often exported from Figma, Webflow, or a Tailwind prototype. The markup looks finished. Merchants assume they can edit headlines and images in the theme editor. Developers know the real work just started: identify every editable field, choose setting types, name stable IDs, wire block loops for repeatables, scope CSS with section.id, and validate JSON so the theme editor does not throw opaque errors.
On a simple hero, that mapping takes one to three hours if you are experienced. On a landing page with six modules, it can consume a full day before anyone reviews performance or accessibility. Multiply that across weekly client deliveries and the bottleneck is obvious — not Liquid logic, not Shopify APIs, but the mechanical translation from HTML attributes to schema fields.
- Headings and body copy become text or richtext settings — with maxlength and default values merchants understand.
- Images need image_picker settings, not hardcoded CDN URLs that break when assets move.
- CTA links map to url settings; optional style toggles become checkboxes or selects.
- Repeating FAQ rows, logos, or feature cards need blocks with {% for block in section.blocks %} loops.
- Presets must exist or merchants cannot add the section from JSON templates.
What we tried before building a compiler
Like most theme developers, we started with copy-paste. Keep a folder of reference sections, duplicate the closest hero, find-replace class names, and manually adjust schema. That works until setting IDs collide, block types multiply, or a junior developer copies a section with another client's namespace baked into CSS. We tried snippet libraries and shared Git repos — helpful for consistency, but they still required manual mapping when HTML structure changed.
Agency handoff docs helped: Figma redlines listing editable fields, spreadsheets of setting IDs, scoped CSS conventions. Still, someone spent hours typing JSON. We read schema guides and blocks guides repeatedly; the knowledge existed, the grunt work did not disappear. Internal spreadsheets tracked section hours and schema typos caused more rework than Liquid bugs.
The internal prototype (2023)
The breaking point was a two-week sprint with four landing modules and three repeatable sections per module. Nishad sketched a parser that walked DOM-like HTML trees, classified nodes as settings or blocks, and emitted Liquid plus schema. Dhruv added export modes: Flat for single-instance heroes, Block for accordions and card grids. We dogfooded it on the sprint — export time dropped from hours to minutes per section, with human review still required for edge cases.
Input: static hero HTML + scoped CSS
Output: section.liquid + {% schema %} JSON + presets
Flat mode → section.settings for fixed layouts
Block mode → section.blocks for repeatablesThe prototype was ugly and CLI-first. It did not need a UI for us — we ran it locally and pasted output into theme repos. What mattered was deterministic structure: stable setting IDs, typed fields, scoped selectors, and validation warnings before code hit a client theme.
From internal tool to htmltoliquidconverter.com
Freelancer friends saw exports and asked for access. Agencies wanted the same preset conventions we used internally. Rather than email zip files, we built a browser workspace with live preview, validation checks, and downloadable section.liquid files. htmltoliquidconverter.com launched in 2024 as a free core converter — no signup required for basic conversion — because the bottleneck is universal.
Opening the tool publicly changed maintenance, not philosophy. Every validation rule maps to a mistake we made on a client theme: missing presets, nested loops without limits, image filters that break on empty picks, block types without merchant-friendly labels. The Schema Generator and ready section templates followed the same pattern — shave repetitive work, keep humans in the review loop.
What the converter deliberately does not do
We are explicit about scope. The converter does not replace theme-specific polish, brand token alignment, or accessibility review. It does not auto-deploy to Shopify. It does not guarantee perfect block detection on every nested grid — complex layouts still need developer judgment and the optional AI assist is enhancement, not a black box.
- You still test in Dawn, Prestige, or your client theme — see Dawn deployment notes.
- You still choose Flat vs Block intentionally — see Flat vs Block sections.
- You still own performance budgets — see performance tips.
- You still read output before shipping live — we are developers, not a magic button vendor.
Design principles we ship against
Compiler-first, not prompt-first. A deterministic engine always produces baseline output; optional AI structure detection suggests block boundaries on ambiguous HTML. Schema-first exports: every file includes valid {% schema %} with presets merchants need. Editor-safe naming: setting IDs that read well in the theme UI. Scoped CSS by default: selectors tied to section.id so multiple instances coexist on JSON templates.
These principles come from client project shapes we see repeatedly — fashion lookbooks, B2B order portals, subscription beauty flows, legacy migrations. The tool generalizes patterns; your theme still needs a final human pass.
Why free core conversion matters
The boring part of section work should not be paywalled. Freelancers learning OS 2.0 and agencies standardizing exports both benefit from the same validation rules we use internally. Optional account features may sync history or preferences, but paste-and-export remains available because that is how we onboard junior developers on client teams.
If this origin story resonates, read our full company story, meet our Shopify developers, or open the converter with HTML from your current project and compare export time to your last manual schema session.
Metrics we track internally
We do not publish vanity funnel metrics. Internally we track section export time, schema rework tickets, validation warnings caught pre-merge, and editor crashes prevented by presets or max_blocks. Those numbers justify feature work — a new validation rule ships when it would have saved an hour on a real project, not when a roadmap slide needs filler.
When agencies report faster junior onboarding after standardizing on the converter, that is the outcome we care about — not signup counts. The tool succeeds when developers spend review time on performance and accessibility instead of retyping JSON. See development experience for how those standards show up in client delivery.
Open documentation as product
Shipping the compiler publicly meant shipping our opinions too: when to use blocks, how schema works, performance guardrails. Documentation is not SEO filler — it is the training material we use with client developers. If a guide and the converter disagree, we fix the converter; the guide documents intended behavior.
Who benefits most from the converter
Freelancers shipping their tenth hero for different clients benefit from consistent schema IDs. Agencies onboarding juniors benefit from validation before code review. In-house theme teams benefit from splitting landing HTML into composable sections without losing a day per module. Store owners indirectly benefit when their developers deliver editor-friendly sections faster — merchants should not need a deploy to change a headline.
The tool is less helpful when you are not working with HTML handoffs — for example, building entirely inside the theme editor or extending complex app-owned UI. In those cases, start with section fundamentals and Schema Generator instead of bulk HTML conversion.
Long-term product direction
We will keep investing in validation, block detection, export modes, and knowledge content tied to real Shopify changes. Features ship when client work surfaces repeated pain — not when competitor checklists demand parity. If you rely on htmltoliquidconverter.com, expect incremental reliability improvements and more team-written guides, not pivot-to-another-platform announcements.
