How to display the Load More button in Shopify Theme?

This tutorial will guide you through adding a “Load More” button to your Shopify store. This button will allow users to dynamically load more products or blog posts on the same page.

Step 1: Update Your Shopify Theme Liquid Files

First, you need to modify your Shopify theme to include a button and make some changes to how content is loaded. Typically, you would update a file that lists products or blog posts, such as collection.liquid or blog.liquid.

A. Modify the Liquid Template

Locate your collection.liquid file or whichever template lists items you want to apply “Load More” functionality to. You’ll need to adjust the pagination.

Here’s a basic example of how you might modify the Liquid for loading more products:

{% paginate collection.products by 6 %}
  <div id="product-grid">
    {% for product in collection.products %}
      <div class="product-item">
        <!-- Product details -->
        <h2>{{ product.title }}</h2>
        <p>{{ product.price | money_with_currency }}</p>
      </div>
    {% endfor %}
  </div>
  {% if paginate.pages > 1 %}
    <button id="loadMore">Load More</button>
  {% endif %}
{% endpaginate %}

Step 2: Add JavaScript to Handle the “Load More” Functionality

Next, add JavaScript to manage the AJAX functionality. This code will handle the fetching of additional products when the “Load More” button is clicked. Place this script in your theme’s assets folder or include it directly in your theme.liquid file within <script> tags.

document.getElementById('loadMore').addEventListener('click', function() {
  var nextPage = parseInt(document.querySelector('.pagination .current').innerText) + 1;
  var totalPages = {{ paginate.pages }};
  if(nextPage <= totalPages) {
    fetch('/collections/{{ collection.handle }}?page=' + nextPage)
      .then(response => response.text())
      .then(data => {
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, 'text/html');
        var newProducts = doc.querySelectorAll('.product-item');
        document.getElementById('product-grid').append(...newProducts);
      });
  }
});

Step 3: Style the Button

Use CSS to style the “Load More” button to fit your shop’s design. Add the following CSS to your theme’s assets/theme.scss.liquid file:

#loadMore {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

#loadMore:hover {
  background-color: #555;
}

Conclusion

With these steps, you’ve successfully added a “Load More” button to your Shopify store. This button improves navigation by allowing more products to be loaded dynamically, enhancing the user’s shopping experience.

Note: Always remember to backup your theme before making changes, and test new features in a development environment before applying them to your live site. This ensures that your live site remains functional and provides the best experience for your visitors.