Compatibility: All Shopify themes
This solution replaces the standard pagination on your Shopify collection page with true infinite scroll functionality. Products load automatically as users scroll down—no buttons to click, no unnecessary interactions.
And here’s the best part: no apps or external libraries are used. Our custom code is lightweight, efficient, and integrates seamlessly with your Shopify theme.
Why Infinite Scroll?
Our implementation uses the Intersection Observer API, a modern and efficient alternative to listening to the scroll event. This ensures smooth performance and avoids the pitfalls of traditional methods.
"The Intersection Observer API provides a way to observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport." – Mozilla
The website performance is not being affected by the code. See the image below (lighthouse result) after the code installation.
This is also mobile friendly and works well with touch screen device. I also added a scroll-to-top button.
You can check the demo store here. Password: made4uo
Key Benefits of Our Infinite Scroll Code
-
Boosted Performance: Our code is crafted to have minimal impact on your website’s speed. After installation, your Lighthouse performance score remains unaffected (see below).
-
Mobile-Friendly: Fully compatible with touch devices, ensuring a seamless browsing experience for all users.
-
Enhanced User Experience: Includes a handy "scroll-to-top" button for easy navigation.
Installation Requirements
- Ensure your collection pages have at least 10 products per pagination page to allow proper loading of additional products.
Upgrade your Shopify collection pages with infinite scroll functionality that’s built for speed, simplicity, and seamless user experience.
What you are buying:
- True Infinite Scroll: Products load dynamically as users scroll to the bottom of the page.
- No Buttons Needed: Say goodbye to pagination buttons for good.
- Performance-Optimized: No external libraries mean no drag on your site’s performance.
- Future-Proof Code: Clean, modern code that integrates seamlessly with your Shopify theme.
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Admin page > Online store > Themes > Actions > Edit code
2. Open the Snippet folder and click "Add a new snippet", name it "infinite-scroll", then paste the code below.
3. Open the collection template for your corresponding theme. It is usually under the Section folder. For Shopify 2.0 free themes, it is the "main-collection-product-grid.liquid."
Your theme is not in the list? Just contact us using "Chat with us."
4. Next, find the " {%- endpaginate -%}." Then above it, place the code below. On some themes, you might need to find the code "{% render 'pagination' %}" and place the code after it. For updated Dawn version 8 and above, please look for the {% render pagination... code and place the code after the {% endif %}. See image below. 
5. Make sure to SAVE your work.
Do not hesitate to contact me with "Chat with us", if you have issues.