Adding Infinite Scroll to Essentials Theme Product Page

[teemania]

My website: https://teemania.co/

Hello, I would like to add an infinite scroll to my product page to see how to website performs. Right now it only displays about 20 items and then there’s a load more button. I’ve looked around and haven’t found any answers on how to implement it on my current theme.

Thanks!

[HDL-Shin]

Hi @teemania ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid and Insert the below code at the bottom of the file → Save

Hope this can help you
Kind regard,
HDL-Shin

[HDL-Shin]

Hi @teemania ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid and Insert the below code at the bottom of the file → Save

Use tag and insert code inside tags :

let btn_loadMore;
   window.addEventListener('scroll', function(event) {
	if(!btn_loadMore) {
           btn_loadMore = document.querySelector("button.button--big.js-load-more");
        }
        else {
           if(btn_loadMore.offsetTop - 110 < window.pageYOffset) {
               btn_loadMore.click();
               btn_loadMore = null;  
           }
        }
    	
   });

Hope this can help you

Kind regards,

HDL-Shin

[HDL-Shin]

Hi @teemania ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid and Insert the below code at the bottom of the file → Save

Hope this can help you

Kind regards,

HDL-Shin

[HDL-Shin]

Hi @teemania ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid and Insert the below code at the bottom of the file → Save

Hope this can help you

Kind regards,

HDL-Shin

[HDL-Shin]

Hi @teemania ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid and Insert the below code at the bottom of the file → Save

Hope this can help you

Kind regards,

HDL-Shin

[ThePrimeWeb]

Hey @teemania ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Above the tag “” tag paste the following. Screenshot attached for reference.

Screenshot for reference

[HashimovH]

Hello @teemania

I know this is an old post, and I hope you have already solved the problem for your shop. I would still like to answer if new fellow merchants check the page and need it. I have built ScrollerPro - Infinite Scroll app, which solves the issues with infinite scroll logic. I have attached the cover image and the link to the marketplace. You can check it out and discover all the features

[devcoders]

Hi @teemania

Got it! You want to replace the “Load More” button on your product collection page with infinite scroll so more products automatically load as the user scrolls down. I can guide you through implementing this on a Shopify theme like Dawn.

Step 1: Locate the “Load More” Section

In Dawn (or similar Shopify themes), the collection page usually has a section like:

• main-collection.liquid (older Dawn)
• Or main-collection.json + collection-template.liquid

Look for the Load More button code, typically:

<button class="load-more" data-page="2">
  {{ 'general.load_more' | t }}
</button>

Step 2: Hide the Load More Button

We’ll replace it with infinite scroll, so first hide it via CSS:

.load-more {
  display: none;
}

Step 3: Add Infinite Scroll JavaScript

Add this JavaScript at the bottom of your theme (inside theme.js or main-collection.js):

let loading = false;
let currentPage = 2;
const totalPages = {{ collection.pages | json }}; // Total pages in collection

window.addEventListener('scroll', function() {
  if (loading) return;

  const scrollPosition = window.scrollY + window.innerHeight;
  const threshold = document.body.scrollHeight - 500; // start loading 500px before bottom

  if (scrollPosition > threshold && currentPage <= totalPages) {
    loading = true;

    fetch(`{{ collection.url }}?page=${currentPage}`)
      .then(response => response.text())
      .then(data => {
        // Parse returned HTML
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(data, 'text/html');

        // Get new product items
        const newProducts = htmlDoc.querySelectorAll('.product-card'); // adjust class if different

        // Append to current product grid
        const grid = document.querySelector('.grid--products'); // adjust selector
        newProducts.forEach(product => grid.appendChild(product));

        currentPage++;
        loading = false;
      })
      .catch(err => {
        console.error('Infinite scroll error:', err);
        loading = false;
      });
  }
});