Iteration on arrays using the "for" tag

The "for" tag is a powerful iteration tool in Liquid, allowing you to loop over an array, collection, or range of numbers. You can use this tag to process elements within a loop, making it easier to manipulate and display data on your Shopify store. The basic syntax for the "for" tag is:

{% for item in array %}
  {% comment %} Your code here using the "item" {% endcomment %}    
{% endfor %}

Tag Parameters

Limit: The "limit" parameter restricts the number of iterations to a specified number. This is useful when you want to display only a certain number of elements in a collection. For example:

{% for product in collections.all.products limit: 3 %}
  {% comment %} Display only the first 3 products {% endcomment %}
{% endfor %}

Offset: The "offset" parameter allows you to skip a specific number of items before starting the iteration. This is helpful when you want to display items after a certain index. For example:

{% for product in collections.all.products offset: 2 %}
  {% comment %} Display products starting from the 3rd item in the collection {% endcomment %}
{% endfor %}

Range: The "range" parameter is used to loop through a range of numbers. It generates a series of numbers, starting from the first number and incrementing by one until the last number is reached. For example:

{% for i in (1..5) %}
  {% comment %} Loop from 1 to 5, inclusive {% endcomment %}    
{% endfor %}

Reversed: The "reversed" parameter allows you to iterate through a collection or array in reverse order. This is useful for displaying elements in descending order. For example:

{% for product in collections.all.products reversed %}
  {% comment %} Display products in reverse order {% endcomment %} 
{% endfor %}

Related Liquid Tags

Forloop: The "forloop" object is automatically created when using the "for" tag. This object contains various properties related to the loop, such as "length", "index","index0", "rindex", and "rindex0". These properties can be used to control the flow and display of data within the loop.

Else: The "else" tag can be used within the "for" tag to display content when the loop is empty or does not iterate. For example:

{% for product in collections.all.products %}
  {% comment %} Display products {% endcomment %}   
{% else %}
  {% comment %} Display a message if no products are available {% endcomment %}   
{% endfor %}

Break: The "break" tag can be used to stop the execution of a loop when a certain condition is met. It is helpful when you want to limit the output or avoid unnecessary iterations. Here's an example:

Let's assume you have a collection of products, and you want to display only the first 3 products with a price less than or equal to $100. You can use the "break" tag to achieve this:

{% assign count = 0 %}
{% for product in collections.all.products %}
  {% if product.price <= 100 %}
    {{ product.title }} - {{ product.price | money }}
    {% assign count = count | plus: 1 %}
    {% if count >= 3 %}
      {% break %}
    {% endif %}
  {% endif %}
{% endfor %}

In this example, we use a variable "count" to keep track of the number of products that meet the price criteria. When "count" reaches 3, the "break" tag stops the loop, and no more products are displayed.

Continue: The "continue" tag can be used to skip the current iteration of a loop and move to the next one when a certain condition is met. This is helpful when you want to filter out specific items in a loop. Here's an example:

Let's assume you have a collection of products, and you want to display only the products with a price greater than $100. You can use the "continue" tag to achieve this:

{% for product in collections.all.products %}
  {% if product.price <= 100 %}
    {% continue %}
  {% endif %}
  {{ product.title }} - {{ product.price | money }}
{% endfor %}

In this example, we check if the price of the current product is less than or equal to $100. If the condition is met, the "continue" tag is executed, skipping the rest of the code within the loop for the current product, and moving on to the next product in the loop. As a result, only products with a price greater than $100 will be displayed.

---

The Liquid "for" tag and its related tags offer immense flexibility and control when iterating through arrays, collections, or ranges in your Shopify templates. By understanding and utilizing these tags and their parameters, you can create dynamic and customized storefronts that cater to your customers' needs.