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.

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.