for loop, cycle and tablerow Iteration Tags in Shopify Liquid
Iteration tags repeatedly run blocks of code. It renders an expression for every item in an array.
for loop
Executes a block of code repeatedly. It is most commonly used to iterate over the items in an array or dictionary and renders an expression.
We can do a maximum of 50 iterations with a for
loop. If we need to iterate over more than 50 items, then we have to use the paginate tag to split the items over multiple pages.
Within the for
tag block, the forloop
object is available.
{% for product in collection.products %}
<p>{{ product.title }}</p>
{% endfor %}
for tag parameters
The parameters of for
can be used alone, or in combination with others. Parameters are listed below.
limit
We can limit the number of iterations using the limit parameter. After the given limit the loop gets exited. The sample code is given below.
{% for product in collection.products limit:2%}
<p>{{ product.title }}</p>
{% endfor %}
offset
We can set the start index for iterating using the offset parameter as given below.
{% for product in collection.products offset:2%}
<p>{{ product.title }}</p>
{% endfor %}
range
We can specify a numeric range to iterate over instead of specific items in an array. The range is set like (lower_limit..upper_limit)
.
% for i in (3..6) -%}
{{ i }}
{%- endfor %}
Output:
3
4
5
6
reversed
Iterates through the array in reverse order, starting from the last item. This can be done using reversed
parameter.
{% for product in collection.products reversed%}
<p>{{ product.title }}</p>
{% endfor %}
forloop Object
forloop
is an object which contains information about a parent for loop. The properties available in forloop
object is given below.
Properties | Data type | Description |
first | boolean | It returns true if the current iteration is the first. Returns false if not. |
index | number | Return index of the current iteration. It is a one-based index. One-based array indexing is a way of numbering the items in an array such that the first item of it has an index of 1. |
index0 | number | Return index of the current iteration. It is a zero-based index. Zero-based array indexing is a way of numbering the items in an array such that the first item of it has an index of 0. |
last | boolean | It returns true if the current iteration is the last. Returns false if not. |
length | number | It returns the total number of iterations in the loop. |
parentloop | forloop object | Lets take an example of one If the current for loop isn't nested inside another |
rindex | number | Return index of the current iteration in reverse order. It is a one-based index. One-based array indexing is a way of numbering the items in an array such that the first item of it has an index of 1. |
rindex0 | number | Return index of the current iteration in reverse order. It is a zero-based index. Zero-based array indexing is a way of numbering the items in an array such that the first item of it has an index of 0. |
sample code:
{% for product in collection.products%}
{%- if forloop.index == 1 -%}
<p>First product</p>
{%- endif -%}
{% endfor %}
Output:
<p>First product</p>
else
else
allows you to specify a default expression to be executed when a for
loop has zero length.
{% for product in collection.products%}
<p>{{ product.title }}</p>
{% else %}
<p>No Products!</p>
{% endfor %}
cycle
Loops through a group of strings and outputs them one at a time in the same order for each iteration of a for
loop.
{% for item in items %}
<p class={% cycle 'red', 'green', 'blue' %}> {{ item }} </p>
{% end %}
Output:
<p class='red'> item 1 </p>
<p class='green'> item 2 </p>
<p class='blue'> item 3 </p>
<p class='red'> item 4 </p>
The cycle can be used to apply odd/even classes to rows in a table.
tablerow
tablerow
generates the HTML table rows for every item in an array. This must be wrapped with <table>
and </table>
HTML tags. Every tablerow
loop has an associated tablerowloop
object with information about the loop.
<table>
{% tablerow product in collection.products %}
{{ product.title }}
{% endtablerow %}
</table>
Output:
<table>
<tr class=row1>
<td class=col1>
Product title 1
</td>
<td class=col2>
Product title 2
</td>
</tr>
</table>
tablerow tag parameters
The parameters of tablerow
can be used alone, or in combination with others. Parameters are listed below.
cols
cols
parameter can define how many columns the table should have.
<table>
{% tablerow product in collection.products cols:2 %}
{{ product.title }}
{% endtablerow %}
</table>
limit
We can limit the number of iterations using the limit parameter. After the given limit the loop gets exited.
<table>
{% tablerow product in collection.products limit:2 %}
{{ product.title }}
{% endtablerow %}
</table>
offset
You can specify a 1-based index to start iterating using the offset parameter. 1-based array indexing is a way of numbering the items in an array such that the first item of it has an index of 1.
<table>
{% tablerow product in collection.products offset:3 %}
{{ product.title }}
{% endtablerow %}
</table>
In the above code, iteration skips for the first 3 items in the products array.
range
Instead of iterating over specific items in an array, we can specify a numeric range to iterate over. The range is set like (lower_limit..upper_limit)
.
<table>
{% tablerow i in (2..6) %}
{{ i }}
{% endtablerow %}
</table>
The above code iterates from 2 to 6.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
layout, render and section Theme Tags in Shopify Liquid
if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid
Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag
New Sections Not Showing Up in Shopify Theme Customizer! How to Fix
Using Redux Toolkit with React
Handle double click events in React
Expected an assignment or function call and instead saw an expression in React
How to disable a Link in React
How to solve error: array_merge() does not accept unknown named parameters
Explore All Blogs