Compatibility: All Shopify themes
This code replaces the standard pagination in collection page and loads the products when they scroll down, that is why it is a real infinite scroll. No clicking on a button. No app or library is being use.
The written code uses Intersection Observer API, which is better than listening to the scroll event.
“The Intersection Observer API provides a way to synchronously 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
Limitations: Make sure you have more than 10 products in each pagination page for the other set of products to load.
What you are buying:
- Product loads when user scrolls to the bottom of the page
- No clicking of the button
- Well written code with NO external library being use
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."
Any Shopify 2.0 FREE themes | Section | main-collection-product-grid.liquid
Debut | Section | collection-template.liquid
Minimal | Section | collection-template.liquid
Supply | Section | collection-template.liquid
Venture | Template | collection.liquid
Impulse | Section | main-collection.liquid
Split | Section | main-collection.liquid
Streamline | Section | collection-template.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.
5. Make sure to SAVE your work.
Update 09/01/2022: I found a code difference between Dawn version 2.1 below and the current version. Code updated to works with both
Do not hesitate to contact me with "Chat with us", if you have issues.