Debut Theme - 'Load More' button on collection pages instead of going next/previous page?

Store Design
1

Hi there,

I’m looking at adding a Load More button for when someone is viewing products, instead of going next page, next page over and over again.

Can anyone help me add a load more button? I have seen some code online that I have tried to implement but it did not work :disappointed_face:

My website url: https://orchard-accessory-store.myshopify.com/

Password: frawgh

Thank you so much

2

I followed this tutorial to make the Load More button https://community.shopify.com/c/Shopify-Design/How-can-i-set-continue-load-product-on-collection-page-without/td-p/622747

But it doesn’t seem to work when you click it. Can anyone lend me a hand

3

Uncaught ReferenceError: $ is not defined
at theme.js?v=1456913703072805586:9699

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

Fixed

Add Jquery right before