---
url: https://docs.youcan.shop/themes/tags/for.md
---
# `for`
Execute the encapsulated block `n` times the amount of items equals to the length of the iterable array.
::: info
Every `for` loop provides a local variable [`forloop`](#forloop-object) which contains information about the loop in progress;
:::
```liquid
{% for item in array %}
block_to_output
{% endfor %}
```
* `item`: The item of the current loop iteration.
* `array`: Array to loop over.
* `block_to_output`: Rendered expression in every loop iteration.
**Example:**
::: details Data
```json
{
"products": [
{
"slug": "product-1",
"price": 76
},
{
"slug": "YouCan",
"price": 100
},
{
"slug": "product-2",
"price": 30
},
{
"slug": "product-3",
"price": 124
},
]
}
```
*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::
```liquid
{% for product in products %}
{{- product.slug -}} | {{- product.price -}}
{% endfor %}
```
::: tip Output
```html
product-1 | 76
YouCan | 100
product-2 | 30
product-3 | 124
```
:::
## Paramaters
::: info
It's worth mentioning that these parameters can coexists with each other.
:::
### `limit`
Instead of going through the entire array, we can use `limit` to set maximum iterations count.
```liquid
{% for item in array limit: number %}
block_to_output
{% endfor %}
```
* `limit`: The number of iterations before stopping the loop.
**Example:**
::: details Data
```json
{
"products": [
{
"slug": "product-1",
"price": 76
},
{
"slug": "YouCan",
"price": 100
},
{
"slug": "product-2",
"price": 30
},
{
"slug": "product-3",
"price": 124
},
]
}
```
*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::
```liquid
{% for product in products limit: 2 %}
{{- product.slug -}} | {{- product.price -}}
{% endfor %}
```
::: tip Output
```html
product-1 | 76
YouCan | 100
```
:::
### `offset`
When specified, the loop won't start from the first available item in the array, instead, will begin at the specified position.
```liquid
{% for item in array offset: number %}
block_to_output
{% endfor %}
```
* `offset`: Index to start the loop from, should be within `[0, array.length - 1]`.
**Example:**
::: details Data
```json
{
"products": [
{
"slug": "product-1",
"price": 76
},
{
"slug": "YouCan",
"price": 100
},
{
"slug": "product-2",
"price": 30
},
{
"slug": "product-3",
"price": 124
},
]
}
```
*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::
```liquid
{% for product in products offset: 1 %}
{{- product.slug -}} | {{- product.price -}}
{% endfor %}
```
::: tip Output
```html
YouCan | 100
product-2 | 30
product-3 | 124
```
:::
### `range`
Instead of going through an array, you can instead specific two ends of a range to loop over.
```liquid
{% for item in (number..number) %}
block_to_output
{% endfor %}
```
* `number..number`: the first number and the last number indicates the min and max of space we are creating to which we'll be iterating over. *These values can either be hard coded or be some var reference, they both result in the same output as you'd expect.*
**Example:**
::: details Data
```json
{
"max_count": 4
}
```
*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::
```liquid
{% for value in (1..max_count) %}
{{- value -}}
{% endfor %}
```
::: tip Output
```html
1
2
3
4
```
:::
### `reversed`
Unlike the tradition loop order, you can instead start from last to first by using `reversed`
```liquid
{% for item in array reversed %}
block_to_output
{% endfor %}
```
**Example:**
::: details Data
```json
{
"products": [
{
"slug": "product-1",
"price": 76
},
{
"slug": "YouCan",
"price": 100
},
{
"slug": "product-2",
"price": 30
},
{
"slug": "product-3",
"price": 124
},
]
}
```
*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::
```liquid
{% for product in products reversed %}
{{- product.slug -}} | {{- product.price -}}
{% endfor %}
```
::: tip Output
```html
product-3 | 124
product-2 | 30
YouCan | 100
product-1 | 76
```
:::
## Default for empty arrays
An `else` block inside a `for` loop renders when the loop has no items. This happens when the array is empty or `nil`, when `offset` skips all items, and when the first number of a range is greater than the last number.
```liquid
{% for item in array %}
block_to_output
{% else %}
default_block
{% endfor %}
```
* `item`: The item of the current loop iteration.
* `array`: Array to loop over.
* `block_to_output`: Rendered expression in every loop iteration.
* `default_block`: Expression to render when the loop has no items.
**Example:**
::: details Data
```json
{
"products": []
}
```
*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::
```liquid
{% for product in products %}
{{- product.slug -}} | {{- product.price -}}
{% else %}
There are currently no products to display
{% endfor %}
```
::: tip Output
```html
There are currently no products to display
```
:::
With `offset` and a range:
::: details Data
```json
{
"sizes": ["S", "M", "L"]
}
```
:::
```liquid
{% for size in sizes offset: 3 %}
{{- size -}}
{% else %}
No more sizes
{% endfor %}
{% for value in (3..1) %}
{{- value -}}
{% else %}
Empty range
{% endfor %}
```
::: tip Output
```html
No more sizes
Empty range
```
:::
## `forloop` object
### `length`
* Type: `number`
* Description: Total count of the iterations in the loop.
### `index`
* Type: `number`
* Description: Index of the current iteration starting from `1`.
### `index0`
* Type: `number`
* Description: Index of the current iteration starting from `0` in reverse order.
### `rindex`
* Type: `number`
* Description: Index of the current iteration starting from `1` in reverse order.
### `rindex0`
* Type: `number`
* Description: Index of the current iteration starting from `0`.
### `first`
* Type: `boolean`
* Description: Is `true` if the current item is the first item in this iteration, otherwise returns `false`.
### `last`
* Type: `boolean`
* Description: Is `true` if the current item is the last item in this iteration, otherwise returns `false`.
**Example object:**
```json
{
"length": 8,
"index": 1,
"index0": 0,
"rindex": 4,
"rindex0": 3,
"first": true,
"last": false,
}
```
**Usage example**
```liquid
{% for value in (1..4) %}
{{- value -}}
{% unless forloop.last %}
|
{% endunless %}
{% endfor %}
```
::: tip Output
```html
1 | 2 | 3 | 4
```
:::