User Tools

Site Tools


Sidebar

magento_2:product_labels

For more details see the Product Labels for Magento 2 extension page.

Product Labels for Magento 2

Highlight your products with eye catching labels to immediately draw customers' attention to particular items. Use predefined variables for label texts and easily upload your own label images of any shapes.

  • Add colorful labels to any products
  • Live Preview of the labels in the admin
  • New label types allow admin to choose shapes and color
  • Fresh labels pack was added
  • Set time periods for labels demonstration

With the help of the extension, you can add bright labels (such as “On Sale” and “New”) to any store items and display them on product and category pages. Apart from that, the module automatically calculates and shows percent discounts or flat amounts based on the difference between special and regular price.


General Settings

Display Settings

To configure the extension go to Stores → Configuration → Amasty Extensions → Product Labels.

Product Page Label Container - Specify the DOM-selector for a product page label container.

Category Page Label Container - Define any valid DOM-selector for a category page label container.

Max Number of Labels on One Product - Limit the number of labels displayed over one product at once.

Show Several Labels on the Same Place - Enable the option if you want to show several labels in the same place of a product image.

When the Show Several Labels on the Same Place option is enabled, additional options appear:

Labels Alignment - Choose either vertical or horizontal alignment for the labels shown in the same place.

Margin between labels, px - Determine the margin between labels displaying together in pixels.

Here's the example of how vertical and horizontal alignment will be displayed on the frontend (for the same product):

We highly recommend updating the Index Management by schedule. Go to Admin Panel → System → Index Management.

'On Sale' Condition

Specify the Minimal discount amount for display of labels in the On Sale condition section.

Notice, that this is a flat amount, not percent. :!:

Use Minimal discount percentage setting to specify the minimal percent discount.

The extension offers you a Rounding of discount percentage option, so you can make discounts decimal. There are three algorithms at your service:

The next lowest integer value. With this algorithm 20.3 will be rounded to 20.
By rules of mathematical rounding. 20.4 will be rounded to 20 and 20.6 will be rounded to 21.
The next highest integer value. 20.3 will be rounded to 21.

'Is New' Condition

Highlight labels according to their date in the Is New condition section:

  • If you set the option Use New From Date to Yes, the extension will consider products as new between New from Date and New to Date.
  • Alternatively, you can choose the products to be new a certain amount of days after creation date. For this, set Use Creation Date to yes and appoint the number of days the product will be considered as new.

'Stock Status' Condition

If the item is out of stock show only 'Out of Stock' label - Enable to display only Out of Stock label and hide all other active labels if the item is Out of Stock.

Product Labels Grid

To create labels please go to Admin Panel → Products → Product Labels.

  • Navigate labels efficiently and in convenient way with the Product Label Grid. There are Label ID, Name, Status, Product Page Text, Category Page Label, and other columns, by which you can easily search all the necessary information.
  • You can add new labels, submit Delete and Change Status actions for better promo management;
  • You can edit Name, Status, Product Page Label Position and Category Page Label Position of a label right on the grid. Click a line with particular label on the grid and select a necessary option in the dropdown.

Among the available mass actions there are Delete, Enable, Disable, Duplicate options. See the top left corner above the labels grid to use mass actions dropdown.

Edit Product Label

To edit product labels, click on the existing label in the grid or add a new one.

Note, that you can re-index each label (Re-index Current Label) whenever you want yo update, independently from the Cron schedule.
  • Name the label and set a Status.
  • Use the Priority field to manage order in which the labels are applied to products. The highest priority is zero.
  • You can hide the label, when a label of higher priority is already applied to the products, by activating the Hide if label with higher priority is already applied option.
  • Choose whether to appoint the label of the child product to its Parent products. If Yes, the label will be displayed on the adjacent configurable or grouped products.
  • Select the stores, the labels will be displayed on

Edit Label for Product Page

The extension offers a wide range of opportunities to shape the product labels to your marketing needs.

  • In the Label Type, select Text Only to display labels as a plain text.
  • Click Select the label shape. You are offered a number of various labels shapes to fulfill your inquiries. There is also a handy colorpicker to pick up the necessary color for this label.
  • There are two shapes (a circle and a rectangle) that are transparent. In the Label Color field, pick a color, which is applied to a border.

  • Alternatively, you can choose Upload Custom Label Image and drag your own custom images or download the packs of catchy label images from Amasty for free.

  • Label Position field has a nine position grid, where you can select the needed location for the label. There is also a real size preview window right in the settings, so you don't have to check it on the front-end time and again.
  • Configure Label and Text Size along with Text Color, tooled with a colorpicker. In case you use auto labels adding, you need to add label width and label height percentage of the original image. This action is required for correct label view on the Product and Category pages. Employing CSS, you can also manage Label & Text Style (e.g. text-align:center, width:300px;).

In the Label Text field, you can indicate the text that should be displayed on the label. You can utilize following variables in the label texts:

{ATTR:code} with this variable you can display a value of any attribute in the label text. Please replace 'code' with the code of the actual attribute. For example, {ATTR:manufacturer} would display the product manufacturer.
{SAVE_PERCENT} Saving percentage, it's the percentage margin between regular price and special price. If you specify in admin panel 'Sale! {SAVE_PERCENT} OFF!', on the front end it will be 'Sale! X% OFF!', X stands for the percent number.
{SAVE_AMOUNT} Flat savings amount, represents a flat difference between regular price and special price. So 'Save {SAVE_AMOUNT}!' results into 'Save $X!'. X is the amount, '$' sign will be automatically replaced with the symbol of your currency.
{PRICE} displays regular price.
{SPECIAL_PRICE} displays special price.
{NEW_FOR} shows how many days ago a product was added. 'NEW! Arrived just {NEW_FOR} days ago!' will be shown as 'NEW! Arrived just X days ago!', where X is a number of days.
{SKU} displays product SKU.
{BR} new line. The extension automatically breaks messages into several lines if they are too long. If you need to display some word or phrase in a separate line, please use a {BR} variable.

Advanced Settings / CSS

  • Use transform: rotate(-90deg) to rotate a label a certain number of degrees (here - 90);
  • Use padding-top: XXpx (padding-bottom: XXpx) to set padding and rotate a label vertically;
  • Use padding-left: XXpx (padding-right: XXpx) to set padding and rotate a label horizontally;
  • In case there are several labels at the same position, use margin-bottom (margin-left, margin-right, margin-top) to set the margin of a label.
A sample label with the following settings: transform: rotate(-90deg); padding-top: 60px;

Edit Label for Category Page

The settings for managing labels on the Category page are identical as for Product Page. It is possible to choose label position both for product and for category pages. You can also use different images for category and product pages (e.g smaller image for category page and a bigger one for product page).

Conditions

In order to use a product attribute in the conditions correctly, please enable its usage for promo rule conditions:
  • Go to Stores > Attributes > Product > Select a product attribute > Storefront Properties
  • Enable Use for Promo Rule Conditions.

Use flexible conditions to specify for which products the label should or shouldn’t be displayed. In conditions, you can apply any of the following attributes:

Activity, Attribute Set, Category, Category Gear, Climate, Collar, Color, Eco Collection, Erin Recommends, Features, Format, Gender, Material, New, Pattern, Performance Fabric, SKU, Sale, Size, Sleeve, Strap/Handle, Style Bags, Style Bottom, Style General

You can specify Date Range for label display. Set time interval during which the label will be displayed.

Configure the State of a label. For Is New option you can select:

  • 1. ‘Does not matter’. In this case, the option will be ignored.
  • 2. ‘Yes’. The label will be applied only to products that are set as new.
  • 3. ‘No’. The label will be applied only to products that are NOT set as new.

For Is on Sale option you can select:

  • 1. ‘Does not matter’. In this case the option will be ignored.
  • 2. ‘Yes’. The label will be applied only to products that have special price and the discount amount is higher than specified at the configuration page.
  • 3. ‘No’. The label will be applied only to products that do not have a special price.

You can also enable or disable Use Special Price Only, if you use On Sale condition.

Status. Specify the status of the product, which trigger the label display (In stock, Out of stock, or Does not matter for the products with any stock status).

Use Stock Range to activate the labels, depending on the products' stock quantity.

Stock is lower than, Stock is higher than - Specify the particular inventory to trigger the label display.

You can choose the Price Range of the products for which the label should be displayed, e.g. for products with price between 50 and 150.

  • Choose which price should be used for the price range feature, e.g. special price, based price (the one specified in the ‘price’ field), final price (price with all options).
  • The option also operates with Special Price and Cart Price Rule.

It is possible to indicate the Customer groups to which the label should be displayed. It is also possible to assign labels to individual products when editing products in admin panel.

Frontend

See various labels on the Product and Category pages.



Find out how to install the Product Labels extension for Magento 2 via Composer.

Rate the user guide
 stars  from 7 votes (Details)
magento_2/product_labels.txt · Last modified: 2018/10/30 08:10 by karpova