# Iteration (Lists)

## For Loop

To loop through an array — such as a list of products or product tags — you can use the `li-for` tag. This tag automatically duplicates the associated element for each item in the array. Within the loop, you have direct access to the current object being iterated over.

For example, when looping through a list of products, you can access individual product properties using dot notation (e.g. `product.price`).

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
<div li-for="product in collection.products">
    <div li-object="product.price"></div>
</div>
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
{% for product in collection.products %}
   <div>{{ product.price }}</div>
{% endfor %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FE9E20O9QU63FJae5zSze%2Fliquify-doku-li-for.png?alt=media&#x26;token=e6f7d1f2-f8f5-4537-888c-008c710a364a" alt=""><figcaption></figcaption></figure>

For positionin&#x67;**,** you can use the `:inside` modifier. The converted code will look like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-for:inside = product in collection.products
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<div>
   {% for product in collection.products %}
      {{ product.title }}
   {% endfor %}
</div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}