I have created my own custom mix and match page, having trouble getting more than 50 products

Store Design
, ,

Topic summary

A user created a custom mix-and-match product page displaying over 80 items but cannot show more than 50 products at once. They’re seeking help to overcome this limitation.

Technical Context:

  • Shopify’s default paginate tag has a hard limit of 50 products per page that cannot be increased directly
  • The recommended solution is implementing either a “Load More” button or infinite scroll functionality
  • These approaches dynamically fetch additional products in batches of up to 50 without page reloads

Implementation Requirements:

  • Liquid setup for collection pagination
  • JavaScript code to fetch and append products dynamically
  • Custom styling to maintain design consistency

Current Challenge:
The user has written custom code with a responsive grid layout, but adding pagination breaks the grid structure—products display in a single long row instead of the intended grid format. They’ve been troubleshooting this layout conflict without success.

The issue remains unresolved, with the user willing to share their code for assistance.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey!

I made this page https://www.raditiveprints.com/products/select-radlings

I have over 80 of these things but for the life of me can’t get the pagination or anything to let me have over 50 per page.

can someone give me some clarity?

willing so share my code to help

Thank you

2

Hi @RaditivePrints ,

Shopify’s default limit for products per page is 50, and this cannot be increased directly using the paginate tag due to Shopify’s inherent restrictions.

If you want to display more than 50 products on a single page, you need to implement a “Load More” button or infinite scroll functionality. These techniques load additional products dynamically in batches (up to 50 at a time) without reloading the page.

Implementing “Load More” or infinite scroll requires custom coding. The process typically involves:

  1. Liquid Setup: Configuring your theme to enable pagination for the collection.
  2. JavaScript Integration: Writing code to fetch and append additional products to the product grid dynamically.
  3. Styling: Ensuring the UI looks seamless and matches the store’s design.

If you’re not familiar with coding, it’s recommended to hire a developer to implement this functionality professionally, ensuring it works efficiently and does not impact your store’s performance.

3

So I have written the code myself, it uses a dynamic grid that changes in width with the size of the screen. But when I add the pagination code to my page, it gets rid of my grid completely and puts all items in one long row. I have been fighting it all day trying to get this to work