Infinite scroll stopped working

Technical Q&A

Topic summary

A user reports that their infinite scroll script for Shopify collections stopped working properly after functioning correctly since April. The script now paginates once successfully but then repeats the same 16 products on subsequent loads.

Root Cause Identified:

  • The script builds pagination URLs by manually incrementing the page parameter (?page=2, ?page=3) using a static dataset.next value
  • This approach fails because it doesn’t account for Shopify’s dynamic pagination structure, which changes with filters, sorting, or tags (e.g., ?filter.v.availability=1&page=2)
  • After the first load, dataset.next becomes stale and keeps referencing the original URL

Proposed Solution:

  • Dynamically update the data-next attribute after each fetch by extracting the new pagination URL from the response HTML
  • Modified fetchNextPage() function provided that parses the fetched HTML and updates the next page reference
  • Includes fallback logic for themes that no longer support classic ?page=2 navigation
  • Code snippets provided for both JavaScript fixes and proper Liquid template setup

The discussion remains open pending confirmation that the solution resolves the issue.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi i am using a script to auto paginate my collections, it was working correctly but now paginates once correctly and then shows the same 16 products on every pagination.

this has worked fine since april but has now stopped i have attched my scroll as a PDF, i call this script in main-collection-product-grid.liquid just before {%- endpaginate -%}

{% render ‘infinite-scroll’,

next_page: paginate.next.url,

page_size: paginate.pages,

end_text:“You reached the end…”

%}

2

Hi @yoda71 ,

I am from Mageplaza - Shopify solution expert.

Your script builds the next page URL like this:

const t = `{{ shop.url }}/${this.dataset.next}`;
const i = new URL(t);
i.searchParams.set("page", e);

But this is always resetting to the same dataset.next (probably collection?page=1), and simply changing the page parameter manually.

This logic ignores the fact that Shopify’s pagination can change structure, especially with filters, sorting, tags, or app proxies (like ?filter.v.availability=1&page=2, or ?sort_by=manual).

So dataset.next becomes stale after the first load and you’re stuck modifying ?page=2, ?page=3 manually based on the original URL — not the updated one Shopify would normally generate.

Fix: Dynamically update the data-next value after each fetch
To fix it, you should extract the new data-next from the response HTML after each scroll.

Here’s a modified fetchNextPage() that correctly updates the data-next attribute dynamically:

Updated fetchNextPage() Function
Replace your current fetchNextPage() with:

fetchNextPage(e) {
  if (e <= this.dataset.pageSize) {
    const basePath = this.dataset.next?.split("?")[0]; // safely get the path before query
    const url = new URL(`${window.location.origin}/${basePath}`);
    url.searchParams.set("page", e);

    fetch(url.href, { method: "GET", headers: { "Content-Type": "text/html" } })
      .then((res) => res.text())
      .then((html) => {
        const doc = new DOMParser().parseFromString(html, "text/html");

        // Append new products
        const newGrid = doc.querySelector(this.gridName)?.innerHTML;
        if (newGrid) {
          this.gridContainer.insertAdjacentHTML("beforeend", newGrid);
        }

        // Update dataset.next if the next 

**Ensure Liquid Snippet is Properly Set**
Your infinite-scroll.liquid snippet should look like this inside main-collection-product-grid.liquid:

```markup

Use remove: request.host to avoid duplicating host names when rebuilding URLs in JS.

Optional Fix: Fallback for Shopify themes that no longer support ?page=2
If Shopify removes support for classic ?page=2 navigation, you’ll need to dynamically follow the real next link using something like this:

const newPaginateLink = doc.querySelector('.pagination .next a')?.getAttribute('href');
if (newPaginateLink) {
  this.dataset.next = newPaginateLink.replace(window.location.origin, "");
}

Please let me know if it works as expected!

Best regards!