"Infinite" scrolling in Shopify collections

collections.liquid.html

    {% paginate collection.products by 20 %}
    <!-- the top of your collections.liquid -->
    
    <!-- START PRODUCTS -->
    {% for product in collection.products %}
    	    <!-- START PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
    	    <div class="product" id="product-{{ forloop.index | plus:paginate.current_offset }}">
                {% include 'product' with product %}
            </div> 
    	    <!-- END PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
    {% endfor %}
	
    {% if paginate.next %}
        <div id="more"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>        
    {% endif %}

    <div id="product-list-foot"></div>
    <!-- END PRODUCTS -->
    
    <!-- the bottom of your collections.liquid -->
    {% endpaginate %}

theme.liquid.js

    {% if template contains 'collection' %}
         function ScrollExecute() {
           if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
               scrollNode = $('#more').last();    
               scrollURL = $('#more p a').last().attr("href");
               if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
                   $.ajax({
                       type: 'GET',
                       url: scrollURL,
                       beforeSend: function() {
                           scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
                           scrollNode.hide();
                       },
                       success: function(data) {
                           // remove loading feedback
                           scrollNode.next().remove();
                           var filteredData = $(data).find(".product");
                           filteredData.insertBefore( $("#product-list-foot") );                   
                       },
                       dataType: "html"
                   });
               }
           }
         }
 
         $(document).ready(function () {
           $(window).scroll(function(){
               $.doTimeout( 'scroll', 200, ScrollExecute);
           });
         });
    {% endif %}

Hi,
I use the Shopify Brooklyn theme
It currently used ‘pages’ and I want to convert it to ‘infinite scrolling. I want the product to load as you scroll down.
I want to go into the code and make my product page have infinite scrolling. I do not want to change the theme and use an app please help me thAnks

I had a pagination problem as well and was short on time. I ended up trying this - https://elkfox.github.io/Ajaxify/#getting-started - Works like a charm. Got the AJAX pagination working less than 5 mins.

Hey kevinhf I tried following the documentation for the Ajaxify, but wasn't able to get it working. Would you be able to give me some pointers on where the code is supposed to be injected? Or what steps you took to integrate that infinity scroll solution?

Hi guys,

I'm using narrate theme and getting "Liquid error: Could not find asset snippets/product.liquid" error.
Have Product-card.liquid and product-form.liquid in my nippets.

@davecap do you happen to know a quick workaround with newer Shopify themes that use product-card and product-form snippet names?

Sorry, I haven't worked with Shopify themes in several years...