User Guide

Search limit to:






Product labels and badges

by Admin on Oct 02, 2025

1. Overview

1.1. What are product labels & badges?

Product labels & badges are small but powerful visual indicators that appear on your product cards and product pages. They help highlight key information – like discounts, low stock, or new arrivals – so customers can make faster buying decisions.

  • Increase conversion rate: Highlight what makes products special (new arrivals, discounts, etc.) to encourage faster purchase decisions.
  • Improve store navigation: Help customers quickly differentiate products, or allow merchants to categorize products when multiple promotions or brands are involved.

1.2. Where can labels & badges appear?

  • On product cards (both product media and product information).
  • On product pages (both product media and product information).

Please take a look at these examples to have a better understanding of how labels and badges look in different places:

In this first example, they appear on the product cards. In particular, on the product media and product information.

Similarly, the labels and badges may also be shown in the product pages on the product media and product information.

2. How to enable Product labels & badges?

  1. Go to "Online Store" > "Themes" > "Customize".
  2. In Section settings > Overlay group > click on Product labels & badges.
  3. In the section settings panel, enable Enable product labels and badges.
  4. From here, you can start adding different label blocks to display them on product cards and product pages.

3. Section Components

Section

Displays labels and badges on the product cards and product pages.

Available blocks

Automatically displays a label with a custom discount message and icon.

Displays a label with a custom message and icon.

Displays a label with a custom image.

Highlights newly added products with a custom message and icon.

Automatically displays a label for pre-ordered products with a custom message, image, and icon.

Automatically displays a label for out-of-stock products with a custom message, image, and icon.

4. How to set up Labels (by Type)

🤔 4.1. Sale Label

  • Under the Overlay group, add the Product labels and badges section
  • Add the Sale label block.
  • Choose to show on product cards and/or product pages.
  • Add Icon, Content, and Image.
  • Customize the style, size, position, color, and text color.

🤔 4.2. Text Label

  • Under the Overlay group, add the Product labels and badges section
  • Add the Text label block.
  • Choose to show on product cards and/or product pages.
  • Select specific collections and products.
  • Add Icon, Content, and Image.
  • Customize the style, size, position, color, and text color.
  • Set a schedule with start and end times.

🤔 4.3. Image Label

  • Under the Overlay group, add the Product labels and badges section
  • Add the Image label block.
  • Choose to show on product cards and/or product pages.
  • Select specific collections and products.
  • Add Image.
  • Customize the style, size, and position.
  • Set a schedule with start and end times.

🤔 4.4. New Product Label

  • Under the Overlay group, add the Product labels and badges section
  • Add the New product label block.
  • Set a duration to automatically show since product activation or creation date.
  • Choose to show on product cards and/or product pages.
  • Select specific collections and products.
  • Add Icon and Content.
  • Customize the style, size, position, color, and text color.

🤔 4.5. Pre-order Label

  • Under the Overlay group, add the Product labels and badges section
  • Add the Pre-order label block.
  • Choose to show on product cards and/or product pages.
  • Select specific collections and products.
  • Add Icon, Content, and Image.
  • Customize the style, size, position, color, and text color.

🤔 4.6. Sold Out Label

  • Under the Overlay group, add the Product labels and badges section
  • Add the Sold out label block.
  • Choose to show on product cards and/or product pages.
  • Select specific collections and products.
  • Add Icon, Content, and Image.
  • Customize the style, size, position, color, and text color.

👉 Don’t forget: Click Save when done.

5. Label position settings

🤔 5.1. How to display Labels in the Quick View section

To display labels and badges in the Quick view section, just follow these simple steps:

STEP 1: 

In the Section setting > Overlay setting group > click on the Quick view section (this section is added by default).

STEP 2: Add the Labels and badges block

  • In the Quick view section, click on “Add”
  • Select Labels and badges from the dropdown to add this block.

STEP 3: Customize the Labels and badges block

  • Click on the Labels and badges block
  • In the setting panel, set Label position to be Content inline or On product media.

STEP 4: Click “Save” when done.

🤔 5.2. How to display Labels in the Product Information section (Product page)

To display labels and badges in the Product information section, just follow these simple steps:

STEP 1:

  • Click on the Homepage dropdown menu > Collection > Default product. 
  • Enable the Product Information section to display it (this section is enabled by default).

STEP 2: Add the Labels and badges block

  • In the Product Information section, click on “Add”
  • Select Labels and badges from the dropdown to add this block.

STEP 3: Customize the Labels and badges block

  • Click on the Labels and badges block
  • In the setting panel, set Label position to be Content inline or On product media.

STEP 4:

Click “Save” when done.

🤔 5.3. How to display & customize Sale Labels in Product Cards

To display sale labels in the product cards, just follow these simple steps:

STEP 1: 

Go to Theme settings > Product card. 

STEP 2: Display the sale label

  • Scroll down to the Sale labels setting group.
  • Enable the Show sale label.

STEP 3: Customize the Sale label appearance

Still at the Sale labels setting group:

  • Fill the Sale label content field.
  • Customize the color and text color in both light and dark mode.

STEP 4: 

Click “Save” when done.

Need help? Contact our support team at Omni Themes Support.