For Loops in Shopify Liquid: Syntax, Options, and Examples

The for loop is one of the most commonly used tags in Shopify Liquid. It iterates over an array or collection and executes a block of code for each item. This guide covers the complete syntax, all available forloop variables, and the flow control options available within loops.

Basic Syntax

A for loop begins with {% for %} and ends with {% endfor %}. You define a temporary variable name for the current item and specify the array to iterate over:

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

This loops through every product in the collection and outputs its title. The temporary variable (product in this case) is only available inside the loop block.

The forloop Object

Inside a for loop, Shopify exposes a forloop object that provides metadata about the current iteration. You can use these variables to conditionally apply logic or styling based on position in the loop.

forloop.index and forloop.index0

forloop.index is the 1-based position of the current iteration (the first item is 1). forloop.index0 is the 0-based equivalent (the first item is 0).

{% for product in collection.products %}
  <p>Product {{ forloop.index }}: {{ product.title }}</p>
{% endfor %}

forloop.first and forloop.last

forloop.first returns true if the current iteration is the first one; forloop.last returns true if it's the last. These are useful for applying different styles to the first or last element.

{% for product in collection.products %}
  {% if forloop.first %}<ul>{% endif %}
  <li>{{ product.title }}</li>
  {% if forloop.last %}</ul>{% endif %}
{% endfor %}

forloop.rindex and forloop.rindex0

forloop.rindex is the 1-based index counting from the end of the loop (the last item is 1). forloop.rindex0 is the 0-based equivalent. These are useful when you need to know how many items remain.

forloop.length

forloop.length returns the total number of iterations the loop will perform. This is the same as the size of the array being iterated.

{% for product in collection.products %}
  {% if forloop.first %}
    <p>Showing {{ forloop.length }} products</p>
  {% endif %}
  {{ product.title }}
{% endfor %}

limit and offset

The limit parameter restricts how many iterations the loop will run. The offset parameter skips a specified number of items at the start of the array. Both can be used together.

{% comment %}Show the first 4 products{% endcomment %}
{% for product in collection.products limit:4 %}
  {{ product.title }}
{% endfor %}

{% comment %}Show products 5-8 (skip the first 4){% endcomment %}
{% for product in collection.products limit:4 offset:4 %}
  {{ product.title }}
{% endfor %}

This is commonly used for pagination-style layouts where you want to display products in groups.

break and continue

Use {% break %} to exit a loop early when a condition is met. Use {% continue %} to skip the current iteration and proceed to the next one.

{% comment %}Stop the loop once we hit a sold-out product{% endcomment %}
{% for product in collection.products %}
  {% if product.available == false %}
    {% break %}
  {% endif %}
  {{ product.title }}
{% endfor %}

{% comment %}Skip sold-out products and continue listing the rest{% endcomment %}
{% for product in collection.products %}
  {% if product.available == false %}
    {% continue %}
  {% endif %}
  {{ product.title }}
{% endfor %}

The else Tag

Inside a for loop, you can include an {% else %} block that renders when the array is empty. This prevents blank or broken output when there are no items to iterate over.

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  <p>No products found in this collection.</p>
{% endfor %}

Iterating Over Ranges

You can also iterate over a numeric range using the (start..end) syntax:

{% for i in (1..5) %}
  {{ i }}
{% endfor %}
{% comment %}Outputs: 1 2 3 4 5{% endcomment %}

This is useful for generating a fixed number of elements, like star ratings or pagination indicators.

Practical Example: Product Grid

A typical use of for loops in Shopify is rendering a product grid, where you want to open and close grid containers at specific intervals:

{% for product in collection.products %}
  {% if forloop.index0 == 0 or forloop.index0 == 3 %}
    <div class="product-row">
  {% endif %}
  <div class="product-card">
    <a href="{{ product.url }}">{{ product.title }}</a>
  </div>
  {% if forloop.index0 == 2 or forloop.last %}
    </div>
  {% endif %}
{% endfor %}

For the complete Liquid tag reference including for loops, see Shopify's iteration tags documentation.