If you want to add load more button on Shopify collection page instead of default pagination button, then we are going to explain you step by step process.
Load more button enables you to show more products on collection page in shopify website without going to next page.
Check how to Create App and Getting Started With Shopify API in PHP
Steps to Create Load more button on Shopify:
Step 1: Add HTML code:
Open the collection-template.liquid file under section and look for ‘paginate.pages > 1’ condition code.
Like this: (% if paginate.pages > 1 %)
Now add below HTML code after this condition.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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.
|
1 2 3 4 5 6 7 8 9 10 |
.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$('.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'); } } }) }); |
See, its quite easy to add load more button on shopify collection page.
