Upgrade your Shopify pagination with numbered navigation that improves user experience and SEO. This snippet replaces basic "Previous/Next" links with a complete page number navigation system, helping customers easily browse through your product collections and blog articles.
Displays all available pages with current page highlighted
Current page clearly highlighted in your brand green (#87e64b)
Proper link structure helps search engines crawl your pages
Responsive design works perfectly on all devices
{% comment %}
Page Numbers in Pagination
Enhanced pagination with page numbers
Provided by XeeZone - www.xeezone.com/free-shopify-code-snippets-by-xeezone
{% endcomment %}
{% if paginate.pages > 1 %}
<div class="pagination">
{% if paginate.previous %}
<a href="{{ paginate.previous.url }}" class="prev">« Previous</a>
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<a href="{{ part.url }}">{{ part.title }}</a>
{% else %}
<span class="current">{{ part.title }}</span>
{% endif %}
{% endfor %}
{% if paginate.next %}
<a href="{{ paginate.next.url }}" class="next">Next »</a>
{% endif %}
</div>
{% endif %}
<style>
.pagination {
text-align: center;
margin: 30px 0;
}
.pagination a, .pagination span {
display: inline-block;
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ddd;
}
.pagination .current {
background: #87e64b;
color: white;
border-color: #87e64b;
}
</style>
Find your existing pagination code (usually in sections/collection-template.liquid or snippets/pagination.liquid)
Remove the default pagination and replace it with this enhanced version
Adjust the CSS in the style tag to match your store's design system
Verify the pagination works correctly on collection pages with multiple pages
Apply to blog pagination by updating templates/blog.liquid if needed
Pro Tip: For large collections, add {% if forloop.index <= 5 or forloop.index >= paginate.pages.size - 5 %} to limit visible page numbers and improve performance.