How can i set continue load product on collection page without go to next page.

34 1 0

Hi community, can you help me with this.

I want to load product without going to next page.

Thank you

Replies 35 (35)
8 0 2

Hi, sir i tried your code and it worked 

can you tell me the possible solution for after clicking it shows all products sudden as i attached the reference link below

if you can help me


Shopify Expert
4382 574 1104

This instruction is for debut theme so you can take idea. or need custom code for other theme.


Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
33 2 5

I am using Debut and this does not work for me. When I click Load More nothing happens and I get an error: "Uncaught ReferenceError: $ is not defined"
for theme.js

$('.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);
  var nextUrl = $('[data-next-link]').val();
  var current_page_new = currentPage + 1;
  var next_coll = currentPage + 2;
    //return false;
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('[data-next-link]').val(datacollurl + "?page="+next_coll);
    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');
New Member
1 0 0


A solution for Dawn theme

<load-more class="load-more_wrap" 
      data-next-url="{{ }}" 
      data-current-page="{{ paginate.current_page  }}" 
      data-total-pages="{{ paginate.pages }}" 
      data-page-size="{{ paginate.page_size }}"
      <script>console.log({{ paginate | json }})</script>
      <div class="load-more_row">
        Items shown
      <div class="load-more_row">
        <span load-items-count>{{ paginate.page_size }}</span> / {{paginate.items}}
      <button class="load-more_row button button--secondary js-load-more" type="button">
        Load more
class LoadMore extends HTMLElement { 
    this.addEventListener("click", this.loadMoreItems);

  loadMoreItems() { 
    const loadMoreBtn = this.querySelector('[type="button"]');
    loadMoreBtn.setAttribute("disabled", true);

    let { currentPage, pageSize, nextUrl, totalItems } = this.dataset
    let nextPage = parseInt(this.dataset.currentPage) + 1
    fetch(nextUrl.replace(/page=[0-9]+/,'page='+ nextPage))
      .then(response => response.text())
      .then((responseText) => {
        const html = responseText;
      }).catch((e) => {
        // handle error
      .finally(() => {
        this.dataset.currentPage = parseInt(this.dataset.currentPage) + 1;
        let isLastPage = parseInt(totalItems) - (nextPage * parseInt(pageSize) ) < 0
        this.querySelector('[load-items-count]').innerHTML = isLastPage ? parseInt(totalItems) : nextPage * parseInt(pageSize)
        isLastPage && loadMoreBtn.setAttribute("disabled", true);

customElements.define('load-more', LoadMore);


New Member
3 0 0

Hey @Kostop19 ,

It's not working for the dawn theme. Can you please recheck the code again and also suggest that where the code should be implemented means in which file and at which point. I had implemented the code after the condition {%- if paginate.pages > 1 -%} in the main-collection-product-grid.liquid but the doenst't worked for me.