Personalized checkout and custom promotions with Shopify Scripts
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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>
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022