How to Add Infinite Scroll to Shopify Collection Page?

There are multiple ways to make your online store experience memorable for the visitors. One such feature you can implement is the Infinite Scroll to Shopify collection page.

The default pagination on the Shopify collection pages requires visitors to click the next and previous buttons to navigate through all the products in the store.

It can add a bit of friction to your customer’s purchase journey with the store. Infinite scroll in the Shopify store solves this issue by autoloading more products once the visitor reaches the bottom of the page.

In this Shopify how-to tutorial post, we’ll learn how to add infinite scroll functionality to Shopify collection pages.

What is Infinite Scroll in Shopify?

Shopify infinite scroll is a feature that auto-loads the following products on the collection page as soon as the visitor scrolls down to the bottom. It eliminates the need to click the next and previous pagination buttons to browse the products.

Options to Add Infinite Scroll to Shopify Collection Page

Shopify infinite scroll is a valuable feature you can add to your store to improve the customer product browsing experience. You can add infinite scroll to Shopify store in mainly two ways:

• Use an app: Plenty of apps are available to add an infinite scroll to Shopify. It’s the easiest way–but it can cost a monthly subscription fee.
• Modify liquid theme code: Use a custom code to add Shopify infinite scroll to Shopify collection pages. It requires you to have a basic coding knowledge.

In this post, we’re going to cover the tech-savvy method–i.e. how to create infinite scroll in Shopify without app. You can follow the step-by-step process below to add an infinite scroll feature to your Shopify collection pages.

Caution: Editing Shopify theme code requires knowledge of Liquid, HTML, CSS, and JavaScript. Proceed with caution and consider consulting a professional if unsure.

How to Add Infinite Scroll to Shopify Collection Page?

To add Shopify infinite scroll to collection pages, you can add a custom liquid snippet to the theme. And render it in the collection page template. Our experts have prepared a theme code to add the infinite scroll in Shopify, which you can use.

Here’s the step-by-step process on add infinite scrolling to Shopify collection pages.

In Shopify admin, navigate to Online Store > Themes. Click the three dots beside the Customize button and click ‘Edit code‘ from the dropdown as shown below.

In the Shopify theme editor, click ‘Add a new asset‘ in the left menu and name it meetanshi-infinite-scroll.js.

Copy the following theme code to add the infinite scroll in Shopify:

var MeetAjaxForProduct = function ajaxConstructor(settings) {
  var default_Data = {
    container: "#infinteLoop",
    method: "scroll",
    callback: null,
    loadingText: "Loading Now....",
    pagination: "#infinitePagination",
    offset: 0,
  };

  var data = settings || {};
  this.data = Object.assign(default_Data, data);

  this.meetProductClick = this.meetProductClick.bind(this);
  this.meetProductScroll = this.meetProductScroll.bind(this);
  this.meetProductDestroy = this.meetProductDestroy.bind(this);
  this.meetStopProductMultipleClicks = this.meetStopProductMultipleClicks.bind(this);
  this.meetProductPaginationlnView = this.meetProductPaginationlnView.bind(this);

  this.meetProductpagination = document.querySelector(this.data.pagination);
  this.meetProductcontainer = document.querySelector(this.data.container);

  this.meetProductInitialize();
};

MeetAjaxForProduct.prototype.meetProductInitialize = function basedProductsInitializeTheCorrectFunctionsMethod() {
  if (this.meetProductcontainer) {
    var initialidata = {
      click: this.meetProductClick,
      scroll: this.meetProductScroll,
    };
    if (initialidata[this.data.method]) {
      initialidata[this.data.method]();
    }
  }
};

MeetAjaxForProduct.prototype.meetProductScroll = function productsPageScrolling() {
  if (this.meetProductpagination) {
    document.addEventListener("scroll", this.meetProductPaginationlnView);
    window.addEventListener("resize", this.meetProductPaginationlnView);
    window.addEventListener("orientationchange", this.meetProductPaginationlnView);
  }
};

MeetAjaxForProduct.prototype.meetProductClick = function productsPageClicking() {
  if (this.meetProductpagination) {
    this.nextPageLinkElement = this.meetProductpagination.querySelector("a");
    this.clickActive = true;
    if (this.nextPageLinkElement) {
      this.nextPageLinkElement.addEventListener("click", this.meetStopProductMultipleClicks);
    }
  }
};

MeetAjaxForProduct.prototype.meetStopProductMultipleClicks = function prouctPageHandleClickEvent(event) {
  event.preventDefault();
  if (this.clickActive) {
    this.nextPageLinkElement.innerHTML = this.data.loadingText;
    this.nextPageUrl = this.nextPageLinkElement.href;
    this.clickActive = false;
    this.loadMore();
  }
};

MeetAjaxForProduct.prototype.meetProductPaginationlnView = function prouctPageHandleScrollEvent() {
  var top = this.meetProductpagination.getBoundingClientRect().top - this.data.offset;
  var bottom = this.meetProductpagination.getBoundingClientRect().bottom + this.data.offset;

  if (top <= window.innerHeight && bottom >= 0) {
    this.nextPageLinkElement = this.meetProductpagination.querySelector("a");
    this.removeScrollListener();

    if (this.nextPageLinkElement) {
      this.nextPageLinkElement.innerHTML = this.data.loadingText;
      this.nextPageUrl = this.nextPageLinkElement.href;
      this.loadMore();
    }
  }
};

MeetAjaxForProduct.prototype.loadMore = function nextPageRequest() {
  var loaderElement = document.getElementById("loader");
  if (loaderElement) loaderElement.style.display = "block";

  setTimeout(() => {
    this.request = new XMLHttpRequest();
    this.request.onreadystatechange = function success() {
      if (this.request.readyState === 4 && this.request.status === 200) {
        var cratedPagination = this.request.responseXML.querySelector(this.data.pagination);
        var cratedContaner = this.request.responseXML.querySelector(this.data.container);

        if (cratedPagination) {
          this.meetProductpagination.innerHTML = cratedPagination.innerHTML;
        } else {
          this.meetProductpagination.innerHTML = ""; // Remove pagination if none left
        }

        if (cratedContaner) {
          this.meetProductcontainer.insertAdjacentHTML("beforeend", cratedContaner.innerHTML);
        }

        if (this.data.callback && typeof this.data.callback === "function") {
          this.data.callback(this.request.responseXML);
        }

        if (!this.request.responseXML.querySelector(`${this.data.pagination} a`)) {
          console.log("No more products to load.");
          this.removeScrollListener();
          if (loaderElement) loaderElement.style.display = "none";
        } else {
          this.meetProductInitialize();
        }
      }
    }.bind(this);

    this.request.open("GET", this.nextPageUrl);
    this.request.responseType = "document";
    this.request.send();
  }, 2000);
};

MeetAjaxForProduct.prototype.removeScrollListener = function removeProductScroll() {
  document.removeEventListener("scroll", this.meetProductPaginationlnView);
  window.removeEventListener("resize", this.meetProductPaginationlnView);
  window.removeEventListener("orientationchange", this.meetProductPaginationlnView);
};

MeetAjaxForProduct.prototype.meetProductDestroy = function removeProductReturnData() {
  var yereData = {
    click: this.removeClickListener,
    scroll: this.removeScrollListener,
  };
  if (yereData[this.data.method]) {
    yereData[this.data.method]();
  }
  return this;
};

MeetAjaxForProduct.prototype.removeClickListener = function removeProductClick() {
  if (this.nextPageLinkElement) {
    this.nextPageLinkElement.removeEventListener("click", this.meetStopProductMultipleClicks);
  }
};

Paste the copied into the meetanshi-infinite-scroll.js file and click ‘Save‘.

Now, we’ll call the previously saved Shopify infinite scroll snippet on the collections page.

First, open the main-collection-product-grid.liquid and add this link to the main-collection-product-grid at the top.

   <script src="{{ 'meetanshi-infinite-scroll.js' | asset_url }}" ></script>

Then in the same main-collection-product-grid.liquid find {% schema %} and paste the below code above it. 

<div id="loader" style="display: none; width: 100%;text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0668/1398/5008/files/Iphone-spinner-2.gif?v=1735809435" style="margin: 0 auto;" width="50px" height="50px"> </div>
<script>
const infiniteCollection = new MeetAjaxForProduct({
container: '#product-grid',
pagination: '.meet_infinite_next',
});
</script> 

And click ‘Save‘ to update the code.

Then, in the snippet folder, open pagination.liquid find  {%- if paginate.next -%}  and add class 

<li class="meet_infinite_next">

Head to the assets folder, open the component-pagination head to the bottom and add this code. 

.pagination__list{
  display: none;
}

The Shopify collection pages will now auto-load the next page when users reach the bottom. This method also adds a scroll top button to the pages. Here’s what the Shopify infinite scroll looks like on the collection page:

So this is how you can enable infinite scroll on Shopify theme code.

Improve UX with Shopify Infinite Scroll

Setting up infinite scroll on collections pages in Shopify is an effective way to grease the customer journey in your store. Another way you can improve your store’s experience is by offering a quick customer support facility to the customers. You can add WhatsApp chat button to Shopify and help your customers chat with you on WhatsApp with a single click!

Smooth customer experience is an essence of successful online business. You may need to change the theme. Tweak and twist the layout. And make some bold moves.

We know it because our experts have done it for hundreds of stores and can do it for yours too. Consult now!