HTML to Liquid Converter

Schema

Select Schema Setting

Dropdown that drives layout or style variants in Liquid.

Convert to sectionFull cheat sheet

Copy or embed this snippet

{
  "type": "select",
  "id": "layout",
  "label": "Layout",
  "options": [
    { "value": "grid", "label": "Grid" },
    { "value": "carousel", "label": "Carousel" }
  ],
  "default": "grid"
}

Embed this snippet on your blog or docs — attribution link appreciated: HTML to Liquid Converter · Convert to Shopify section →

Related snippets

Basic Section Schema

The minimum required JSON to make a section editable.

Block Schema Definition

How to define blocks inside a section schema.

Text Setting in Schema

The most common setting type for headings and labels.

Practice in the converter workspace

Draft OS 2.0 section output after you choose the right design pattern.

Open converter workspaceBrowse learning examples