Infinite scroll loads more products automatically as shoppers reach the bottom of a collection page — eliminating the need for pagination buttons. This tutorial shows how to add infinite loading using Liquid + JavaScript, compatible with Dawn and most modern Shopify themes.

Everything here is safe, reversible, and requires **no apps**.

📌 Step 1 — Enable Pagination in Your Collection Template

Your theme must already have pagination for infinite scroll to work.

Go to:

Online Store → Themes → Edit Code → templates/collection.json

Make sure a collection section is added (most themes have main-collection-product-grid).

If pagination is disabled, enable it inside the Theme Editor → Collection Page → Product Grid settings.

📌 Step 2 — Locate the Pagination Block

Open the collection section file:

sections/main-collection-product-grid.liquid

Look for something like:

{% paginate collection.products by 24 %}
  ...
  {% render 'pagination', paginate: paginate %}
{% endpaginate %}

This paginate block is what infinite scroll will hook into.

📌 Step 3 — Add a Wrapper for Product Grid (Required)

Find your product grid markup and ensure it has an ID or class you can target:

<div id="product-grid" class="product-grid">
  ... products here ...
</div>

If your theme already uses id="product-grid" leave it unchanged.

📌 Step 4 — Add the Infinite Scroll JavaScript

Open:

assets/global.js or theme.js

Add this script at the bottom:

document.addEventListener('DOMContentLoaded', () => {

  const grid = document.querySelector('#product-grid');
  if (!grid) return;

  let loading = false;

  const loadMoreProducts = () => {
    const nextPageLink = document.querySelector('.pagination__next');
    if (!nextPageLink || loading) return;

    loading = true;

    fetch(nextPageLink.href)
      .then(response => response.text())
      .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        const newProducts = doc.querySelector('#product-grid').innerHTML;
        const newPagination = doc.querySelector('.pagination').innerHTML;

        grid.insertAdjacentHTML('beforeend', newProducts);

        document.querySelector('.pagination').innerHTML = newPagination;

        loading = false;
      });
  };

  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      loadMoreProducts();
    }
  }, {
    rootMargin: '200px'
  });

  const sentinel = document.createElement('div');
  sentinel.id = 'infinite-scroll-trigger';
  grid.after(sentinel);

  observer.observe(sentinel);

});

This script:

• Detects when the user scrolls near the bottom
• Loads the next page using AJAX
• Appends products automatically
• Updates pagination invisibly (required for next fetch)

📌 Step 5 — Style the Loading State (Optional)

Add a small loading animation under assets/base.css:

#infinite-scroll-trigger::after {
  content: 'Loading more products...';
  display: block;
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #666;
}

You can customize this however you like.

📌 Step 6 — Remove Pagination Buttons (Optional)

If you want pagination hidden entirely, add this to your CSS:

.pagination {
  display: none !important;
}

🧪 Step 7 — Test Infinite Scroll

⚠️ Troubleshooting

🎉 You’re Done!

Your Shopify collection page now loads products automatically — creating a smooth, modern browsing experience similar to big brands like Zara, H&M, and Amazon.