A developer is trying to create a paginated shop page that displays only collections meeting specific criteria: those containing products OR having a ‘fixedCollection’ metafield set to true. The goal is to show exactly 20 collections per page.
The Problem:
The current implementation paginates through 20 collections from the total collection set, then filters them with conditional logic. This results in pages displaying fewer than 20 collections since some are filtered out after pagination occurs.
Proposed Solutions:
One responder suggests Shopify theme code doesn’t support filtering collections before pagination, recommending either listing all collections with JavaScript-based “load more” functionality or using a third-party app.
Another suggests pre-filtering by looping through collections to build a custom array of qualifying collection keys, then paginating that array.
However, it’s noted that custom arrays cannot be paginated in Shopify Liquid.
Current Status:
The developer plans to implement a JavaScript “load more” solution with existing lazy-load for images, and will explore apps if performance remains unsatisfactory. The discussion remains open without a definitive Liquid-based solution.
Summarized with AI on October 31.
AI used: claude-sonnet-4-5-20250929.
Hi! I’m working on a new store theme but am getting stuck on one thing. I want to create a shop page that
Displays collections, but not all of them: I want to show only the collections that a) contain products, OR b) that have a certain metafield set to ‘true’ (= a metafield indicating it is a ‘fixed collection’ i.e. should be displayed regardless of whether the products in it are out of stock)
Paginates these collections by 20 (because there are a lot of collections in the store - paginating them decreases load time)
This is what I’ve got (simplified for explanation purposes):
{% paginate collections by 20 %}
{% for collection in collections %}
{% assign fixedCollection = collection.metafields.collections.fixedCollection %}
{% if collection.all_products_count > 0 or fixedCollection == true %}
// collection contents (title, image etc.)
{% endif %}
{% endfor %}
{% if paginate.pages > 1 %}
{% include 'pagination-custom' %}
{% endif %}
{% endpaginate %}
The issue I’m having is that each page doesn’t always contain 20 collections - it’s usually less. Because it loops through 20 collections each time but only displays the ones meeting the conditions set by the ‘if’ statement.
Is there a way to limit the for-loop in some way, so it only loops through certain collections? Or does someone have a better solution for this?
Thank you for your response. That’s a shame to hear! My plan B was to indeed list all of them and then use Javascript for load more (display the first 20 on page load, load 20 each time ‘load more’ is clicked) which should also save somewhat on page load time. Or perhaps an app can help, will have a look around - if you have any specific suggestions, let me know
If you use JS to load more, it will still have to load the whole thing first, then you just use the display block to show it, it just saves a bit of load time. If you can do it with ajax to load images, that would be great. It will be a complicated request and you need to hire an expert for it.
Or simply, you can learn the app, it will be faster. And I really don’t know much about the app, so I can’t advise you in detail.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Couldn’t you do it by looping through collections first, appending a string with the collection keys separated by commas, then use “split” to break that string into a new array of collection keys and paginate those?
