HTML to Shopify Section Case Studies

Project context

Anonymized DTC or agency client handoff — design arrives as static HTML for a homepage hero band. Client name not disclosed; pattern repeated across fashion, beauty, and wholesale storefronts.

Problem

Design handoffs arrive as static HTML with hardcoded text, image URLs, and inline styles. Merchants need to edit headlines, swap hero images, and update CTA links without developer intervention.

Approach

1. Paste hero HTML into the converter workspace.
2. Use Flat export mode for a single-instance hero layout.
3. Review generated section.settings for heading, body text, image_picker, and url fields.
4. Validate scoped CSS uses section.id to avoid theme conflicts.
5. Add presets so merchants can insert the section from the theme editor.

Implementation details

Export produces section.liquid with {% schema %} JSON: text settings for eyebrow, heading, and subcopy; image_picker for background media; url settings for primary CTA. CSS wraps under a section-scoped class using section.id. Preset seeds copy from the approved design so the theme editor preview matches the handoff before merchant edits.

Practical takeaway

Heroes are the fastest win for Flat mode — one instance, fixed layout, high merchant edit frequency. Always verify image_picker blank states and CTA url fields in the theme editor before merge.

Project context

Anonymized client FAQ module — common on landing pages and support hubs. Typical on B2B and DTC stores where marketing owns question copy after launch.

Problem

FAQ pages often use repeated HTML rows — question and answer pairs nested in accordion markup. Hardcoding each pair means merchants cannot manage content themselves.

Approach

1. Paste FAQ HTML with repeated item rows into the converter.
2. Switch to Block export mode to detect repeatable structures.
3. Confirm each FAQ item maps to a block with question and answer settings.
4. Review the {% for block in section.blocks %} loop in generated Liquid.
5. Test drag-and-drop block management in the theme editor.

Implementation details

Block export maps each accordion row to a block type with question (text or richtext) and answer (richtext) settings. Liquid loops blocks with block.shopify_attributes on each wrapper for editor highlighting. max_blocks caps row count; preset includes two starter rows so merchants see repetition working on first insert.

Practical takeaway

FAQ sections are the clearest Block mode use case — repeating structure, merchant reordering, and editor UX that breaks without shopify_attributes. Seed at least two block rows in presets.

Project context

Anonymized full-page landing rebuild — agency or in-house team splitting one HTML mockup into multiple theme sections for JSON template assembly.

Problem

Full landing pages combine heroes, feature grids, testimonials, and CTAs in one HTML file. Shopify themes need self-contained sections merchants can mix on JSON templates.

Approach

1. Split landing HTML into logical sections (hero, features, CTA band).
2. Convert each chunk separately in Flat or Block mode as appropriate.
3. Generate schema with typed settings for each editable element.
4. Scope CSS per section.id for safe multi-section templates.
5. Assemble sections on a JSON template in the theme editor.

Implementation details

Each visual band becomes its own sections/*.liquid file with independent schema and presets. JSON template (e.g. templates/page.landing.json) lists section instance keys in order. Flat mode for hero and CTA bands; Block mode for feature grids and logo rows. Staging theme QA confirms section order before production publish.

Practical takeaway

Never paste an entire landing page as one section — composable sections survive marketing reordering and template reuse across campaigns.