Add product labels

Labeling is much of help for your customers to search for hot, sales or new items. You can even create tags as your wish like “best voted”, “recommended” and so on.

This documentation will show you how to add product labels with our Magento themes. If your Magento theme features Basetheme, follow section 2. In case your Magento theme does not support Basetheme, follow section 3 to learn how to label your items manually.

Check it out to grab this handy function for your eCommerce Magento site!

II. Add labels with Basetheme

Step1 : Create a new Attribute

Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named Label.

Step 2 : Assign the Attribute

Navigate to Catalog >> Attributes >> Manage Attributes Sets.
1. Choose Attribute Set.
2. Drop the “Label” from Unassigned Attributes into Groups.
3. Save it.

Step 3 : Enable Product Label on Basetheme

Navigate to System >> Configuration >> Basetheme and set value “Yes” for field Show Product Label to enable Labeling function.

Step 4 : Enable Label on Page

To display label on specified page, please edit pthml file of this page, here is the example of enable product label on list page.

If it is your first time adding product labels, copy the file pthml at \app\design\frontend\base\default\template\catalog\product\list.phtml. Paste this into the theme’s folder so that your view.phtml has the location like that: \app\design\frontend\default\{yourtheme}\template\catalog\product\list.phtml.

In phtml file, paste the following code on the top of the file:

<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_helper = $this->helper('catalog/output');
    $baseconfig =  Mage::helper("jmbasetheme")->getactiveprofile();
if ($baseconfig) :
       $showlabel = $baseconfig["showlabel"]
else :
  $showlabel = 0;
endif;
?>

Add the following code on your desired item’s position:

<?php if ($labeltype && $showlabel): ?>
<span class="ico-label <?php echo $labeltype; ?>-label"><?php echo $labelname; ?></span>
<?php endif; ?>
</p>
</div>

Step 5 : Update style of labels

You can customize style of labels as you wish as the below css example.

/*label products*/
.ico-label {
background: #008cd2;
color: #fff;
font-size: 12px;
height: 30px;
left: 0;
line-height: 30px;
min-width: 25px;
padding: 0 10px;
position: absolute;
text-align: center;
text-transform: capitalize;
top: 0;
width: auto
}

.sales-label {
background: #008cd2
}

.hot-label {
background: #00af4d
}

.new-label {
background: #ed1846
}

Step 6 : Enable label on Product

Simply choose the label you want for each product as Back-end Settings.

Front-end Appearance :

III. Add labels without Basetheme

Step1 : Create a new Attribute

Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named Label.

Step 2 : Assign the Attribute

Navigate to Catalog >> Attributes >> Manage Attributes Sets.

1. Choose Attribute Set.

2. Drop the “Label” from Unassigned Attributes into Groups.

3. Save it.

Step 3 : Enable Label on Page

To display label on specified page, please edit the file pthml of this page, here is the example of enable product label on list page.

If it’s your first adding product labels, copy the file pthml at \app\design\frontend\base\default\template\catalog\product\list.phtml. Paste this into the theme’s folder so that your view.phtml has the location like that: \app\design\frontend\default\{yourtheme}\template\catalog\product\list.phtml.

In phtml, find the code line:

<?php $i=0; foreach ($_productCollection as $_product): ?>

Then, insert the following block code under it.

<?php
$_product = Mage::getModel('catalog/product')->load($_product->getId());
$attribute = $_product->getResource()->getAttribute('label');
if(is_object($attribute)) {
  $attdefaultvalue = $attribute->getDefaultValue();
  $attributeValue = Mage::getModel('catalog/product')->load($_product->getId())->getlabel();
  $attributeValueName = Mage::getModel('catalog/product')->load($_product->getId())->getAttributeText('label');
   if(strlen($attributeValue) &&  ($attdefaultvalue !== $attributeValue)) {
    $labeltype = $attributeValueName;        
    }
    else {
    $labeltype = "";
   }
}
?>
<?php if ($labeltype): ?>
<span class="<?php echo $labeltype; ?>-label"><?php echo $labeltype; ?></span>  
<?php endif; ?>

Step 4 : Update style of labels

You can customize style of labels as you wish as the below css example.

.products-grid .Hot-label,
.products-grid .New-label {
  background: #15ae75;
  padding: 2px 5px;
  position: absolute;
  right: -5px;
  top: -5px;
  color: #fff;
  text-transform: uppercase;
  font-size: 92%;
  border-radius: 3px;
}

.products-grid .Hot-label {
  background: #ef4135;
} 

Step 5 : Enable label on Product

Simply choose the label you want for each product as Back-end Settings.

Front-end Appearance :