Is it possible to sort a Smart Collection so out-of-stock items are last?

Hello,

I would like to sort my collections so that the sold items show at the end of the search results. I am using the Search & Discovery app to sort the storefront search in this manner, but it doesn.t affect the Collections sort order.

Would it be better to modify the code to achieve this? Or find an app and what apps are available for this?

TIA

Nope. No built-in way and sorting within theme code would not work due to pagination.

There are apps which will sort your collections like this if you set sort to manual.

Can use Flow to do that as well for free.

Besides Flow, do you know the name of the apps that will achieve this?

Sorry, I do not remember the one I’ve seen in action. Just search app store for “collection sort” though?

Hi @joanyeb , I agree with @tim_tairli , it doesn’t seem to be a built-in way to accomplish this in Shopify at the moment however 3rd party apps like Nada can help you out with this.

From their Shopify App Store page they seem to address your exact need

Automatically move sold-out products to the end of your collection

Can someone walk me through how I would use Flow to sort collections so sold products appear at the end?

Oops, sorry, the mutation necessary for this is not compatible with Flow (now?).
Quite some time ago I’ve used the “Send HTTP request” action for this, but it’s complicated…

If looking for general automation apps, Mechanic can do this – https://tasks.mechanic.dev/auto-sort-collections-by-inventory-levels, or even https://tasks.mechanic.dev/move-out-of-stock-products-to-the-end-of-a-collection but this is also not very noob-friendly app if needs to change the task.
And it’s paid.

Hi @joanyeb

STEP 1 — Open file

Go to:

Online Store → Edit Code → Snippets → card-product.liquid
AND
sections/main-collection-product-grid.liquid (or similar)

Your theme may use:

collection-product-grid.liquid
or
product-grid.liquid

STEP 2 — Add this sorting logic BEFORE the product loop

Search for this part:

{% for product in collection.products %}

Replace it with:

{% assign in_stock = collection.products | where: 'available', true %}
{% assign out_of_stock = collection.products | where: 'available', false %}
{% assign sorted_products = in_stock | concat: out_of_stock %}

{% for product in sorted_products %}

Best regards,
Devcoder :laptop:

Yes, Shopify’s Search & Discovery can reorder your search results on the storefront, but it doesn’t change how products are sorted within a Collection page. So if your goal is to collection should show sold out / out of stock products at the bottom, then Search & Discovery won’t affect that, you’ll need a theme code change.

In order to modify the code you need to follow steps.

Go to Shopify Admin >> Online Store >> Edit Code >> collection.liquid

In the collection.liquid or where the filtering is render then you’ve to paste the following code that shared below.

{%- assign in_stock = collection.products | where: "available", true -%}
{%- assign out_of_stock = collection.products | where: "available", false -%}

{%- assign sorted_products = in_stock | concat: out_of_stock -%}

<ul class="grid grid--collection">
  {% for product in sorted_products %}
    {% include 'product-card', product: product %}
  {% endfor %}
</ul>

If you looking for a easier way than coding, you’ve to use the Shopify app for this.

You can explore the apps that listed below.

  • Collection Sort + Filter
  • Smart Product Filter & Search
  • Boost Product Filter & Search
  • Search & Filter + Sort

These apps let you define sort orders like “In Stock → Best Sellers → Price → … → Out of Stock” without code.

P.S: If you could share the store url, then I can take a look into it and provide you the exact code.

Thanks

Thank you for the insight! I would love to have the exact code (and the filenames it pertains to) for the solution. The store url is www.burtonsgemsandopals.com.

I guess we’ve already discussed pagination – Is it possible to hide sold products from a manual collection?

Sorting products with liquid will only make your sold products go to the bottom of each page.
So, this may be even like this: page one has all sold-out products, page two has some available products at the top of the page and some sold products at the bottom, then page three may have all products available.

I’d also be very cautions of apps which replace default collection display, like Boost PFS. Your pagespeed will be negatively affected.

Could specify where in the liquid file this code should go and/or what lines it should replace?

It is possible to hide out of stock items - which might help. You need to add a condition on each collection page to show inventory stock above 0.

Yes, that works to completely remove the sold products from the storefront, but my intention is to have the sold products still show on the storefront, just sorted so that the available products are listed first.

I’m @PaulNewton shopify-partner with a range of merchant solutions.

Most all the other stuff in here using only liquid is bot noise with bad tradeoffs and gotchas that don’t actually work.

The sanest way around this is either automations to create the manual collection using the api.
Or to have TWO collections, the smart collection, then a manual collection created by automations referencing products in the smart-collection but sorting the products in the wanted way.
With the manual collection being the one listed on the storefront.

If your finally ready for actual solutions and have a budget then reach out to me for automation services to stop spinning your wheels and get this done properly.

CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc