> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/star-product-labels-and-badges/product-labels.md).
# Product Labels
This is a feature that allows you to add a label to products according. You can label your products as bestseller, limited stock, new arrival, discounted rate etc.
To create these labels, follow these easy-peasy steps:
### **1. General**
* **Label Identification Name** – Assign an internal name to help you distinguish this label from others in your dashboard.
* **Status** - Select the status of the label: Active/Inactive
* **Label Type** – Select how you want the label to appear on the storefront:
#### 1. **Image**
Allows you to display a custom image as a label or badge.
**Example:** A **“New Arrival”**, **“Hot Deal”**, or **Sale** badge image uploaded by you.
#### **2. Text**
Displays a custom text message as a label.\
**Example: "Best Seller", "Limited Offer",** or **"Trending"**
#### **3. Timer**
This field allows you to set the text that appears along with the countdown timer.
* Use the variable**{%-timer-%}** to display the live countdown.
* You can place this variable anywhere in your text.
**Example:**\
Starts in {%-timer-%}\
👉 This will show text like: *Starts in 02:15:30*
#### **Date & Time**
Set the end date and time for the countdown timer.
**Format:**\
dd-mm-yyyy --:--
* **dd** → Day
* **mm** → Month
* **yyyy** → Year
* **--:--** → Time in hours and minutes (24-hour format)
**Example:**\
25-03-2026 18:30\
👉 The timer will count down until 25 March 2026 at 6:30 PM.
#### **Choose Image**
Select a background image for the timer section.
* The chosen image will appear behind the timer text.
* This helps make the timer more visually attractive and noticeable.
* For best results, use a clear image with enough contrast so the timer text remains readable..
#### **4. Discount**
Choose **Discount** when you want to highlight a price reduction on the product, such as a percentage off or a fixed amount off.\
This label helps customers quickly notice savings, which can increase click-through and conversions.
#### **Discount Variable**
This field defines **what value will be shown in the discount label**.
Available variables:
* **{%-percentage-%}** → Displays the discount in percentage\
*Example: 20% OFF*
* **{%-money-%}** → Displays the discount as a fixed amount\
*Example: $10 OFF*
👉 The value is calculated automatically based on the product’s original price and sale price.
#### **Select Price Variable**
Use this option to choose **how the discount should be calculated and displayed**:
* Select the **percentage** when you want to show savings in %.
* Select **money** when you want to show the exact amount saved.
This gives you flexibility to match your store’s pricing strategy and customer preference.
#### **Discount Text**
This field controls **the text shown on the discount label**.
You can use these variables:
* **{%-percentage-%}**
* **{%-money-%}**
**Example texts:**
* **Discount {%-percentage-%}** → Displays: *Discount 20%*
* **Save {%-money-%}** → Displays: *Save $15*
👉 The variable will be replaced dynamically with the correct discount value for each product.
#### **5. Price**
Select **Price** when you want to display product pricing directly on the label instead of a discount.\
This is useful for products with **price ranges** or variable pricing.
#### **Price Variable**
Choose which price value to display:
* **{%-min\_price-%}** → Shows the lowest product price
* **{%-max\_price-%}** → Shows the highest product price
The value updates automatically based on product variants.
#### **Select Price Variable**
Use this option to control whether the label shows the **minimum** or **maximum** product price.
#### **Price Text**
Customize the label text using price variables.
**Examples:**
* Min Price {%-min\_price-%} → Displays: *Min price $49*
* Up to {%-max\_price-%} → Displays: *Up to $199*
#### **When to Use This Label**
* Products with multiple variants and different prices
* Collections where you want to show the **starting price**
* Custom or configurable products
**Example:**\
A T-shirt available in multiple sizes:\
*The minimum price of $19* helps customers understand the starting cost at a glance
#### **6. Inventory Quantity**
Select **Inventory Quantity** to display the available stock count on the product label.\
This helps create urgency and informs customers about limited availability.
#### **Inventory Text**
Customize the label text using the inventory variable.
* **{%-Inventory\_qty-%}** → Displays the current available stock quantity
**Example:**\
**{%-Inventory\_qty-%}** items left → Displays: *5 items left*
The value updates automatically based on real-time inventory.
#### **When to Use This Label**
* Low-stock or fast-selling products
* Flash sales and limited-time offers
* To create urgency and encourage quicker purchases
#### **7. Inventory**
Select **Inventory** to show a **stock status message** instead of an exact quantity.\
This is useful when you want to inform availability without revealing numbers.
#### **Inventory Text**
Customize the label using the inventory status variable.
* **{%-Inventory-%}**→ Displays the product’s inventory status automatically\
(e.g., *In stock*, *Sold Out*)
**Example:**\
**{%-Inventory-%}** → Displays: *In stock*
#### **When to Use This Label**
* When you prefer **status-based messaging** over exact quantities
* For high-volume products where numbers change frequently
* To keep inventory details simple and clean
### **2. Configuration**
**Product Label Appearance** – Customize how your product label will look by configuring the following options:
* **Label Position** – Choose where to display the label: Top Left, Top Right, Bottom Left, or Bottom Right
* **Label Shape** – Select the desired shape or style for your label
* **Width & Height** – Define the overall size of the label
* **Border Radius** – Adjust the corner roundness for sharp or rounded edges
* **Rotation** – Tilt or angle the label as needed
**Set Style of the Label :**
* **Margin (Top/Bottom & Left/Right)** – Set spacing outside the label
* **Padding (Top/Bottom & Left/Right)** – Set spacing inside the label
* **Text Style** – Customize the label text (e.g., font size, weight, decoration, etc.)
**Color & Size** – Configure the background color, title/text color, and text size of your product label.
**Tooltip & Link** – Set a tooltip or hover text for your label, and optionally add a link to related products that can open in a new tab.
**Animation** – Enable animation for your label and choose the desired animation type.
3. **Conditions**
Select where you want to show your product labels on;
* Home page
* Product pages
* Collection/category pages
You can precisely control **when and where your labels appear** across your store. Configure them using the following conditions:
**1. All Products**
Select this option if you want your labels to be displayed on **every product** available in your store.\
This is useful for global announcements like **store-wide sales**, **seasonal offers**, or **new collection highlights**.
**2. Specific Products**
Use this option to show labels only on **selected individual products**.\
You can manually pick products where you want the label to appear, ideal for **best-sellers**, **limited-edition items**, or **featured products**.
**3. Specific Collections**
This allows you to apply labels to **entire collections** instead of selecting items one by one.\
Perfect for **category-based promotions**, such as discounts on “Winter Wear,” “Electronics,” or “New Arrivals.”
**4. Product Tag**
Display labels based on product tags.
For example, products with tags that **include or exclude keywords like “Sale,” “New,” or “Limited Stock”** can automatically have the corresponding labels applied.
This is great for automated and dynamic label placement.
**5. Product Title**
Configure labels based on **product titles** using conditions like :
* **Contains** – Apply label if the title includes specific keywords.
* **Doesn’t Contain** – Apply label if the title excludes certain keywords.
* **Is Equal To** – Apply label if the title exactly matches a keyword.
* **Is Not Equal To** – Apply label if the title does not exactly match a keyword.
* **Starts With** – Apply label if the title begins with a keyword.
* **Ends With** – Apply label if the title ends with a keyword.
\
For instance, all products with “**Premium**,” “**Organic,**” or “**Combo**” in their title can have special labels applied automatically.
**6. Product Vendor**
Apply labels to products from vendors whose names **contain, don’t contain, are equal to, are not equal to, start with, or end with** specific keywords.
This is useful for highlighting **brand-based promotions** or showcasing products from particular suppliers.
**7. Product Price**
Set rules based on product price using conditions like **equal to, greater than, less than, in range, or not in range**.
For example, you can show labels on products above or below a certain price perfect for highlighting **budget-friendly** or **premium-range items**.
**8. Product Inventory**
Display labels based on your product’s stock status or quantity.\
You can set conditions such as:
* **In Stock** – Show labels when inventory is available.
* **Out of Stock** – Show labels when inventory is zero.
* **Greater Than (>)** – Apply labels when stock is above a set number.
* **Less Than (<)** – Highlight low stock.
This helps automate stock-based labels like “**Low Stock**,” “**Few Left**,” or “**Out of Stock**.”
**9. Product Published**
Show labels based on a product’s publish date using conditions like **older than, newer than, in between a certain period, or not in between a certain period**.
* This is ideal to highlight **new arrivals** or recently launched products with labels like **“New Arrival”** or **“Just Launched”**.
* Promote products that have been in your store for a longer time, for example, with labels like **“Best Seller”** or **“Popular Item”**.
* You can **automate labeling based on a product’s lifecycle** without manual updates. For example, you can apply labels like **“Not Available”** to products published **outside a specific time period** or within a certain duration, ensuring labels are always relevant and up-to-date.
## Product Badges
This feature allows you to add badges to your products, such as, in discount, sale, coming soon, and many more such badges.
**Step #1**
There are 9 budges.
1. Outline budges
2. Stacked Badges
3. Rounded Badges
4. Filled Badges
5. Shield Badges
6. Emblem Badges
7. Filled Cards
8. Outlined Cards
9. Stacked Cards
**Step #2**
To create these badges, follow these easy-peasy steps :
1. **General** :
* **Badge Identification Name** – Assign an internal name to help you distinguish this badge from others in your dashboard.
**- Badge Type** – Select how you want the badge to appear on the storefront:
**- Image Badge** – Upload an icon or image as your badge.
**- Text Badge** – Display a custom text-based badge.
* Frontend Display Name – Enter the actual badge name that will be shown to customers on the storefront.
2. **Configuration**
**Badge Appearance** – Customize how your badge will look by configuring the following options:
* **Badge Position** – Choose where to display the badge: **Top Left, Top Right, Bottom Left, or Bottom Right**
* **Badge Shape** – Select the desired shape or style for your badge
* **Width & Height** – Define the overall size of the badge
* **Border Radius** – Adjust the corner roundness for sharp or rounded edges
* **Rotation** – Tilt or angle the badge as needed
**Badge Style Settings**:
* **Margin (Top/Bottom & Left/Right)** – Set spacing outside the badge
* **Padding (Top/Bottom & Left/Right)** – Set spacing inside the badge
* **Text Style** – Customize the badge text (e.g., font size, weight, decoration, etc.)
* **Color & Size** – Configure the background color, title/text color, and text size of your badge
* **Badge Adjustment** – Fine-tune the position, alignment, and spacing of the badge for perfect placement on your products
**Color & Size** : Configure the **background color**, **title/text color,** and **text size** of your badge.
**Tooltip & Link** – Set a tooltip or hover text for your badge, and optionally add a link to related products that can open in a new tab.
**Animation** – Enable animation for your badge and choose the desired animation type.
3. **Conditions :**
Select where you want to show your product badges on;
* Home page
* Product pages
* Collection/category pages
You can precisely control **when and where your badges appear** across your store. Configure them using the following conditions:
**1. All Products**
Select this option if you want your badges to be displayed on **every product** available in your store.
This is useful for global announcements like **store-wide sales**, **seasonal offers**, or **new collection highlights**.
**2. Specific Products**
Use this option to show badges only on **selected individual products**.
You can manually pick products where you want the badge to appear, **ideal for best-sellers**, **limited-edition items**, or **featured products**.
**3. Specific Collections**
This allows you to apply badges to entire collections instead of **selecting items one by one**.
Perfect for category-based promotions, such as discounts on “**Winter Wear**,” “**Electronics**,” or “**New Arrivals.**”
**4. Product Tag**
Display badges based on product tags.
For example, products with tags that **include or exclude keywords like “Sale,” “New,” or “Limited Stock”** can automatically have the corresponding badges applied.
This is great for automated and dynamic badge placement.
**5. Product Title**
Configure badges based on **product titles** using conditions like :
* **Contains** – Apply badge if the title includes specific keywords.
* **Doesn’t Contain** – Apply badge if the title excludes certain keywords.
* **Is Equal To** – Apply badge if the title exactly matches a keyword.
* **Is Not Equal To** – Apply badge if the title does not exactly match a keyword.
* **Starts With** – Apply badge if the title begins with a keyword.
* **Ends With** – Apply badge if the title ends with a keyword.
\
For instance, all products with “**Premium**,” “**Organic,**” or “**Combo**” in their title can have special badges applied automatically.
**6. Product Vendor**
Apply badges to products from vendors whose names **contain, don’t contain, are equal to, are not equal to, start with, or end with** specific keywords.
This is useful for highlighting **brand-based promotions** or showcasing products from particular suppliers.
**7. Product Price**
Set rules based on product price using conditions like **equal to, greater than, less than, in range, or not in range**.
For example, you can show badges on products above or below a certain price perfect for highlighting **budget-friendly** or **premium-range items**.
**8. Product Inventory**
Display badges based on your product’s stock status or quantity.\
You can set conditions such as:
* **In Stock** – Show badges when inventory is available.
* **Out of Stock** – Show badges when inventory is zero.
* **Greater Than (>)** – Apply badges when stock is above a set number.
* **Less Than (<)** – Highlight low stock.
This helps automate stock-based badges like “**Low Stock**,” “**Few Left**,” or “**Out of Stock**.”
**9. Product Published**
Show badges based on a product’s publish date using conditions like **older than, newer than, in between a certain period, or not in between a certain period**.
* This is ideal to highlight **new arrivals** or recently launched products with badges like **“New Arrival”** or **“Just Launched”**.
* Promote products that have been in your store for a longer time, for example, with badges like **“Best Seller”** or **“Popular Item”**.
* You can **automate labeling based on a product’s lifecycle** without manual updates. For example, you can apply badges like **“Not Available”** to products published **outside a specific time period** or within a certain duration, ensuring badges are always relevant and up-to-date.
#### 1. Outline badges
Outlined Badges help you highlight important product benefits using a clean, structured layout with icons and text. They make key information easy to scan while keeping your product page neat and professional.
Now you can click on "Create as"
Now you can see how it's shown
in genral secation, you can add a name and change the status according to you.
**Main Heading – “Fast & secure”**
The Main Heading allows you to add a title above your badge elements. Customize the heading text, alignment, font size, and font color to match your store's design and highlight key product benefits.
Customize the main heading by changing its text, alignment (left, center, or right), font size, and font color to match your store's design.
#### **INSTANT CHECKOUT Settings**
Customize each badge by editing its title and subtitle, enabling or disabling the image, changing the icon, and adjusting its size, color, shape, and animation to match your store's design.
#### Easy Payments – Badge Settings
Customize the badge title and subtitle, enable or disable the image, and adjust the icon, size, color, animation, shape, and shape color. These options help you highlight payment benefits in a style that matches your store.
#### Free Shipping – Badge Settings
Customize the badge title and subtitle, enable or disable the image, and adjust the icon, size, color, animation, shape, and shape color to highlight free shipping benefits on your product page.
> **Note:** The **Configuration Settings** and **Condition Settings** work in the same way as mentioned above. Please follow the same steps and settings for both sections.
#### 2. Stacked badges settings
Stacked Badges display multiple product benefits in a neat, vertical layout, making important product information easy to read and helping customers quickly understand key features.
Now you can click on "Create as"
Now you can see how it's shown
in genral secation, you can add a name and change the status according to you.
#### Main Heading – Fast & Trusted
Customize the main heading text, alignment (left, center, or right), font size, and font color to match your store's design.
#### Fast Checkout – Badge Settings
Customize the badge title and subtitle, enable or disable the image, and adjust the icon, icon size, color, and animation. You can also select a shape, customize its color and border, and set shape animation to match your store's design.
#### Payment Options – Badge Settings
Customize the badge title and subtitle, enable or disable the image, and adjust the icon, size, color, and animation. You can also select a shape, customize its color and border, and set shape animation to highlight available payment options on your product page.
#### Free Shipping – Badge Settings
Customize the badge title and subtitle, enable or disable the image, and adjust the icon, size, color, and animation. You can also customize the shape, shape color, and border to highlight free shipping benefits on your product page.
> **Note:** The **Configuration Settings** and **Condition Settings** work in the same way as mentioned above. Please follow the same steps and settings for both sections.
Note: There are a total of 9 badges available in this section. The Configuration Settings and Condition Settings are the same for all 9 badges, as explained above. You can follow the same steps and apply the required settings for each badge. Only the badge name/design or specific badge-related details may differ; the configuration and condition setup process remains the same for all badges.
### Payment Icons
The **Payment Icons** feature allows you to display payment method icons on your product page. These icons help customers quickly identify the payment methods supported by your store and can also improve trust during the purchase process.
#### Step 1: Select a Payment Icons Style
Under the **Payment Icons** section, you will find different pre-designed styles:
* **Default Icons** – Displays payment icons in the standard/default style.
* **Filled Icons** – Displays the payment icons with a filled design.
* **Dark Icons** – Displays the payment icons in a darker style.
Select the style that best matches your store's design. The selected style will be highlighted, and you can see the changes in the **Preview** section.
#### Step 2: Configure Payment Icons
After selecting a payment icon style, open the selected Payment Icons settings.
The configuration allows you to customize how the payment icons are displayed on your storefront.
You can use the **Preview** section on the right side to check how the payment icons will appear on the product page.
For example, the preview may display payment methods such as:
* PayPal
* Apple Pay
* Mastercard
* Shop Pay
* Visa
* American Express
* Klarna
#### Payment Icon Management
Inside the Payment Icons settings, you can manage the individual payment icons that you want to display.
Use the **eye icon** next to a payment method to control its visibility. This allows you to show only the payment methods that are relevant to your store.
You can also use **+ Add badge** to add another payment icon/item when supported by the selected layout.
#### Preview
The **Preview** section provides a real-time view of how your Payment Icons will appear on the product page.
You can check the appearance in:
* **Desktop** – Preview for desktop devices.
* **Mobile** – Preview for mobile devices.
* **Both** – Preview the payment icons across both device types.
You can also select the required **language** from the language dropdown to preview the content accordingly.
> **Note:** The **Configuration Settings** and **Condition Settings** work in the same way as explained above for all available Payment Icons styles. Once you understand the setup process, you can follow the same steps for the other Payment Icons styles.
## Buttons
The Buttons feature in STAR Product Labels allows you to add interactive buttons to your product page. These buttons help customers visit external marketplaces, contact your business, send inquiries, or use discount codes directly from your storefront.
### Step 1: Select a Button Style
Under the Buttons section, you will find different pre-designed button templates. Each template is designed for a specific purpose.
#### 1. Blank Template
Use this template to create a custom button with your preferred label. It is suitable when you want to add a simple button with customized text for a specific purpose.
#### 2. External Marketplaces
Use this template to display buttons that direct customers to external marketplaces, such as Amazon or eBay. It is useful when your products are also available on other shopping platforms.
#### 3. Messengers
Use this template to add WhatsApp and Messenger buttons to your product page, making it easier for customers to contact your business through messaging platforms.
#### 4. Email Us
Use this template to add an email support button to your product page. It allows customers to contact your business via email if they have questions or need assistance.
#### 5. Coupon
Use this template to display a discount code on your product page. It helps highlight available promotions and makes customers aware of the coupon code they can use.
#### 6. Support Request
Use this template to provide customers with multiple support options, such as WhatsApp and email. It is useful for stores that want to make customer assistance easily accessible.
Select the template that best matches your store's requirements. The selected template will be highlighted, and you can view its design in the template preview.
### Step 2: Configure Your Button
After selecting a button template, open the button editor to configure the available settings.
Depending on the selected template, you can customize the button content and related settings to suit your requirements.
For example, button templates may include marketplace links, messaging options, email support, or coupon information.
### Step 3: Preview Your Button
The Preview section allows you to review how your selected button template will appear on your product page.
Check the button layout and appearance to ensure it matches your store's design and provides a clear experience for customers.
> Note: The available button settings may vary depending on the selected template. Refer to the settings displayed in the button editor to configure your selected button.
> **Note:** The **Configuration Settings** and **Condition Settings** work in the same way as explained above for all available **Buttons**. Once you understand the setup process, you can follow the same steps for the other **Button** styles.
### Footer
The Footer feature allows you to display product badges in the footer area of your product page. It helps highlight important product benefits, such as free shipping, and makes key information easy for customers to notice.
#### Step 1: Select the Footer Template
Under the Labels & Badges section, select the Footer template. This layout displays badge information in the footer area of the product page.
#### Step 2: Configure Footer Badges
In the badge editor, customize the available badge settings, such as the badge title, subtitle, icon, and its appearance, to highlight your product benefits.
#### Step 3: Preview Your Footer
Use the Preview section to check how your footer badge appears on the product page. You can review the layout and badge visibility before applying it to your storefront.
> **Note:** The **Configuration Settings** and **Condition Settings** work in the same way as explained above for all available **Footer** styles. Once you understand the setup process, you can follow the same steps for the other **Footer** styles.
#### Language-Specific Store Messages
The Language dropdown allows you to configure store messages in different languages. Add a message for each supported language, and it will be displayed on the storefront when a customer selects that language. If no translated message is available, the default English message will be displayed.
The Language dropdown displays the languages added in your Shopify store's language settings. Select a language from the dropdown to add or customize the message for that language.
