Shopify - Infinite scroll (mobile only) - inspired by: https://gist.github.com/davecap/1187078/ebae13b05f80fabfd03fffa54bf79c264230120f

infinite-scroll.md

collection-grid.liquid

{% paginate collection.products by 20 %}
    
    <!-- START PRODUCTS -->
    {% for product in collection.products %}
    	    <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="AjaxinatePagination"><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 %}

collection.liquid

{% if template contains 'collection' %}

         function ScrollExecute() {
            if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
                scrollNode = $('#AjaxinatePagination').last();    
                scrollURL = $('#AjaxinatePagination 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-grid");
                            var checkLastPage = $('#AjaxinatePagination a').last();
                            var nextUrl = $(data).find('#AjaxinatePagination a').last().attr("href");

                            // Change next page URL to current page of infinite scroll
                            // If last page, remove link
                            if(nextUrl) {
                              $('#AjaxinatePagination a').last().attr('href', nextUrl);
                              scrollNode.show();
                            } else {
                              scrollNode.hide();
                            }
                            console.log('is last page?', checkLastPage);
                            if(checkLastPage) {
                              filteredData.appendTo( $("#AjaxinateLoop") );                   
                            }
                        },
                        dataType: "html"
                    });
                }
            }
         }
 
         $(document).ready(function () {
           // Only activate infinite scroll on mobile devices
           if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            $(window).scroll(function(){
                $.doTimeout( 'scroll', 200, ScrollExecute);
            });
          }
         });
    {% endif %}
   
    ```