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.

PropertiesData typeDescription
firstbooleanIt returns true if the current iteration is the first. Returns false if not.
indexnumberReturn 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.
index0numberReturn 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.
lastbooleanIt returns true if the current iteration is the last. Returns false if not.
lengthnumberIt returns the total number of iterations in the loop.
parentloopforloop object

Lets take an example of one for loop is nested under another for loop. The child for loop can access parent for loop using parentloop property.

If the current for loop isn't nested inside another for loop, then nil is returned.

rindexnumberReturn 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.
rindex0numberReturn 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.

Related Blogs

Shopify New Section

New Sections Not Showing Up in Shopify Theme Customizer! How to Fix

The newly created section shows on the Shopify theme customizer only if we set presets in the schema. Learn how to set preset in the Shopify section schema.

Conditional Tags in Shopify Liquid

if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid

Control Flow or Conditional Tags determines what content should be rendered based on given conditions. if, unless, elsif/else, case/when are conditional tags.

Theme Tags in Shopify Liquid

layout, render and section Theme Tags in Shopify Liquid

Theme tags allow us to select different theme layouts to use for different pages, and create sections or snippets that can be reusable in different templates. layout, render and section are theme tags.

Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

When we work with images in Shopify, We have to get the image CDN URL from Shopify objects, get the theme assets URL for the theme images, or generate an HTML image tag from the image URL. Explains how to work with images in Shopify.

Create 404 page in react

Create 404 page in react

To create a 404 page in React using React Router, Create a wildcard path with an asterisk(‘*’) and add it to the very last path of our routes.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.