Hide Out-Of-Stock Products from Collections

New Member
2 0 0

Hi,

Is there a way to automatically hide out-of-stock products from all collections using HTML/CSS coding? Our other collections all have multiple conditions, so setting a condition to only show products with inventory above 0 is not an option. 

Any advice would be much appreciated!

0 Likes
Shopify Staff
Shopify Staff
537 0 71

Hey, Laura!

Savannah here from the Shopify Guru Team. :) 

You can do that using a condition in your collections. We've got a great guide that outlines how to do that here. Take a look, and don't hesitate to reply back if you have any questions while you're implementing that guide!

Savannah | Shopify Guru
support@shopify.com

0 Likes
New Member
2 0 0

Savannah,

Thanks but I already saw that and it won't work for our site- all of our collections are set to Products Must Match - any condition, so setting a condition to make the inventory greater than zero isn't an option. Is there not a way to use HTML coding so that a product only shows if it has inventory?

Thanks!

0 Likes
Shopify Staff
Shopify Staff
537 0 71

Hey again, Laura! 

Our theme team can implement that change for you if you email us at support@shopify.com as a part of your 60 minutes of design time. If you're feeling up to the challenge yourself, you can also follow this guide

 

Let me know if I can lend a hand with anything else!

 

Savannah | Shopify Guru
support@shopify.com

0 Likes
Shopify Staff
Shopify Staff
537 0 71

Hey again, Laura! 

Our theme team can implement that change for you if you email us at support@shopify.com as a part of your 60 minutes of design time. If you're feeling up to the challenge yourself, you can also follow this guide

 

Let me know if I can lend a hand with anything else!

 

Savannah | Shopify Guru
support@shopify.com

0 Likes

For anyone else ending up here.  You can do this easily if you can code.  Bit of liquid. 

You need to edit both collection and search templates.

Find the for loop within the code

e.g. it may be something like this on the collection page:

{% for product in collection.products %}
{% include 'product-grid-item' %}
{% endfor %}

change to

{% for product in collection.products %}
  {% if product.available %}
    {% include 'product-grid-item' %}
  {% endif %}
{% endfor %}

Then you'll need to do something similar in search but it will be item not product.  If you can't figure it out from that you shouldn't be editing templates - hire an expert.

There may be some other considerations depending on the theme you're using - e.g. ajax filters etc.

★★★ Need help setting up your Shopify store? Hire me here: https://liquify.design ★★
0 Likes
Shopify Partner
3 0 2

Hi Laura,

 

Go to the product-grid-item.liquid under 'Snippets' in the theme editor.

Add the following code on top of the first <div> tag.

{% if product.available == true %}

and close the if below the last </div> tag. That is at the end of the file.

{% endif %}

 

This will do the magic!! All the best.

1 Like
Excursionist
29 0 4

Hi there,

If you are using automatic collections, then you can simply add one condition

InventoryStock -> is Greater Than > 0

Make sure "All conditions" is selected from top, so that Products matching all conditions will only be added to that collection.

However, This will not work for default collection https://yourstore.com/collections/all
And This method will also not work, when you have manual collection ( products are manually added to collection )

To deal with that you can use this app: https://apps.shopify.com/autohide-soldout-products

Happy Selling!

 

0 Likes
Tourist
24 0 0

Hi All,

 

I am trying to hide only products in collections that have "Track Quantity" ticked and "Continue Selling when out of stock" button unticked.

 

ie on our store we will oversell stock if it is still available form the supplier, but not if it is discontinued.

 

So far i have added to the below to the product-grid-item.liquid

{% if variant.inventory_policy == deny and product.available %}
<div>
xxxxx page cose xxxxx
</div>
{% endif %}

This removes the product but still leaves the placeholder for the product telling me i need to be further up the file chain... any ideas of how to achieve what i'm looking for?

 

Regards,

Ben

0 Likes
Excursionist
29 0 4
Hi Ben,



White space is because, that is how your theme is structured.

You will have to rewrite your collection liquid file, to support this. 



Example:

If you have your html like this, it will definitely show blank spaces when a product is hidden.

```



      
FIRST PRODUCT GRID


      
Second Product Grid


      
Third Product Grid






      
Fourth PRODUCT GRID


      
Fifth Product Grid


      
Sixth Product Grid



```



Instead a html like this, will work just fine:
```


      
FIRST PRODUCT GRID


      
Second Product Grid


      
Third Product Grid


      
Fourth PRODUCT GRID


      
Fifth Product Grid


      
Sixth Product Grid




```

This is just an example, to show you how this depends on theme you are using.

Another Alternative is to use an app to handle this. So no need to mess up with code. Try this app:


http://bit.ly/asp_hide_variant01



Also,If you need any help with code, feel free to contact me on skype: navneet2431







 


1 Like