Adding a ‘New Product’ icon in Magento for new products

Photo of author
Written By Ryan Rana





This is actually quick and easy but if you are new to Magento custom attributes you might struggle to work out how to set things up and then access the value of your attribute on the front end.

What I am talking about here is setting up a flag for the product, if it’s set to ‘Yes’ (ie the product is a new product) then a little icon or banner appears in the corner of the image.

Like this;

So, first things first. You need to set up a new Attribute in Catalogue -> Attributes -> Manage Attributes . Set is as a Boolean, give it an id of new_product. Make it available on the front end product view (one of the advanced options). Now add the attribute to your custom attribute set if your using one, or the default set if you are not. Go in and set it to ‘Yes’ for your product and save it.

So we’ve got a product in the Magento catalogue which has a Boolean flag set to yes for the attribute ‘new_product’. How do we then access that an display it on the front end? Easy.

In your template files (templates/catalogue/product/list.phtml and templates/catalogue/product/view/media.phtml) you’d find the spot where the images are loaded and add in a conditional statement which checks the product model for the attribute and then adds some html is if finds it set to ‘Yes’. Like so;

<div class="product-image">

	<?php if($_product->getNewProduct()) { ?>
		<div class="new-product"></div>
	<?php } ?>
        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');

Note the way the attribute has been accessed – even though it has been given the id of new_product in the Magento backend, it is accessed as $_product->getNewProduct in the template (camel case with no underscore).

Then you have to make sure your CSS is set up for it. Make the product_image class relative to position the absolute icon in the top right. Like so;

.products-grid .product-image { position: relative; display:block; width:244px; height:156px; margin:0 0 10px; }
.new-product {
	position: absolute;
	right: 0;
	top: 0;
	width: 65px;
	height: 66px;
	display: block;
	z-index: 2;
	background: url(../images/new-product.png) no-repeat;

Another method I’ve seen adds an image to the catalogue view page depending on whether or not the product is on sale. That’s done like this;

<?php $specialprice = Mage::getModel('catalog/product')->load($_product->getId())->getSpecialPrice();  ?>

<?php if ($specialprice) { ?> 
	<img src="<?php echo Mage::getBaseUrl (Mage_Core_Model_Store::URL_TYPE_WEB); ?>media/special-price.png" alt="Product on sale" />  
<?php } ?> 

Leave a Comment