Shopify Question posted in
The Shopify help center can be found here.

How to create a new div row after every 3rd product in liquid? – Shopify

How do I wrap my products in a new <div class="row"></div> after every 3rd product? I have looked at using the cycle iteration tag but can’t quite figure out how to implement properly in my code.

        {% for product in collection.products %}
            <!-- product -->
            <div class="col-xs-6 col-md-4 product">
                <a href="{{product.url}}" class="product-link"></a>
                <!-- / product-link -->
                <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
                <!-- / product-image -->

                <!-- product-details -->
                <div class="product-details">
                    <h3 class="product-title">{{product.title}}</h3>
                    <h6 class="product-price"> {{ product.price | money }}</h6>
                </div><!-- / product-details -->
            </div><!-- / product -->
          {% endfor %}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Worked it out, if there are any better ways/suggestions I would be happy to hear them :)

    {% for product in collection.products %}
    {% cycle '<div class="row">','','' %}
            <!-- product -->
            <div class="col-xs-6 col-md-4 product">
                <a href="{{product.url}}" class="product-link"></a>
                <!-- / product-link -->
                <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
                <!-- / product-image -->

                <!-- product-details -->
                <div class="product-details">
                    <h3 class="product-title">{{product.title}}</h3>
                    <h6 class="product-price"> {{ product.price | money }}</h6>
                </div><!-- / product-details -->
            </div><!-- / product -->
     {% cycle '','','</div>' %} 
{% endfor %}

  2. 0

    You might use a modulo calculation applied on forloop.index then apply an if statement according to modulo result. 

    {% assign modulo = forloop.index | modulo : 3 %}
{% if modulo == 0 %}
<div class=«row»>
{% endif %}

    https://help.shopify.com/themes/liquid/filters/math-filters#modulo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search