Demo:  https://www.madamefancypants.com/collections/designers

If your store has lots of products for a specific collection page on your Shopify store? Instead of getting customers to navigate to multiple pages of products you can now add infinite scroll to your Shopify collections pages so customers can keep scrolling through.

1. From your Shopify admin, to to Online Store > Theme.                                                                                                                          
2. Find the theme you want to edit and then click Action > Edit code.                                                                                              
3. In the Layout section, click theme.liquid to open the file in the online code editor.                                                                                                                                                                                           
4. Find </head> and paste the below code just above it.
   
   {% if template contains 'collection' %}{{ 'https://cdn.shopify.com/s/files/1/0382/4185/files/ajaxinate.js?937' | script_tag }}{% endif %}                                                                                                                                                           
5. Save.                                                                                                                                                                                                
6. In the online code editor of collection page find to the loop {% for product in collection.products %} and add more a DIV tag to wrapper and add more a DIV tag just below it. For example

   1 2 3 4 5 6 7 8 9 10

   <div id="Huratips-Loop" >       {% for product in collection.products %}         {% include 'product-grid-item' %}       {% endfor %} </div> <div id="Huratips-Pagination">     {% if paginate.next %}     <a href="{{ paginate.next.url }}">Loading More</a>     {% endif %}   </div>

    

7. Add the javascript code to the end of the file.

   1 2 3 4 5 6 7 8

   <script>   document.addEventListener("DOMContentLoaded", function() {     var endlessScroll = new Ajaxinate({       container: '#Huratips-Loop',       pagination: '#Huratips-Pagination'     });   }); </script>

    

8. Save                                                                                                                                                                                                                                                         
9. You are done!