Product labels and badges

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

These labels appear automatically based on the product’s status (e.g. discounted, sold out, or available for pre-order). Here’s how to bring them to life:

STEP 1: Add the corresponding block under the section

Under the Product labels and badges section, click “Add block” and choose the type of block you want (for example: Sale label)

STEP 2: Add an icon(optional):

• Choose from the dropdown list.
• For custom icons, select “Use another icon” and either:

• • Paste an icon name from the theme icon list, or
  • Insert an SVG code.

STEP 3: Customize the label content:

• To use TEXT as the label: Enter your wanted label text into the Content field. To show dynamic content for the labels, use these placeholders or formatting texts:

For example:  {sale} OFF ⇒ 50% OFF, Only {qty} items left ⇒ Only 5 items left.

• To use IMAGE as the label: Scroll down to the Image setting, and upload the image to make it the label.

STEP 4: Change the label’s position

Scroll down to the Display setting group to find the Label position setting. 

👉 For a detailed explanation, check the “5. Label positions settings” section below.

STEP 5: Style your label

In the Display & Color settings group, customize:

• Label shape (square, rounded corner, or circle)
• Text size (desktop & mobile)
• Opacity
• Background, text, and colors

STEP 6: Click “Save” when done.

The New Product Label highlights newly added items based on how recently they were published. The setup steps are similar to the labels in 4.1, with a few key differences:

STEP 1: Add the New Product Label block
In the Product labels and badges section, click “Add block” → select New Product Label.

STEP 2: Define the "new" time frame

To automatically determine which products should show this label:

• Use the “Show label within the number of days since” dropdown to choose a reference point:
• Product creation date (default): Counts from when the product was first created in Shopify Admin.
• Product activation date: Counts from the most recent activation date (useful if a product was deactivated and reactivated).
• Then, enter a value in the “Number of days” field (e.g., 30)

📌 This means any product that falls within that number of days from the selected date will be considered "new."

STEP 3: Choose how to apply the rule (important!)
There are two ways to apply this label:

✅ Apply storewide:

• Leave both “Apply to products” and “Apply to collections” blank
• Result: The New Label will apply to all products that fall within the defined time frame (based on step 2)

✅ Apply to specific products or collections:

• Use the “Apply to products” and/or “Apply to collections” fields to select specific items
• Result: The New Label will only appear on matching products and only if they fall within the time frame

STEP 4: Customize icon & label content

Choose an icon from the dropdown, or select “Use another icon” to paste your favorite icons from this theme icon list, or upload an SVG.

STEP 5: Adjust label appearance

You can customize:

• Label position (e.g., top left, custom position)
• Shape: Square, Rounded corner, or Circle
• Font size & label size for desktop and mobile
• Opacity
• Color settings for both light and dark modes

STEP 6: Click “Save” when done.

Use Image Labels to visually highlight certain products or collections using a custom uploaded image (e.g. “100% Natural”, “Hot Pick”, etc.).

 STEP 1: Add the Image Label block

Go to the Product labels and badges section → click Add block → select Image label.

 STEP 2: Apply the label to products or collections

You have two targeting options:

• Apply to products – Select specific individual products.
• Apply to collections – Apply the label to all products in selected collections.

STEP 3: Upload your label image

Scroll to the Image setting and click Upload to add your custom image.
💡 Use PNG files with transparent backgrounds for the best appearance.

STEP 4: Style your label

In the Display & Color settings group, customize:

• Label shape (square, rounded corner, or circle)
• Text size (desktop & mobile)
• Opacity
• Background, text, and colors

 STEP 5: Schedule the label (optional)

• Toggle Enable schedule to show or hide the label within a specific timeframe.
• Set the start and end time using your preferred time zone.
  

 STEP 6: Click “Save” to apply your settings

Use Text Labels to display messages like “Cruelty-free”, “Made in Vietnam”, or dynamic info (e.g. stock level, discounts) directly on product cards or pages.

 STEP 1: Add the Text Label block

Go to the Product labels and badges section → click Add block → select Text label.

 STEP 2: Apply the label to products or collections

You have two targeting options:

• Apply to products – Select specific individual products.
• Apply to collections – Apply the label to all products in selected collections.

 STEP 3: Add icon (optional)

• Choose an icon from the list
• OR choose “Use another icon” and either:
• Paste a name from the icon list
• Add a custom SVG code

 STEP 4: Customize label content

Enter your message in the Content field. You can include dynamic variables and basic HTML:

📝 Example: <b>{qty}</b> left in stock! → 5 left in stock!

STEP 5: Style your label

In the Display & Color settings group, customize:

• Label shape (square, rounded corner, or circle)
• Text size (desktop & mobile)
• Opacity
• Background, text, and colors

 STEP 6: Schedule the label (optional)

You can schedule when labels appear and disappear based on your preferred timeframe.

• Toggle Enable schedule.
• In Repeat, choose the way you want your countdown timer to work & when the label appears:

 STEP 7: Click “Save” to apply your settings

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

• Under the Quick view section, click on “Add block.”
• 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” to apply your settings

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

• Under the Product Information section, click on “Add block.”
• 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” to apply your settings

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

 STEP 1: 

Go to Theme settings > Product cards. 

 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” to apply your settings