Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
I'm trying to modify a collection page on my Shopify theme which displays items in the <div id="product loop">...</div>
I want to loop through in-stock items then loop through out-of-stock items. (liquid code and html inspector below)
However, something strange is happening:
The last iteration of my in-stock loop isn't occurring until after the entire out-of-stock loop finishes. I added html tags to the code to try and track the issue.
How can a product with my added <!-- avail --> comment be after the <!-- END Available Products --> when the comment is nested inside the loop?
Annotated inspector window
<div id="product-loop" {% if settings.collection-sidebar %}class="desktop-10 tablet-5 mobile-3"{% endif %}> {% assign products-per-row = settings.products-per-row %} <!-- Available Products --> {% for product in collection.products %} {% assign outofstock = true %} {% for variant in product.variants %} {% if variant.inventory_quantity > 0 %} {% assign outofstock = false %} {% endif %} {% endfor %} {% if outofstock == false %} {% if current_tags != null %} <!-- Tag section removed for brevity --> {% endif %} <div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}"> <!-- avail --> {% include 'product-listing' %} {% include "panda-swatch" %} </div> {% endif %} {% endfor %} <!-- END Available Products --> <!-- Unavailable Products --> {% for product in collection.products %} {% assign outofstock = true %} {% for variant in product.variants %} {% if variant.inventory_quantity > 0 %} {% assign outofstock = false %} {% endif %} {% endfor %} {% if outofstock == true %} {% if current_tags != null %} <!-- Tag section removed for brevity --> {% endif %} <div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}"> <!-- no avail --> {% include 'product-listing' %} {% include "panda-swatch" %} </div> {% endif %} {% endfor %} <!-- END Unavailable Products --> </div>