Hi, need help on something technical.
We have a requirement where when searching for a product and Shopify shows the results, we want this hierarchy for the results: in stock > out of stock but continue to sell > truly out of stock. The theme by the way is Alpha. Take note also that the theme has pagination, which shows 24 products at a time and shows more when clicking “Show More” button at the bottom, and lazy load. I’ve seen a few frontend code base solutions where we modify the main-search.liquid page but it doesn’t work well due to the pagination and lazy load.
We’re hoping to achieve this without using an app. If in case there is a similar case already posted on this community, please kindly link here. Would appreciate any help, thanks everyone!
I’ve seen similar requests before, the main issue is that Shopify’s search doesn’t natively support dynamic sorting by stock status, especially with lazy loading and pagination. Editing main-search.liquid alone usually breaks when you click “Show More.”
Summary
one way around it is to add a metafield to track stock status, like (in stock), backorder, or (out of stock), then create a custom collection or modify your search results to sort by that metafield. For lazy loading, you can intercept the “Show More” button with JavaScript and fetch the next batch via Ajax, then sort it before appending so the hierarchy stays consistent.
It’s definitely doable, but it requires careful coding to avoid breaking the pagination or lazy load. If you want, I can sketch a rough approach specifically for the Alpha theme to maintain the stock hierarchy even with “Show More.”
Hello @kenryan803 ,
I hope you are well!
Basically, you need to do the setup Pre-order the logic work same for Advance ordering, where customers are allowed to order in advance and can fulfill the item later. To know more please check the video by visiting - https://www.youtube.com/watch?v=lABfzDwck6c
The below should help, however, “out of stock but continue to sell” products are not treated separately from in stock ones.
Hey, thank you for your reply. Yes I agree with what you said. I did try a few “frontend” approach but the pagination and lazy load is hindering it and breaking them. If you don’t mind, can you share the rough approach you mentioned here? Appreciate it!
Sure thing. Here’s the general structure I’d follow. First, add a product metafield for stock state like custom.stock_status that stores values such as in_stock, continue_selling, and out_of_stock. You can populate it using inventory data or a short script that updates it through the Storefront API.
Next, make sure the search JSON endpoint (search.json) returns that metafield value for each product. If the Alpha theme uses predictive search, it can also be accessed inside predictive-search.js.
Then, in the Alpha lazy-load script, the “Show More” button triggers an AJAX call to load the next 24 products. You intercept that call, reorder the returned products array based on the metafield hierarchy (in_stock first, then continue_selling, then out_of_stock), and append the sorted results back into the product grid.
This way, every new batch of products respects the same hierarchy without breaking pagination or lazy loading.
