This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

Customizing RWD illustration

What’s in this topic

This topic features a step-by-step illustration of how to change the number of products displayed in a row on a product page, keeping up with the responsive design approach used by Magento out-of-the-box themes.

The described flow is applicable only for themes that inherit from the out-of-the-box Blank or Luma theme.

Changing the number of products in a row

OrangeCo wants to make their products more visible by decreasing the quantity of products in a row displayed on a catalog page, so that each product takes more space.

In the basic Blank theme, the number of products in a row for each breakpoint is the following (for the 2-column page layout):

  • 1024px and more (desktop): four products
  • 768px (tablet): three products
  • 640px and less (mobile): two products

In their custom Orange theme, OrangeCo wants to have the least number of products in a row for the desktop and tablet view, namely:

  • Desktop: three products
  • Tablet: two products
  • Mobile: two products

The Orange theme inherits from the Blank theme.

To change the products quantity, OrangeCo take the following steps:

  1. Copy the /Magento_Catalog/web/css/source/module/_listings.less file.
  2. Put it in the corresponding location in their Orange theme directory: app/design/frontend/OrangeCo/orange/Magento_Catalog/web/css/source/module/_listings.less
  3. Make the changes in the code. The following image illustrates which section of the file they change, the modified lines are highlighted:

responsive practice 1

After OrangeCo applies their theme, the catalog page of their store looks like following:

responsive practice 2

(compare to the same page for the Blank theme.)