How to change product list grid image size and how to change grid from 4 to 3? Because the images are so small now.

I want to have larger images and change grid from 4 to 3.

I am using Magento 1.9.1.

3 Answers 3


To change grid 4 to 3
Copy file app/design/frontend/rwd/default/layout/catalog.xml into your theme
and change below code

<action method="setColumnCount"><count>4</count></action>


<action method="setColumnCount"><count>3</count></action>

in layout handles catalog_category_layered and catalog_category_default

To increase image size in grid view
Copy file app/design/frontend/rwd/default/template/catalog/product/list.phtml into your theme
and inside grid mode code, change below code
<?php $_imgSize = 210; ?>

<?php $_imgSize = 250; // your required image size ?>

There is a lot of information about this if you search in google (also in stackexchange too). For example please see these:


I have an alternate approach to address this issue.

If you are using a template that load jQuery, you can use the following code and place it in: System > Configuration > General > Design > HTML Head > Miscellaneous Scripts

jQuery("document").ready(function() {
    jQuery(".product-image img").attr({ width: "100%", height: "auto" });

Your image tags shall have width and height attributes assigned as defined in the code. Ideally, this code should not mess-up with responsiveness as i have successfully used this code on my site.

This jQuery approach is used just to avoid changing php template files as any subsequent upgrades to magento can break some parts in future unless you keep full track of changes to these template files. That's why i prefer jQuery technique.

Do let me know your thoughts if someone find the jQuery approach not appropriate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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