---
url: https://docs.youcan.shop/themes/tags/cycle.md
---

# `cycle`

Cycle between a list of values and output each value one at a time for each time the `cycle` tag has been called.

```liquid
{% cycle first_value, second_value %}
```

* `first_value`: Outputted value when cycle is called for the `first` time.
* `second_value`: Outputted value when cycle is called for the `second` time.

**First example:**

```liquid
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
```

::: tip Output

```html
one
two
```

:::

**Second example:**

```liquid
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
```

::: tip Output

```html
one
two
three
one
```

:::

## Named cycles

The `cycle` tag will always default to a default name when no name is specified, let's call that name `default`.
This is crucial to how this tag functions, a `cycle` is identified by the content it's cycling through and the name.

In cases where we want to have multiple parallel cycles that are both going through the same items without one
interfering with the other, we'll have to explicitly set a name for the cycles in order to identify each cycle scope.

```liquid
{% cycle name: first_value, second_value %}
```

* `name`: Unique cycle name, to identify the iteration of each cycle.
* `first_value`: Outputted value when cycle is called for the `first` time.
* `second_value`: Outputted value when cycle is called for the `second` time.

**Example:**

```liquid
{% cycle 1: 'one', 'two', 'three' %}
{% cycle 2: 'one', 'two', 'three' %}
{% cycle 1: 'one', 'two', 'three' %}
{% cycle 2: 'one', 'two', 'three' %}
```

::: tip Output

```html
one
one
two
two
```

:::

## Values with a colon

A quoted value can contain a colon. The `cycle` tag reads a name only before the first value.

Example:

```liquid
{% cycle '10:00', '14:00' %}
{% cycle '10:00', '14:00' %}
{% cycle 'pickup': '10:00', '14:00' %}
```

::: tip Output

```html
10:00
14:00
10:00
```

:::

## Use within a loop

It's possible to use a `cycle` within a loop (that includes both default and named ones) and expect the same result like
what you'd be seeing if the tag was used outside a loop.

**Example:**

```liquid
{% for index in (1..4) %}
  {% cycle 'one', 'two', 'three' %}
{% endfor %}
```

::: tip Output

```html
one
two
three
one
```

:::