How to Create Custom Product Labels in Magento 2

How to Create Custom Product Labels in Magento 2

Building a successful ecommerce store is a complex job that requires combining different strategies to achieve the goal. Well-designed product labels play a part in creating a profitable website. They work by tapping into the fear of missing out on the product, encouraging faster purchasing decisions, and driving conversions. Sometimes, typical badges don’t work or don’t suit the website, so creating custom product labels may be necessary.

In this article, you will find a detailed guide for online store owners on how to create custom product labels for Magento 2. You will also understand how to use product labels to attract customer attention, enhance their shopping experience, and increase sales in your store.

What are Magento 2 Product Labels?

Product labels or badges are small visual cues located on product iсons or listings that highlight important information about products. They are used to attract customers’ attention, boost user experience, and drive conversions.

There are 3 main types of product labels:

  1. Badges that highlight products’ attributes. Examples of these are “New”, “Organic”, or “Cotton”. Such labels streamline the buying process for customers.
  1. Time-sensitive labels inform the customer about time-specific deals. Badges such as “Hot Today”, “Limited Edition”, or “Hard to Find” create a sense of urgency and exclusivity, encouraging purchases.
  1. Social proof badges. Through research, we discovered that this type is the most popular among top-rated retailers and is used the most often. Such badges as “Bestseller,” “Staff pick,” or “Top rated” indicate products’ desirability and build customer trust.

Benefits of using product labels

Product labels offer a powerful toolkit for ecommerce businesses. They deliver a range of benefits that can boost sales and improve customer experience.

  • Attract attention to the product: Due to the fast spans of content, it’s crucial to stand out. Product labels have eye-catching designs that magnetize visitors and make to click.
  • Convey key information: Badges help to highlight key features of the product or important information. They are small and can concisely describe some items’ attributes, making labels practical and convenient.
  • Drive Conversions: Product labels greatly influence customers’ decisions. Badges inform visitors about a great bargain that is currently available, creating a sense of urgency to buy.
  • Enhance customer experience: Thanks to labels, visitors can easily navigate the website. Badges like “Organic” or ” Cotton” help to find the specific product among a wide range of others.

Why Do You Need a Magento 2 Product Labels Extension?

Sometimes, Magento’s default range of tools might not be enough for creating rich content, so using some extra modules or apps can greatly help in this process. Magento 2 product label extension is a valuable tool for both merchants and store owners as it greatly saves time and offers features for leveraging an ecommerce store.

No Default Product Labels in Magento 2

Unfortunately, Magento doesn’t have tools for product label creation and management. Basic customization options like manual icon uploads are tedious and impractical for large catalogs.

However, the Magento 2 product labels extension ensures a wide range of features and automation for setting up effective and catchy labels. This module is especially helpful for displaying dynamic content on websites of all sizes.

Extensive Badge Selection (50+ templates)

Select from 50+ creative ready-made badge templates to highlight best sellers, limited-time offers, and seasonal promotions, enhancing customer engagement and driving conversions:

  • Featured badges (“New,” “Best Seller,” “Featured,” “Top-Rated,” “Sold-Out”, “Free Shipping,” etc.)
  • Discount labels (“Big Sale”, “Limited Time Deal”, etc.)
  • Dynamically generated labels (“-25%”, “Save $30”)
  • Holiday Labels (“Black Friday Sale”, “Christmas Sale”, Halloween Sale”, “4th of July Sale”, “Cyber Monday Sale”, etc.)
Why Do You Need a Magento 2 Product Labels Extension — Extensive Badge Selection

Custom Product Labels in No Time / Personalized Appearance

Why Do You Need a Magento 2 Product Labels Extension? — Custom Product Labels in No Time / Personalized Appearance

You can create a label from scratch or customize the template according to your needs. Tailor label colors, sizes, and text styles to match your store’s branding on category and product pages.

Also, the “CSS styles” field in the extension configuration pushes the boundaries – you are not limited to adding shadows, changing position, etc.

Live Preview and Positioning

Choose your label position from 9 options and preview the adjustments live. This allows you to fine-tune styles and ensure perfect alignment before going live on your store.

Flexible Display Rules

Save time on managing your product labels. With the extension, you can configure rules to set when and where to display the labels so they appear and disappear automatically and are always up to date.

Labels can also be displayed at multiple key locations across your store: product pages, category pages, product list widgets, and more.

Why Do You Need a Magento 2 Product Labels Extension? — Flexible Display Rules

3 Steps to Create Custom Product Labels for Magento 2

1. Install and enable the extension

Purchase and Install the Product Labels extension using the step-by-step installation guide.

2. Configure basic display settings

In the main Magneto menu, go to the Plumrocket tab -> Product Labels > Configuration. Set up the serial key to enable the extension and set up “Display settings”:

Display On: Here, you can select the areas of your site where the product labels should be displayed, such as product pages or category pages.

Show Multiple Labels In The Same Position: This option allows you to manage multiple labels on a product. Set to “No” to display labels in different positions, ensuring all are visible to customers. Set to “Yes” to overlap labels in the same position, displaying only those with the highest priority.

Steps to Create Custom Product Labels for Magento 2 — Show Multiple Labels In The Same Position

3. Create a new product label

Go to the Plumrocket tab in the main Magento menu -> Product Labels -> Manage Labels -> click “Add New Label” or edit the existing template.

  • Configure General Settings

  1. Enable Label: Toggle to enable the new label.
  2. Title: Provide a descriptive title for the label.
  3. From / To: Set the start and end dates for when the label should be displayed.
  4. Priority: Assign a priority to the label, with lower numbers indicating higher priority.
  5. Store View & Customer Groups: Select the store views and customer groups for which the label should be visible
  • Set Up Label Design:

  1. Label Type: Choose the type of label (text, shape, or image).
  2. Position: Specify the position on the product image where the label should appear.
  3. Label Image: Upload or select an image for the label if applicable.
  4. Label Size: Define the size of the label.
  5. Text: Enter the text for the label, using variables if needed (e.g., {{discount_amount}}, {{discount_percent}}, {{attribute_code}}).
  6. Text Color and Size: Customize the color and size of the text.
  7. Custom Styles: Add any additional CSS styles for further customization, including product label style, transparency, rotation, position, etc.
Steps to Create Custom Product Labels for Magento 2 — Set Up Label Design
  • Set Flexible Rules and Conditions for product label display:

Set the conditions under which the label should be displayed. These can include product attributes and categories.

Steps to Create Custom Product Labels for Magento 2 — Set Flexible Rules and Conditions for product label display

Examples of Product Label Usage on Magento 2 Pages

1. Ready-made templates for product labels

The module provides 50+ ready-to-use product labels. These templates greatly save time and effort in managing the ecommerce store.

Examples of Product Label Usage on Magento 2 Pages — Ready-made templates for product labels

2. Customized label using custom CSS code

You can easily add your custom CSS code to the “Custom Styles” field in the extension configuration. In this example, we have customized the label’s position and background and added shadows and font styles.

padding: 8px 18px;
text-align: center;
border-radius: 40px;
box-shadow: 0 6px 9px -3px #494646d4;
background: linear-gradient(90deg, #FA5641 0%, #B80000 100%);
border: 2px solid #F0BA36;
font-weight: 800;
letter-spacing: 1px;
margin-left: -50px;

Here’s what the label looks like on the frontend:

Examples of Product Label Usage on Magento 2 Pages — Customized label using custom CSS code — frontend
Examples of Product Label Usage on Magento 2 Pages — Customized label using custom CSS code — backend

Here’s another example of the label customization:

padding: 7px 20px;
text-align: center;
border-radius: 0 0 0 25px;
box-shadow: 0 6px 7px -2px #41414185;
background: linear-gradient(0deg, #FF8900 0%, #FAB86C 100%);
font-weight: 800;
letter-spacing: 1px;
Examples of Product Label Usage on Magento 2 Pages — Customized label using custom CSS code

Conclusion

Product labels are essential since they provide a number of advantages for both retailers and consumers. They increase product visibility, highlight key promotions, and provide crucial information that influences purchasing decisions.

Implementing the Product Labels plugin to your Magento website enables you to add customized features that create a personalized experience and drive sales.