I am trying to modify the main-collection-product-grid.liquid file to show the out-of-stock products to appear at the very end of the pagination on the Shopify collection page. To do that I have separated the products based on availability and ran two different loops.
First, I loop in-stock products, so they appear at top, and then the out-of-stock products which are displayed at the bottom. This works.
{% assign in_stock_products = collection.products | where: 'available', true %} {% assign out_of_stock_products = collection.products | where: 'available', false %}
The issue is, the out-of-stock products show up at the end of each page, but I want to show them at the very end of the page.
For example, I have a total 50 products and show 10 products per page. Five of them are out of stock. So, I have a total of 5 pages, and I want to show the out-of-stock product on the last page rather than at the end of each page.
Now, it's showing the out-of-stock products at the end of page 1, but what I am expecting is they should show up at the very last page.
Is it possible to achieve this with liquid?
I tried the following liquid code. It works but shows the out-of-stock products at the end of each pagination page, but I want to show them on the last page.
{%- paginate collection.products by 10 -%}
{% assign in_stock_products = collection.products | where: 'available', true %}
{% assign out_of_stock_products = collection.products | where: 'available',
false %}
<!-- Loop through in-stock products -->
{% for product in in_stock_products %} {{ product.title }}
<!-- ... out-of-stock product information ... -->
{% endfor %}
<!-- Loop through out-of-stock products -->
{% for product in out_of_stock_products %} {{ product.title }}
<!-- ... out-of-stck product information ... -->
{% endfor %} {% comment %}
{% endpaginate %}