What is HTML2Liquid?

HTML2Liquid converts your static HTML code into dynamic Shopify Liquid sections. It offers two methods: AI conversion for complex projects and manual conversion for simple needs.

Getting Started

Prepare Your HTML

Make sure your HTML is:

Well-formatted
Free of errors
Properly structured

Using AI Conversion

When to Use:

Complex HTML structures
Custom layouts
Professional projects
Multiple components

Steps:

Paste Your HTML - Copy and paste your code into the editor
Select AI Mode - Choose "AI Conversion"
Click Convert - Wait 5-15 seconds for processing
Review Output - Check the generated Liquid code and schema
Copy & Test - Add to your Shopify theme and test

What You Get:

Clean Liquid code
Complete schema with settings
Smart loops and conditions
Default values
Helpful comments

Using Manual Conversion

When to Use:

Simple HTML sections
Quick testing
Learning purposes
Basic layouts

Steps:

Paste Your HTML - Add your code to the editor
Select Manual Mode - Choose "Manual Conversion"
Click Convert - Instant results
Customize - Add extra settings if needed
Copy & Use - Add to your theme

What You Get:

Basic Liquid structure
Simple schema
Functional code
Fast results

Understanding the Output

Your converted code includes:

{% schema %}
{
  "name": "Section Name",
  "settings": [
    // Your customization options
  ]
}
{% endschema %}

// Your Liquid template code here

Quick Tips

For Better Results:

Use descriptive class names
Keep HTML well-structured
Group related elements
Test with simple sections first

Common Settings Types:

text - Single line input
textarea - Multiple lines
image_picker - Upload images
color - Color selection
range - Slider controls

Troubleshooting

Code not displaying?

Check all Liquid tags are closed
Verify schema JSON syntax
Test with default values

Schema not showing?

Validate JSON format
Check for duplicate IDs
Refresh theme editor

Real Example

Simple Hero Banner HTML:

<div class="hero">
  <h1>Welcome to Our Store</h1>
  <p>Shop the best products</p>
  <button>Shop Now</button>
</div>

Result:

Liquid code with variables
Schema with text inputs
Button settings
Ready to customize in Shopify admin

Quick Decision Guide

Use AI Conversion:

Complex layouts
Client projects
Need quality code
Want time savings

Use Manual Conversion:

Simple sections
Quick prototypes
Learning Shopify
Basic structures

Conclusion

HTML2Liquid makes Shopify development faster and easier. Start with simple sections using manual conversion, then move to AI conversion for complex projects. Both methods help you build better Shopify themes in less time.

Ready to start? Visit HTML2Liquid and try converting your first section today!

Questions? Reach out to the HTML2Liquid support team for help.