Iteration (Lists)

For Loop

When you need to iterate over an array, such as a list of products or product tags, you can employ the li-for tag. This tag will duplicate the attached element. Within a loop, you have access to the object you're iterating through.

For instance, when looping through a list of products, you can retrieve all the product information using dot notation (e.g. product.price).

Webflow

li-for = product in collection.products

Shopify

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

For the positioning, you can use the :inside modifier. Then 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>