How to add infinite scroll pagination on the collection page?

On Shopify store, you can find apps for this feature, but if you have some knowledge of coding you follow this method below for your store,

1. In your Shopify admin go to Online Store > Theme.

2. Find the theme you want to edit and then click Action > Edit code.

3. In the Layout directory, click theme.liquid to open the file.

4. 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 %}

5. Save the file.

6. Go to collection.liquid and find {% for product in collection.products %}. add a the and add more a tag to the wrapper and add one more tag just below it. as added in the below example:

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

7. Add the following JavaScript code to the end of the file.

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

8. Save the file, and you are done.How to add infinite scroll pagination on the collection page?

If you need any help please leave your queries in the comment box.How to add infinite scroll pagination on the collection page?