How To Sort Out Of Stock Products To The Bottom Of A Collection without using any apps？

[hem1]

I want to put all out of stock products in the bottom of each collection without using any apps. It is better to have the custom code to fix this problem.

My website :https://healthexpress-mart.com/

[oscprofessional]

Hello, @hem1 

Reordering products in collections in Shopify without using apps does require some custom code. Here's a step-by-step guide on how to achieve this:

1. Backup Your Theme: Before making any changes, it's crucial to backup your theme to ensure you can easily revert if something goes wrong.

2. Access Your Theme Code: Go to your Shopify admin, navigate to "Online Store" > "Themes," and click on "Actions" > "Edit code" for the theme you want to modify.

3. Locate the collection.liquid File: In the "Sections" or "Templates" folder (depending on your theme), look for the collection.liquid or collection-template.liquid file. This is the file responsible for displaying products within collections.

4. Mo

   {% assign sorted_products = collection.products | sort: 'available' %}
   
   <ul>
     {% for product in sorted_products %}
       <li>
         {{ product.title }}
         <!-- Add more product details here -->
       </li>
     {% endfor %}
   </ul>

   dify the Liquid Code: In this file, you'll need to modify the code to reorder products so that out-of-stock products appear at the bottom of the collection. Here's a basic example of how you can do this:

In this example, we use the sort filter to sort the products by availability, with out-of-stock products appearing at the bottom. You may need to adjust the code to fit your specific needs and the structure of your collection template.

1. Save Changes: After making the necessary modifications, save your changes.

2. Test Your Store: It's important to thoroughly test your store to ensure that the products are now ordered correctly within collections. Check both in-stock and out-of-stock products to verify that they appear in the desired order.

3. Publish Your Changes: Once you're satisfied with the changes and have confirmed that they work as expected, click "Save" and then "Publish" to make the changes live on your store.

Please note that this is a basic example of how you can reorder products in a collection. Depending on your theme and specific requirements, the code may need to be adjusted. Additionally, custom code modifications can be sensitive, so it's a good practice to document your changes and keep your theme backups up to date in case you need to revert any changes.

[hem1]

Hi, Thank you for your reply. After I copied the code to the "collection-list.liquid", there is nothing happened, the out of stock products are still in the top...

[Kenny23]

Hi @hem1, 

I understand you are looking for a solution to push out-of-stock products to the bottom of collections in Shopify, without needing an app. Since the previous code sample provided using theme templates and filters did not provide an immediate solution for your needs. I would like to suggest another solution.

Instead of a custom code approach, I recommend using the Merchbees Push Down & Hide Out of Stock app. Here is how it works:

• When a product goes out of stock, the app automatically moves it to the bottom of the collection.
• When an out-of-stock product gets replenished with inventory, the app will reposition it back to its original location based on the collection's chosen sorting type (manual, best-selling, title, etc).
• This all happens seamlessly in the background without needing to modify any theme files.
• The app also provides configuration options to fully hide out-of-stock products, push sold-out variants to the bottom, and control where unavailable products appear.

In summary, the Merchbees Push Down & Hide Out of Stock app provides an automated solution to reorder products based on availability, without requiring custom code changes. I recommend this app to deliver the dynamic reordering functionality you need. Please let me know if you have any other questions!

Best Regards, 
Kenny 

[andreasvirkus]

You'll have to use the `where` filter twice and then `concat` the two arrays together. I also wrote a small blog post about it:

https://andreasvirkus.me/thoughts/sort-shopify-products-by-availability/

[Miguel3403]

I have tried that in my theme and not working already tried in multiple places 

{%- liquid
assign per_page = section.settings.rows | times: section.settings.columns
assign paginated = false
if section.settings.display_type == 'all'
assign paginated = true
endif
-%}

{%- capture image_sizes -%}
(min-width: 720px) calc(calc(100vw - calc(2 * clamp(18px, 3.3vw, 3.3vw))) / {{ section.settings.columns }}),
calc(calc(100vw - calc(2 * clamp(18px, 3.3vw, 3.3vw))) / {{ section.settings.mobile_columns }})
{%- endcapture -%}

{% paginate collections by per_page %}
<div
class="
list-collections
list-collections--mobile-per-view-{{ section.settings.mobile_columns }}
list-collections--per-view-{{ section.settings.columns }}
list-collections--item-label-style-{{ section.settings.label_style }}
page
{% if settings.enable_section_animations and section.settings.enable_animation %}
animation
animation--list-collections
{% endif %}
"
data-section-id="{{ section.id }}"
data-section-type="list-collections"
data-collection-columns="{{ section.settings.columns }}"
data-mobile-collection-columns="{{ section.settings.mobile_columns }}"
>
<div class="list-collections__inner page__inner">
<header class="list-collections__header page__header">
<h1 class="list-collections__heading ff-heading fs-heading-1-base ta-c">{{ page_title }}</h1>
</header>

<div class="list-collections__grid">
{%- if section.settings.display_type == 'all' -%}
{%- for collection in collections -%}
{%- assign available_products = collection.products | where: 'available', true -%}
{%- assign out_of_stock_products = collection.products | where: 'available', false -%}
{%- assign sorted_products = available_products | concat: out_of_stock_products -%}

{%- for product in sorted_products -%}
{%
render 'collection-item' with
collection: product,
aspect_ratio: section.settings.collection_listing_aspect_ratio,
label_style: section.settings.label_style,
overlay_text_color: section.settings.overlay_text_color,
overlay_title_background: section.settings.overlay_title_background,
overlay_title_background_style: section.settings.overlay_title_background_style,
image_sizes: image_sizes
%}
{%- endfor -%}
{%- endfor -%}
{%- else -%}
{%- for collection_item in section.settings.collection_list -%}
{%
render 'collection-item' with
collection: collection_item,
aspect_ratio: section.settings.collection_listing_aspect_ratio,
label_style: section.settings.label_style,
overlay_text_color: section.settings.overlay_text_color,
overlay_title_background: section.settings.overlay_title_background,
overlay_title_background_style: section.settings.overlay_title_background_style,
image_sizes: image_sizes
%}
{%- endfor -%}
{%- endif -%}
</div>

{% if paginated %}
<div>
{% if paginate.pages > 1 %}
{%
render 'pagination' with
paginate: paginate,
type: 'general.pagination.collections',
show_item_count: true
%}
{% else %}
{%
render 'pagination' with
paginate: paginate,
type: 'general.pagination.collections',
display_paginate_item_count_only: true
%}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endpaginate %}

[lootbags]

Can someone clarify for me exactly where to insert this bit of code on collection-liquid section? 

Thanks.

[erik_lindberg_s]

You can split up the products loop in two. First run all avaliable products then all that are not.

Open main-collection-product-grid.liquid  and find the <ul id="product-grid>... Then copy the for loop and paste the new one after the first one. The first forloop should only run through available products. Like so:

{%- unless product.available -%} {%- continue -%} {%- endunless -%}

The next one only the NOT available products.  Like so:

{%- if product.available -%} {%- continue -%} {%- endif -%}

All put together it could look something like this:

<ul
              id="product-grid"
              data-id="{{ section.id }}"
              class="
                grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
                grid--{{ section.settings.columns_desktop }}-col-desktop
              "
            >
              {%- for product in collection.products -%}
                {%- unless product.available -%} {%- continue -%} {%- endunless -%}
                {% 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 product.selected_or_first_available_variant.inventory_quantity <= 0 %} grid__item--sold-out{% 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 collection.products -%}
                {%- if product.available -%} {%- continue -%} {%- endif -%}
                {% 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 product.selected_or_first_available_variant.inventory_quantity <= 0 %} grid__item--sold-out{% 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 -%}
            </ul>