How to display the out of stock products to the bottom of the collection page without any plugin?

I need to display the products which are out of stock to the bottom of the collection page. I’m aware that many plugins are available.But I don’t want to use any of them.

Any suggestions would be appreciated greatly.

Thankyou

Dawn version 2.4.0

Yeah that solution I have figured out from the threads on this same subject in the community.But isn’t there some way to make it automatic using coding.

using product.available template variable can be used for hiding the out of stock products,but how to display them below the collection?

Hello @milu_balan

It is divided into two steps. First, the products under the collection need to be screened out of out-of-stock products, and then add liquid under the products.
{% for product in collection.products %}
{% if product.available == false %}
<— your product card code →
{% endif %}
{% endfor %}

Does this work for indefinite scroll pages?