+880 1756-702340 +880 9613-842340

shopifyengine.com@gmail.com

Purbo Kamal Kasna Rangpur, Bangladesh.

Looping Statements in Shopify Liquid

Liquid provides several looping mechanisms to iterate over collections of data in Shopify themes. In this tutorial you are going to learn those.


for Loop

Repeatedly executes a block of code. For a full list of attributes available within a for loop

  • You can do a maximum of 50 iterations with a for loop.

  • If you need to iterate over more than 50 items, then use the paginate tag to split the items over multiple pages.

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.


Example

Code Output 
{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}
 
Draught of Immortality
Glacier ice
Health potion
Invisibility potion


Loop Parameters

These parameters define how the loop operates:

Parameter Description Syntax

limit

Limits the number of iterations.

{% for variable in array limit: number %}

offset

Can specify a 1-based index to start iterating

{% for variable in array offset: number %}

reversed

Iterates through the collection in reverse order.

{% for variable in array reversed %}

range

Loops through a specified range of numbers.

{% for variable in (number..number) %}


Loop Controls

These control how the loop executes:

Parameter Description Example

else

Run if the loop has zero length.

 
{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}

continue

The loop to skip the current iteration

 
{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

break

The loop to stop iterating

 
{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}


Loop Variables

These provide information about the current iteration. It work inside the loop

Variable Description Example

forloop.index

1-based index of the current iteration

{{ forloop.index }} → Outputs: 1, 2, 3…​

forloop.index0

0-based index of the current iteration

{{ forloop.index0 }} → Outputs: 0, 1, 2…​

forloop.rindex

1-based reverse index (counting down from the total length)

{{ forloop.rindex }} → Outputs: 3, 2, 1…​

forloop.rindex0

0-based reverse index

{{ forloop.rindex0 }} → Outputs: 2, 1, 0…​

forloop.first

Returns true if the current iteration is the first

{% if forloop.first %}First{% endif %}

forloop.last

Returns true if the current iteration is the last

{% if forloop.last %}Last{% endif %}

forloop.length

Total number of items in the loop.

{{ forloop.length }} → Outputs the count

forloop.parentloop

The parent forloop object.

 
{% for i in (1..3) -%}
  {% for j in (1..3) -%}
    {{ forloop.parentloop.index }} - {{ forloop.index }}
  {%- endfor %}
{%- endfor %}


cycle inside for Loop

Loops through a group of strings and outputs them one at a time for each iteration of a for loop.

Syntax

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

Code

{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

Output

one
two
three
one


Uses for cycle

  • applying odd/even classes to rows in a table

  • applying a unique class to the last product thumbnail in a row


Shopify Liquid paginate

The paginate tag use to limit the number of items displayed per page and navigate through them.


paginate 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 array items to include per page, between 1 and 50.

  • item : An item in the array being looped.

  • forloop_content : Content for each loop iteration.


paginate Example

{% paginate collection.products by 5 %}
  {% for product in collection.products -%}
    {{ product.title }}
  {%- endfor %}

  {{- paginate | default_pagination }}
{% endpaginate %}

Output

Blue Mountain Flower
Charcoal
Crocodile tears
Dandelion milk
Draught of Immortality

<span class="page current">1</span>
<span class="page"><a href="/services/liquid_rendering/resource?page=2" title="">2</a></span>
<span class="page"><a href="/services/liquid_rendering/resource?page=3" title="">3</a></span>
<span class="page"><a href="/services/liquid_rendering/resource?page=4" title="">4</a></span>
<span class="next"><a href="/services/liquid_rendering/resource?page=2" title="">Next &raquo;</a></span>
Share