Keep Shoppers Browsing with Load More Pagination

The Load More button replaces numbered pagination on product listing pages, appending products without page reloads or scroll position loss. Shoppers stay in a continuous discovery flow as they click to load more products. A progress indicator shows “Showing X of Y products” to maintain context while browsing. The load more behavior offers a better shopper experience than numbered pagination, which breaks browsing flow because of full page reloads. The Load More button is enabled by default. Use the uiConfig.pages.category.pagination configuration to set pagination properties or switch to numbered pagination.

To configure options for the load-more pagination, or to switch to the numbered pagination, modify the uiConfig.pages.category.pagination options in src/lib/config.ui.ts. This example configuration shows the load-more pagination properties. To switch to the numbered pagination, which shows numbers at the bottom of the page, set mode to traditional.

To learn more about these config options, see Configuration Options Reference in the storefront-next-template GitHub repository.