How to Add Pagination at Shopify Collection Page

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Modify the Collection Template

1. In the Sections directory, open the main-collection-product-grid.liquid file (or similar file that handles the collection product grid).

Step 3: Add Pagination HTML

Locate the part of the code where the products are being looped through and displayed. Below this loop, add the pagination HTML. Here’s an example of what the modified main-collection-product-grid.liquid might look like:

<!-- main-collection-product-grid.liquid -->

<div class="collection-products">
  <div id="product-grid" class="product-grid">
    {% for product in collection.products %}
      <div class="product-card">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
          <h2>{{ product.title }}</h2>
        </a>
      </div>
    {% endfor %}
  </div>

  <div class="pagination">
    {% if paginate.pages > 1 %}
      <nav aria-label="Pagination">
        <ul class="pagination-list">
          {% if paginate.previous %}
            <li class="pagination-item">
              <a href="{{ paginate.previous.url }}" class="pagination-link" aria-label="Previous">
                &laquo; Previous
              </a>
            </li>
          {% endif %}
          {% for part in paginate.parts %}
            {% if part.is_link %}
              <li class="pagination-item">
                <a href="{{ part.url }}" class="pagination-link">{{ part.title }}</a>
              </li>
            {% else %}
              <li class="pagination-item current">
                <span class="pagination-link">{{ part.title }}</span>
              </li>
            {% endif %}
          {% endfor %}
          {% if paginate.next %}
            <li class="pagination-item">
              <a href="{{ paginate.next.url }}" class="pagination-link" aria-label="Next">
                Next &raquo;
              </a>
            </li>
          {% endif %}
        </ul>
      </nav>
    {% endif %}
  </div>
</div>

Step 4: Add CSS for Styling the Pagination

Add CSS to style the pagination. You can add this to your base.css or theme.css file.

/* theme.css */

.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination-list {
  display: inline-flex;
  list-style: none;
  padding: 0;
}

.pagination-item {
  margin: 0 5px;
}

.pagination-link {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.pagination-link:hover {
  background-color: #f5f5f5;
}

.pagination-item.current .pagination-link {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  border-color: #333;
}

Step 5: Add JavaScript for Smooth Scrolling (Optional)

If you want smooth scrolling to the top when clicking pagination links, add the following JavaScript to your theme’s JavaScript file, usually located in the assets directory.

document.addEventListener('DOMContentLoaded', function() {
  var paginationLinks = document.querySelectorAll('.pagination-link');

  paginationLinks.forEach(function(link) {
    link.addEventListener('click', function(event) {
      event.preventDefault();
      var url = this.href;
      window.scrollTo({ top: 0, behavior: 'smooth' });
      setTimeout(function() {
        window.location.href = url;
      }, 300);
    });
  });
});

Step 6: Save and Test

1. Save all your changes.
2. Go to your collection page on your Shopify store and test the pagination links to ensure they work correctly.

Summary

By following these steps, you can add pagination to your Shopify collection pages in the Dawn theme:

1. Modify the collection template to include pagination HTML.
2. Add CSS for styling the pagination links.
3. Optionally, add JavaScript for smooth scrolling.

This enhances the user experience by allowing customers to navigate through multiple pages of products easily.