Product labels & badges

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 “Addblock” 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)

• 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 7: Click “Save” to apply your settings

STEP 1: Go to each label block setting panel (e.g. Sale, Sold Out Label)

STEP 2: Turn on Show on product card.

STEP 3: Adjust where the labels will be shown by scrolling down to the Label position setting and choosing an option.

If you choose Custom position, adjust the position with the Horizontal & Vertical position settings.

Watch the video guide below if you need further help:

STEP 4: Click “Save” when done.

STEP 1:  In each label block setting panel, enable Show on product page.

STEP 2: Go to Product page > Product information section

STEP 3: Add a Labels and badges block & drag it to the desired position (e.g., below title, above price)

STEP 4: (Optional) To show the labels & badges on the product image of the product page, do this:

• Turn on “Adapt to product labels and badges setting” (Product information section > Labels and badges block)
• Go to the Product information section, and make sure the Desktop media layout setting is Thumbnail slider or Stacked layout.

STEP 5: Click “Save” when done.