How to add infinite scroll pagination to Shopify collection pages

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.

The infinite scroll feature helps to gain customer attention. It improves the user experience and makes browsing pages easier. Scrolling is easier for users than clicking (and then scrolling again) and requires less action. Infinite scroll lets users find content they might not otherwise see. The more products your visitors see the better chances they buy from you.


On Shopify App Store has some apps help you setup this feature for your store. But if you have technical skill, you can do this manually. Let’s refer the below steps:

  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.
  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:
  7. Add the javascript code to the end of the file.
  8. Save
  9. You are done!


Happy coding!

You may also like...

4 Responses

  1. Dara says:

    This worked for my store, however every item is duplicated immensely and some product images are way too big/small, etc. Off to a good start but I imagine I just placed this in the wrong places.

  2. Zak says:

    Make you didn’t duplicate the initiation code below, it should be placed just once

    document.addEventListener(“DOMContentLoaded”, function() {
    var endlessScroll = new Ajaxinate({
    container: ‘#Huratips-Loop’,
    pagination: ‘#Huratips-Pagination’

  3. Julien says:

    Hi there. I just set this up and the function works. Although I am having 2 issues. There are the numbers 2345678 appearing at the end of the scroll and also, all my products are shown as sold out even if in stock. Any advice ? Tha ks

Leave a Reply

Your email address will not be published. Required fields are marked *