How to automatically sort in-stock products before out-of-stock in Horizon theme (no app)?

Store Design
, ,
1

Hi everyone,

I’m trying to automatically sort in-stock products before out-of-stock products on both my product collections and product pages.

I’m using the Horizon theme, and it doesn’t appear to have a built-in option for this. I’ve attempted some custom code but haven’t been able to get it working correctly.

What I’m looking for:

  • In-stock products should appear first

  • Out-of-stock products should automatically move to the bottom

  • This should update automatically when inventory changes

  • I would prefer a code solution in the theme files rather than using an app

Could someone point me to the correct Liquid code or theme file where this can be implemented, or share an example of how to modify the template?

Thanks in advance!

1 Like
2

It is not really possible to do cleanly with Liquid code.

There are multiple topics on this issue, just search. And this is theme-independent.

Say, this one – Is it possible to sort a Smart Collection so out-of-stock items are last?

Of course, if your entire collection fits on one page (or less than 50 products) then liquid solution will do, but any kind of pagination will break the order.

Best option is to set your collections to manual sort and then sort products with an app.
Technically, it may be possible with the free Flow app, but would require complex configuration.

1 Like
3

I did do something like this on studio theme for collection pages.

Check this out: eluxestore.de

Best

4

Hi @threadedhen ,
Shopify doesn’t let you truly “reorder” collection products in Liquid (because pagination and sorting happen before Liquid runs).
So you can’t permanently change the order at the backend level via theme code alone.

But you can achieve the desired result visually on the frontend.

Split In-stock and Out-of-stock

Replace that loop with this:

{% assign in_stock_products = collection.products | where: "available", true %}
{% assign out_of_stock_products = collection.products | where: "available", false %}

{% for product in in_stock_products %}
{% render 'card-product', product: product %}
{% endfor %}

{% for product in out_of_stock_products %}
{% render 'card-product', product: product %}
{% endfor %}
5

Thank you for your response! Exactly what loop am I replacing? Here are the urls I am looking at:

6

If using shopify’s search & discovery app check the settings for such options first.

Your a business don’t shoot yourself in the foot by trying to avoid doing things properly and cause problems at the same time.
You really need to do this on the backend with a manual collection either sorted with shopify-flow or mechanic app.
Themes are a frontend for customers avoid shuffling responsibilities out of cheapness on to your customers and their hardware it can cost you way more money than your imagining saving.

7

Thank you! Do you have a code?