How to Add Product Labels to Magento 2 Product Pages?

Product labels are one of the best ways to drive customer's attention to certain items, not only when the sales season rolls out. You can use them consistently to notify customers about new arrivals, hot deals, quickly-sold products or best offers. Opportunities are limitless. 

The only question is how to add product labels in Magento without much trouble. We have the answer — Magento 2 Product Labels Extension. So, today you'll learn how to add different types of product labels in Magento using this tool.

General

Once you install the Product Labels Extension, you need to go to Stores > Configuration > Magefan Extensions > Product Labels and fill out the basic settings. 

The basic fields are filled out by default. However, if you want to change them, remove the Use system value checkmark and fill out the following: 

  • Max. Number of Labels Applied to Product
  • Product Label Container
  • Product List Label Container

magento 2 product label settings

Save the settings and move to Marketing > Product Label > Rules to Add New Rule for product labels. 

Basic Rule Settings

This section covers the basic options common for every product label rule. First, enable the rule. Then specify the Rule Name and Priority, and select a Store View where you want to display the product label.

new magento product label

Then choose what Customer Group to display the label to and set the Acrive From/To dates to define a period when your label should be displayed on the frontend.

Finally, enable the Discard Subsequent Rules option if you want all other labels to be ignored (in case you configure some other labels for the same position and products).

product label settings magento

Once you finish, move to the Display Settings to start creating your labels. Magefan Product Labels extension comes with three different settings. So you can create labels based on images, text or pre-built shapes.

Image Labels

The easiest way to add product labels in Magento is through images. Simply select the Label Position, set Image as a Label Type and Upload your image. 

image product label in magento 2

You can preview the label position in the preview box on the left. It's available for all types of labels. 

Additionally, you can adjust the image label through the CSS option, set the Redirect URL (where to redirect visitors if they click on the image labels) and add Image Alt.

image css settings for product label

That's how image labels look on frontend after you finish setting up the rule:

sale product labels magento

Note: image labels are available in the Basic edition of the extension.To create text and shape labels you need Plus or Extra editions.

Shape Labels

There is a set of pre-built shapes you can choose in the Magefan Product Labels Extension.

product label shapes

The only thing you need to do is to set the Label Position and Shape Text and adjust the text and shape colours.

shape based product labels in magento

More options include the border-radius, font-size, white-space and padding if you need to tweak the shape settings.

Once you finish setting up the shape labels, that's what you get on the frontend:

hot deal labels

Text Labels

The last option you have is text labels. Simply choose the Label Position and enter your label's text after choosing the Text/HTML option. This is a relatively simple way to add product labels in Magento if you have some HTML knowledge. 

text based product labels magento

That's what the text label looks like on frontend:

text based product labels magento 2

Note: if you use Plus or Extra editions you can set different labels for product pages and lists.

Product Attribute Variables

In shape and text labels you can also use product attributes as variables to create dynamic labels. 

product label variables

Note: you won't see the attribute rendered in the backend preview. You can check it on the frontend.

magento product variables

HTML and CSS Settings

If you have some technical background or have a developer who can adjust the labels for you, HTML and CSS settings will come in handy.

You have the CSS settings for image labels to adjust the rotation, width, height, opacity, etc.

product label image css settings

If you want to tweak the shapes or text a little you can use the HTML editor with a variety of tags. 

shape button html magento

Magento Product Labels Rules

The last step you need to take to add product labels to Magento products is to define what products to apply them to. For that scroll down to the Product's Conditions section. 

It is based on the product attributes and dynamic product attributes that come with the extension. 

Note: if you don't see some of your product attributes in this section, add them to the sales rules conditions.

magento product label conditions

e.g. you can add labels to products on sale, new arrivals, products with a few items left in stock, products you offer free shipping for, etc.

After you set the conditions, you can check what products your labels will be applied to using the preview option.

preview products magento 2

Don't forget to Save the rule once you finish, or hit the Save and Apply button to see labels on the frontend immediately. 

Pro tip: if you want to schedule the product labels for the future, set future dates in the Active From field and simply Save the rule.

There is a lot to explore with our Magento 2 Product Labels Extension. The variety of options allows you to experiment with different labels and see which ones drive more attention.