Magento Open Source 2.2.x

Product Listings

Product listings can be set to appear by default as either a list or grid. You can also determine how many products appear per page, and which attributeA characteristic or property of a product; anything that describes a product. Examples of product attributes include color, size, weight, and price. is used to sort the list. Each catalog page with a product list has a set of controls that can be used to sort the products, change the format of the list, sort by attribute, and advance from one page to the next.


Products Displayed as a Grid

To configure product listings:

1. On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
2. Scroll down and in the panel on the left, tap Catalog. Then choose Catalog.
3. Expand the Storefront section, and do the following:

Storefront
a. Set the default List Mode to one of the following:
  • Grid Only
  • List Only
  • Grid (default) / List
  • List (default / Grid
b. In the Products per Page on Grid Allowed Values field, enter the number of products that you want to appear per page when shown in grid format. To enter a selection of values, separate each number by a comma.
c. In the Products per Page on Grid Default Value field, enter the default number of products to appear in the grid per page.
d. In the Products per Page on List Allowed Values field, enter the number of products that you want to appear per page when shown in list format. To enter a selection of values, separate each number by a comma.
e. In the Products per page on List Default Value field, enter the default number of products that appear in the list, per page.
f. To give customers the option to list all products, set Allow All Products on Page to “Yes.”
g. Set Product Listing Sorted by to the default attribute that is initially used to sort the list.
4. If using a flat catalog, do the following:
a. To display a flat category listing of products, set Use Flat Catalog Category to “Yes.”
b. To display a flat product listing, set Use Flat Catalog Product to “Yes.”
5. If you want to allow dynamic references for media assets in category and product URLs, set Allow Dynamic Media URLs in Products and Categories to “Yes.”
6. When complete, tap  Save Config .
  • Page Controls

    Control

    Description

    View As

    Displays the products in either a grid or list format.

    Sort By

    Changes the sort order of the list.

    Show Per Page

    Determines how many products appear per page.

    Pagination Links

    Navigation links to other pages.