HTML to Shopify Liquid: A Practical Conversion Guide

Why Convert HTML Instead of Starting Over?

Designers and agencies often deliver pixel-perfect HTML from Figma or Webflow. Your job is to make that markup editable in the Shopify theme customizer—without throwing away the structure you already have.

Step 1: Identify Hardcoded Content

Highlight every headline, paragraph, image src, and button link that a merchant should change. Those become section.settings or block.settings in schema.

Step 2: Choose Flat or Block Mode

Fixed layouts (one hero image + one CTA) work in Flat mode. Repeatable rows (testimonials, logos) need Block mode with a for loop. Read Flat vs Block Sections before you export.

Step 3: Replace Static Text with Liquid

<!-- Before -->
<h2>Summer Sale</h2>

<!-- After -->
<h2>{{ section.settings.heading | escape }}</h2>

Step 4: Add {% schema %}

Every section file needs valid JSON at the bottom. Missing presets means merchants cannot add the section on JSON templates. See Section Schema Explained.

Speed Up with the Converter

Paste HTML into the HTML to Liquid Converter, pick Flat or Block, and download a .liquid file with schema included. Spend your time on polish and QA—not hand-typing JSON.