How to add the Load More button on the Shopify Collection Page?

dr garfield

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.

Why Add Load More Button?

There are certain pros of adding a load more button on your collection page. Let’s have a look at it 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.

How to create a load more button on Shopify?

To help you ease the process, here is the HTML, CSS, and JavaScript required to create a load more button on Shopify.

1. Load-more-button.html

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>

2. Load-more-button.js

Here, you need to open the ‘theme.js’ file and then add this JS code there.

 

$('.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');

 }

 }

 })

});

3. Load-more-button.css

To add CSS code, open ‘theme.scss.liquid’ which is under the Assets directory, and then add the below-mentioned CSS code at the end of the file.

.load-more_wrap{

 margin-top: 60px;

 text-align: center;

}

.load-more_wrap img{

 max-width: 25px;

}

ul.pagination{

 display: none !important;

}

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.