Shopify’s paginate object and collection filtering

Nadine Thery

·

Follow

Published in

UmamiTech Blog

·

4 min read

·

Aug 19, 2022

--

Listen

Share

If you are using Shopify out-of-the-box pagination there are a couple of things you need to know in advance especially if you want to hide items, like out-of-stock items or items with a certain tag.

❓ Can’t I just paint all the items?

Erm, no. Letting the performance issue that painting hundreds of items at a time can cause aside, Shopify just won’t let you. Quoting Shopify’s doc:

Since for loops are limited to 50 iterations per page, you need to use the paginate tag to iterate over an array that has more than 50 items

Next question.

❓ Can I paginate any array in Shopify?

If you want to use the paginate object that Shopify provides out-of-the-box there are only certain Shopify array-like objects you can use it with, these are the most frequent:

• Collections
• Articles and articles comments (from a blog)
• Customer addresses and orders
• Search results
• Pages

Check here for the complete list.

So, if you want to have pagination outside of any of these objects, you will surely have to create your own pagination service or functionality through AJAX calls and JS post-treatment.

❓ Can I change the paginate size?

Up to a certain extent, yes. You can achieve this by changing the number of items per page (up to 50)

Shopify calculates the number of pages according to the total size of the object you are iterating through and the number of items you want per page.

So, if you have a collection with 60 products and ask for 30 items per page, Shopify will return a pagination of 2 pages of 30 items each.

❓ I want to apply filters to a collection before paginating, can I do that?

You may encounter this case whenever you want to hide elements from the results, like out-of-stock items or elements with a certain tag.

You could hide products after the pagination is calculated, by just filtering the products returned from the view, like so:

{% assign products_per_page = 30 %}{% paginate collection.products by products_per_page %}    <div id="product-grid" class="grid m30">
       {%- liquid
         for product in collection.products
            assign can_purchase = false
            if product.available
               assign can_purchase = true
            endif
         endfor
       -%}   </div>   {% render 'comp-paginator', paginate_object: paginate %}
  
{% endpaginate %}

However, this will result in a page with a variable number of items. It could be 30 items, as requested, or less since we are removing the items after the pagination took place.

The truth is that paginate works directly over the collection, and considers all active products in your sales channel. This means all products except for drafts and archived for that particular sales channel.

That said, if you want to adjust the size of the pagination to your collection with certain restraints, like availability or tags you have three ways:

1. Apply the filter in the collection through Shopify admin: if you can find a way to combine the filtering conditions of your collection for it to list exactly what you want to show, this is the easiest way to control the pagination size

2. Make items unavailable: if you don’t want to offer certain products to any client, is always better to make it not active by any of these:

• Draft status
• Archive status
• Removing it from the sales channel

3. Filter the collection with tags on the URL call: if none of the above is possible, and there’s a way to filter elements you DO want to show with a set of product tags, then this is the way.

All you have to do here is add the tags to the URL, which will act as filters. Once loaded, Shopify will consider the pagination over the resulting filtered subset of items, and the pagination will be correct.

For example, the link to my collection of ‘Extra spicy food’ can contain elements that I cannot deliver if the user is outside my country. So, I tag my products as ‘national-only’. Whilst the collection is the same for all users, users outside my country won’t be able to see ‘national-only’ products when visiting it.

https://umamicart.com/collections/extra-spicy-food/national-only

This approach is best for subsets of collections, but not for out-of-stock items, since tagging according to availability can be hard work. But would still work!

All of these are lessons learned the hard way, so I hope this also helps you!

Peace & code

Nadine