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

Highlighted
Shopify Partner
13 0 8

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

Highlighted
Shopify Staff
Shopify Staff
516 100 97

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? Click Accept as Solution 


Highlighted
New Member
1 0 0

Where do I insert this code?

 

0 Likes
Highlighted
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
0 Likes
Highlighted
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>

 

0 Likes
Highlighted
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?" ?

0 Likes
Highlighted
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

Highlighted
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.

0 Likes
Highlighted
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!

Highlighted
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!