Iteration tags

Iteration tags let you run blocks of code multiple times, which is useful for working with collections and arrays of data.

`for`

Loops over a collection of items and executes a block of code for each item.

{% for item in collection %}
  // code to execute for each item
{% endfor %}

string

The name of the variable to assign each item to.

array

The array or collection to iterate over.

{% assign fruits = "apple,banana,orange" | split: "," %}

<ul>
{% for fruit in fruits %}
  <li>{{ fruit }}</li>
{% endfor %}
</ul>

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

`else` (for loops)

Executes a block of code if the collection being looped over is empty.

{% for item in collection %}
  // code to execute for each item
{% else %}
  // code to execute if collection is empty
{% endfor %}

{% assign items = "" | split: "," %}

<ul>
{% for item in items %}
  <li>{{ item }}</li>
{% else %}
  <li>No items found</li>
{% endfor %}
</ul>

<ul>
  <li>No items found</li>
</ul>

`break`

Stops a for loop from continuing to execute.

{% for item in collection %}
  {% if condition %}
    {% break %}
  {% endif %}
  // code to execute for each item
{% endfor %}

{% assign numbers = "1,2,3,4,5" | split: "," %}

<ul>
{% for num in numbers %}
  {% if num == "3" %}
    {% break %}
  {% endif %}
  <li>{{ num }}</li>
{% endfor %}
</ul>

<ul>
  <li>1</li>
  <li>2</li>
</ul>

`continue`

Skips the current iteration of a for loop.

{% for item in collection %}
  {% if condition %}
    {% continue %}
  {% endif %}
  // code to execute for each item
{% endfor %}

{% assign numbers = "1,2,3,4,5" | split: "," %}

<ul>
{% for num in numbers %}
  {% if num == "3" %}
    {% continue %}
  {% endif %}
  <li>{{ num }}</li>
{% endfor %}
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>4</li>
  <li>5</li>
</ul>

`cycle`

Cycles through a set of values and outputs one value each time the tag is processed.

{% for item in collection %}
  {% cycle value1, value2, value3 %}
{% endfor %}

<table>
{% for i in (1..4) %}
  <tr class="{% cycle 'odd', 'even' %}">
    <td>Row {{ i }}</td>
  </tr>
{% endfor %}
</table>

<table>
  <tr class="odd">
    <td>Row 1</td>
  </tr>
  <tr class="even">
    <td>Row 2</td>
  </tr>
  <tr class="odd">
    <td>Row 3</td>
  </tr>
  <tr class="even">
    <td>Row 4</td>
  </tr>
</table>

`tablerow`

Creates a HTML table of items in your collection.

<table>
{% tablerow item in collection cols:number %}
  // code to execute for each item
{% endtablerow %}
</table>

string

The name of the variable to assign each item to.

array

The array or collection to iterate over.

number

The number of columns in the table.

{% assign items = "apple,banana,orange,grape,melon,kiwi" | split: "," %}

<table>
{% tablerow item in items cols:2 %}
  {{ item }}
{% endtablerow %}
</table>

<table>
  <tr>
    <td>apple</td>
    <td>banana</td>
  </tr>
  <tr>
    <td>orange</td>
    <td>grape</td>
  </tr>
  <tr>
    <td>melon</td>
    <td>kiwi</td>
  </tr>
</table>

Introduction

Key Concepts

References

`for`

`else` (for loops)

`break`

`continue`

`cycle`

`tablerow`

​for

​else (for loops)

​break

​continue

​cycle

​tablerow

`for`

`else` (for loops)

`break`

`continue`

`cycle`

`tablerow`