Build collection-driven product grids merchants control

Collection setting and loop sketch

{% comment %} Schema excerpt {% endcomment %}
{
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection to display"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "Number of products"
    }
  ]
}

{% comment %} Liquid logic {% endcomment %}
{% if section.settings.collection != blank %}
  <div class="product-grid">
    {% for product in section.settings.collection.products limit: section.settings.products_to_show %}
      <div class="product-card">
        <a href="{{ product.url }}">
          <img 
            src="{{ product.featured_image | image_url: width: 600 }}" 
            alt="{{ product.featured_image.alt | escape }}"
            loading="lazy"
            width="600"
            height="{{ 600 | divided_by: product.featured_image.aspect_ratio | round }}"
          >
          <h3>{{ product.title | escape }}</h3>
          <p>{{ product.price | money }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
{% else %}
  <p class="product-grid__empty">Choose a collection in the theme editor to display products here.</p>
{% endif %}

Collection picker setting exposes merchant control. Limit avoids pagination complexity on simple grids. Empty state guides setup.

Limit products cleanly in the loop

{% assign products_shown = 0 %}
{% for product in section.settings.collection.products %}
  {% if products_shown >= section.settings.products_to_show %}
    {% break %}
  {% endif %}
  
  <div class="product-card">
    <a href="{{ product.url }}">
      <img 
        src="{{ product.featured_image | image_url: width: 600 }}" 
        alt="{{ product.featured_image.alt | escape }}"
        loading="lazy"
        width="600"
        height="{{ 600 | divided_by: product.featured_image.aspect_ratio | round }}"
      >
      <h3>{{ product.title | escape }}</h3>
      <p>{{ product.price | money }}</p>
      {% if product.compare_at_price > product.price %}
        <p class="product-card__compare">
          <s>{{ product.compare_at_price | money }}</s>
        </p>
      {% endif %}
    </a>
  </div>
  
  {% assign products_shown = products_shown | plus: 1 %}
{% endfor %}

{% if products_shown == 0 %}
  <p class="product-grid__empty">This collection has no available products.</p>
{% endif %}

Loop stops after the limit. No hidden DOM bloat. Empty state when collection exists but is empty.

Responsive image with aspect ratio and sizes

{% assign card_width = 600 %}
<img 
  src="{{ product.featured_image | image_url: width: card_width }}" 
  srcset="
    {{ product.featured_image | image_url: width: 300 }} 300w,
    {{ product.featured_image | image_url: width: 600 }} 600w,
    {{ product.featured_image | image_url: width: 900 }} 900w
  "
  sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
  alt="{{ product.featured_image.alt | default: product.title | escape }}"
  loading="lazy"
  width="{{ card_width }}"
  height="{{ card_width | divided_by: product.featured_image.aspect_ratio | round }}"
>

Srcset gives browser options. Sizes hint matches grid layout. Width and height prevent CLS.