Introduction

One of the most common tasks when customizing your Shopify store is displaying product information dynamically. Whether you're creating a product carousel, a featured product list, or custom collection displays, knowing how to loop through products using Liquid is essential. This blog post will guide you through different ways to iterate over products in Shopify using Liquid, providing practical examples and best practices.

Understanding Liquid Loops

Liquid’s for loop is used to iterate over an array or collection of items. In Shopify, you can use this to loop through products in various contexts, such as within a collection, on the home page, or within search results. The basic structure of a Liquid for loop is:

{% for item in items %}
  <!-- Code to execute for each item -->
{% endfor %}

content_copydownload

Use code with caution.Liquid

Looping Through Products in a Collection

One of the most common scenarios is looping through products within a collection. You can do this within the collection.liquid template file or any section of a collection page template.

{% for product in collection.products %}
  <div class="product">
    <a href="{{ product.url }}">
      <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.featured_image.alt }}">
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </a>
  </div>
{% endfor %}

content_copydownload

Use code with caution.Liquid

In this example:

  • collection.products accesses all products in the current collection.

  • The loop iterates through each product object.

  • Inside the loop, you can access product properties like url, featured_image, title, and price.

Looping Through Products in a Specific Collection

If you need to loop through products from a specific collection, you can use the collections object:

{% assign specific_collection = collections['collection-handle'] %}
{% for product in specific_collection.products %}
  <!-- Your product display code -->
{% endfor %}

content_copydownload

Use code with caution.Liquid

  • Replace collection-handle with your actual collection handle.

Looping Through Featured Products

Sometimes, you'll want to loop through a curated list of products. This is often done by creating a snippet with products defined in the schema.
Here is an example in sections/featured-products.liquid:

{% for product_id in section.settings.featured_product %}
  {% assign product = all_products[product_id] %}
  {% if product %}
   <div class="product">
        <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.featured_image.alt }}">
            <h3>{{ product.title }}</h3>
            <p>{{ product.price | money }}</p>
        </a>
    </div>
  {% endif %}
{% endfor %}

content_copydownload

Use code with caution.Liquid

Here you are looping through a product list from section schema. Each product in product list will be rendered to a corresponding html.

Looping Through Products on the Homepage

To display products on the homepage, you might need to loop through products from a specific collection or using other conditional methods. You can follow same pattern as shown above to loop through featured products.

Looping Through Search Results

When displaying search results, you can loop through the results as follows:

{% for item in search.results %}
  {% if item.object_type == 'product' %}
    <div class="search-result">
       <a href="{{ item.url }}">
          <h3>{{ item.title }}</h3>
       </a>
    </div>
  {% endif %}
{% endfor %}

content_copydownload

Use code with caution.Liquid

  • This example uses a conditional check if item.object_type == 'product' to display only products.

Best Practices for Using Liquid Loops with Products:

  1. Use limit Filter: Use the limit filter to control the number of products displayed, especially when dealing with a large number of products.

    {% for product in collection.products limit: 5 %}

    content_copydownload

    Use code with caution.Liquid

  2. Include if product Check: When looping through products, always use the if product check to avoid errors if a product is missing or not valid.

  3. Optimize Image Sizes: When rendering product images, use the correct size and optimize for performance.

  4. Use Proper HTML Structure: Structure the HTML markup for accessibility and ease of styling.

  5. Handle Pagination: If you have many products, ensure that you implement proper pagination, especially in collections.

Conclusion

Looping through products with Liquid is a core part of Shopify theme development. By understanding the various scenarios and techniques, you can create more dynamic and engaging storefronts. Mastering product loops will enable you to present your product catalog effectively and improve the user experience.