Multiple Collections in Shopify

Question

I have 3 collections displayed on my page right now.

I want to have one pagination at the very bottom that will load the next 50 products for all 3 collections if there are any.

How can I do that?

this is my code:

{% paginate collections.mycollection1.products by settings.pagination_limit %}
        <div style="clear:both;">
            <h1>Title</h1>
            {% assign products_per_row = "4" %}
            {% assign limit = 50 %}
            {% assign products = collections.mycollection1.products %}
            {% include 'product-loop' with settings.collection_sidebar %}
            {% include 'pagination' with settings.collection_sidebar %}
        </div>

    {% endpaginate %}

{% paginate collections.mycollection2.products by settings.pagination_limit %}
        <div style="clear:both;">
            <h1>Title</h1>
            {% assign products_per_row = "4" %}
            {% assign limit = 50 %}
            {% assign products = collections.mycollection2.products %}
            {% include 'product-loop' with settings.collection_sidebar %}
            {% include 'pagination' with settings.collection_sidebar %}
        </div>

    {% endpaginate %}

{% paginate collections.mycollection3.products by settings.pagination_limit %}
        <div style="clear:both;">
            <h1>Title</h1>
            {% assign products_per_row = "4" %}
            {% assign limit = 50 %}
            {% assign products = collections.mycollection3.products %}
            {% include 'product-loop' with settings.collection_sidebar %}
            {% include 'pagination' with settings.collection_sidebar %}
        </div>

    {% endpaginate %}

Do you mean this? - A 4th pagination section that will list next 50 products from each of mycollection1,mycollection2 and mycollection3 together. — HymnZzy
@HymnZ yes, i want one pagination to control all 3 collections — MalcolmInTheCenter

HymnZzy HymnZzy · Accepted Answer · 2015-12-16T07:32:40

This is what you can do by using pagination. I'm assuming all the three collections are of the same size.

First, let us call the pagination for all the products in your store

{% assign total_products = collections.all.products_count %}
Since you are shuffling 4 products at a time, the number of pages to be paginated will be total products count / 4

{% assign loop_value = total_products | divided_by: 4 %}
Now start the pagination

{% paginate collections by loop_value %}
Now we need to get a display window to work for the 4 product displays

{% assign window = paginate.current_page %} {% assign window_start = window | minus: 1 | times: 4 %} //4 is the number of products being displayed {% assign window_end = window | times: 4 | plus: 1 %}
Now this is done, we start product display. This is the same syntax for all the 3 collections, just replace the collection handle as required.

{% for product in collections.mycollection1.products %} // mycollection1 is your collection handle {% if forloop.index > window_start and forloop.index < window_end %} {% include 'product-block' %} {% endif %}{% endfor %}
And we end the pagination

{% if paginate.pages > 1 %}<div class="pagination align-right"> {{ paginate | default_pagination }} </div>{% endif %}{% endpaginate %}

Some important things to note very carefully:

Unless you create "mycollection1/2/3" arrays dynamically from the code, this code works only for the first 50 products in those collections.
You can use paginate function only once in an entire page.

Multiple Collections in Shopify

1 Answers