How to Add Product Badges in Optimizely Configured Commerce Spire

This blog is written for developers, merchandisers, or client teams looking to display visual indicators (e.g., “New”, “Sale”, “Non-Returnable”, “Best Seller”) on products within the storefront. In Ecommerce, badges are small visual cues that communicate important product information to customers, such as “New Arrival”, “Sale”, or “Limited Stock”. In Optimizely Configured Commerce (Spire), product badges can be a powerful way to highlight key promotions or product statuses, thereby improving the user experience.

This blog post walks through how to enable and customize badges within Spire-based sites.

What Are Product Badges?

Badges are visual elements displayed over product images or titles to indicate special status or promotions. Common use cases include:

• New – recently added products
• Sale – discounted items
• Non-Returnable – not returnable items (innerwear, Digital downloads, Razors or blades, etc.)
• Best Seller – top-performing SKUs
• Limited Stock – low inventory

Step 1: Enable and Configure Badges in the Admin Console

• Log in to the Admin Console
• Go to Admin Console > Marketing > Product Badges

• Click Add Badge

• Fill in the fields:
  • Name: e.g., “Sale”
  • Activated On: Start date of showing the “Sale” product badge on the Product. The default current date.
  • Deactivated On: End date of showing “Sale” product badge on Product.
  • Sort Order: Sort Order determines badge display order in cases where multiple badges are displayed. Items with the same sort order will be displayed alphabetically by Badge Name.
  • Display Locations:
    1. Overlay – On/Off: Shows badge as an overlay on main product images
    2. Badge Widget – On/Off: Shows badge wherever the badge widget is displayed. You can assign badges manually or automate them based on rules via custom logic.
    3. Badge Styling:

       Badge Type: Text or Image

       Text

       1. • 1. • Display Text: Add display text on product e.g “Sale”. Translate this text in other languages.
               • Text Color Hex Code: Enter hex code without #. e.g. 000000
               • Badge Color Hex Code: Enter hex code without #. e.g. fffffff
               • Badge Style: Select “Round” and “Rectangle”
               • 

       Image

       1. • 1. • Large Image Badge Path: Browse the image path and preview it.
               • Image Alt Text: Add image alternate text so that text will be shown if the image is not available.
               • 
       1. • Badge Positioning:
            1. Large Image Placement: Default “None”. Other Top Center, Top Left, Top Right, Bottom Center, Bottom Right, and Bottom Left
            2. Large Image Text Size: Select Large, Mediu,m and Small

       Create a new badge as “Sale,” and the badge styling is text.

       

Step 2: Assign Badges to Products, Product Rules, and Product Attributes

Products

Click on the “Assign Products” button

• Open the pop-up and search for products.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

• Select products. Click on the “Assign” and “Done” buttons.

• This badge is assigned to selected products.

Product Rules

You can create product rules based on “Product Custom Properties” and “Product fields”.

Product Attributes

You can assign multiple product attributes for this badge.

Step 3: Enable Product Badges in CMS

1. Go to Content Admin
2. Go to any product list page
3. Click on the Edit icon

4. Click on the Edit icon on “ProductList/ProductListCardList” widget

• • Show Image Badges and set the maximum number of image badges
  • Show Text Badges and set the maximum number of text badges

Step 5: Display Product Badges in Spire Frontend

Text Product Badges example:

Product List Page:

Product Detail Page:

Conclusion

Badges in Optimizely Configured Commerce are a simple yet effective way to elevate merchandising on your storefront. By combining back-office configuration with simple frontend customizations, you can create a more engaging and informative shopping experience.