After July 2021, the 2.3.x release line will no longer receive quality updates, or user guide updates. PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x to help maintain PCI compliance.

Pagination Controls

The information on this page is intended for Adobe Commerce 2.3 customers who are on an extended support contract. The Adobe Commerce Merchant Documentation for current releases is published on the Adobe Experience League.

The Pagination settings appear at the top and bottom of the list, and control the format of the pagination links for product listings. You can set the number of links that appear in the control, and configure the Next and Previous links. For the pagination links to appear, there must be more products in the list than are allowed per page in the product list configuration.

Pagination Controls

Pagination Controls

View As - Displays the list in either a Grid or List format.
Sort By - Changes the sort order of the list. The “Used for Sorting in Product Listing” storefront property determines which product attributes can be used to sort the list.
Show Per Page - Determines how many products appear per page.
Pagination Links - Navigation links to other pages.

Configure the pagination controls

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. Find the store view that you want to configure and, in the Action column, click Edit.

  3. Under Other Settings, expand the Pagination section.


  4. For Pagination Frame, enter the number of links that you want to appear in the pagination control.

  5. For Pagination Frame Skip, enter the number of links that you want to skip ahead before displaying the next set of links in the pagination control.

    For example, if the pagination frame has five links, and you want to jump to the next five links, how many links do you want to skip ahead? If you set this to four, then the last link from the previous set will be the first link in the next set.

  6. For Anchor Text for Previous, enter the text that you want to appear for the Previous link.

    Leave blank to use the default arrow.

  7. For Anchor Text for Next, enter the text that you want to appear for the Next link. Leave blank to use the default arrow.

  8. When complete, click Save Config.