In the gird view of a category I want to reduce the number of products per ROW from 4 to 3, and I want to increase the image size there ... how can I do that?


For increasing the image size, we can change the default values in view.xml of our custom theme.


<image id="category_page_grid" type="small_image">
<image id="category_page_list" type="small_image">

We can read more here.

From my experience, in Magento 1, we can easily set items per row in products/category pages by adding <action method="setColumnCount"><count>5</count></action>. Currently, Magento 2 doesn't support the set and get column count. However, we can do this by using CSS. For example, we can find the css in file: vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_listings.less.

If we want to be more advance, we can add the set and get column count method by overriding the class \Magento\Catalog\Block\Product\ListProduct.

  • Thanks Khoa. The resize part worked fine with me, but the item count in row is not so clear what I have to do exactly in that _listings.less file. what should I change there? and if there anything else I have to do after that, like restarting the apache2 services or clearing the cache ... thanks again
    – Whaaaaat
    Jun 26 '16 at 21:05
  • You can read more here about Css preprocessing: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/… Jun 27 '16 at 15:44
  • Its working fine Jan 25 '17 at 17:51

Magento product uses the file view.xml for image size dimensions at path vendor/magento/theme-frontend-luma/etc/view.xml

Here you will find node inside the node.

Copy the file view.xml and put it in your theme path and make the changes, say app/design/frontend/MyThemePackage/MyTheme/etc/view.xml

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
 <images module="Magento_Catalog">
    <image id="category_page_list" type="small_image">

Write Below css to change display from 4 to 3 products per row

.page-products .products-grid .product-item {
  margin-left: calc(0.00333333%) !important;
  width: 33.33%!important;

Clear the cache and load the category list page. Your changes will be reflected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.