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

[Hrytsenko]

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.

[Bundler-Manuel]

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

[Hrytsenko]

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?

[Shadab_dev]

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

[Hrytsenko]

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

[Shadab_dev]

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

What theme are you using by the way??

[Hrytsenko]

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?

[Shadab_dev]

Okay so you are using a third party paid theme here.

Anyways if you wanted me to take care of this I would need Collab access unless you were on a free theme by Shopify.

It’s a paid one and I test stuffs out on a development store which doesn’t allow to edit third party themes.

I know the logic and how to work this out. I would also definitely need to look up a bit, but that won’t be that tough ,I can track it down.

So a coffe wouldn’t suffice it though, I do charge as per the project for my time and effort. So if you’re okay in $35, please reach out via personal links below for a convenient conversation and collaboration.

Just as a reference, this link will act as a review of my work with clients before: https://buymeacoffee.com/shadab_dev

Best

Shadab Ali

[wcis]

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 -%}