Product Badge Element

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.

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. 

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!