Adding Next and Previous Buttons for my collections pages

[UltraCombo]

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

[Liquid_xPert_SJ]

@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

[UltraCombo]

Hi, Thanks for the quick reply!

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

These are the ones I have.

Thank you!

[Liquid_xPert_SJ]

[Pillowfina]

I’m working on this exact issue.

But when I try to add the pagination.liquid, I find there is already one.

What am I missing?

[Liquid_xPert_SJ]

Which theme you are using?

[Pillowfina]

Dawn

[Liquid_xPert_SJ]

Ok url?

[Pillowfina]

https://pillowfina.com/collections/all