HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

Iteration Tags

❮ Previous Next ❯

Iteration tags repeatedly execute blocks of code.

for

Renders a value for each element in an array.

You can execute up to 50 repetitions with a for loop. If you have more than 50 items to iterate through, employ the paginate tag to distribute the items across several pages.

Note: Every for loop comes with a forloop object that holds details about the loop.

syntax
{% for variable in array %}
expression
{% endfor %}

variable

The current item in the array.

array

The array to iterate over

expression

The expression to render for each iteration.

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

for tag parameters

limit

syntax
{% for variable in array limit: number %}
expression
{% endfor %}

Every for loop comes with a forloop object that holds details about the loop.

{% for product in collection.products limit: 2 -%}
{{ product.title }}
{%- endfor %}

offset

syntax
{% for variable in array offset: number %}
expression
{% endfor %}

You can specify a 1-based index to start iterating at using the offset parameter.

syntax
{% for product in collection.products offset: 2 -%}
{{ product.title }}
{%- endfor %}

range

syntax
{% for variable in (number..number) %}
expression
{% endfor %}

Instead of looping through individual items in an array, you can define a range of numbers to loop through.

Note: You can specify the range using actual values or variables.

{% for i in (1..3) -%}
{{ i }}
{%- endfor %}
{%- assign lower_limit = 2 -%}
{{ lower_limit }}
{%- assign upper_limit = 4 -%}
{% for i in (lower_limit..upper_limit) -%}
{{ i }}
{%- endfor %}

reversed

syntax
{% for variable in array reversed %}
expression
{% endfor %}

You can loop through an array backward using the reversed parameter.

syntax
{% for product in collection.products reversed -%}
{{ product.title }}
{%- endfor %}

forloop

Property Alias Type
forloop.first first boolean
forloop.index index number
forloop.index0 index0 number
forloop.last last boolean
forloop.length length number
forloop.parentloop parentloop forloop
forloop.rindex rindex number
forloop.rindex0 rindex0 number

else

Enables you to define a default action to perform when a for loop is empty.

syntax
{% for variable in array %}
first_expression
{% else %}
second_expression
{% endfor %}

variable

The current item in the array.

array

The array to iterate over.

first_expression

The expression to render for each iteration.

second_expression

The expression to render if the loop has zero length.

break

Stops a for loop from iterating.

syntax
{% break %}

continue

Causes a for loop to skip to the next iteration.

syntax
{% continue %}

cycle

The code goes through an array of strings and displays each one separately during each cycle of a for loop.

The cycle tag has to be used within a for loop.

Note: Use the cycle tag to display text in a repeating pattern. For example, you can use it to alternate odd and even classes for table rows.

syntax
{% cycle string, string, ... %}

Create unique cycle groups

syntax
{% cycle string: string, string, ... %}

If you use multiple cycle tags with the same parameters in a template, they are treated as the same group. This means a cycle tag can output any of the given strings, not always starting with the first one. To handle this, you can give each cycle tag a group name.

cycle

Iterates over an array of strings and displays each one during each loop cycle.

The cycle tag must be used within a for loop.

Note: Use the cycle tag to show text in a repeating pattern. For example, you can use it to add odd or even classes to table rows.

syntax
{% cycle string, string, ... %}

Create unique cycle groups

syntax
{% cycle string: string, string, ... %}

If you use multiple cycle tags with the same parameters in a template, they are treated as the same group. This means a cycle tag can show any of the given strings instead of always starting with the first one. To manage this, you can name each cycle tag group.

tablerow

Creates HTML table rows for each item in an array.

Wrap the tablerow tag within

and
.

Note: Each tablerow loop has a tablerowloop object that provides details about the loop.

syntax
{% tablerow variable in array %}
expression
{% endtablerow %}

variable

The current item in the array.

array

The array to iterate over.

tablerow tag parameters

cols

syntax
{% tablerow variable in array cols: number %}
expression
{% endtablerow %}

You can set the number of columns in the table using the cols parameter.

limit

syntax
{% tablerow variable in array limit: number %}
expression
{% endtablerow %}

You can control how many times something repeats by using the limit parameter.

offset

syntax
{% tablerow variable in array offset: number %}
expression
{% endtablerow %}

With the offset parameter, you can specify where to start iterating using a 1-based index.

range

syntax
{% tablerow variable in (number..number) %}
expression
{% endtablerow %}

Instead of looping through individual items in an array, you can define a sequence of numbers to loop through.

Note: You can specify the range using both fixed numbers and values stored in variables.

paginate

Splits an array's items across multiple pages.

Since for loops are restricted to 50 iterations per page, the paginate tag is necessary to iterate through an array containing more than 50 items. The arrays eligible for pagination include:

  • all_products
  • article.comments
  • blog.articles
  • collections
  • collection.products
  • customer.addresses
  • customer.orders
  • pages
  • search.results
  • collection_list settings
  • product_list settings

Inside the paginate tag, you can access the paginate object. You can utilize this object or the default_pagination filter to create page navigation.

syntax
{% paginate array by page_size %}
{% for item in array %}
forloop_content
{% endfor %}
{% endpaginate %}

array

The array to be looped over.

page_size

The number of items to display per page ranges from 1 to 50.

item

An item in the array being looped.

Paginating setting arrays

To enable separate pagination for arrays of product_list and collection_list settings, these arrays utilize a pagination query parameter with a distinct identifier. This identifier is automatically generated by the paginate tag and does not require manual referencing in your code. Nonetheless, you can retrieve this identifier using paginate.page_param.

paginate tag parameters

window_size

syntax
{% paginate collection.products by 3, window_size: 1 %}

Set the width and height of the pagination container. The width is the number of pages displayed in the pagination navigation.
❮ Previous Next ❯