Ad

Iterating Products In Shopify Product-loop.liquid

- 1 answer

I have a problem with displaying a collection of products with a help of snippet product-loop.liquid in Shopify. The code is basically the following.

{% capture collection_handle %}{{ product-loop | handleize }}{% endcapture %}
{% capture url %}{% if collection_handle != "" %}/collections/{{ product-loop }}{{ product.url }}{% else %}{{ product.url }}{% endif %}{% endcapture %}
<div class="product span3 {% if template == 'collection' %}adaptive-grid{% endif %}">



</div>

{% unless template contains 'collection' %}
{% cycle 'clear-product-loop': '', '', '', '<div style="clear:both;"></div>' %}
{% endunless %}

The result is one row is 2 items or 3 items or 4 items (depending on screen resolution) and the next row is always 1 item and this pattern is repeating all the time. What is wrong?

EDIT: Some related CSS

.row { margin: 0 0 30px 0; }
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { display: block; float: left; margin: 0 15px; }
.inner-left { margin-left: 0px !important; }
.inner-right { margin-right: 0px !important; }  


.span1 { width: 53px; }
.span2 { width: 136px; }
.span3 { width: 219px; }
.span4 { width: 302px; }

.span3.adaptive-grid {width: 219px;}
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}
Ad

Answer

Finally I resolved my problem by removing lines like

.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}

from Shopify styles file (Minimal theme). Now the grid of products is displayed ok for different resolutions without breaking the lines.

Ad
source: stackoverflow.com
Ad