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:

1. Paste Your HTML - Copy and paste your code into the editor
2. Select AI Mode - Choose "AI Conversion"
3. Click Convert - Wait 5-15 seconds for processing
4. Review Output - Check the generated Liquid code and schema
5. 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:

1. Paste Your HTML - Add your code to the editor
2. Select Manual Mode - Choose "Manual Conversion"
3. Click Convert - Instant results
4. Customize - Add extra settings if needed
5. 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.