Real Infinite Scroll for Shopify Collection Page

Real Infinite Scroll for Shopify Collection Page

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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. 

performance

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."

 

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. Infinite scroll placement

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

Update 08/20/2023: Found a placement issue to newer version of Dawn

 

Do not hesitate to contact me with "Chat with us", if you have issues.

Copied!
Back to blog

Leave a comment