Why Add Load More Button?
How to Add a Load More button on Shopify Collection Page? There are certain pros of adding a load more button on your collection page. Let’s have a look at them one by one!
Adding load more buttons can help you with improving the speed of your website, which further helps in boosting the SEO rankings on the search pages. Otherwise, if you add infinite scroll, it takes a good amount of time for the page to load.
With the help of loading more buttons, there will be less content displayed in front of the visitors, and it enables the pages to be generated quickly. Once the visitor clicks on the load button, it starts to generate the next content.
The load button gives the visitor easy and quick access to the footer, which isn’t possible with infinite scrolls. The footer comprises on main details of the website, such as contact information, social platform links, links to other pages, contact forms, and more.
Lastly, when you’re running a Shopify store, the load more button allows the visitor to compare more products across the list of products, and thus, it helps increase the overall product discoverability rate in your online store.
Displaying your content properly on the web plays an important role than before. And, there’s ample content available over a web page before any viewer or customer stops scrolling.
Website developers have identified this pattern of scrolling down in the visitors and have even implemented various strategies to showcase the content in exciting ways while still providing the visitors with the length of content they require.
Chances are that you may have 800 more product images to be displayed on your collection page but you don’t want to display all of them on a single page. Moreover, it will take a long time for the page to load because of too much information.
Earlier, people preferred to add “lazy load” if they had too much of product entries altogether. But now, you can simply add “Load More” to your collection pages.
To help you ease the process, here is the HTML, CSS, and JavaScript required to create a load more button on Shopify.
Step 1: Add HTML code:
Firstly, you need to open the collection-template.liquid file and search for the ‘paginate.pages > 1’ condition code.
Now, here is the required code for adding a load more button to your HTML website. Just include this HTML code after this condition!
<input type="hidden" value="{{ paginate.next.url }}" data-next-link>
<input type="hidden" value="{{ paginate.pages }}" data-all-pages>
<input type="hidden" value="{{ paginate.current_page }}" data-this-page>
<input type="hidden" value="{{ collection.url }}" data-coll-url>
<div class="load-more_wrap">
<button class="btn js-load-more">
<span load-more-text>Load more</span>
<span class="hide" loader>
<img src="{{ 'loader.gif' | asset_url }}"/>
</span>
</button>
</div>
Step 2: Upload Loader gif image:
To show loading image, download any loader gif type image from google and upload in assets via ‘Add new assets’.
Make sure loader image name should be ‘loader.gif’, becuase we have mentioned this name in above HTML code.
Step 3: Add CSS code:
Now open ‘theme.scss.liquid’ file under Assests directory and add below css code at the end of file.
.load-more_wrap{
margin-top: 60px;
text-align: center;
}
.load-more_wrap img{
max-width: 25px;
}
ul.pagination{
display: none !important;
}
Now you will the pagination section has been hidden and Load More button will show on the Shopify collection page.
Step 4: Add Load More Javascript Code:
Open ‘theme.js’ file and add this javascript code here.
$('.js-load-more').on('click', function(){
var $this =$(this),
totalPages = parseInt($('[data-all-pages]').val()),
currentPage = parseInt($('[data-this-page]').val()),
datacollurl = $('[data-coll-url]').val();;
$this.attr('disabled', true);
$this.find('[load-more-text]').addClass('hide');
$this.find('[loader]').removeClass('hide');
var nextUrl = $('[data-next-link]').val();
var current_page_new = currentPage + 1;
var next_coll = currentPage + 2;
//alert(current_page_new)
//return false;
$.ajax({
url: nextUrl,
type: 'GET',
dataType: 'html',
success: function(responseHTML){
$('[data-next-link]').val(datacollurl + "?page="+next_coll);
$('[data-this-page]').val(current_page_new);
$('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
},
complete: function() {
if(current_page_new < totalPages) {
$this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
if(current_page_new >= totalPages) {
$this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});
Conclusion
So, this was all about adding a load more button to your Shopify store’s collection page that showcases more of the content when clicked. With that, you can customize the design of your collection page and make one of your own!
If you face issues while adding a load more button on your collection pages, or any other pages, reach out to our Shopify developers to get a guiding hand throughout the way to achieve the desired results for your Shopify store.
If you enjoyed this, you might also enjoy these post
