How to add infinite scroll pagination to Shopify collection pages

Share Now

1. Find 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 %}

2. This should be the product loop and pagination loop

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

3. Finally add the javascript code to the end of the file

document.addEventListener("DOMContentLoaded", function() {
    var endlessScroll = new Ajaxinate({
      container: '#collection_loop',
      pagination: '#collection-pagination'
    });
    
  });

DEMO LINK

#Main Article

Picture of Nahid Mahamud

Nahid Mahamud

Web Developer | Graphic Designer | WordPress & Woo-commerce Expert