How To Convert HTML To Shopify Liquid

Conversion workflow overview

Goal: static HTML/Figma export → merchant-editable OS 2.0 section with valid schema, scoped CSS, and theme editor QA. Treat conversion as a pipeline, not a single paste step.

Step 1: Inventory editable fields

Mark headlines, body copy, images, links, and spacing tokens merchants should control. Map each to a schema type: text, richtext, image_picker, url, range.

Step 2: Static-to-dynamic mapping

<!-- Before -->
<h2>Summer Sale</h2>
<img src="hero.jpg" alt="">

<!-- After -->
<h2>{{ section.settings.heading | escape }}</h2>
{% if section.settings.image != blank %}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'eager' }}
{% endif %}

Step 3: Choose flat or block mode

Fixed heroes → flat indexed settings. Repeatable FAQ/logo rows → block loop. Decide before export: Flat vs Block Sections.

Step 4: Schema, CSS scoping, presets

• Valid JSON in {% schema %} with at least one preset
• Prefix CSS with #shopify-section-{{ section.id }}
• Seed defaults so empty sections look intentional in demos

Step 5: QA in Shopify admin

1. Deploy to duplicate theme sections/ folder
2. Register on target JSON template
3. Test add/remove/reorder blocks, mobile preview, blank images
4. Run Theme Check on exported files

Takeaway

Generate first-pass structure via the converter workspace, then spend review time on theme tokens and merchant labels—not retyping JSON. Schema depth: Section Schema Explained.

Conversion is a pipeline, not a paste

Agencies that treat HTML→Liquid as one step ship hardcoded FAQ rows and missing presets. The pipeline: clean export → classify editable fields → choose Flat or Block → generate Liquid and schema → scope CSS → validate → register on JSON template → theme editor QA.

Preparing HTML from Figma or Tailwind

• One section module per conversion pass
• Remove inline scripts and fix unclosed tags
• Identical sibling rows for Block mode detection
• Note which images become image_picker settings

Field mapping reference

• Headlines → text
• Formatted copy → richtext
• Images → image_picker + image_url
• CTAs → text label + url link
• Spacing → range or theme tokens

After export

Rename setting labels for merchants, add max_blocks, match parent theme CSS variables, run QA checklist. Timing target: under two hours per module once the pipeline is habitual.