Table of contents
In this tutorial, we’re gonna show you how to set the product list as either grid or list, how to determine the number of products to appear in a page, and how to choose the attribute used to sort product lists from your Magento backend.
Step 1: Configure product listing layout
In your backend, navigate to Stores > Configuration
On the left panel, under the Catalog section, choose Catalog
Click to expand the Storefront section. This section contains every configurable option involved for product listing:
Choose your preferred layout from the drop down List Mode. There are 4 selectable options: Grid or List only, List (default)/Grid, Grid (default)/List
Step 2: Configure the number of products per page
There are various options to configure the number of products that you can have on your product listing page.
- Fill the fields below:
- Products per Page on Grid Allowed Values: Enter the number of products shown in grid view. Separate each number by a comma to enter a selection of values
- Products per Page on Grid Default Value: The default number of products appear per page in grid view
For example, with the allowed values like so:
Our frontend will have selectable products per page like this, with 12 being the default number of products to be shown per page:
And the same goes for list view.
- Products per Page on List Allowed Values: Enter the number of products shown in list view. Separate each number by a comma to enter a selection of values.
- Products per Page on List Default Value: The default number of products appear per page in list view.
For instance, with our allowed values like this:
The list view on our storefront will have selectable options like so, with 10 being the default number of products to be shown per page:
Additionally, if you want customers to have the option to view all of your products in a single page, set Allow All Products per Page to Yes.
And if you want the pagination options selected by your customers to be remembered, set Remember Category Pagination to Yes. Note that enabling this option may affect SEO and cache storage consumption
Step 3: Choose attribute to sort product list
Set the default attribute to sort products from the Allow All Products per Page’s drop down list Supported attributes are Position, Product Name, or Price
Set Use Flat Catalog Category and Use Flat Catalog Product as to Yes if you want to use Flat Catalog. Flat catalog helps reduce the total number of SQL queries needed to be made, and thus speed up the indexing process of catalog and product rules. However, since flat catalog is known to cause performance degradation and other indexing issues, it’s no longer a best practice and you should refrain from using it.
Step 4: Configure behavior of swatches on product listing page
The following options determine how swatches behave on your product listing page.
- Swatches per Product: the maximum number of swatches can be displayed per product
- Show Swatches in Product List: set to Yes if you want to show swatches in your product list
- Show Swatch Tooltip: set to Yes to show tooltip when hovering over swatches
After completing all the steps above, click Save Config button to save your configuration.
Read more:
Configure Contact Us Form and Contact Email Address in Magento 2
