This page documents the Shopify theme work behind HTML to Liquid Converter — project types, delivery standards, and expertise areas maintained by Dhruv Goyani (3 years web design + 3 years Shopify development experience) and Nishad Kikani (2 years web design + 6 years Shopify development experience). Agency and DTC client projects delivered; Custom OS 2.0 sections from client Shopify work.
Connect on LinkedIn
We share practitioner updates — section workflows, migration lessons, and platform observations — on LinkedIn. Follow Dhruv Goyani (3 years web design + 3 years Shopify development experience) and Nishad Kikani (2 years web design + 6 years Shopify development experience) to see how client delivery informs converter releases and published guides.
Combined expertise snapshot
- 9 combined years Shopify theme development (3 + 6).
- 5 combined years web design / front-end layout before and alongside Shopify work.
- Agency and DTC client projects delivered.
- Custom OS 2.0 sections from client Shopify work.
Expertise areas
The table below maps service areas to what we actually do on client themes. Each area links to public guides that codify patterns we reuse in exports.
Section development
Heroes, FAQs, product grids, sliders, and landing modules with merchant-editable schema.
Liquid optimization
Loop limits, filter chains, snippet extraction, and editor-safe variable naming.
Theme performance
Lazy loading, asset budgeting, section setting counts, and JSON template hygiene.
Store migrations
Porting sections from legacy themes to OS 2.0 JSON templates without breaking merchant workflows.
App integration
Theme app extensions, metafields in Liquid, and third-party script boundaries.
Deep dives: section tutorial, schema guide, dynamic blocks, performance tips, and theme deployment guides.
Project types we see repeatedly
Client work clusters into a handful of shapes. We document anonymized versions on Shopify client case studies — educational scenarios, not fake quotes. Recognizing the shape early helps you choose Flat vs Block export modes and plan QA.
Fashion and DTC lookbooks
High visual density: split heroes, editorial grids, size guides, and collection banners. Challenges include image aspect ratios, mobile crop settings, and metafield-driven badges. We typically export heroes in Flat mode and lookbook rows in Block mode with image_picker per card.
B2B wholesale and catalog
Volume pricing tables, MOQ callouts, quick-order forms, and account-gated snippets. Schema must stay understandable for non-marketer admins. We favor explicit text settings and url fields over hardcoded copy, with section groups for header-adjacent announcement bars.
Beauty and subscription flows
Ingredient tabs, before/after sliders, subscription widgets beside product forms. Third-party scripts need clear boundaries — theme sections should not break app blocks. We test JSON templates with apps installed and cap block counts where editor performance suffers.
Legacy theme migrations
Porting Liquid 1.0 sections into OS 2.0 JSON templates without losing merchant content. Nishad leads migrations: mapping old settings to new IDs, splitting monolithic templates into composable sections, and validating presets so merchants regain Add section workflows.
Delivery timeline reference
Cross-reference this timeline with our story. Milestones reflect when capabilities compounded — not vanity launch dates.
2019 — Shopify client work begins
Nishad starts shipping custom Liquid sections and theme edits for DTC and wholesale merchants — learning schema pain points on real deadlines.
2021 — Agency-scale section delivery
Dhruv joins full-time Shopify theme work. The team standardizes Figma-to-section handoffs, preset libraries, and scoped CSS conventions across client projects.
2023 — HTML-to-Liquid bottleneck identified
Repeated client projects expose the same bottleneck: hours spent mapping static HTML to {% schema %} JSON. The development team prototypes an internal conversion compiler.
2024 — HTML to Liquid Converter launches
The internal tool becomes htmltoliquidconverter.com — a free workspace for developers with validation, block detection, and OS 2.0 exports.
2026 — Knowledge platform expansion
Developer guides, case studies, and Shopify workflows published openly — documenting mistakes, checklists, and real patterns from client work.
How experience shapes the converter
Every validation warning in the converter ties to a client mistake we logged: schema JSON that broke the editor, CSS that leaked globally, blocks without max limits, missing presets on JSON templates. Why we built the tool explains the bottleneck; this page explains the depth of work that informed the rules.
- Flat export for fixed heroes and announcement bars — matches fashion campaign landings.
- Block export for FAQs, logos, and feature grids — matches B2B catalog modules.
- Automated validation for common conversion issues — aggregated from theme editor failures on real stores.
- Optional AI assist for ambiguous nested grids — always with deterministic fallback.
Developer roles on client work
Dhruv leads HTML-to-section pipelines and schema ergonomics; Nishad leads theme architecture, migrations, and validation rules. Full bios, skills, and LinkedIn links are on meet-the-founders — this page focuses on delivery patterns.
We still take selective client work through K2 Devworks when timelines align. For self-serve conversion, start with the HTML to Liquid Converter guide or browse workflow case studies.
Standards we enforce on every export
Schema-first files with presets. Scoped CSS using section.id. Stable setting IDs that read well in the editor. Block types with merchant-friendly labels. No hardcoded storefront copy when a setting suffices. Performance-conscious loops — pagination or limits on large repeatables. These standards appear in reviews, blog posts, and the cheat sheet because they prevent the same support tickets.
Study the patterns in Shopify cheat sheet, practice with examples, and compare your manual schema time to one export in the workspace.
Quality assurance checklist from client work
Before any section ships to a merchant theme, we run a checklist distilled from production incidents. This is the same discipline behind converter validation messages — each item maps to a support ticket we would rather prevent than answer.
- Schema JSON validates in the theme editor without parse errors.
- Presets exist for sections merchants add via Add section.
- Empty image_picker and text settings render sensible fallbacks.
- Block loops use max_blocks where repeatables could grow unbounded.
- CSS selectors are scoped to section.id — no global tag overrides.
- Mobile and desktop previews checked with real merchant content lengths.
- JSON template order verified when sections sit near app blocks.
- Performance spot-check on collection and product templates affected.
Common mistakes we see on merchant themes
These patterns appear across unrelated clients — which is why we document them publicly instead of treating them as one-off fixes.
- Hardcoded collection handles in href attributes instead of url or collection settings.
- Missing presets — sections exist in Git but merchants cannot add them.
- Block types without limits — eighty FAQ rows slow the theme editor.
- img_url filters on empty images — broken icons on new installs.
- Inline styles from prototypes left in Liquid instead of theme tokens.
- Monolithic templates that should be split into composable OS 2.0 sections.
Themes and deployment contexts
Experience is not Dawn-only. Premium themes introduce different section group conventions, typography systems, and app block slots. We maintain deployment notes for Dawn, Prestige, Broadcast, and Impulse because export fit still requires human judgment — especially for header-adjacent sections and product template ordering.
Custom client themes follow the same OS 2.0 rules with different design tokens. The converter output is theme-agnostic structurally; your final pass aligns class names, spacing, and color variables with the parent theme's conventions. That division of labor — automate schema, human polish brand fit — is how we deliver custom os 2.0 sections from client shopify work without every storefront looking identical.
Relationship to HTML to Liquid Converter
The public tool is not separate from client delivery — it is client delivery compressed into software. Validation rules come from Nishad's migration reviews. Block heuristics come from Dhruv's Figma handoffs. Guides come from questions agencies ask repeatedly. When you read our story or use the converter, you are interacting with the same standards described on this page.
Section types we ship most often
Across client projects, a short list of section archetypes covers most homepage and landing work: full-width heroes with media settings, split editorial rows, logo strips, FAQ accordions, feature grids, product or collection carousels, testimonial sliders (structure only — we do not fabricate quotes), press mention rows, and CTA bands. Each archetype has a preferred export mode and a known QA pass.
- Heroes and announcement bars — Flat mode; hero guide.
- FAQs and accordions — Block mode; FAQ guide.
- Product grids — Block or collection settings; grid guide.
- Tabs and ingredient panels — Block or nested settings; tabs guide.
- Sliders and banners — Block with max_blocks; slider guide.
Performance and scale lessons
High-traffic stores taught us to cap repeatables, lazy-load below-the-fold media, and avoid nested product loops inside sections that already sit on collection templates. Shopify Plus merchants notice editor lag when dozens of blocks load at once — so max_blocks is not pedantic, it is UX for the people updating copy at 11pm before a campaign.
Nishad's performance work includes auditing filter chains, replacing deprecated image filters, and splitting monolithic snippets into section-scoped files. Those audits inform performance articles and converter warnings when exports detect risky patterns. Dhruv's design handoffs account for image aspect ratios and text expansion — merchants write longer headlines than prototypes show.
Migrations and long-term maintainability
Legacy themes fail slowly: includes hide business logic, global CSS conflicts accumulate, and merchants believe content is editable when it is hardcoded in snippets. Migration projects are as much archaeology as engineering — mapping what merchants think they control versus what developers must re-expose through schema. We document migration scenarios on client case studies because phased rollouts beat big-bang relaunches.
Maintainability means the next developer — maybe you in six months — can open section.liquid, read setting IDs, and extend blocks without reverse-engineering. That is why we preach stable IDs, comments only where non-obvious, and presets that match how sections appear on real JSON templates.
