Configure the Product badge

Configure the Product badge

In this article, we’ll explain how to create and manage Product badges to highlight special products and improve customer engagement.  This feature is currently available for Shopify apps starting from mobile version 6.1.0
Notes
Available on Advanced and Enterprise plans

1. About the product badge

Product badges highlight important products (e.g., New Arrival, Best Seller) to attract customer attention. They appear on product listing pages and product detail pages, helping boost sales by making key products more visible.

Key features:
  1. Customizable badge titles with dynamic variables (e.g., sale percent, quantity).
  2. Flexible design options (color, corner style, position).
  3. Choose where to show badges: product listing page (PLP), product detail page (PDP), or both.
  4. Conditional display based on product attributes such as product title, product type, product vendor, product tag, price, weight, inventory stock, variant title. 
  5. Real-time updates without impacting app performance.

2. How to set conditions for a product badge?

Step 1: Access Product Badges
Go to Design > Product Badges. 

Step 2: Create a New Badge 

Provide a name for this badge and click the plus icon to create a new product badge.



The badge is now ready to be configured and designed. 

Step 3: Choose matching logic
Choose how products must match the conditions:
  1. ALL conditions (AND logic): product must meet every condition to display the badge.
  2. ANY condition (OR logic): product must meet at least one condition to display the badge.
Step 4: Add conditions
Click the plus icon to add conditions based on product attributes such as: Product title, variant title, product type, price, weight, etc.



Step 5: Choose the specific rule or operator to apply. 

Once you’ve selected the matching logic, choose the specific field and rule to define how the badge condition should behave. The table below shows the supported product fields, compatible operators, and expected value types. To ensure consistent and reliable behavior, product badge conditions support the following fields and operators:

No
Field
Compatible operator
Value type
1
 Product title

 is equal to, is not equal to, starts with, ends with, contains (default), does not contain
 Any character input
2
 Product type


 is equal to (default), is not equal to, starts with, ends with, contains, does not contain
 Selected from a list of available options


3
 Product vendor


 is equal to (default), is not equal to, starts with, ends with, contains, does not contain
 Selected from a list of available options


4
 Product tag
 is equal to


 Selected from a list of available options
5
 Price
 is equal to, is not equal to, is greater than (default), is less than
 Numeric value 
 Currency unit retrieved from e-com platform, displayed as symbol

6
 Compare-at price
 is equal to, is not equal to, is greater than (default), is less than, is empty, is not empty

- Numeric value


- Currency unit retrieved from e-com platform, displayed as symbol


- If operator = is empty or is not empty, do not require value


- Compare-at price = 0 is considered is not empty


7
Weight
 is equal to, is not equal to, is greater than (default), is less than

- Numeric value

- Weight unit retrieved from e-com platform, displayed as abbreviation (kilograms → kg, grams → g, pounds → lb, ounces → oz)


8
Inventory stock
 is equal to, is greater than (default), is less than
 Numeric value
9
Variant title
 is equal to, is not equal to, starts with, ends with, contains (default), does not contain
 Any character input
Step 6: Repeat the above steps to add multiple conditions if needed.

The badge will only be displayed on products that meet the defined condition(s) according to the chosen logic.

3. How to design a product badge?

Step 1: Select the badge you want to design.

Step 2: Edit the badge title

You can edit the badge title and insert dynamic variables by clicking the “Dynamic value” plus icon. These variables will automatically update based on each product’s data.
Available dynamic variables include:
  1. {{sale_percent}} — displays the sale percentage
  2. {{sale_amount}} — displays the discount amount
  3. ​{{quantity}} — displays the stock quantity
3. Set display options

Step 3: Set display options
Choose where you want the badge to appear by selecting one or both of the following:
  1. Product listing (PLP) — includes category pages, search results, wishlists, and related product blocks
  2. Product detail (PDP) — the individual product page 
Step 4: Customize badge design

In the badge design settings, you can customize the appearance to match your brand:

  1. Background color
    1. Click the color picker to choose a color visually, or
    2. Enter a HEX color code manually (e.g., #FF5733) in the input field to set a specific color.
    3. Make sure to use valid HEX codes starting with # followed by 6 hexadecimal characters (0-9, A-F).  
  1. Corner style: Select between sharp corners or rounded corners.
  2. Position: Choose where the badge will appear on the product image, such as top-left, top-right, etc. 

After customizing, preview the badge to see how it looks on your products. The preview will be shown in the phone preview area at the center of the screen, allowing you to see real-time changes before saving or publishing.

Step 5: Save draft and publish to the mobile. 


If you have any further questions, please reach out to us at customer.success@jmango360.com!

    • Related Articles

    • Configure the product detail page

      In this article, we'll walk you through the introduction of product detail blocks how to leverage them to create an impactful product detail page. Note: This user guide is applicable to BigCommerce. 1. About product detail blocks When you open the ...

    • Configure smart app banners

      1. Introduction to smart app banners A smart app banner is a banner at the top or bottom of the screen on a mobile website to inform and encourage users to download or open the related app. Key characteristics of smart app banners: Creates a direct ...

    • Configure the My Account page

      In this article, we'll explore the elements and configuration options that allow you to create a tailored and engaging experience for your app users. 1. About the My Account page The My Account page in your app is a crucial hub of information and ...

    • Configure the home settings

      In this article, we provide a step-by-step guide on setting up the multi-home feature and effective ways to manage home screens through editing options in the home list. Available on Advanced and Enterprise plans 1. Multi-home 1.1 About multi-home ...

    • Feature update Alphonso - BigCommerce

      > Platform launched in Q1 2024 Introduction We're excited to announce a series of enhancements to the App and the JMango360 platform that are designed to improve your overall experience. These updates are based on your feedback and our commitment to ...