How to add the Load More button on the Shopify Collection Page?
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.
To help you ease the process, here is the HTML, CSS, and JavaScript required to create a load more button on Shopify.
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!
<span style="font-weight: 400;"><input type="hidden" value="{{ paginate.next.url }}" data-next-link></span>
<span style="font-weight: 400;"> <input type="hidden" value="{{ paginate.pages }}" data-all-pages></span>
<span style="font-weight: 400;"> <input type="hidden" value="{{ paginate.current_page }}" data-this-page></span>
<span style="font-weight: 400;"> <input type="hidden" value="{{ collection.url }}" data-coll-url></span>
<span style="font-weight: 400;"> <div class="load-more_wrap"></span>
<span style="font-weight: 400;"> <button class="btn js-load-more"></span>
<span style="font-weight: 400;"> <span load-more-text>Load more</span></span>
<span style="font-weight: 400;"> <span class="hide" loader></span>
<span style="font-weight: 400;"> <img src="{{ 'loader.gif' | asset_url }}"/></span>
<span style="font-weight: 400;"> </span></span>
<span style="font-weight: 400;"> </button></span>
<span style="font-weight: 400;"> </div>
</span>Here, you need to open the ‘theme.js’ file and then add this JS code there.
<span style="font-weight: 400;"> </span>
<span style="font-weight: 400;">$('.js-load-more').on('click', function(){</span>
<span style="font-weight: 400;"> var $this =$(this),</span>
<span style="font-weight: 400;"> totalPages = parseInt($('[data-all-pages]').val()),</span>
<span style="font-weight: 400;"> currentPage = parseInt($('[data-this-page]').val()),</span>
<span style="font-weight: 400;"> datacollurl = $('[data-coll-url]').val();;</span>
<span style="font-weight: 400;"> $this.attr('disabled', true);</span>
<span style="font-weight: 400;"> $this.find('[load-more-text]').addClass('hide');</span>
<span style="font-weight: 400;"> $this.find('[loader]').removeClass('hide');</span>
<span style="font-weight: 400;"> var nextUrl = $('[data-next-link]').val();</span>
<span style="font-weight: 400;"> var current_page_new = currentPage + 1;</span>
<span style="font-weight: 400;"> var next_coll = currentPage + 2;</span>
<span style="font-weight: 400;"> //alert(current_page_new)</span>
<span style="font-weight: 400;"> //return false;</span>
<span style="font-weight: 400;"> $.ajax({</span>
<span style="font-weight: 400;"> url: nextUrl,</span>
<span style="font-weight: 400;"> type: 'GET',</span>
<span style="font-weight: 400;"> dataType: 'html',</span>
<span style="font-weight: 400;"> success: function(responseHTML){</span>
<span style="font-weight: 400;"> $('[data-next-link]').val(datacollurl + "?page="+next_coll);</span>
<span style="font-weight: 400;"> $('[data-this-page]').val(current_page_new);</span>
<span style="font-weight: 400;"> $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());</span>
<span style="font-weight: 400;"> },</span>
<span style="font-weight: 400;"> complete: function() {</span>
<span style="font-weight: 400;"> if(current_page_new < totalPages) {</span>
<span style="font-weight: 400;"> $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');</span>
<span style="font-weight: 400;"> }</span>
<span style="font-weight: 400;"> if(current_page_new >= totalPages) {</span>
<span style="font-weight: 400;"> $this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');</span>
<span style="font-weight: 400;"> }</span>
<span style="font-weight: 400;"> }</span>
<span style="font-weight: 400;"> })</span>
<span style="font-weight: 400;">});</span>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.
<span style="font-weight: 400;">.load-more_wrap{</span>
<span style="font-weight: 400;"> margin-top: 60px;</span>
<span style="font-weight: 400;"> text-align: center;</span>
<span style="font-weight: 400;">}</span>
<span style="font-weight: 400;">.load-more_wrap img{</span>
<span style="font-weight: 400;"> max-width: 25px;</span>
<span style="font-weight: 400;">}</span>
<span style="font-weight: 400;">ul.pagination{</span>
<span style="font-weight: 400;"> display: none !important;</span>
<span style="font-weight: 400;">}</span>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.
