Hello folks, in today’s blog post, I am going to talk about how you can implement the “Load More” button feature on the Shopify collection page. First, let’s understand why we need Load More button feature on the Collection page or Product listing page? In every e-commerce website, there are high chances that the number of products or SKUs is high, and if your store doing well online then there are high chances that, your website has great traffic, and if the number of users is high on your website then you have to maintain the user experience to browse products as well. So for the seamless performance of product listing and browsing, we are going to implement the “Load More” feature.
If you are a developer then your client expects that you have some level of idea of seamless user experience, so this kind of functionality helps you to provide a better solution to the client with proper implementation and your client will reward you better with this kind of approach. So now without wasting a time, let’s come to the implementation part of this “Load More” functionality.
To implement load more in the product listing page, you will need to add more than 30 products, to develop and test. So I attached i sample excel file, which has 40 to 50 products. so you can download and import it into your Shopify store.
Step: 2 Search "main-collection-product-grid.liquid" in your theme
File names may vary based on your theme. I already implemented this functionality into the dawn theme, but this code setup will work for you as well, just a few tags and classes may vary, in case you feel any difficulties in implementing it in other themes, do let me know in the comment section, so I will help you out.
Step: 3 Remove default pagination code
In “main-collection-product-grid” search “paginate.pages” and then remove or comment on this line
"{% render 'pagination', paginate: paginate, anchor: '' %} "
Step: 4 Copy and Paste Load more code in your theme file
Just copy and paste below code in “main-collection-product-grid” of your Shopify dawn theme.
<div class="load-more">
<a class="button button--primary load-more_btn" href="javascript:void(0);" onclick="loadMoreProducts()"> LOAD MORE </a>
<div class="load-more_spinner"></div>
</div>
Step: 5 Create new JS file
Create a new JS file called “collection-load-more.js” and link this file to theme.liquid file. Paste below code in theme.liquid file to link new JS file.
Search {{ content_for_header }} in theme.liquid file and above this code paste below one.
{% if template contains 'collection' %}
<script src="{{ 'collection-load-more.js' | asset_url }}" defer="defer"></script>
{% endif %}
Step: 6 Paste below code in new JS file
var products_on_page = $('.products-onpage');
var next_url = products_on_page.data('next-url');
var load_more_btn = $('.load-more_btn');
var load_more_spinner = $('.load-more_spinner');
function loadMoreProducts() {
$.ajax({
url:next_url,
type:'GET',
dataType:'html',
beforeSend: function () {
load_more_btn.hide();
load_more_spinner.show();
}
}).done(function(next_page){
load_more_spinner.hide();
var new_products = $(next_page).find('.products-onpage');
var new_url = new_products.data('next-url');
if(new_url){
load_more_btn.show();
}
next_url = new_url;
products_on_page.append(new_products.html());
})
}
Step: 7 Add classes and attributes
Open “main-collection-product-grid.liquid” search id=”product-grid” and add a few data attributes and class as per below.
<ul id="product-grid" data-id="{{ section.id }}" data-next-url="{{ paginate.next.url }}" class="products-onpage
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop">
Two data attributes that we add are data-id and data-next-url and new class “products-onpage”.
Step: 8 Add loader CSS in main-collection-product-grid.css
.load-more_spinner {
height: 35px;
width: 35px;
border: 5px solid #f3f3f3;
border-top: 5px solid #052e26;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
animation: spin 2s linear infinite;
}
@keyframes spin{
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
Test all steps and let me know in the comment section if all steps are working for you or not.
NOTE: these steps are according to the Shopify dawn theme. If you are working on some other themes and facing issues with these steps let me know in the comment section, so I will help you out with it.
Leave feedback about this