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).

Webflow

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

Shopify

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

For positioning, you can use the :inside modifier. The converted code will look like this:

Webflow

li-for:inside = product in collection.products

Shopify

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