How To Set Up Product Pagination In Magento 2

Person Using Ipad

Paginating products is a common practice in online stores that aim to show an extensive catalog of their offerings. Magento 2 platform offers excellent tools to help e-commerce owners set up pagination. In this article, we will guide you step-by-step to create a product pagination system in Magento 2.

Speed Up Your Magento Store by 300%

Step 1: Define Your Pagination Requirements

Before setting up the product pagination on your Magento 2 store, it is crucial to define some parameters related to the number of products per page, the page layout, and navigation options.

  • Number of Products per Page: You should determine how many items to show per page, taking into account your website’s performance. Displaying many products per page might increase the loading time, which can lead to a high bounce rate. Therefore, try to find the right balance between the number of items and website speed.

  • Page Layout: The page layout should be as simple as possible and focus on the products being displayed. The most common layout is a grid that shows product images, titles, prices, and other basic information.

  • Navigation Options: To improve user experience, it’s essential to include navigation options, such as a clear menu, search bar, and pagination. The pagination should be located at the bottom of the page and include page numbers, previous and next buttons.

Step 2: Configure Pagination Settings in Magento 2

Magento 2 provides built-in pagination functionality that can be customized in the backend settings.

  • Go to the Admin Panel
  • Select Stores > Configuration > Catalog > Catalog > Storefront
  • In the Product Listing Sort by field, select the default sorting option for your products, such as by name or price.
  • Move to the Products per Page on Product Listing section and configure the maximum number of products per page you want to display.
  • In the Allow All Products per Page field, select yes to allow users to view all products on a single page.
  • Set the value in the Default Product Listing Sort By field to sort the product listing in the frontend.
  • Finally, click the Save Config button to save your settings.

Step 3: Display the Pagination on Your Frontend

To display the pagination of your Magento 2 store, you need to modify the product listing template file.

  • Go to your Magento 2 installation folder and open the directory /app/design/frontend/default/Magento_Catalog/templates/product/list.phtml.
  • Copy this file to your theme’s folder /app/design/frontend/your_theme/Magento_Catalog/templates/product/list.phtml.
  • Locate the pagination code in the original code, which is usually located at the bottom of the page.
  • Modify the pagination code to adapt it to your theme’s design and change the navigation options as per your requirements.
  • Save the file and refresh the frontend pages to see the changes made.

Conclusion

Product pagination is an essential tool in e-commerce for aligning the website’s performance and user experience. Magento 2 platform offers robust options to help you set up a product pagination system that meets your needs. By following the steps above, you can create a scalable pagination system that enhances your customers’ shopping experience.

Scroll to Top