Page Numbers for Pagination - Debut Theme

Highlighted
New Member
1 0 1

Hi,

Currently my Debut theme shows 2 arrows for the Previous Page and the Next Page in Collections pages. To make navigation easier I would like to show all available page numbers.

Current situation:

https://imgur.com/2HP5O5r

I read pagination.liquid code will need to be updated however not sure how to do it for Debut. So could anyone tell how to update the below code for this purpose?

 

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

1 Like
Highlighted
New Member
5 0 0

I would really like to know how to do this as well!

0 Likes
Highlighted
Tourist
7 0 4

Hi there! Is anyone able to help at all with getting page numbers added to the bottom of the Collections pages? Currently, the only way to navigate is by arrows, and I have 32 pages in some collections so this isn't great. Ideally, I'd like to have the option of being able to always have page 1 showing, and a navigate to drop down section. Is this possible at all? Any help would be greatly appreciated! Thank you

1 Like
Highlighted
Tourist
4 0 1

Found this in another question thread, it did the trick for mine. Go to Themes -> edit code for themes -> Snippets dropdown -> pagination.liquid and then replace that code with what's below:

 

<!-- Pagination -->
<div class="pagination flex-m flex-w p-t-26" id="pagination">
{% if paginate.pages > 1 %}
{% if paginate.previous %}
<a class="item-pagination flex-c-m trans-0-4" href="{{ paginate.previous.url }}" title="{{ paginate.previous.title }}">
&lt;
</a>
{% else %}
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<a class="item-pagination flex-c-m trans-0-4" href="{{ part.url }}" title="">{{ part.title }}</a>
{% else %}
{% if part.title == paginate.current_page %}
<a class="item-pagination flex-c-m trans-0-4 active-pagination" href="#" title="{{ paginate.previous.title }}">
{{ part.title }}</a>
{% else %}
{{ part.title }}
{% endif %}
{% endif %}
{% endfor %}
{% if paginate.next %}
<a class="item-pagination flex-c-m trans-0-4" href="{{ paginate.next.url }}" title="{{ paginate.next.title }}">
&gt;
</a>
{% else %}
{% endif %}
{% endif %}
</div>

0 Likes