Shopify Wishlist Tutorial | Guest, Logged In & Shareable Wishlist Setup

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

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);

Then go to main-collection-product-grid.liquid and locate product grid, add the following attribute to the product grid

data-product-grid

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>

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 %}

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:

Reviews

☆☆☆☆☆ No reviews yet