Hide Products without Inventory on Collection Page with Theme Enable Disable Button – Zealyn
This technique was first used on https://zealyn.myshopify.com/collections/all
CALCULATE TOTAL INVENTORY
product-loop.liquid
Open product-loop.liquid and add the following code at the very top of the page.{% assign showinventorybase = p.variants.first.inventory_quantity | times: 1 %}
{% assign showinventory = p.variants[0].inventory_quantity | times: 1 %}
{% assign showinventory1 = p.variants[1].inventory_quantity | times: 1 %}
{% assign showinventory2 = p.variants[2].inventory_quantity | times: 1 %}
{% assign showinventory3 = p.variants[3].inventory_quantity | times: 1 %}
{% assign showinventory4 = p.variants[4].inventory_quantity | times: 1 %}
{% assign showinventory5 = p.variants[5].inventory_quantity | times: 1 %}
{% assign inventoryTotal = showinventorybase | plus: showinventory1 | plus: showinventory2 | plus: showinventory3 | plus: showinventory4 | plus: showinventory5 %}
HIDE INVENTORY IF <= 0
product-loop.liquid
Still in product-loop.liquid find product wrapping div. If using the OLM base theme the div should have class="{% include '__thumbnail-span' %}" somewhere. Add the following code inside the div.style="{% if settings.hide-products-without-inventory %}{% if inventoryTotal <= 0 %}display:none{% endif %}{% endif %}"
ADD ON OFF BUTTON
settings_schema.json
To enable the code on and off open settings_schema.json, navigate to the collections section and add the following code: {
"type": "checkbox",
"id": "hide-products-without-inventory",
"label": "Hide products without inventory",
"default": true
},
Thats it! Now when the feature is enabled, products without inventory will be hidden on the collection pages.