Create a custom sort filter

I would like to request a customization for our product sorting functionality on the collection pages.

We need the following sorting options to be implemented:

  1. Discount: High to Low

    • Products with the highest discount percentage should appear first.
  2. Discount: Low to High

    • Products with the lowest discount percentage should appear first.

Additionally:

  • Out-of-stock (OOS) products should always be pushed to the bottom, regardless of the selected sorting option.

This functionality is important for improving user experience and highlighting the best deals for customers.

Please let me know if this can be implemented within your app or if any custom development is required from our side.

Looking forward to your response.

Best regards, Himanshu

Shopify does not provide this natively.

If your collections are relatively small (under 100-200 products) it’s possible to implement with some custom code in your theme.

If your collections are larger, then you’d need to resort to using 3rd party search and filter apps, like, for example Searchanize or Searchspring…

Hello @himanshu_OA Thanks for reaching out to Shopify community with your concern. Yes, it can be implement using both custom code as well as via App. Depending on your choice and exact functionality you require. Though if you can share the name of the theme you are using or the store URL so we can look into it. As most of the modern themes nowadays has inbuilt sorting feature.

This is doable with custom JavaScript on the collection page. Since Shopify does not expose discount percentage as a native sort key, the approach is to fetch the products client side, calculate the discount from compare_at_price and price, sort them in JS, then re-render the grid. Out of stock products can be pushed to the bottom in the same pass before rendering.

The catch is this works cleanly only if your collection fits within one page of results. If you have pagination and say 200+ products per collection, a pure frontend sort will only sort the visible page not the entire collection, which is misleading. For larger catalogs a search app with custom ranking rules is more reliable.

Which theme are you on and roughly how many products are in your largest collection? That will help narrow down the right approach for your setup.

shella theme my theme name mytrident.com

can it work when any sort filter selecting from webstie

Since you’re using infinite scroll, a pure frontend sort won’t work reliably here. As products load in batches, each new batch would need to be re-sorted and merged with the existing ones to maintain the correct discount order across the whole collection that gets messy fast and the UX suffers.

The cleaner path for this setup would be a search/filter app that supports custom ranking rules. Something like Searchie, Boost Commerce, or Fast Simon can handle discount-based sorting server side so the order is correct from the very first load and stays consistent as more products scroll in. OOS to bottom is also a built-in option in most of these.

Unfortunately, shopify native doesn’t have this feature. The only way is to do it is by custom coding or 3rd party app