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.
Table of Contents
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.
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.