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.

DEMO

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!

DEMO

Happy coding!

You may also like...

22 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

  4. tejas says:

    Hello,

    I tray to insert this code. but may be this thing now working in my site.
    bydefult after load display “list-view” insted of “grid-view”.
    any dody can you please help me plz…

    • Kiet Huynh says:

      Hi there,

      I just checked your site. To fixed this issue you must re-call the function:

      category_view.changeView(‘grid’, 3, ‘btn-grid-3’)

      after loaded new items.

    • Julien says:

      The scroll works fine for me. But I am wondering how I could get the items to display based on my theme settings.

      It is set to have 5 items per lime and to keep the text within the width of the picture but when the scroll is active, the text remains on one line and messes up the consistency of 5 items per line and it isn’t looking great. Any idea ?

      Thank you

      • Kiet Huynh says:

        Hi Julien,

        I just checked your site. I have an idea for your issue.

        You should add ID name “Huratips-Loop” for the DIV has class name “product-list” and move the DIV has ID name “Huratips-Pagination” out to the product list DIV.

        I hope it is helpful for you.

        • Julien says:

          Thank you I will look at it 🙂

          I have another issue though. Let’s say I scroll down a few pages, enter a product and go back to the list of products, the scroller jumps up a few rows instead of remaining on where I was. Any idea on why ? Thanks again!

  5. s.c says:

    “In the online code editor of collection page”
    By this phrase, do you mean collection-template.liquid?

  6. Julien says:

    Thank you I will look at it 🙂

    I have another issue though. Let’s say I scroll down a few pages, enter a product and go back to the list of products, the scroller jumps up a few rows instead of remaining on where I was. Any idea on why ? Thanks again!

  7. Shreyansh Hingar says:

    Hi,
    I have made the changes as you have mentioned but it did not give me the infinite scroll. however, when I click on loading more it navigates me to the next page. The UI is also gone misaligned. Will you be able to share your code file or guide me?

  8. kelvin daz says:

    Hey there
    This would be great – but following the instructions I did not get it to work… there were error messages.
    Can you explain – do I need to delete the pagination coding from the collection page ? And where do I place the JavaScript code?
    Thanks so much.

  9. Julien says:

    Hi again!

    Is there a way that the browser resumes from where you left the page when going back ? Let say you scroll down a few times and enter an item, when hitting back it resumes at the top of the list and you need to all the way scroll down. It would be noce not to.

    Thanks !

  10. Khalid says:

    This works like a charm, few things that were working on document.ready() stopped working after adding your code but I placed those ready function stuff inside your initiate() function now they are working cool.

    Thanks man 🙂

  11. OKAN says:

    COULDNT MAKE IT WORK HELP PLEAE
    EUROPEANGROCERYUSA.COM

  12. kan says:

    how can we hide pagination number of pages ?

  13. raj says:

    Hi
    I m getting an issue here. For the first time when I open the page, I am getting all the products with image, name and price of each product in that page but when I scroll down, I am not seeing any images of products from there but I am seeing only product name and price of the product without any image

  14. John says:

    Works for me! Thank you, sir! Appreciated.
    But- how to get this fancy loading .gif done ?
    https://genieladen.com/collections/all
    Best, D

Leave a Reply

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