Skip to main content

HTML to Shopify Section

Paste your HTML code to generate editable Shopify sections automatically

Best input

A semantic, self-contained HTML fragment with one clear section responsibility and no scripts.

Generated result

Liquid markup, strict JSON section schema, settings, optional blocks, and a complete downloadable .liquid file.

Required review

Theme CSS, dependencies, accessibility, responsive behavior, resource data, translations, and editor edge cases.

HTML Input

Generated Schema

How It Works

A practical workflow from static markup to a tested Shopify section:

1

Paste Your HTML

Enter your HTML code in the input field.

2

Inspect the Mapping

Review which values became section settings, which repeated items became blocks, and what still needs manual work.

3

Copy & Use

Copy the complete .liquid file, add it to a development theme, run Theme Check, and test it in the editor.

How the HTML converter maps a section

The deterministic mode uses repeatable rules. Optional AI mode can propose a different content model, but both modes produce code that must be reviewed.

Common HTML-to-Shopify setting mappings
InputTypical outputReview
h1–h6text setting, escaped in its original heading elementKeep one page-level h1 and a logical heading order.
prichtext setting in a neutral div.rteDo not wrap rich text output in another paragraph.
img / pictureimage_picker with image_url and image_tagConfirm sizes, crop behavior, focal point, loading, and useful alt text.
a / button-like linkSeparate text and url settingsCheck destination, link purpose, focus style, and whether an action really needs a button.
Repeated list or cardsA section-block definition and loop when the structure is consistentConfirm every card shares one content model and add an empty state.

Complete input

<div class="callout">
  <h2>Free shipping over $50</h2>
  <p>Available on eligible domestic orders.</p>
  <a class="button" href="/collections/all">Shop now</a>
</div>

Reviewable section output

<div class="callout">
  {% if section.settings.heading != blank %}
    <h2>{{ section.settings.heading | escape }}</h2>
  {% endif %}
  {% if section.settings.richtext != blank %}
    <div class="rte">{{ section.settings.richtext }}</div>
  {% endif %}
  {% if section.settings.url != blank %}
    <a class="button" href="{{ section.settings.url }}">
      {{ section.settings.link_text | escape }}
    </a>
  {% endif %}
</div>

{% schema %}
{
  "name": "Callout",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping over $50" },
    { "type": "richtext", "id": "richtext", "label": "Paragraph", "default": "<p>Available on eligible domestic orders.</p>" },
    { "type": "url", "id": "url", "label": "Link URL" },
    { "type": "text", "id": "link_text", "label": "Link text", "default": "Shop now" }
  ],
  "presets": [{ "name": "Callout" }]
}
{% endschema %}

What still requires manual work

  • Theme-specific CSS, JavaScript behavior, snippets, translations, and design tokens.
  • Product, collection, variant, metafield, or metaobject data that static HTML cannot describe.
  • Accessible names, error messages, keyboard interactions, reduced motion, and focus management.
  • Responsive image widths, art direction, performance budgets, and above-the-fold loading decisions.
  • Whether repetition belongs in section blocks, theme blocks, a collection loop, or another data source.

Input privacy in this implementation

Manual input is posted to this site's conversion route, parsed to produce the response, and is not written to a project database by that route. AI input is sent to the configured AI provider when you explicitly choose AI mode. Scripts are rejected and inline event handlers or executable URL attributes are removed from deterministic conversion input. See the Privacy Policy for the current service details.

Add the result to a development theme

  1. Download or copy the complete section and save it as a descriptive file under sections/.
  2. Run shopify theme check and correct parser, deprecation, performance, and translation issues.
  3. Start a preview with shopify theme dev --store your-store; do not test the first draft in the published theme.
  4. Add the section through the theme editor, change every setting, reorder blocks, and test empty content.
  5. Check the storefront at narrow and wide viewports before pushing to an unpublished theme.

Continue with the end-to-end HTML2Liquid walkthrough, the rich-text markup guide, or Shopify's official theme CLI documentation.