Pagination for many collections

syfqh95
Tourist
7 0 3

I have 3 collections which are best selling helmets (The most popular items in Helmets) , helmet closeouts and helmets (All products) on one collection page called Helmets. So I want to show pagination for best selling helmets and helmet closeout by 4 while pagination for helmets by 12.

How can I do that?

Url: https://durianbikers.myshopify.com/collections/helmets

Thank you.

 

 

{% if collection.handle == 'helmets' %}
	{% paginate collection.products by 4 %}

    <div class="page-width">
    {% render 'breadcrumbs' %}

      <h1 class="section-header__title">
        {{ collection.title }}
        {% if current_tags %}
        &ndash; {% assign title_tags = current_tags | join: ', ' %}
        {{ title_tags }}
        {% endif %}
      </h1>

      <!--custom-->
      <h1 class="section-header__title">The most popular items in Helmets</h1>
        <br>
            <div class="grid grid--no-gutters grid--uniform">
              {% for product in collections['best-selling-helmets'].products %}
                <div class="grid__item small--one-half medium-up--one-quarter">
                  {% include 'best-helmet-card', product: product %}
                </div>
              {% else %}
                {% if shop.products_count == 0 %}
                  <div class="grid__item">
                    <div class="grid grid--no-gutters grid--uniform">
                      {% assign collection_index = 1 %}
                      {% for i in (1..10) %}
                        {% case i %}
                          {% when 7 %}
                            {% assign collection_index = 1 %}
                          {% when 8 %}
                            {% assign collection_index = 2 %}
                          {% when 9 %}
                            {% assign collection_index = 3 %}
                          {% when 10 %}
                            {% assign collection_index = 4 %}
                        {% endcase %}
                        <div class="grid__item small--one-half medium-up--one-fifth">
                          <a href="/admin/products" class="product-card">
                            <div class="product-card__image-container">
                              <div class="product-card__image-wrapper">
                                <div class="product-card__image">
                                  {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                                  {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                                </div>
                              </div>
                            </div>
                            <div class="product-card__info">
                              <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                              <div class="product-card__price">
                                $19.99
                              </div>
                            </div>
                            <div class="product-card__overlay">
                              {% assign view_string_length = 'products.product.view' | t | size %}
                              <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                            </div>
                          </a>
                        </div>
                        {% assign collection_index = collection_index | plus: 1 %}
                      {% endfor %}
                    </div>
                  </div>
                {% else %}
                  {% comment %}
                    If collection exists but is empty, display message
                  {% endcomment %}
                  <div class="grid__item small--text-center">
                    <p>{{ 'collections.general.no_matches' | t }}</p>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
      <br>
      <!--custom-->
      
      <!---custom-->
      <div class="grid grid--no-gutters grid--uniform">
        <h1 class="section-header__title">Helmet Closeouts</h1>
        <br>
            <div class="grid grid--no-gutters grid--uniform">
              {% for product in collections["helmet-closeouts"].products %}
                <div class="grid__item small--one-half medium-up--one-quarter">
                  {% include 'product-card', product: product %}
                </div>
              {% else %}
                {% if shop.products_count == 0 %}
                  <div class="grid__item">
                    <div class="grid grid--no-gutters grid--uniform">
                      {% assign collection_index = 1 %}
                      {% for i in (1..10) %}
                        {% case i %}
                          {% when 7 %}
                            {% assign collection_index = 1 %}
                          {% when 8 %}
                            {% assign collection_index = 2 %}
                          {% when 9 %}
                            {% assign collection_index = 3 %}
                          {% when 10 %}
                            {% assign collection_index = 4 %}
                        {% endcase %}
                        <div class="grid__item small--one-half medium-up--one-fifth">
                          <a href="/admin/products" class="product-card">
                            <div class="product-card__image-container">
                              <div class="product-card__image-wrapper">
                                <div class="product-card__image">
                                  {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                                  {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                                </div>
                              </div>
                            </div>
                            <div class="product-card__info">
                              <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                              <div class="product-card__price">
                                $19.99
                              </div>
                            </div>
                            <div class="product-card__overlay">
                              {% assign view_string_length = 'products.product.view' | t | size %}
                              <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                            </div>
                          </a>
                        </div>
                        {% assign collection_index = collection_index | plus: 1 %}
                      {% endfor %}
                    </div>
                  </div>
                {% else %}
                  {% comment %}
                    If collection exists but is empty, display message
                  {% endcomment %}
                  <div class="grid__item small--text-center">
                    <p>{{ 'collections.general.no_matches' | t }}</p>
                  </div>
                {% endif %}
              {% endfor %}
            </div>		
      </div>
      <br>
      <!--custom-->
      
      {% endpaginate %}
	  {% paginate collection.products by 12 %}

      <header class="grid medium-up--grid--table section-header small--text-center">
        <div class="grid__item medium-up--one-half section-header__item">
          <h1 class="section-header__title">
            {% comment %}{{ collection.title }}{% endcomment %}
            All products
            {% if current_tags %}
              &ndash; {% assign title_tags = current_tags | join: ', ' %}
              {{ title_tags }}
            {% endif %}
          </h1>
          {% if collection.description != blank %}
            <div class="section-header__subtext rte">
              {{ collection.description }}
            </div>
          {% endif %}
        </div>
        <div class="grid__item medium-up--one-half medium-up--text-right section-header__item">
          {% section 'collection-filters' %}
        </div>
      </header>

      <div class="grid grid--no-gutters grid--uniform">

        {% for product in collection.products %}
          <div class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card', product: product %}
          </div>
        {% else %}
          {% comment %}
            Add default products to help with onboarding for collections/all only.

            The onboarding styles and products are only loaded if the
            store has no products.
          {% endcomment %}
          {% if shop.products_count == 0 %}
            <div class="grid__item">
              <div class="grid grid--no-gutters grid--uniform">
                {% assign collection_index = 1 %}
                {% for i in (1..10) %}
                  {% case i %}
                    {% when 7 %}
                      {% assign collection_index = 1 %}
                    {% when 8 %}
                      {% assign collection_index = 2 %}
                    {% when 9 %}
                      {% assign collection_index = 3 %}
                    {% when 10 %}
                      {% assign collection_index = 4 %}
                  {% endcase %}
                  <div class="grid__item small--one-half medium-up--one-fifth">
                    <a href="/admin/products" class="product-card">
                      <div class="product-card__image-container">
                        <div class="product-card__image-wrapper">
                          <div class="product-card__image">
                            {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                            {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                          </div>
                        </div>
                      </div>
                      <div class="product-card__info">
                        <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="product-card__price">
                          $19.99
                        </div>
                      </div>
                      <div class="product-card__overlay">
                        {% assign view_string_length = 'products.product.view' | t | size %}
                        <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                      </div>
                    </a>
                  </div>
                  {% assign collection_index = collection_index | plus: 1 %}
                {% endfor %}
              </div>
            </div>
          {% else %}
            {% comment %}
              If collection exists but is empty, display message
            {% endcomment %}
            <div class="grid__item small--text-center">
              <p>{{ 'collections.general.no_matches' | t }}</p>
            </div>
          {% endif %}
        {% endfor %}
      </div>

      {% if paginate.pages > 1 %}
        <div class="pagination">
          {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
        </div>
      {% endif %}

    </div>

    {% endpaginate %}

{% else %}
	{% paginate collection.products by 20 %}
	<div class="page-width">
		{% render 'breadcrumbs' %}
  
  <header class="grid medium-up--grid--table section-header small--text-center">
    <div class="grid__item medium-up--one-half section-header__item">
      <h1 class="section-header__title">
        {{ collection.title }}
        {% if current_tags %}
          &ndash; {% assign title_tags = current_tags | join: ', ' %}
          {{ title_tags }}
        {% endif %}
      </h1>
      {% if collection.description != blank %}
        <div class="section-header__subtext rte">
          {{ collection.description }}
        </div>
      {% endif %}
    </div>
    <div class="grid__item medium-up--one-half medium-up--text-right section-header__item">
      {% section 'collection-filters' %}
    </div>
  </header>
  
  <div class="grid grid--no-gutters grid--uniform">

    {% for product in collection.products %}
      <div class="grid__item small--one-half medium-up--one-quarter">
        {% include 'product-card', product: product %}
      </div>
    {% else %}
      {% comment %}
        Add default products to help with onboarding for collections/all only.

        The onboarding styles and products are only loaded if the
        store has no products.
      {% endcomment %}
      {% if shop.products_count == 0 %}
        <div class="grid__item">
          <div class="grid grid--no-gutters grid--uniform">
            {% assign collection_index = 1 %}
            {% for i in (1..10) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_index = 1 %}
                {% when 8 %}
                  {% assign collection_index = 2 %}
                {% when 9 %}
                  {% assign collection_index = 3 %}
                {% when 10 %}
                  {% assign collection_index = 4 %}
              {% endcase %}
              <div class="grid__item small--one-half medium-up--one-fifth">
                <a href="/admin/products" class="product-card">
                  <div class="product-card__image-container">
                    <div class="product-card__image-wrapper">
                      <div class="product-card__image">
                        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>
                  <div class="product-card__info">
                    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                    <div class="product-card__price">
                      $19.99
                    </div>
                  </div>
                  <div class="product-card__overlay">
                    {% assign view_string_length = 'products.product.view' | t | size %}
                    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                  </div>
                </a>
              </div>
              {% assign collection_index = collection_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      {% else %}
        {% comment %}
          If collection exists but is empty, display message
        {% endcomment %}
        <div class="grid__item small--text-center">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}
{% endif %}

 

 

 

0 Likes