Intenso

As of version 1.5.0, Intenso includes a powerful and flexible Product Labels extension. You can create unlimited labels for your products and configure any combination of rules to assure your labels are displayed only when the conditions you set are met.

The extension allows you to add images, text or a combination of both, and you can also add custom CSS rules to achieve a perfect look. You can also use {{variables}} to display values that may change with every product like discount amount, saving percent, price, special price or any attribute value you like.

When you install the theme, two demo labels are automatically imported: one for "New" products and other to display "Discounts" (i.e. 30% OFF). Please note the labels won’t be applied until you configure your products to met the conditions of the labels as described further in this page.

Creating a Product Label

1. In the Admin panel, navigate to Theme > Product Labels
2. Click the Add Label button
3. There are two tabs with fields you need to complete to create the label:
   
   

   General Tab: here you can enter the basic information of the label and configure the text, image and styles of the label.

   • Name: This is the name of the label and is used only for your own reference since the value of this field is not shown in the frontend. Use a descriptive name to help you quickly identify the label in case you need to edit it in the future.
   • Priority: The value of this field is used to determine the importance of the label. It should be an integer between 0 (maximum priority) and 99 (very low priority). If two or more labels share the same position, only the label with highest priority will be applied to the product. This is to avoid the overlap of two labels in the same position.
   • Custom Class Name: This is an optional field and its value is used to apply a custom classname to the wrapper HTML tag of the label. You can then use that classname to apply custom styles to the label. You can use the custom.css file of the theme to add your own CSS rules. For more information about custom CSS styles please refer to this article
   • Position: Here you can select between 9 predefined positions. You can later fine tune the position of the label using custom CSS properties like margin or padding in the Wrapper Styles field.
   • Text: This is the text that will be displayed inside the label. You can leave this field blank if you only want to display an image as a label. You can add variables to this field, which are later replaced by the correct value on render time. There are 7 predefined variables:
     • {PRICE} = This variable is replaced by the price of the product.
     • {SPECIAL_PRICE} = This variable is replaced by the Special Price configured in the Price tab of the product.
     • {SAVE_PERCENT} = This variable is replaced by an integer number representing the discount amount in percentage (difference between Price and Special Price). The percentage symbol is not included.
     • {SAVE_AMOUNT} = This variable is replaced by a decimal number representing the discount amount (difference between Price and Special Price). The currency symbol is not included.
     • {ATTR:code} = Use this variable to display the value of any attribute. First, you will need to find the attribute code of the desired attribute in Catalog > Attributes > Manage Attributes and then replace code with the attribute code. For instance, to display the name of the product you would use: {{ATTR:name}}
     • {SKU} = Product SKU
     • {BR} = This variable inserts a line break tag (<br>)
   • Label Image: This is an optional field where you can upload a background image for your label. You can upload your own image our use one of the 500+ background images we have included in the theme package. We recommend using SVG images (Scalable Vector Graphics) since they are lightweight, scales to any size without losing clarity and looks great on retina displays. Please note you can also use CSS backgrounds like we did on the New label included by default on your installation.
   • Wrapper Styles: Here you can add your custom CSS rules to the wrapper of the label. Each label is formed by two nested HTML tags: a
     tag used as wrapper and a tag used as a container for the text. Any image uploaded in the Label Image field is applied as a background image to the tag. We commonly use this field to add a margin to the label (i.e.: margin: 6px;) 
   • Label Styles: Here you can add your custom styles to the inner tag of the label (the tag inside the wrapper). You can use this field to add padding or to set a fixed width and height.
   • Visibility: There are three possible values: Catalog Page, Product Page or Both. The label will be only displayed on the page selected.
   • From Date: You can enter a specific date here to hide the label until the selected date. This field is useful when you want to manage labels that must be displayed during a limited time (such as seasonal labels)
    
   • To Date: You can enter a specific date here to hide the label when the selected date is reached. This field is useful when you want to manage labels that must be displayed during a limited time (such as seasonal labels)
   • Visible In: You must select here the Store for which the label applies.
   • Customer Groups: Use this field to show labels to specific customer groups.
   • Status: Here you can enable or disable the label.
     
     
   • 
     Conditions tab: this tab uses the same functionality of the “Catalog Price Rules” and the “Shopping Cart Price Rules” that comes with Magento by default. Here you can configure any combination of rules to be sure the labels are displayed on the right products.
     
     You can add any default or custom attribute to the list of available conditions. To add an attribute, navigate to Catalog > Attributes > Manage Attributes, open the desired attribute and set "Use for Promo Rule Conditions" to Yes.