Steps to add Icon to New Products in Magento

In this article, we are going to discuss about steps to add Icon to new products in Magento. As your inventory rises it's always very necessary to make your products stand out using an unique icon. Visitors to your website will be able to notice which products are newly arrived as the icon will show up in wherever you set it to in your theme.

Step 1 : Manage attributes

Go to Catalogue -> Attributes -> Manage Attributes. Set up a new attribute at this page and call it 'Boolean'. Set its ID as new_product. Under your advanced options, you will have the option to select it as a front end product. Do this. Now you simply have to add the new attribute to your custom attribute if you are using one. If not, set it to default. Save the new product.

You will now have a new product in your catalogue which has a Boolean flag set to yes. The next stage involves taking this new product icon and putting it in your front end.

Step 2 : Make it show

Now that you have a product icon with a Boolean flag, it's time to make this show on your front end. This is achieved by accessing template files: templates/catalog/product/list.phtml andtemplates/catalog/product/view/media.phtml.

<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');
?>
</div>

As you can see, above, your new product is shows in '$_product->getNewProduct'. The next step is to ensure that your CSS is set up to show your product with Boolean flag. You need to make the product_class relative to the position of the icon. 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;
}

Step 3 : Save

Save your changes and ensure that your code is correct before doing so. Now, every time you add a new product and it goes on sale through your front end, it'll have an icon and Boolean flag.