Adding Next and Previous Buttons for my collections pages

UltraCombo
New Member
5 0 0

Hello there,

 

I'm trying to add the button Next and Previous even the pages numbers if possible but I've tried multiple options online and none of them of works. I'm on the Dawn Theme if it helps.

 

By the way I'm using a temporary previous and next button through the add template buttons till I find a solution.

I'll greatly appreciate it if someone can me help with this.

 

Thank you.

https://theultracombo.com/pages/all-collections

 

 

UltraCombo_0-1711001219987.png

Replies 3 (3)

Liqiud_xPert_SJ
Shopify Partner
723 92 112

@UltraCombo  welcome to the Shopify Community,

place the below code into your collection-template file, screenshot attached in the code below.

https://i.imgur.com/4eQKi3Y.png
{% paginate collection.products by limit %}

https://i.imgur.com/gK0qYiq.png
 {%- if paginate.pages > 1 -%}
      {% include 'pagination', paginate: paginate %}
    {%- endif -%}

https://i.imgur.com/E4UthWs.png
{% endpaginate %}

after that create a snippet called pagination and place below code in that .. thats it.

{% comment %}
    Renders a pagination bar

    Accepts:
    - paginate: {Object} Paginate Liquid object (required)

    Usage:
    {% include 'pagination', paginate: paginate %}
{% endcomment %}
<ul class="list--inline pagination">
  {% unless paginate.previous.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </button>
    </li>
    {% else %}
    <li>
      <a href="{{ paginate.previous.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </a>
    </li>
  {% endunless %}
  <li class="pagination__text">
    {{ 'general.pagination.current_page' | t: current: paginate.current_page, total: paginate.pages }}
  </li>
  {% unless paginate.next.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </button>
    </li>
  {% else %}
    <li>
      <a href="{{ paginate.next.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </a>
    </li>
  {% endunless %}
</ul>

thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
UltraCombo
New Member
5 0 0

Hi, Thanks for the quick reply!

I don't seem to find the collection-template file.

These are the ones I have.

UltraCombo_0-1711003212748.png

Thank you!

Liqiud_xPert_SJ
Shopify Partner
723 92 112

2024-03-21 11_48_50-Testing Sandbox · Edit ~ Updated copy of Updated copy of Dawn · Shopify.png

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂