infinite scroll

Store Design
1

Hi,

I would like to have infinite scroll on my collection pages. I use Prestige theme. I have used scrollify before on Dawn, but I can`t make it work on Prestige. Can someone please help me with a solution?

//Helena

2

Hi Helena,

I understand you’ve used scrollify with Dawn before, but Prestige requires a slightly different approach. I’ve prepared a custom solution that should work with your theme:

Implementation Steps:

  1. Add jQuery and Custom Script Add this code to your theme.liquid file just before the closing tag:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  var canLoad = true;
  var loading = false;
  var threshold = 500;

  $(window).scroll(function() {
    if (canLoad && !loading && $(window).scrollTop() + $(window).height() > $(document).height() - threshold) {
      loadMoreProducts();
    }
  });

  function loadMoreProducts() {
    if ($('.pagination .next').length > 0) {
      loading = true;
      var nextUrl = $('.pagination .next').attr('href');
   
      if (nextUrl) {
        $('.collection-products-loading').show();
     
        $.ajax({
          url: nextUrl,
          type: 'GET',
          dataType: 'html',
          success: function(data) {
            var newItems = $(data).find('.product-grid-item');
            var nextLink = $(data).find('.pagination .next').attr('href');
         
            if (!nextLink) {
              canLoad = false;
            }
         
            $('.product-grid').append(newItems);
            $('.pagination').html($(data).find('.pagination').html());
         
            loading = false;
            $('.collection-products-loading').hide();
          }
        });
      } else {
        canLoad = false;
      }
    }
  }
</script>

  2. Add Loading Indicator Find your collection template file (likely in sections/collection-template.liquid or similar) and add this code just after your product grid:

    <div class="collection-products-loading" style="display: none; text-align: center; padding: 20px;">
  <p>Loading more products...</p>
</div>

  3. Verify Your Theme’s HTML Structure For this to work properly, make sure your collection page has:

    • Product grid with class .product-grid
    • Individual products with class .product-grid-item
    • Pagination with class .pagination
    • “Next” link with class .next

    If any of these class names are different in your Prestige theme, you’ll need to update the JavaScript code accordingly.

If you’d prefer not to implement this yourself, I’d be happy to set this up for you at no charge. I can help ensure everything is working correctly with your specific theme setup.

Just let me know if you’d like me to implement this for you, please DM your collaborator code.

Best regards,

Shubham | Untechnickle

3

Hi TheUntechnickle,

I’m afraid I still can`t make this work.

Below is my theme.liquid. I have marked in red where I place the code. I think so far so good.

theme.liquid.jpg
theme.liquid.jpg1607×1034 124 KB

Next is my main-collection.liquid. Is that the right file? Where do I place the code?

main-collection.liquid.jpg
main-collection.liquid.jpg2168×3457 595 KB

Also, I think the class names are a bit different from what I can see?

.product-list

.product-card

.pagination.

The next link confuses me?

html.jpg
html.jpg1148×794 252 KB

Any chance you can give me som additional support?

All the best, Helena