How to set a custom pagination limit in Shopify?

Other Questions Shopify
1

I’m working on a Shopify store and I want to give customers the ability to choose how many products they see per page. Right now, I’ve got a basic pagination set up, but I’m not sure how to add a dropdown menu for customers to select different item counts per page.

Here’s what I’ve tried so far:

{% paginate collection.products by 12 %}
  <select>
    <option value="16">View 16 items/page</option>
    <!-- Other options would go here -->
  </select>
  <!-- Rest of the pagination code -->
{% endpaginate %}

But this doesn’t actually change anything when a customer selects a different option. How can I make this work? Is there a way to use Liquid or maybe some JavaScript to update the pagination limit based on what the customer chooses? Any help would be really appreciated!

2

I’ve tackled this issue in my own Shopify projects. Here’s what worked for me:

Instead of using a dropdown, I implemented a series of buttons for different product counts. This approach felt more user-friendly and increased engagement.

In my Liquid template, I set it up like this:

{% assign limit = 12 %}
{% if request.querystring contains ‘limit’ %}
{% assign limit = request.querystring | split: ‘limit=’ | last | split: ‘&’ | first | plus: 0 %}
{% endif %}
{% paginate collection.products by limit %}

Then I added buttons:

24 per page
48 per page

The JavaScript function:

function changeLimit(newLimit) {
let url = new URL(window.location.href);
url.searchParams.set(‘limit’, newLimit);
window.location = url;
}

This solution worked smoothly and customers appreciated the flexibility. Remember to adjust your product grid layout to accommodate different item counts per row.

3

To implement custom pagination limits in Shopify, you’ll need to combine Liquid and JavaScript. Here’s a method I’ve used successfully:

First, modify your Liquid code to use a variable for the pagination limit:

{% assign limit = 12 %}
{% if request.querystring contains ‘limit’ %}
{% assign limit = request.querystring | split: ‘limit=’ | last | split: ‘&’ | first | plus: 0 %}
{% endif %}
{% paginate collection.products by limit %}

Then, update your select element to trigger a JavaScript function:

12 per page 24 per page 48 per page

Finally, add this JavaScript function:

function updateLimit(limit) {
var url = new URL(window.location.href);
url.searchParams.set(‘limit’, limit);
window.location.href = url.toString();
}

This approach allows customers to change the pagination limit dynamically.

4

hey alexm, i’ve dealt with this before. you’ll need some javascript to make it work. create a custom select element, then use js to update the url with the selected value when it changes. something like:

document.querySelector('select').addEventListener('change', function() {
  window.location.href = window.location.pathname + '?view=' + this.value;
});

then in your liquid, use that parameter to set the pagination limit. good luck!