How to move sold out products to the end of the Shopify collection list for free 🔚

If you have products that are currently out of stock, it can be beneficial to display them at the end of the product list in your collection. This way, you ensure that customers see the available items first, followed by the out-of-stock products. In this article, I will show you how to easily achieve this by modifying the code in the collection template on Shopify.

Why move sold-out products to the end? 🤔

Customers often want to see available products and make quick decisions about what they can buy. Having sold-out products at the top of the list can be frustrating and time-consuming. Even if a product is sold out, it may still be important to display it, but it shouldn’t be a priority. That’s why it’s a good idea to place sold-out items at the end of the list.

What are your options?

• Using apps from the App Store 💰 There are apps on the Shopify App Store that allow sorting products by availability. However, most of them are paid and create several new manual collections in your admin, which can become very cluttered and less reliable over time.
• Template modification 👨‍💻 A more reliable option is modifying your template. In our guide, we’ll show you how to do it. This approach is faster, more efficient, and will save you monthly fees for paid apps.

How to modify the template for free?

1. Copy the code below 👇🏻
2. Open your collection template, often named something like collection.liquid, main-collection.liquid, or main-collection-product-grid.liquid.
3. Find where the collection products are being iterated over, this code usually starts like this: {% for product in collection.products %}.
4. Replace this code with the new one, save the file, and test it.

{% assign available_products = collection.products | where: 'available' %}
{% assign out_of_stock_products = collection.products | where: 'available', false %}
{% assign products = available_products | concat: out_of_stock_products %}

{%- for product in products limit: section.settings.products_count -%} 
<!-- Your code for displaying products -->
{%- endfor -%}

This code splits the products into available and sold-out, then merges them back into a single list. Sold-out products will appear after the in-stock ones.

All done! 🎉

This modification will help keep your collections organized and user-friendly. Customers will be able to browse available products more easily without being distracted by sold-out items.

If you want to ensure that sold-out products don’t appear in collections at all, we also have a detailed guide for that. In the article How to completely hide sold-out products in Shopify collections, you’ll learn how to make this adjustment just as easily and quickly by modifying the template.