Move out-of-stock items to the end of collections

Technical Q&A
,
1

Hello!

I need out of stock items to automatically move to the end of the list when displaying collections, regardless of the sorting and filters selected.

What are some ways to implement this in Shopify? Does your system support this sorting at the settings level or is customization required?

Thank you! I look forward to your reply.

2

Hey there @Hrytsenko From my knowledge and research, there doesn’t seem to be an in-built Shopify feature that allows for automatically sorting the out of stock products at the end of the collection.

Basically, you’d have to sort it out manually. Check out https://help.shopify.com/en/manual/products/collections/automated-collections/auto-create and https://help.shopify.com/en/manual/products/collections/collection-layout for some helpful information

There are also some apps that could help you in doing this if you are interested. You can check out the Nada app on the Shopify App Store

3

I’m sorry but this is complete nonsense, I have in my store 20 thousand products, and every day ± 1000 to be in stock or not.
I know that on all platforms there is such a solution that the goods that are in the status of out of stock fall to the end of the list on the storefront.
It’s just that shopify has not finalized it. But there are plugins for shopify that do it all. But as far as I understand there should be a small change in the code in collection.liquid.
So I want to know if anyone has already done it?

4

Hey @Hrytsenko . @Bundler-Manuel is correct Shopify for now does not have any settings from the customizer to make sold out products show at the last, some themes may have it but not Shopify as a platform.

Nevertheless I have done a project like this one before for a client and I know the logic behind it. Please see reference of client site below.

www.eluxestore.de

Please reach out via personal links below for a convenient conversation and collaboration.

Best

Shadab

5

Hi. I’ll buy you a coffee, can you write or explain where in which file to do the settings?

6

You already kind of know it. It’s the main collection file.

What theme are you using by the way??

7

I’m using the theme https://themeforest.net/item/ocolus-classic-creative-shopify-theme/46630625?s_rank=2

but I don’t understand what and where to write it correctly?

9

Depending on your theme, you can edit the main collection list file. Here is the basic premise.

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

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

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

This code will work with Shopify’s Dawn theme. Within the unordered list UL, replace the code for the list item LI like so.

Find the UL id=“product-grid” in main-collection-product-grid.liquid. And replace the LI with this.

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


  {% for product in available_products %}
	{% assign lazy_load = false %}
	{%- if forloop.index > 2 -%}
	  {%- assign lazy_load = true -%}
	{%- endif -%}
	<li
	  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
	  {% if settings.animations_reveal_on_scroll %}
		data-cascade
		style="--animation-order: {{ forloop.index }};"
	  {% endif %}
	>
	  {% render 'card-product',
		card_product: product,
		media_aspect_ratio: section.settings.image_ratio,
		image_shape: section.settings.image_shape,
		show_secondary_image: section.settings.show_secondary_image,
		show_vendor: section.settings.show_vendor,
		show_rating: section.settings.show_rating,
		lazy_load: lazy_load,
		show_quick_add: section.settings.enable_quick_add,
		section_id: section.id
	  %}
	</li>
  {%- endfor -%}

  {% for product in sold_out_products %}
	{% assign lazy_load = false %}
	{%- if forloop.index > 2 -%}
	  {%- assign lazy_load = true -%}
	{%- endif -%}
	<li
	  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
	  {% if settings.animations_reveal_on_scroll %}
		data-cascade
		style="--animation-order: {{ forloop.index }};"
	  {% endif %}
	>
	  {% render 'card-product',
		card_product: product,
		media_aspect_ratio: section.settings.image_ratio,
		image_shape: section.settings.image_shape,
		show_secondary_image: section.settings.show_secondary_image,
		show_vendor: section.settings.show_vendor,
		show_rating: section.settings.show_rating,
		lazy_load: lazy_load,
		show_quick_add: section.settings.enable_quick_add,
		section_id: section.id
	  %}
	</li>
  {%- endfor -%}
10

I created an N8N workflow for this, see here:

You just need to set the collections to manual sort.

11

For a catalog with 20k products and around 1k stock changes per day, I would not manage this manually or rely only on theme code.

There are three practical routes:

  1. App-based collection sorting: easiest to maintain, but adds app cost.
  2. Theme-level logic: can visually push sold-out products down, but it may not work correctly across pagination, filtering, and all sort modes.
  3. Scheduled Admin API automation: periodically checks inventory status and updates sort/order rules or product tags used by automated collections.

If you need the behavior to work regardless of sorting and filters, the API/app route is usually more reliable than editing collection.liquid only.

Before choosing the implementation, I would check:

  • Are variants or whole products going out of stock?
  • Do you need this across all collections or only selected ones?
  • How often should the sort update: real-time, hourly, or daily?

Those answers determine whether a small automation is enough or whether an app is safer.