Need help buying now? +48-22-219-5163 +1-917-720-3250
My Cart

Your Cart is Empty

Need help buying now?
+48-22-219-5163 +1-917-720-3250

Editing product image

Editing product image

Successful online merchandise depends on various factors and even the smallest details must not be ignored, as they can directly affect the operation of your store and the sales volume. The quality of a product image is one of such factors. Most customers usually evaluate the product by its image on your site. So, if the image is not attractive or of low quality the clients will most likely prefer to look for the necessary product elsewhere.

The store owners who sell products from different manufacturers often encounter incorrect image output in some of their Magento themes. This is caused by the fact that product images provided by manufacturers are all of different sizes and formats which can be unsuitable for Magento. In such cases, the images are displayed on the white background which is default for Magento, like on the image below:

Editing product image

This background can be removed quite easily. You need to access your server using an FTP client and then locate the folder app/design/frontend/themeХХХ/template/catalog/product/ where ХХХ is the number of the theme installed in your store. Open the file list.phtml. Find the following code in it:

<div class="grid-inner"> <a href="<?php echo $_product->getProductUrl() ?>" 
title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, 
true) ?>" class="product-image"><img class="pr-img" src="<?php echo 
$this-> helper('catalog/image')->init($_product, 'small_image')->resize(203); ?>" 
width="203" height="203" alt="<?php echo  $this->
stripTags($this->getImageLabel($_product, 'small_image') , null, true) ?>" /></a>

In this part of code you need to replace resize(210), width="210", height="210" with the parameters of the necessary image (e.g. 210х164). Besides, you need to enter the following code:


The resulting code block must be as follows:

<div class="grid-inner"> <a href="<?php echo $_product->getProductUrl() ?>" 
title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null
, true) ?>" class="product-image"><img class="pr-img" src="<?php echo
 $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->
 keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(210); ?>" width="164" 
 height="210" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 
 'small_image'), null, true) ?>" /></a>

After all changes are saved, go to Catalog -> Manage products menu and re-upload the image. Now, it will look like this:

Editing product image

If you have any suggestions or questions, please leave your comments to this article. You can also contact GoMage Magento experts directly and we will be glad to assist you with any issues or questions you have.