Load More button not working properly

Store Design

Topic summary

A user implemented a “Load More” button for their Shopify collection page but encountered issues with it not displaying all products correctly.

Initial Problem:

  • Custom JavaScript code (collection-load-more.js) was created but failed to load all products properly
  • The user wanted 16 products displayed per page

Solution Provided:
A support representative (BSS-TekLabs) offered a multi-part fix:

  • Modified JavaScript code that corrects the product appending logic (changing new_products[i] to new_products[0] and moving the page increment)
  • Additional code snippets for main-collection-product-grid.liquid to handle pagination URL
  • Template code for theme.liquid to conditionally load the script
  • CSS styling for base.css to properly display the load more button

Current Status:

  • The original issue was resolved successfully
  • A new problem emerged: the Load More button doesn’t work correctly when combined with sorting and filtering features
  • This secondary issue remains unresolved
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
4 
const products_on_page = document.getElementById('product-grid');
const nextUrl = document.getElementById('paginateNext');
let next_url = nextUrl.dataset.nextUrl;
let page = 3;

const load_more_btn = document.getElementsByClassName('load-more_btn')[0];
const load_more_spinner = document.getElementsByClassName('load-more_spinner')[0];
async function getNextPage() {
  try {
    let res = await fetch(next_url);
    return await res.text();
  } catch (error) {
    console.log(error);
  }
}

async function loadMoreProducts() {
  load_more_btn.style.display = 'none';
  load_more_spinner.style.display = 'block';
  let nextPage = await getNextPage();
  const parser = new DOMParser();
  const nextPageDoc = parser.parseFromString(nextPage, 'text/html');

  load_more_spinner.style.display = 'none';

  const productgrid = nextPageDoc.getElementById('product-grid');
  const new_products = productgrid.getElementsByClassName('grid__item');
  const newUrl = document.getElementById('paginateNext');
  const total_page = newUrl.dataset.totalPage;
  const new_url = next_url.split("page=")[0]+"page="+page;
  if (page <= total_page) {
    load_more_btn.style.display = 'flex';
  }
  const length = new_products.length
  for (let i = 0; i < length; i++) {
    products_on_page.appendChild(new_products[0]);
  }
  next_url = new_url;
  page++;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like