---
schema_version: "1"
id: 834f8de83d2cc8fcb6d1ecafac8758f8b19c6710f205c06fdb91268e5b7ad42a
title: Keep Shoppers Browsing with Load More Pagination
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-load-more.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-load-more.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 756602439d4d4063fdd46cb382a5e2f4b528387ea318d083fb59ebec890ff080
products:
  - Composable Storefront
  - Salesforce APIs
---
# 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.

![Load More button](https://developer.salesforce.com/docs/media/sfnext/sfnext-load-more-button.png '{"class": "image-md"}')

## Configure 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`.

``` 
// src/lib/config.ui.ts
 export const uiConfig: UIConfig = {
   pages: {
     category: {
       pagination: {
         mode: 'load-more', // or 'traditional' (numbered pagination)
         batchSize: 24,
         mobileBatchSize: 12,
         maxProducts: 200,
       },
     },
   },
 };
```

To learn more about these config options, see [Configuration Options Reference](https://github.com/SalesforceCommerceCloud/storefront-next-template/blob/latest/docs/README-CONFIG-OPTIONS.md) in the storefront-next-template GitHub repository.