Add product labels
I. Introduction
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.
- Properties -- Back-end Settings
- Manage Label/ Options -- Back-end Settings
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.
- Properties -- Back-end Settings
- Manage Label/ Options -- Back-end Settings
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 :