Filter collections list before pagination

Technical Q&A
, , , ,

Topic summary

Goal: Use a collections list as a “Shop by” page that filters by Influencer, Brand, Size, and gender (Womens/Mens) using collection metafields, then paginate the results.

Current approach: Client-side filtering with JavaScript that toggles CSS classes to show/hide items. All collections are rendered (some multiple times) on page load and then hidden, causing severe performance issues with hundreds of collections.

Requested solution: Server-side filtering in Shopify Liquid before pagination. Specifically, read URL parameters (query string) in the template, filter collections by matching metafields to up to two provided params, and then use the paginate feature to output only the matching subset.

Technical context:

  • Liquid: Shopify’s templating language.
  • Metafields: Custom fields attached to collections for attributes like influencer/brand/size.
  • Paginate: Liquid tag to split output into pages.
  • URL params: Query string values (e.g., ?filter=influencers&type=all) used to drive filtering.

Artifacts: A preview link is provided; no code snippets. No images/videos central to understanding.

Status: No answer or consensus yet; the question remains open without a confirmed method or workaround.

Summarized with AI on January 4. AI used: gpt-5.
1

Hi

We are using the collections list page as a “Shop by” page, where you can filter the collections list by Influencer, Brand & Size and then by Womens, Mens etc (these filters are stored as collection metafields).

At the moment it is done via javascript by adding a CSS class to show a collections list when the corresponding button is clicked. The problem with this is that the page is very slow as we have hundreds of collections being rendered multiple times on the page load but just being hidden by CSS.

Is there a way to filter the collections to use within the paginate feature? So get the URL params in liquid, and then paginate the collections where the metafields match the 2 URL params provided?

Here is the page we are trying to speed up:

https://bt4zzfkdc9k73kma-24815934.shopifypreview.com/collections?filter=influencers&type=all