About the Product Badge Element
GemPages’ Product Badge element is designed to emphasize key details about a product, such as labeling a new arrival or showcasing a promotion directly on the featured image.
With this element, you can gain multiple advantages for your eCommerce store:
-
- Enhanced Visibility: Increase product visibility by making particular items stand out, ensuring they capture customers’ attention.
- Increased Brand Trust: Boost credibility with badges like “Top Rated” or “Customer Favorite”, showcasing positive reviews and endorsements to build trust with buyers.
- Encouraged Action: Create urgency with badges like “Only 2 Left!” or “Ending Soon,” prompting customers to act quickly and complete their purchases.
- Tested Pricing Strategy: Experiment and determine the most effective pricing strategy for each item by offering different discounts for every product.
- Enhanced Inventory Management: Sell slow-moving or excess items more quickly, cutting storage costs and making room for new stock with badges like “Stock Clearance” or “Inventory Reduction”.
- Targeted Promotion: Set different discounts for various product categories, inventory levels, or sales goals. Badges like “Category Sale”, “Seasonal Promotion”, or “Weekly Deal” make it easier to create promotions that match their business needs.
How to Add the Product Badge Element on GemPages V7
Step 1: From the GemPages Dashboard and access the Pages section. Select an existing page with the Product element or create a new one.
Step 2: Use the search bar to find the element, then drag and drop it into the design area.
Note:
- You can add multiple badges to one product.
- Badges will be positioned in the top-left corner by default. If you add more, they will stack on top of each other. Use the Layer Tree feature to see and adjust the badges’ placement and visibility.
Step 3: Publish the page and check it live.
To access the Product Badge settings, click on the element. The left sidebar will display the Settings and Advanced tabs, where you can customize its behavior and appearance.
Configure the Settings Tab
Layout
This setting lets you choose between two options: text-based badge or image-based badge.
Display Conditions
This setting allows you to determine when your product badge appears on the live page. You can add multiple conditions by clicking the plus icon. The five available conditions are:
- Product Inventory: The badge is displayed when the inventory count matches a specific number. This default condition cannot be removed.
- Discount Price: The badge is displayed if the product’s discount price meets a specified amount or percentage.
- Price Range: The badge is displayed when the product’s price matches a given range.
- Product Tags: The badge is displayed if the product has the tags you specify.
- Created Date: The badge is displayed if the product was created within a specific timeframe, such as a set number of days from today, on a particular date, or between two dates.
Content
For text-based badges, you can customize both the text and its style. GemPages provides four preset options for badge content when you click the plus icon, including:
- {percent_discount}: Display the percentage off for a product.
- {amount_discount}: Display the amount reduced from the original price.
- {min_price}: Display the lowest possible price between variants.
- {inventory_quantity}: Display how many units of a product are left in stock. This quantity only works when the Shopify inventory tracking mode is enabled.
Another way to customize the badge content is combining custom text with dynamic text presets.
For image-based badges, this setting lets you upload a new image or choose one from your gallery.
Badge
Customize your text-based badges with the badge settings by adjusting the color, border, and corners, and adding shadow effects. You can also select from GemPages’ 7 shape options for your badge:
- Horizontal Rectangle
- Vertical Rectangle
- Square
- Ribbon
- 8-Angle Star
- Ribbon 2
- Ribbon 3
Position
These settings help you determine the badge’s placement. Depending on your chosen position, the shape of your text-based badge will adjust its orientation.
Size
In this section, you can modify the badge’s width, height, and content padding. 
Note:
- For text-based badges, you can adjust the padding of the text inside the badge.
- Some badge shapes have a fixed width-to-height ratio, so changing the width will automatically adjust the height, and vice versa, to maintain a 1:1 ratio.
- Changing the badge shape may automatically adjust the width and height to fit the new shape.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
And there you have it!