Lots of online stores nowadays are blatantly showing all the sharp and tempting images of the product on the product page. They are all there for you and the visitors to examine one after another simply by window scrolling – no gimmicks such as cloud zooming or lightbox, etc. While technical cleverness such as cloud zooming or lightbox may seem pretty, they are hardly any more usable than the plain old way of just splashing the product images by simple HTML code.

I prefer the old way which would actually engage the visitors.

However, by default Magento has only narrowly arranged thumbnails of the product images, the visitor has to click those thumbnails to see the large version – waste of user attention and they could leave because it costs more to get what they want (to see a larger picture). What we want to do is to simply display all the product images in large versions on the product page where the visitors are instantly satisfied.

Display all product images WITHOUT watermarks

To do this, find /app/design/frontend/default/your_theme/template/catalog/product/view.phtml and add this snippet anywhere appropriate (change the bold part to your own theme path):

<div class="product_images_exhibit">
	<h2><?php echo $this->__('Product Images') ?></h2>
	<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
	<?php if($_images) {?>            
		<?php foreach($_images as $_image) {?>
			<p><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->setWatermarkImageOpacity(0)->resize(848, null);?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php echo $this->htmlEscape($_image->getLabel());?>" /></p>
		<?php } ?>
	<?php } ?>
</div>

That’s it! See what I’ve done for my store: http://www.princessly.com/trumpet-a-line-v-neck-asym-drop-waist-sleeveless-straps-wedding-dress-w-court-train.html

Display all product images WITH watermarks

With “->setWatermarkImageOpacity(0)” the displayed images will not have watermarks on them. This is better for user experience but may enable image stealing. To add the watermarks, just get rid of “->setWatermarkImageOpacity(0)“:

<div class="product_images_exhibit">
	<h2><?php echo $this->__('Product Images') ?></h2>
	<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
	<?php if($_images) {?>            
		<?php foreach($_images as $_image) {?>
			<p><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(848, null);?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php echo $this->htmlEscape($_image->getLabel());?>" /></p>
		<?php } ?>
	<?php } ?>
</div>

You would still need to configure watermarks in System -> Configuration -> Design to make this work.

Grab the latest premium Magento theme: Avalanche to kick-start your store! Get to know it and you will definitely look no further. Use coupon code:

To get 15% exclusive discount for MagentoGoReview.com readers.