HTML to Liquid Converter

Paste your HTML code to generate Shopify section settings automatically

HTML Input

Generated Schema

Generated schema will appear here...

Supported Features

Convert HTML elements into dynamic Shopify section settings.

Image Picker

Converts <img> tags to Shopify image pickers

Automatically generates image picker settings for your section schema.

Text/Rich Text

Handles headings (<h1> to <h6>) and <span> tags

Creates appropriate text or rich text fields based on HTML elements.

Paragraphs

Supports <p> tags with rich text editing

Converts paragraph tags into rich text fields with formatting support.

URL Settings

Manages <a> tags with URL and text inputs

Generates URL picker settings with link label fields.

Supported HTML Structure

Examples of HTML structures that can be converted into Shopify section settings.

Basic Elements

Common HTML elements that are fully supported

<div class="container">
  <h1>Welcome to our store</h1>
  <h2>Featured Products</h2>
  <p>Discover our amazing collection.</p>
  <span>Special offer!</span>
</div>

Note: Headings (h1-h6), paragraphs, and spans are converted to text or richtext settings.

Images

Image elements with optional attributes

<div class="gallery">
  <img src="product.jpg" alt="Product" />
  <img class="featured" src="banner.jpg" alt="Banner" />
</div>

Note: Images are converted to image_picker settings while preserving classes and other attributes.

Links

Anchor tags with text content

<div class="links">
  <a href="#" class="button">Shop Now</a>
  <a href="#" class="link">Learn More</a>
</div>

Note: Links are converted to URL settings with accompanying text fields.

Mixed Content

Combination of different elements

<div class="product-card">
  <img src="product.jpg" alt="Product" />
  <h3>Product Title</h3>
  <p>Product description goes here.</p>
  <a href="#" class="buy-button">Buy Now</a>
</div>

Note: Complex structures are supported as long as they use basic HTML elements.

Limitations

Complex Nested Structures

The tool may not handle deeply nested HTML structures with multiple levels of conditional rendering.

Dynamic Content

JavaScript-generated content or dynamic HTML structures are not supported.

Custom Components

Framework-specific components (React, Vue, etc.) will not be processed correctly.

Troubleshooting

Invalid HTML Structure

Ensure your HTML is properly formatted and all tags are correctly closed.

Special Characters

Some special characters in text content might cause unexpected behavior.

Unsupported Elements

Complex interactive elements or third-party widgets may not be converted properly.