How do I sort "Out of Stock" products to the end of a collection?

Matt_P1
Shopify Partner
13 0 9

I want to have all out of stock products show up at the end of a collection for the customer. Is there any kind of option or trick to doing this? I've seen it on other Shopify stores before

Replies 70 (70)
vix
Shopify Staff
534 104 112

Hi Matt! 

The code to do this will depend on the theme that you are using and how the theme is set up!

Generally, there is a code to do this which can be inserted: 

  <div class="row products">
    {% for product in collection.products limit: settings.pagination_limit %}
    {% if product.available %}
    {% include 'product-loop' with collection.handle %}
    {% endif %}
    {% endfor %}
    {% for product in collection.products limit: settings.pagination_limit %}
    {% unless product.available %}
    {% include 'product-loop' with collection.handle %}
    {% endunless %}
    {% endfor %}
  </div>

This may or may not work with your theme and may need a developer to tweak to work perfect. Alternatively, you can hide out of stock variants by following our guide found here: https://docs.shopify.com/support/your-store/products/can-i-hide-products-when-they-are-out-of-stock. This includes variants too! We have a specific guide for sold out variant behavior here: https://docs.shopify.com/support/your-store/products/how-do-i-remove-sold-out-variants

If you are not comfortable with HTML changes we do have many apps that will automatically hide your sold out variants. They can be found by clicking here. 

Hope that helps!

Victoria 

Vix | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

TUNDE_O
New Member
1 0 0

Where do I insert this code?

 

Charles_Goldsw1
Shopify Expert
30 0 0

Tunde O - 

In your collection.liquid you should find a piece of code that looks like this: 

       {% include 'product-grid-item' %}

-or-

       {% include 'product-loop' %}

(or something very similar)

What this is doing is "including" a snippit of code that outputs each product on the collection page.

If you can locate that piece of code and insert this if statement so the above code is inside this if statement(these need to be added to the code):

       {% if product.available %}

       {% endif %}

 

"product.available" will only allow products into the if statement if they're available.  Out of stock is one of the variables that would make it be "unavailable" preventing out of stock items to be displayed.

Shopify Design, Development & Maintenance // 3five.com
Bailey_Hayden
New Member
2 0 1

Any way to make this work with the Supply Theme? I have added the code and tested it Various ways, only to see the products repeat on the same page.

<div class="grid-uniform">

      {% for product in collection.products %}
        
        {% if has_sidebar %}
          {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
        {% else %}
          {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
        {% endif %}
        
      
      {% if product.available %}
			{% for product in collection.products limit: settings.pagination_limit %}
    			{% if product.available %}
    				{% include 'product-grid-item' with collection.handle %}
    			{% endif %}
    		{% endfor %}
    		{% for product in collection.products limit: settings.pagination_limit %}
    			{% unless product.available %}
    				{% include 'product-grid-item' with collection.handle %}
    			{% endunless %}
    		{% endfor %}
      {% endif %}

      
      
      
      {% else %}

        <div class="grid-item">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>

      {% endfor %}

    </div>

 

karthik_bala
New Member
2 0 0

@matt p   you got solution for "How do I sort "Out of Stock" products to the end of a collection?" ?

Anthony_Grosboi
Tourist
10 0 1

I tried this on my website but it puts the out of stock items to the end of each page in the collection rather than to the end of the collection. Any idea how to fix this? This is the bit of code:

<div class="grid-uniform">

   {% for product in collection.products %}
        {% if has_sidebar %}
          {% assign grid_item_width = 'large--one-third medium--one-third small--one-half' %}
        {% else %}
          {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
        {% endif %}
      
       {% if product.available %}
          {% include 'product-grid-item' %}
       {% endif %}
      
      {% else %}

   <div class="grid-item">
          <p>{{ 'collections.general.no_matches' | t }}</p>
     </div>

      {% endfor %}

    </div>

I thought of paginating by X available products but couldn't get that to work...

Any help would be great!

Many thanks

Josh_Meckel
New Member
2 0 3

I see multiple people still having troubles with this issue. I am about to tackle the same project and I found no actual solutions. An employee needs to share some support ideas to help us.

Betsy_Foster_Br
New Member
1 0 1

I would appreciate a solution to this dilemma as well. Right now, I have many sold out items (as I sell one of a kind vintage jewelry pieces) which are randomly interspersed within my individual collections. I'd like to push them to the end of each collection, yet have them remain visible on the website until I determine when to hide/delete them. Thank you!

Nicci
Shopify Partner
3 0 1

This code is working, but it sorts out of stock item and put it at the end of each page, instead of end of the collection.
Any idea how to make sort it to the end of collection? Many thanks!