I want to display out-of-stock products at the end of my collection page.
Currently, we are using an app/plugin to push sold-out items to the bottom, but I would like to achieve this without any app, using Shopify’s default features or theme customization.
My requirement:
In-stock products should appear first
Sold-out products should automatically move to the bottom
I checked collection sorting options but didn’t find a way to sort based on stock status. Is there any Liquid code, setting, or workaround to do this natively?
No.
This cannot be done in liquid and needs to be done in back-end and only for “manual” sort option by re-sorting products in collection.
When changing sort order in front-end sold products will be re-positioned according to the new sort order.
Potentially, it should be possible to achieve with free Shopify app Flow, but there is a bunch of paid apps to do that, some may be not expensive.
The July clarification is important: Liquid/JS cannot give a correct whole-collection result once pagination is involved.
If you want this dynamic and accurate across the full collection, keep the collection on manual order and have an inventory-triggered Admin API job calculate an explicit ranking. One important guardrail: do not treat “quantity 0” as an automatic push-down. Keep pre-order / Continue selling products separate, and only demote products that have no sellable variant.
Before writing the job, I would export the product data and review:
fully unavailable products vs products with at least one sellable variant
whether a sold-out product is deliberately a prominent pre-order item
which manual collection positions must be protected
That gives you a small, safe action list instead of a reordering script that later demotes products you still want to sell.
I’m testing a read-only CSV collection check for exactly this preflight (no Shopify login or changes). Happy to run it free if you want the action list.
