Convert product grid HTML to Liquid

HTML structure

<div class="product-grid">
  <div class="product-card">
    <img src="product.jpg" alt="">
    <h3>Product name</h3>
    <span>$49.00</span>
  </div>
</div>

Static cards signal the layout pattern—the converter replaces inner content with a product loop.

Liquid output

{% assign collection = collections[section.settings.collection] %}
{% for product in collection.products limit: section.settings.limit %}
  <div class="product-card">
    {{ product.featured_image | image_url: width: 600 | image_tag }}
    <h3>{{ product.title }}</h3>
    <span>{{ product.price | money }}</span>
  </div>
{% endfor %}

Live product data replaces hardcoded values—prices and images stay current automatically.

Schema settings

"settings": [
  { "type": "collection", "id": "collection", "label": "Collection" },
  { "type": "range", "id": "limit", "min": 2, "max": 12, "label": "Products" },
  { "type": "text", "id": "heading", "label": "Heading" }
]

Collection picker and range settings give merchants merchandising control in the editor.

Compare-at badge

{% if product.compare_at_price > product.price %}
  <span class="badge">Sale</span>
{% endif %}

Conditional Liquid renders sale badges when compare-at pricing is set on the product.