# Iteration

> Liquid iteration tags in Shoplazza themes: for, break, continue, cycle, tablerow and paginate, plus the 50-iteration limit and the loop objects they expose.

Iteration tags repeatedly run blocks of code.

## for

Renders an expression for every item in an array.

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](./iteration#paginate) to split the items over multiple pages.

:::tip
Every `for` loop has an associated [forloop object](../objects/forloop) with information about the loop.
:::

```liquid title="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.

```liquid title="Code"
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
Fit 3 Denim Shirt
Ace Cashmere Beanie
Oriental Intense EDP
Boiler Jumpsuit
```

## for tag parameters

### limit

```liquid title="Syntax"
{% for variable in array limit: number %}
  expression
{% endfor %}
```

You can limit the number of iterations using the `limit` parameter.

```liquid title="Code"
{% for product in collection.products limit: 2 %}
  {{ product.title }}
{% endfor %}
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
Fit 3 Denim Shirt
Ace Cashmere Beanie
```

### offset

```liquid title="Syntax"
{% for variable in array offset: number %}
  expression
{% endfor %}
```

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

```liquid title="Code"
{% for product in collection.products offset: 2 %}
  {{ product.title }}
{% endfor %}
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
Oriental Intense EDP
Boiler Jumpsuit
```

### range

```liquid title="Syntax"
{% for variable in (number..number) %}
  expression
{% endfor %}
```

Instead of iterating over specific items in an array, you can specify a numeric range.

:::note
You can define the range using both literal and variable values.
:::

```liquid title="Code"
{% for i in (1..5) %}
  {{ i }}
{% endfor %}

{% assign lower_limit = 2 %}
{% assign upper_limit = 5 %}

{% for i in (lower_limit..upper_limit) %}
  {{ i }}
{% endfor %}
```

```html title="Output"
1
2
3
4
5

2
3
4
5
```

### reversed

```liquid title="Syntax"
{% for variable in array reversed %}
  expression
{% endfor %}
```

You can iterate in reverse order using the `reversed` parameter.

```liquid title="Code"
{% for product in collection.products reversed %}
  {{ product.title }}
{% endfor %}
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
Boiler Jumpsuit
Oriental Intense EDP
Ace Cashmere Beanie
Fit 3 Denim Shirt
```

## forloop

Information about a parent [for loop](./iteration#for).

| Properties | Type                                  | Description                                                                   |
| :--------- | :------------------------------------ | :---------------------------------------------------------------------------- |
| `first`    | [boolean](../basics/liquid-types#boolean) | Returns `true` if the current iteration is the first. Returns `false` if not. |
| `last`     | [boolean](../basics/liquid-types#boolean) | Returns `true` if the current iteration is the last. Returns `false` if not.  |
| `index`    | [number](../basics/liquid-types#number)   | The 1-based index of the current iteration.                                   |
| `index0`   | [number](../basics/liquid-types#number)   | The 0-based index of the current iteration.                                   |
| `length`   | [number](../basics/liquid-types#number)   | The total number of iterations in the loop.                                   |
| `rindex`   | [number](../basics/liquid-types#number)   | The 1-based index of the current iteration, in reverse order.                 |
| `rindex0`  | [number](../basics/liquid-types#number)   | The 0-based index of the current iteration, in reverse order.                 |

```json title="Object"
{
  "first": true,
  "last": false,
  "index": 1,
  "index0": 0,
  "rindex": 4,
  "rindex0": 3,
  "length": 4
}
```

**use the`forloop` object**

```liquid title="Code"
{% for i in (1..5) %}
  {% if forloop.length > 0 %}
    {{ i }}{% unless forloop.last %},{% endunless %}
  {% endif %}
{% endfor %}
```

```html title="Output"
1, 2, 3, 4, 5
```

## else

Allows you to specify a default expression to execute when a [for loop](./iteration#for) has zero length.

```liquid title="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.

```liquid title="Code"
{% for product in collection.products %}
  {{ product.title }}
{% else %}
  There are no products in this collection.
{% endfor %}
```
```json title="Data"
{
  "collection": {
    "products": []
  }
}
```

```html title="Output"
There are no products in this collection.
```

## break

Stops a [for loop](./iteration#for) from iterating.

```liquid title="Syntax"
{% break %}
```

```text title="Code"
{% for i in (1..5) %}
  {% if i == 3 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}
```

```html title="Output"
1
2
```

## continue

Causes a [for loop](./iteration#for) to skip to the next iteration.

```liquid title="Syntax"
{% continue %}
```

```liquid title="Code"
{% for i in (1..5) %}
  {% if i == 3 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}
```

```html title="Output"
1
2
4
5
```

## cycle

Loops through a group of strings and outputs them one at a time for each iteration of a [for loop](./iteration#for).

The `cycle` tag must be used inside a `for` loop.

:::tip
Use the `cycle` tag to output text in a predictable pattern. For example, to apply odd/even classes to rows in a table.
:::

```liquid title="Syntax"
{% cycle string, string, ... %}
```

```liquid title="Code"
{% for i in (1..5) %}
  {% cycle 'one', 'two', 'three' %}
{% endfor %}
```

```html title="Output"
one
two
three
one
two
```

### Create unique cycle groups

```liquid title="Syntax"
{% cycle string: string, string, ... %}
```

If you include multiple `cycle` tags with the same parameters, in the same template, then each set of tags is treated as the same group. This means that it's possible for a `cycle` tag to output any of the provided strings, instead of always starting at the first string. To account for this, you can specify a group name for each `cycle` tag.

```liquid title="Code"
<!-- Iteration 1 -->
{% for i in (1..5) %}
  {% cycle 'one', 'two', 'three' %}
{% endfor %}

<!-- Iteration 2 -->
{% for i in (1..5) %}
  {% cycle 'one', 'two', 'three' %}
{% endfor %}

<!-- Iteration 3 -->
{% for i in (1..5) %}
  {% cycle 'group_1': 'one', 'two', 'three' %}
{% endfor %}

<!-- Iteration 4 -->
{% for i in (1..5) %}
  {% cycle 'group_2': 'one', 'two', 'three' %}
{% endfor %}
```

```html title="Output"
<!-- Iteration 1 -->
one
two
three
one
two

<!-- Iteration 2 -->
three
one
two
three
one

<!-- Iteration 3 -->
one
two
three
one
two

<!-- Iteration 4 -->
one
two
three
one
two
```

## tablerow

Generates HTML table rows for every item in an array.

The `tablerow` tag must be wrapped in HTML `<table>` and `</table>` tags.

:::tip
Every `tablerow` loop has an associated [tablerowloop object](../objects/tablerowloop) with information about the loop.
:::

```liquid title="Syntax"
{% tablerow variable in array %}
  expression
{% endtablerow %}
```

* `variable`: The current item in the array.
* `array`: The array to iterate over.
* `expression`: The expression to render.

```liquid title="Code"
<table>
  {% tablerow product in collection.products %}
    {{ product.title }}
  {% endtablerow %}
</table>
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Fit 3 Denim Shirt</td>
      <td class="col2">Ace Cashmere Beanie</td>
      <td class="col3">Oriental Intense EDP</td>
      <td class="col4">Boiler Jumpsuit</td>
    </tr>
  </tbody>
</table>
```

## tablerow tag parameters

### cols

```liquid title="Syntax"
{% tablerow variable in array cols: number %}
  expression
{% endtablerow %}
```

You can define how many columns the table should have using the `cols` parameter.

```liquid title="Code"
<table>
  {% tablerow product in collection.products cols: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Fit 3 Denim Shirt</td>
      <td class="col2">Ace Cashmere Beanie</td>
    </tr>
    <tr class="row2">
      <td class="col1">Oriental Intense EDP</td>
      <td class="col2">Boiler Jumpsuit</td>
    </tr>
  </tbody>
</table>
```

### limit

```liquid title="Syntax"
{% tablerow variable in array limit: number %}
  expression
{% endtablerow %}
```

You can limit the number of iterations using the `limit` parameter.

```liquid title="Code"
<table>
  {% tablerow product in collection.products limit: 3 %}
    {{ product.title }}
  {% endtablerow %}
</table>
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Fit 3 Denim Shirt</td>
      <td class="col2">Ace Cashmere Beanie</td>
      <td class="col3">Oriental Intense EDP</td>
    </tr>
  </tbody>
</table>
```

### offset

```liquid title="Syntax"
{% tablerow variable in array offset: number %}
  expression
{% endtablerow %}
```

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

```liquid title="Code"
<table>
  {% tablerow product in collection.products offset: 1 %}
    {{ product.title }}
  {% endtablerow %}
</table>
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ]
  }
}
```

```html title="Output"
<table>
  <tbody>
    <tr class="row1">
      <td class="col1">Ace Cashmere Beanie</td>
      <td class="col2">Oriental Intense EDP</td>
      <td class="col3">Boiler Jumpsuit</td>
    </tr>
  </tbody>
</table>
```

## tablerowloop

Information about a parent [tablerow loop](./iteration#tablerow).

| Properties | Type                                | Description                                                            |
| :--------- | :---------------------------------- | :--------------------------------------------------------------------- |
| `first`    | [number](../basics/liquid-types#number) | Returns `1` if the current iteration is the first. Returns `0` if not. |
| `last`     | [number](../basics/liquid-types#number) | Returns `1` if the current iteration is the last. Returns `0` if not.  |
| `index`    | [number](../basics/liquid-types#number) | The 1-based index of the current iteration.                            |
| `index0`   | [number](../basics/liquid-types#number) | The 0-based index of the current iteration.                            |
| `length`   | [number](../basics/liquid-types#number) | The total number of iterations in the loop.                            |
| `rindex`   | [number](../basics/liquid-types#number) | The 1-based index of the current iteration, in reverse order.          |
| `rindex0`  | [number](../basics/liquid-types#number) | The 0-based index of the current iteration, in reverse order.          |

```json title="Object"
{
  "first": 1,
  "last": 0,
  "index": 1,
  "index0": 0,
  "rindex": 4,
  "rindex0": 3,
  "length": 4
}
```

## paginate

Splits an array's items across multiple pages.

Because [for loops](./iteration#for) are limited to 50 iterations per page, you need to use the `paginate` tag to iterate over an array that has more than 50 items. The following arrays can be paginated:

* [blog.articles](../objects/blog)
* [collection.products](../objects/collection)
* [search.results.products](../objects/search)

Within the `paginate` tag, you have access to the [paginate object](../objects/paginate). You can use this object to build page navigation.

```liquid title="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.

```liquid title="Code"
{% paginate collection.products by 8 %}
  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}
{% endpaginate %}
```
```json title="Data"
{
  "collection": {
    "products": [
      {
        "title": "Fit 3 Denim Shirt"
      },
      {
        "title": "Ace Cashmere Beanie"
      },
      {
        "title": "Oriental Intense EDP"
      },
      {
        "title": "Boiler Jumpsuit"
      }
    ],
    "products_count": 16
  }
}
```

```html title="Output"
Fit 3 Denim Shirt
Ace Cashmere Beanie
Oriental Intense EDP
Boiler Jumpsuit
```