Shopify Infinite Scroll Duplicating Products

The real symptom

Merchants describe this as “products repeat after scrolling,” “page 2 loads the same products,” “infinite scroll hangs,” “filters break after scrolling,” or “Google is finding weird page URLs.” These are different versions of the same problem: the theme’s JavaScript and Shopify’s underlying pagination are out of sync.

Likely causes

• Pagination was removed from Liquid. Infinite scroll needs a real next-page link or page URL to fetch. Hiding pagination with CSS is safer than deleting the underlying logic.
• The script keeps fetching page 1. A bad next URL or stale state can append the same product cards repeatedly.
• The product grid selector is wrong. The script may append the wrong HTML fragment, including already-loaded products.
• Filters and infinite scroll conflict. Collection filters change URLs and product results. Infinite scroll scripts need to reset state after filtering.
• Search results behave differently from collections. Search pages can have different templates, wrappers, and pagination behavior than collection pages.
• An app or theme feature duplicates pagination logic. Third-party infinite-scroll apps can conflict with built-in theme pagination or Search & Discovery filters.

Confirmed Community fix

A Shopify Community thread about paginated URLs in the header gives the key warning: removing frontend pagination can break collection pages because infinite pagination still relies on page-based pagination. A newer Horizon bug report describes infinite scroll duplicating the last visible row on search results when the next page is loaded. Community discussions around filters and infinite scroll also point to theme-specific JavaScript and pagination state as the practical debugging area.

Admin path

1. Go to Shopify Admin → Online Store → Themes.
2. Duplicate the live theme before editing.
3. Open the collection template in the theme editor and temporarily disable infinite scroll if the theme has a setting for it.
4. Confirm normal pagination works on the collection page.
5. Go to Actions → Edit code.
6. Search for files or snippets named pagination, main-collection-product-grid, facets, infinite-scroll, or load-more.
7. Check that the theme still renders a valid next-page URL inside the collection pagination logic.
8. Retest filters, sorting, and search results separately.

Useful Liquid check

Shopify collection pagination usually starts with Liquid’s paginate tag. Infinite scroll can hide the visual pagination, but it should not destroy the data the script needs.

{% paginate collection.products by 24 %}
  <div id="ProductGridContainer">
    {% for product in collection.products %}
      {% render 'card-product', card_product: product %}
    {% endfor %}
  </div>

  {% if paginate.next %}
    <a href="{{ paginate.next.url }}" class="pagination-next">Next</a>
  {% endif %}
{% endpaginate %}

Your theme may use different section names and selectors, but the idea is the same: the next-page URL must be correct, and the script must append only the new product-card HTML from that next page.

DevTools test

Open DevTools → Network and scroll until the next page loads. Check the request URL. If the script requests the same URL repeatedly, or keeps requesting page 1, that explains duplicates. Then inspect the response HTML and confirm whether it contains only the expected next set of products or a larger wrapper that includes already-loaded content.