CODEWITHSUNDEEP
paginationshopify
Nga Đỗ
Nga Đỗ

Reputation: 29

Modifiable pagination on Shopify Collection

I was wondering if there was any way to make pagination user modifiable on the front-end? I've been searching for a solution, but can't find anything similar that addresses this specific problem.

I'm aware that at present, you can assign a limit to the pagination, for example:

{% paginate collection.products by 12 %}

What I'm trying to achieve here is the ability for the user to change the number of products viewable, per page, from a dropdown menu. So for example, the user chooses 24, the page refreshes with the revised pagination limit active on the page.

Any help getting started here would be greatly appreciated. Thanks!

Upvotes: 1

Views: 1804

Answers (1)

Minh Bui
Minh Bui

Reputation: 1030

You could create 2 alternate templates called 12 collection.12.liquid and 24 collection.24.liquid which would paginate by 12 and 24, respectively. All your templates will be below:

collection.liquid:

{% paginate collection.products by 20 %}
{% include ‘collection-template’ %}
{% endpaginate %}

collection.12.liquid:

{% paginate collection.products by 12 %}
{% include ‘collection-template’ %}
{% endpaginate %}

collection.24.liquid:

{% paginate collection.products by 24 %}
{% include ‘collection-template’ %}
{% endpaginate %}

Then you could create links to those other templates using the view parameter.

<a href=”http://myshop.com/collections/shirts?view=12”>12 per page</a>
<a href=”http://myshop.com/collections/shirts?view=24”>24 per page</a>

More detail, please refer this link here

Upvotes: 3

Related Questions