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

Store Design
8

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:


              {%- for product in collection.products -%}
                {%- unless product.available -%} {%- continue -%} {%- endunless -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- 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
                    %}
                

              {%- endfor -%}

              {%- for product in collection.products -%}
                {%- if product.available -%} {%- continue -%} {%- endif -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- 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
                    %}
                
              {%- endfor -%}