Guide for 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
• WCAG compliance (for the extension with Luma and Hyvä Theme)
• REST API support
• Compatibility with Live Search for Cloud Edition

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.

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.

Hide Label with Zero Value - Choose 'Yes' to hide labels, which contain text with variables equal to zero or not specified variables.

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.

Specify the Minimal discount amount for the 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:

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 the creation date. For this, set Use Creation Date to yes and appoint the number of days the product will be considered as new.

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.

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

• Navigate labels efficiently and in a 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. Use filters to find the needed label faster.
• 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.

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

Status - Move the toggle to 'Active' to enable the label.

Show From/To - Set the time frames, when the label should be shown to customers.

Use the Priority field to manage the 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.

Use for Parent - 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.

Customer Groups - Indicate the Customer groups to which the label should be displayed.

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 plain text.
• Click Select Shape and you will be offered a number of various label shapes to fulfill your inquiries. There is also a handy color picker to pick up the necessary color for this shape.

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 Image and drag your own custom images to use as labels.

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.

Label Size - here, you can customize the size of your label in relation to the product image.

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

Configure Text Size and Text Color, tooled with a color picker. 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 the 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;).

{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. Please note that the attribute value will be displayed on the category page labels only if the “Used in Product Listing” setting is set to “Yes” in the attribute configuration. To check this, please navigate to Stores → Attributes → Product → choose the needed attribute → Storefront Properties tab.
{SAVE_PERCENT} Saving percentage, it's the percentage margin between the 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 the 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 the regular price.
{SPECIAL_PRICE} displays a 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 words or phrases in a separate line, please use a {BR} variable.

Redirect URL - if needed you can add a link for the label to redirect customers to a particular page. In such a case, when a customer clicks on the label he'll be redirected to this URL. Both internal and external URLs can be used.

• 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;

Alt Tag - here, you can input Alt tags for the label to further optimize it for search engines.

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).

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

Please note, that for the correct application of label conditions, you should also allow the Catalog Price Rule resource in the system role permissions. For this purpose, please navigate to System → Permissions → User Roles, then choose the needed Role and go to Role Resources. Then, mark the Catalog Price Rule checkbox.

With the extension, you can also preview the products that the label will be applied to. Just save the label when all the needed settings for it are configured. Than return to Product Conditions section, expand it - the products will be displayed here:

Make your product labels even more informative with label tooltips.

Enable - Choose whether to enable the tooltip for desktop and mobile view or only for desktop view.

Select the Tooltip Color and Tooltip Text Color with a color picker functionality.

Specify the Tooltip Text using variables.

Also, you can modify tooltip text with HTML tags. The list of supported tags is the following:

• <b> - bold text
• <big> - big text
• <br> - single line break
• <center> - centered text
• <i> - italic text
• <link> - a link to an external resource
• <small> - smaller text
• <strong> - important text
• <sub> - subscripted text
• <sup> - superscripted text
• <del> - deleted (strikethrough) text
• <s> - strikethrough text
• <strike> - strikethrough text
• <u> - underlined text
• <tt> - teletype text

LabelRepositoryInterface

• save(\Amasty\Label\Api\Data\LabelInterface $label) - to save a label;
• getById($id) - to retrieve a label by Id;
• deleteById($id) - to delete a label by Id;
• getAll() - to retrieve the list of all the available labels;

Apply various labels on the Product and Category pages and highlight your special offers (e.g. mark Magento products with 'free shipping' labels).

You can also download the packs of catchy label images from Amasty for free. Labels include packs for use-cases like:

• Percent discounts;
• Sales promotions, including Black Friday;
• New arrivals;
• Free delivery;
• Best choice and bestseller products;
• Vegan and organic products;
• No-contact delivery, packed safely, etc.

Now you can also download the free labels pack in German.

The extension also works smoothly on mobile devices due to a ready-made PWA solution, due to which store admin can significantly improve mobile shopping experience.

If the add-on is installed, Venia theme will display category pages in the following way:

Product pages from mobile devices will be displayed as below:

To make additional functionality available, please install the suggested packages you may need.

Available with no additional fees:

• amasty/product-labels-graphql - Install this module to activate GraphQl and Product Labels integration.

Available as a part of an active product subscription or support subscription:

• amasty/module-product-labels-hyva - Install this package to activate the integration with the Hyva Theme.

* Labels do not appear on the storefront. What might be the issue?

* How does the 'Is New' condition work?

* How to add attributes to label conditions?

* What are the available GraphQL queries for Product Labels?

Rate the user guide

from 9 votes (Details)       2 visitor votes 1 visitor votes 1 visitor votes 1 visitor votes 2 visitor votes