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 %}
The name of the variable to assign each item to.
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>
The name of the variable to assign each item to.
The array or collection to iterate over.
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>