How To Add Infinite Scroll to Shopify?

If your store has multiple products in a collection on your Shopify store, instead of making customers have to visit multiple product pages to see, you can add infinite scroll to it.

The infinite scroll feature helps to capture the customer’s attention. It improves the user experience and makes browsing the pages easier. Scrolling is easier for the user than clicking (and then scrolling) because it requires less action. Infinite scroll allows users to find the content they might not otherwise see. The more products your visitors see, the more likely they are to buy from you.

Step By Step

Step 1: In your Shopify admin page, you open Online Store > Theme.

Step 2: Find the theme you want to edit, then click Action > Edit code.

Step 3: In the Layout section, click theme.liquid to open this file in the online code editor.

Find the tag 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 %}

Then save

Step 4: Open the template of the collection page and find the loop {% for product in collection.products %} and add a DIV tag that wraps and adds multiple DIV tags just below that tag. For example:

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

Paste below js line at the bottom of the file

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

Click Save and you’re done.

Conclusion

Above is the instruction for creating infinite scroll on shopify that will help you optimize your store. Thanks for reading!