Ad

Shopify After 4 Products Add A Horizontal Break

- 1 answer

I'm trying to figure out how to add a horizontal break after 4 products within the Shopify product loop. Is this possible at all? I've looked through their documentation but it doesn't show the possibility of counting or iterating over the loop.

Currently my loop looks as follows:

{% if collection.all_products_count > 0 %}
  <div class="w-col w-col-12">
    <div class="product-feed w-clearfix">
        {% for product in collection.products %}
          <a class="product product-collection w-inline-block" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ product.url | within:collection }}">
            <div class="reveal">
              <img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" class="product-photo">
              <img src="{{ product.images.last | product_img_url: 'original' }}" alt="{{ product.title | escape }}" class="hidden">
            </div>
            <h3 class="product-title">{{ product.title }}</h3>
            <div class="product-price">{{ product.price | money }}</div>
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </a>
        {% endfor %}
    </div>
    {% assign count = paginate.pages %}
      {% for part in (1..count) %}
      <li {% if paginate.current_page == part %}class="active"{% endif %}><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ collection.url }}?page={{ forloop.index }}">{{ forloop.index }}</a></li>
      {% endfor %}
    {% else %}
    <p>Sorry, there are no products in this collection</p>
  {% endif %}
Ad

Answer

It's fair explanation that you have not gone through the documentation properly. Refer this: - https://help.shopify.com/themes/liquid/objects/for-loops

Straight forward way to get this to work is add the following line before {% endfor %}

{% cycle '','','','<hr>' %} // or <br> if you prefer

<hr> gets added every time the forloop is iterating the 4th time. More on this - https://help.shopify.com/themes/liquid/tags/iteration-tags#cycle

Ad
source: stackoverflow.com
Ad