Skip to content
Go back

Add infinity scroll on shopify collection page

Saad Saif - Shopify Expert

Need a Shopify Expert?

Stuck or don’t have the time? I’ll personally implement this solution for you with my expert hands - for just $30.

💬 Message me on WhatsApp

Add infinity scroll on shopify collection page

In this example, we will add infinity scrolling to Shopify DAWN theme, but you can add it any Shopify theme


Steps

  1. In the assets folder, create a file namded as: infinite-scroll.js
    • Paste the following code in that file:
class InfiniteScroll extends HTMLElement {
  constructor() {
    super();
    this.anchor = this.querySelector("a");
    if (!this.anchor) return;

    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          this.loadNextPage();
        }
      });
    });

    this.observer.observe(this);
  }

  async loadNextPage() {
    this.observer.disconnect();

    this.anchor.style.display = "flex";
    this.anchor.innerText = "Loading...";

    const url = this.anchor.getAttribute("href");
    if (!url) return;

    try {
      const response = await fetch(url);
      const text = await response.text();
      const html = new DOMParser().parseFromString(text, "text/html");

      // Grab the product grid from the next page
      const newGrid = html.querySelector("[data-product-grid]");
      const grid = document.querySelector("[data-product-grid]");

      if (newGrid && grid) {
        Array.from(newGrid.children).forEach((child) => {
          grid.appendChild(child);
        });
      }

      // Handle next infinite scroll
      const newInfinite = html.querySelector("infinite-scroll");
      if (newInfinite) {
        this.replaceWith(newInfinite);
      } else {
        this.remove();
      }
    } catch (err) {
      console.error("InfiniteScroll error:", err);
    }

    this.anchor.style.display = "none";
    this.anchor.innerText = "";
  }
}

customElements.define("infinite-scroll", InfiniteScroll);
  1. Then go to main-collection-product-grid.liquid and locate product grid, add the following attribute to the product grid
data-product-grid
  1. Then under the product grid, add the following code:
<infinite-scroll style="display: flex; justify-content: center;">
  {%- if paginate.next -%}
    <a style="color: currentColor; text-decoration: none; pointer-events: none;" href="{{ paginate.next.url }}&section_id={{ section.id }}"></a>
  {%- endif -%}
</infinite-scroll>
  1. Then comment out the original pagination by adding comment tags at the start and end like this:
{% comment %}
  {%- if paginate.pages > 1 -%}
    {% render 'pagination', paginate: paginate, anchor: '' %}
  {%- endif -%}
{% endcomment %}
  1. Then at the end of head tag in theme.liquid, add this line to attach the asset the we created:
<script src="{{ 'infinite-scroll.js' | asset_url }}" defer="defer"></script>

Video Tutorial

Watch the step-by-step video tutorial here:

Add infinity scroll on shopify collection page


Saad Saif - Shopify Expert

Need a Shopify Expert?

Stuck or don’t have the time? I’ll personally implement this solution for you with my expert hands - for just $30.

💬 Message me on WhatsApp

Share this post on:

Previous Post
Add custom badges on Shopify products without app
Next Post
How to design custom product labels and badges in Shopify
WhatsApp