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.
7 
.load-more {
position: relative !important;
    justify-content: center !important;
    display: flex !important;
}

Add this to base.css

1 Like