"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 %}

@416serg @jburdi @amjadfaraz I fixed the load just one time issue and here is the full code I used.

theme.liquid.js

function ScrollExecute() {       
           if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
               scrollNode = $('.homeProducts a').last();    
               scrollURL = $('.homeProducts a').last().attr("href");
               changeNode = $('.homeProducts a').last(); 
                pageNumber = $('.homeProducts a').last().attr("href");
             	pagesEnd = $('.pagesEnd').text();
                pagesEnd = parseInt(pagesEnd);
               pageNumber =  parseInt(pageNumber.substring(7,));
                alert(pagesEnd);
               if(pagesEnd >= pageNumber){            	                   	
                    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
                                var filteredData = $(data).find(".product");
                                filteredData.insertBefore( $("#product-list-foot") );
                                    pageNumber ++;
                                    changeNode.attr("href","/?page="+pageNumber.toString());
                                changeNode.insertBefore( $("#product-list-foot") );
                            },
                            dataType: "html"
                        });
                    }
               } 
           }
         }
 
         $(document).ready(function () {
           $(window).scroll(function(){
               $.doTimeout( 'scroll', 200, ScrollExecute);
           });
         });

collections.liquid.html

{% assign collection = collections.frontpage %}
 {% paginate collection.products by 9 %}
    <!-- the top of your collections.liquid -->
    
    <!-- START PRODUCTS -->
    {% for product in collection.products %}
    	    <!-- START PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
    	    <div class="product grid__item large--one-third medium--one-half" id="product-{{ forloop.index | plus:paginate.current_offset }}">
                {% include 'product-grid-item' %}
            </div> 
    	    <!-- END PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
    {% endfor %}
	
    {% if paginate.next %}
         <a id="more" href="{{ paginate.next.url }}"></a>       
    {% endif %}
    	<p class="pagesEnd">{{ paginate.pages }}</p>
    



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

Hey guys, I am using the Shopify Debut theme and I would love to implement this code but not exactly sure where to add this within the files and what to take out from the files-- if anything?

Thanks so much

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...