A modern alternative is the “Load More” button, which allows shoppers to see more products on the same page without reloading. It’s clean, fast, and enhances user experience — exactly what customers expect from a professional eCommerce store today.
💡 Why You Should Replace Pagination with a Load More Button
Switching from traditional pagination to a “Load More” button comes with several key advantages:
1. Improved User Experience
Customers can browse your products seamlessly without switching pages. It feels smoother and keeps them engaged longer.
2. Faster Page Interaction
Since products load dynamically, your customers don’t have to wait for a full page reload each time they go to the next set of products. This creates a quicker and more responsive browsing experience.
3. Modern & Clean Look
A “Load More” button gives your store a minimalist and professional design, similar to big eCommerce brands like Zara, H&M, or Amazon’s “Show More” style.
4. Better for Conversions
When your store feels fast and easy to use, people naturally browse more items. That means more opportunities for them to find a product they like — and make a purchase.
5. SEO and Performance Benefits
A single, dynamic page with smooth loading helps reduce bounce rates and keeps visitors on your site longer — two factors that can positively influence your SEO performance.
🚀 How It Works
The “Load More” button works by loading new products on the same page dynamically when the button is clicked. Instead of reloading the entire page, your store only loads the next set of products — making the experience fast and seamless.
You can implement this feature using Shopify Liquid, JavaScript, and Ajax, or with help from a developer if you prefer a fully customized solution.
Once set up, the button will appear at the bottom of your collection page and automatically load more products as your customers click it.
- Find collection page and paste below script at the botton
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
let productsOnPage = $('.collection-listing-loadmore')
let nextUrl = productsOnPage.attr('data-next-url')
let loadMoreBtn = $('.load-more-btn');
let loadMoreSpinner = $('.load-more-spinner');
$('.load-more-btn').click(function(e){
e.preventDefault();
loadMoreBtn.hide()
loadMoreSpinner.show()
$.ajax({
url: nextUrl,
type: "GET",
dataType: "html",
success: function(nextPage){
loadMoreSpinner.hide();
let newProducts = $(nextPage).find('.collection-listing-loadmore')
productsOnPage.append(newProducts.html());
let newUrl = newProducts.attr('data-next-url');
nextUrl = newUrl
if(newUrl){
loadMoreBtn.show();
}
}
})
})
})
</script>2. Add class name ‘collection-listing-loadmore’ to the div element which is creating products.
and also add data-next-url=”{{ paginate.next.url }}” in the same div.
3. Comment pagination numbering and add below code:
{% if paginate.pages > 1 %}
<div style="text-align: center; margin-bottom: 40px;">
<button class="btn btn--secondary button-row__btn load-more-btn">Load More</button>
</div>
<div class="load-more-spinner"></div>
{% endif %}