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 attribute is used to sort the list. The product list includes 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

Configure product listings

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel, expand Catalog and choose Catalog underneath.

  3. Expand Expansion selector the Storefront section.

    Storefront configuration options

    For a detailed list of these options, see Storefront in the Configuration Reference.

    NOTE

    To correctly display products and their prices according to product sorting by price, make sure that the settings for the price display in the Sales Tax configuration have the same value (Excluding Tax or Including Tax). For the Calculation Settings, check the Catalog Prices value. And for Price Display Settings, check the Display Product Prices in Catalog value. If these have different values, price filters in the layered navigation may not properly filter and sort products by price.

  4. Set the default List Mode to one of the following:

    • Grid Only
    • List Only
    • Grid (default) / List
    • List (default / Grid

  5. For Products per Page on Grid Allowed Values, 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.

  6. For Products per Page on Grid Default Value, enter the default number of products to appear in the grid per page.

  7. For Products per Page on List Allowed Values, 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.

  8. For Products per page on List Default Value, enter the default number of products that appear in the list, per page.

  9. Set Product Listing Sorted by to the default attribute that is initially used to sort the list.

  10. To give customers the option to list all products, set Allow All Products on Page to Yes.

  11. If you want to retain all pagination settings as customers browse through catalog listings, set Remember Category Pagination to Yes.

    Enabling this setting ensures that the number of products displayed in a list or grid is retained as shoppers browse from one category to another. By default, this field is set to No because it uses more cache storage and can impact the way pages are indexed by search engines.

  12. If using a flat catalog (not recommended), do the following:

    • To display a flat category listing of products, set Use Flat Catalog Category to Yes.

    • To display a flat product listing, set Use Flat Catalog Product to Yes.

  13. 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.

  14. When complete, click 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.

Pagination controls

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

Storefront pagination controls

Control Description
Display grid View As - Displays the list in either a Grid or List format.
Sort by 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 Show Per Page - Determines how many products appear per page.
Pagination links 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 Expansion selector the Pagination section.

    Pagination

    For more information about these settings, see Design Configuration.

  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 the value to four (4), the last link from the previous set is 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 Configuration.

On this page