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

Store Design

Topic summary

Goal: show more products on a Shopify collection page via a “Load more” button without navigating to the next page (AJAX/infinite pagination).

Debut theme approach:

  • Add hidden inputs (next URL, total pages, current page) and a button in collection-template.liquid; add jQuery in theme.js to fetch paginate.next.url and append items to .grid–view-items.
  • Fixes: replace missing icon with text loader; center the button via .load-more_wrap { text-align: center; }.
  • Bugs addressed: repeated first page (increment currentPage before building next URL), button persists at end (disable/hide when currentPage >= totalPages). An alternative JS updates the next link using the collection URL and shows “Products Finished” when done.

Dawn theme approach:

  • Use a custom web component (LoadMore) with fetch; append new items to the product grid container ID (must match your theme). Implementation requires adding markup in theme.liquid, JS in assets (e.g., loadmore.js), and hooking after pagination in sections/main-collection-product-grid.liquid. Ensure dataset attributes and container selectors are correct.

Common issues:

  • “$ is not defined” indicates jQuery isn’t loaded; use the fetch-based solution or include jQuery.
  • Multiple sections loading simultaneously or duplicating non-target collections are theme-specific selector/pagination conflicts; custom code review needed.

Status: Debut solution confirmed working by OP; Dawn solution shared with implementation steps. Discussion remains open; code snippets and selectors are central.

Summarized with AI on January 2. AI used: gpt-5.
1

Hi community, can you help me with this.

I want to load product without going to next page.

Thank you

2

Hi @Embey

You want to load product on collection page with ajax so page cant load?

3

Hello Embey,

Check out this its exact same you are looking for, just you have to implement it in your theme code.

Thanks

4

@Jasoliya yes i want on collection page so page cant load and you see all product on same page.

@Guleria thank you for your instruction, where i need to put this code?

sorry but i am not developer and still learning shopify.

5

You can find this code in Section->collection-template.liquid file. its your collection page file.

1 Like
6

Instructions depends on which theme you are using.
And if you are not aware about liquid, i suggest hire some one to do this.

7

@Jasoliya yes i have this section and see some of code available but not all, can you advice me please i have simple theme and want to set button that load more product.

8

Ok, You have Snippet->product-grid.liquid file on theme? or check in section->collection-template.liquid file inside bellow loop which file you have added.

{% for product in collection.products %}
{% endfor%}
1 Like
9

No i have product-card-grid.liquid this file in snippet. thank you

10

ok,

Follow this:

  1. open section->collection-template.liquid file and find ’ paginate.pages > 1’ condition.

then add bellow code in side this condition.

<input type="hidden" value="{{ paginate.next.url }}" data-next-url>
     	<input type="hidden" value="{{ paginate.pages }}" data-total-pages>
        <input type="hidden" value="{{ paginate.current_page  }}" data-current-page>
        <div class="load-more_wrap">
          <button class="btn js-load-more">
            <span load-more-text>Load more</span>
            <span class="hide" loader>{% include 'icon-spinner' %}</span>
          </but
  1. Now add this js in Asset->theme.js
$('.js-load-more').on('click', function(){
  var $this =$(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val());
  $this.attr('disabled', true);
  $this.find('[load-more-text]').addClass('hide');
  $this.find('[loader]').removeClass('hide');
  var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage);
  $('[data-current-page]').val(currentPage);
  $.ajax({
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
    },
    complete: function() {
      if(currentPage <= totalPages) {
         $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
    }
  })
});
11

Hi jasoliya

Thank you for your code and instructions its very helped me, but i am getting some issue like i have now ‘icon-spinner’ on my snippet what i need to add here ?

12

Change like that:

<span class="hide" loader>Loading...</span>
1 Like
13

Thank you its work can you please check when i click on load button it load same product not next page product.thank you. url sent you

14

Replace with this Js code:

$('.js-load-more').on('click', function(){
  var $this =$(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val());
  $this.attr('disabled', true);
  $this.find('[loader]').removeClass('hide');
  currentPage = currentPage+1;
  var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage);
  $('[data-current-page]').val(currentPage);
  $.ajax({
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
    },
    complete: function() {
      if(currentPage <= totalPages) {
         $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
    }
  })
});
1 Like
15

Yes its worked fine,thank you

Can you see load button left aligned can i make it center ?

16

Add this css:

.load-more_wrap { text-align: center; margin-top: 40px; }
1 Like
17

Thank you so much Jasoliya, its work very well. really appropriate

18

hi, that works very well.

but at the end of the last “load more” there is still a button, but nothings loads because all products of that collection are already shown.

thansk

andy

19

Send your store url i will check if possible.

20

i will send shop url to your email

thanks Andy