Hide sold out or out of stock products from collection pages
How to hide sold out or out of stock products is easy, if you know HTML and CSS, and have a basic understanding of Liquid. And doesn’t require any app. Just copy and paste a bit of code and you’re all set! If you don,t know coding then you can follow the shopify official instruction here.
It may be something like this on the collection-template.liquid in the theme file:
| {% for product in collection.products %} {% include 'product-grid-item' %} {% endfor %} |
change it to:
| {% for product in collection.products %} {% if product.available %} {% include 'product-grid-item' %} {% endif %} {% endfor %} |
And that’s it!
If you have any trouble, feel free to leave a comment below and I’ll do my best to help.
How does this interact with pagination?
{% paginate collection.products by 12 %}
Is your theme doing this? If so seems like the above solution leaves a lot of holes on the pages.
Show only active products, when I clicks to out of stock then only (sold out )products have been shown