How to Add Load More Button at Shopify Collection Pages

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.

Step 3: Add the Load More Button

1. Locate the part of the code where the products are being looped through and displayed. This is typically within a {% for product in collection.products %} loop.
2. Add an HTML button for “Load More” after the loop.

Example:

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

<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>
<button id="load-more" class="load-more-button">Load More</button>

Step 4: Add CSS for Styling the Button

Add CSS to style the “Load More” button. You can add this to your theme.css or base.css file.

Example:

/* theme.css */

.load-more-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.load-more-button:hover {
  background-color: #555;
}

Step 5: Add JavaScript for Load More Functionality

Add JavaScript to handle the “Load More” button click event and load more products via AJAX. You can add this to your theme’s JavaScript file, usually located in the assets directory.

Example:

document.addEventListener('DOMContentLoaded', function() {
  var loadMoreButton = document.getElementById('load-more');
  var productGrid = document.getElementById('product-grid');
  var currentPage = 1;
  var totalPages = {{ collection.pages }};

  loadMoreButton.addEventListener('click', function() {
    currentPage++;

    if (currentPage <= totalPages) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/collections/{{ collection.handle }}?page=' + currentPage, true);
      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 400) {
          var parser = new DOMParser();
          var doc = parser.parseFromString(xhr.responseText, 'text/html');
          var newProducts = doc.querySelectorAll('.product-card');

          newProducts.forEach(function(product) {
            productGrid.appendChild(product);
          });

          if (currentPage >= totalPages) {
            loadMoreButton.style.display = 'none';
          }
        }
      };
      xhr.send();
    }
  });
});

Explanation

1. HTML: Add a “Load More” button after the product loop.
2. CSS: Style the “Load More” button.
3. JavaScript: Add an event listener to the “Load More” button to load more products via AJAX.

Step 6: Save and Test

1. Save all your changes.
2. Go to your collection page on your Shopify store and test the “Load More” button to ensure it works correctly.

Summary

By following these steps, you can add a “Load More” button to your Shopify collection pages in the Dawn theme:

1. Modify the collection template to add the “Load More” button.
2. Add CSS for styling the button.
3. Add JavaScript for loading more products via AJAX.

This enhances the user experience by allowing customers to load more products without navigating through pagination links.