Hide Out-Of-Stock Products from Collections

[Laura_Lee]

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!

[Savannah_F]

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

[Laura_Lee]

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!

[Savannah_F]

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

[Savannah_F]

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

[Liquify]

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.

[priyankatotala]

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.

[Joyce_G_Cedillo]

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!

[SydneyBen]

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

[Joyce_G_Cedillo]

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







 

[Shulebags]

Hello i tried this in my shop. But didn't work for me. Is there any advice ? 

---

@priyankatotala wrote:

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.

---

---

@priyankatotala wrote:

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.

---

---

@priyankatotala wrote:

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.

---

[udhq]

Hi Joyce. I wonder if you could elaborate on the differences in HTML structure you mentioned. I end up with blank spaces in one of my homepage sections after hiding out-of-stock products from the product-grid-item file.  I've pasted the general div structure below but I can't seem to work out the differences in your examples. Any help would be amazing. 

 <div class="widget-des text-center">
	{% include 'multilang' with section.settings.des_featured %}
  </div>
  {% endif %}
    {% endif %}
    <div class="widget-product">
      <div class="products-grid">
        {% if section.settings.collection_results_per_row1 != blank and section.settings.collection_results_per_row1 != '5' %}
          {% assign product_grid = 12 | divided_by: section.settings.collection_results_per_row1 %}
          {% assign columns = true %}
        {% endif %}
        
        {% assign product_limitation = 0 %}
        {% if section.settings.display_infinite_scrolling_homepage %}
        {% assign product_limitation = section.settings.product_list_limit | plus: 0 %}
        {% endif %}
        
        {% for product in collections[section.settings.product_list_collection].products limit:section.settings.product_list_limit_all %}
          <div class="{% if settings.product_image_border %}grid-item-border{% endif %}{% if settings.product_image_crop %} crop_image{% else %} no_crop_image{% endif %} grid-item col-xs-6 col-sm-4 {% if product_grid == 3 %}col-md-3{% endif %} {% if columns %}col-lg-{{product_grid}}{% else %}col{% endif %}" {% if section.settings.display_infinite_scrolling_homepage and forloop.index > product_limitation %} style="display:none" {% endif %}>
         {% include 'product-grid-item' %} 
          </div>
    
           {% else %}
        {% for product in (1..section.settings.product_list_limit_all) %}
         <div class="grid-item col-xs-6 col-sm-4 {% if product_grid == 3 %}col-md-3{% endif %} {% if columns %}col-lg-{{product_grid}}{% else %}col{% endif %}">
           <div class="grid-view-item no-product">
             <a href="#" class="grid-view-item__link">
               <div class="grid-view-item__image">
                 {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                 {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
               </div>
               <div class="product-title"><span>Your product's name</span></div>
              </a>
              <div class="price-box">
                <span> $250.00 </span>
              </div>
           </div>
         
        {% endfor %}
        {% endfor %}
     </div>

[WellRead]

You're my life saver

[Sugandha]

Hi,

If you are open to exploring an app you can check out Wipeout. The app helps you hide out of stock products from your storefront with just one click.

They have a Free plan to get you started.

[Sugandha]

Hi @Laura_Lee ,

If you are open to exploring app you can use  Wipeout. The app helps you hide out of stock products from your storefront with just one click. Products hidden by the app will no longer be visible to your customers on the online store, Collections or Search Results.

App has a Free plan to get you started.

[Mete]

Hey Everyone,

Hiding the out of stock items may not always be the best solution.
All of the product pages have SEO power for your store, and it is developing for a long time. When you hide a sold-out product, you lose index and links to it; this means you lose all the product's SEO power. And when you unhide it, it starts all over. So, if you will re-stock the item, you should keep out of stock products on your site - just don't put them in front of your customers.

Our app, Push Down & Hide Out of Stock, move out of stock products to the bottom of the collection. If you will not re-stock a product, you can hide it also. If an item is back in stock, it is also published automatically.
Combining these features is the best and easiest way to improve conversions by managing out-of-stock products.

You can find more details on our app page. It has an easy setup, and all processes automatic.
We have a free plan, and if it is suitable for you, you can use it for free!

If you have any questions, please don't hesitate to reach out to us at support@merchbees.com

Best,

[wholesalelinkup]

Big gold star and a smiley badge for this response - so many things that just dont work. weeks of trying things then find this post in the annals of Help here and ONE IF LOOP and fixed. You are deserving of a large drink come the end of lockdown - UPVOTE THIS ANSWER

[wholesalelinkup]

pvote this answer

[partpartpart]

Hi @priyankatotala this is awesome.

I'm just wondering if you know how to hide empty collections on sidebar/navbar?

Thank you!