How to Add a Load More Button to a Shopify Collection Page (Dawn Theme)

A collection page with numbered pages makes shoppers click, wait and start again at the top. A load more button keeps them on one page and adds the next set of products under the ones they have already seen.

Why Add Load More Button?

We use a load more button on client stores for a simple reason: you cannot put everything in front of a customer at once. A collection that shows a first set of products and loads the rest on request stays clean and quick to scan.

It also lets the shopper keep comparing. The products they have already looked at stay on the page while new ones appear below.

Which theme this works on

This guide is written for Dawn, the theme we build most client stores on. Dawn is Shopify’s own free theme, it is fully customisable, and its updates are free. The code follows Dawn’s current collection section. Themes built on Dawn use the same structure, so it usually works on them with little or no change.

The earlier version of this guide used jQuery and file names from an older theme. Dawn has neither, so the code below is new.

Before you start

Work on a copy of your theme. In your Shopify admin go to Online Store, then Themes, open the menu next to your theme and choose Duplicate. Then choose Edit code on the copy. Publish it only after you have tested the button.

Step 1: Replace the pagination with a button

Open sections/main-collection-product-grid.liquid and find these lines:

{%- if paginate.pages > 1 -%}
  {% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}

Replace them with this:

{%- if paginate.next -%}
  <div class="load-more">
    <button type="button" class="button load-more__button" data-next-url="{{ paginate.next.url }}">
      Load more
    </button>
  </div>
{%- endif -%}

The button only appears when there is a next page. Its data-next-url comes from Shopify’s own pagination, so it already includes any filter or sort order the shopper has chosen.

Step 2: Add the script

In the Assets folder, add a new file called load-more.js and paste this in:

// Load more button for the Dawn collection page.
document.addEventListener('click', async (event) => {
  const button = event.target.closest('.load-more__button');
  if (!button) return;

  const label = button.textContent;
  button.disabled = true;
  button.textContent = 'Loading…';

  try {
    const response = await fetch(button.dataset.nextUrl);
    const html = await response.text();
    const nextPage = new DOMParser().parseFromString(html, 'text/html');

    // Move the next page's products into the grid that is already on screen.
    const grid = document.getElementById('product-grid');
    nextPage.querySelectorAll('#product-grid > .grid__item').forEach((item) => grid.appendChild(item));

    // Dawn hides new items until its scroll animation runs, so start it for them.
    if (typeof initializeScrollAnimationTrigger === 'function') initializeScrollAnimationTrigger();

    // Point the button at the page after that, or remove it on the last page.
    const nextButton = nextPage.querySelector('.load-more__button');
    if (nextButton) {
      button.dataset.nextUrl = nextButton.dataset.nextUrl;
      button.disabled = false;
      button.textContent = label;
    } else {
      button.closest('.load-more').remove();
    }
  } catch (error) {
    button.disabled = false;
    button.textContent = label;
  }
});

Then load the file. In the same section file, near the top where Dawn loads its other scripts, add:

<script src="{{ 'load-more.js' | asset_url }}" defer="defer"></script>

Step 3: Style the button

The button uses Dawn’s own button class, so it already matches your theme. To centre it and give it some space, add this at the end of assets/template-collection.css:

.load-more {
  text-align: center;
  margin-top: 3rem;
}

How it behaves with filters and sorting

When a shopper changes a filter or the sort order, Dawn redraws the product grid. The button sits inside that grid area, so it is redrawn too and points at the right next page. The script listens for clicks on the whole page, so it keeps working after the grid is redrawn.

What to check before you publish

• Set how many products load each time. In the theme editor, open a collection page, click the product grid section and change “Products per page”.
• Click the button until the last page. It should disappear when there are no more products.
• Apply a filter, then click the button. The new products should match the filter.
• Test on a phone as well as on desktop.

We tested the script’s logic on a sample collection page before publishing it here. Your theme may have been customised, so test it on your theme copy first.

Conclusion

A load more button is a small change that makes a collection page easier to browse. If your theme is heavily customised, or you would rather have it done for you, see our custom Shopify development service.