How to paginate multiple collections on the same page?

thekwoka
Shopify Partner
6 0 2

The documentation: https://shopify.dev/docs/api/liquid/objects/paginate

This suggests that multiple paginations will provide different `page_params` but this doesn't seem to be the case unless the list itself is directly the setting, which collections would not be, as the list is `products` and not the setting itself.

How would one paginate over multiple collections at one time without having them all squash eachother?

Replies 3 (3)

Liam
Shopify Staff
2731 299 769

Hi Thekwoka,

 

The behavior you've described from the `paginate.page_param` documentation is specific to paginating over arrays defined in settings or metafield list types, which is a bit different from paginating over collections. When it comes to paginating multiple collections, unfortunately, the current Shopify Liquid object doesn't inherently support multiple pagination schemes on the same page.

 

You could explore using custom URL parameters for this situation so instead of relying solely on the default page parameter, use custom parameters for each collection. For example, for a "Men's Shoes" collection, you could use `mens_shoes_page` as the parameter, and for a "Women's Shoes" collection, you could use `womens_shoes_page`.

 

It could end up looking something like this:

{% paginate mens_shoes.products by 10 as mens_products %}
  <!-- Display mens_products here -->
  <!-- For pagination links, use the custom parameter: mens_shoes_page -->
{% endpaginate %}

{% paginate womens_shoes.products by 10 as womens_products %}
  <!-- Display womens_products here -->
  <!-- For pagination links, use the custom parameter: womens_shoes_page -->
{% endpaginate %}

It's also worth noting too that when generating pagination links, you'd need to ensure that you're using the custom parameters.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

sevenminds
Shopify Partner
10 0 1

@Liam Thank you for the example. Unfortunately, I couldn't get the collection to be paginated by having any other parameter in the URL instead of page. Continuing your example, I tried using mens_shoes_pagemens_products and mens_products_page in the URL without luck. The collection always renders the first page unless the page param is present in the URL. Any idea what might be wrong?

brendamarienyc
Shopify Partner
6 1 5

Hey @Liam! I am having the same issue when trying to have a metaobject and a collection both paginate on the same page. The unique page_param for the metaobject does not seem to affect it — the metaobject paginate object inherits whatever current page the "page" param has for the collection. Is it possible to have two separate paginate objects on a page and have them work independently?