/
Case Study
/
Badge on Cue: Dynamic Labels That Follow the First Look

Badge on Cue: Dynamic Labels That Follow the First Look

A smart badge system that dynamically shows “New”, “Sale”, or “Best Seller” labels only on the first product image with real time variant updates.

Product Vision

To improve product page clarity by showing relevant badges only when needed, ensuring a clean UI and accurate product labeling experience.

The Challenge:

Incorrect and Inconsistent Badge Display

The badge system was not syncing properly with product variants, causing incorrect or missing labels on product images.

Key Points

Badges appeared incorrectly after variant changes

Some products showed no badge at all

Badge logic stayed stuck on previous variant selection

UI clarity was affected in product image carousel

Key Challenges Faced

Keeping badge logic synced with variant changes
Ensuring only the first image shows the badge
Preventing UI confusion for users
Maintaining smooth carousel experience

Encircle Approach:

Real Time Variant Driven Badge Logic

Solution: Smart Badge System with Real Time Image Logic

We built a dynamic JavaScript based system that updates badges instantly based on product variant selection.

Centralised Data Architecture

Badge logic tied directly to product variant data
First product image used as the source for badge detection
Keyword based mapping from image alt text

Streamlined Flow

JavaScript listens to variant changes in real time
Badge updates instantly based on selected variant
Badge appears only on first image of active variant
Automatically hides when no match is found

Technical Highlights

Variant change listener using JavaScript
Alt text based keyword detection for badge mapping
Conditional rendering logic for dynamic badges
Tailwind CSS for responsive and consistent styling
Lightweight implementation for smooth performance

The Results:

Smarter Shopping with Better DecisionsClean, Accurate, and Smart Product Badges

A fully dynamic badge system that improves product clarity without affecting UI performance.

Efficiency Improvements:

100%

accurate badge display based on active variant

Eliminated manual badge updates across products

Smooth performance with no UI lag or layout shifts

Business Outcomes:

Improved product clarity and user understanding

Cleaner and more professional product page experience

Better visual communication of promotions and highlights

Fully automated badge system reducing maintenance effort

Client Feedback

— Marketing Head, D2C Skincare Brand

“Encircle’s speed work was a game-changer. We saw an immediate lift in mobile conversions and organic traffic — performance truly equals profit.”

Rated: 4/5

Final Takeaways:

Smart UI Logic Improves Product Experience

This project shows how real time JavaScript logic can enhance product page clarity. By linking badges to live variant data and first image detection, the PDP experience becomes cleaner, smarter, and more intuitive.

Key Learnings

Real time variant tracking improves UI accuracy
Data driven badges reduce manual work
First image logic keeps product pages visually clean
Lightweight JavaScript ensures smooth performance
Small UI improvements can significantly enhance UX

/
Case Study
/
Badge on Cue: Dynamic Labels That Follow the First Look

Badge on Cue: Dynamic Labels That Follow the First Look

A smart badge system that dynamically shows “New”, “Sale”, or “Best Seller” labels only on the first product image with real time variant updates.

Product Vision

To improve product page clarity by showing relevant badges only when needed, ensuring a clean UI and accurate product labeling experience.

The Challenge:

Incorrect and Inconsistent Badge Display

The badge system was not syncing properly with product variants, causing incorrect or missing labels on product images.

Key Points

Badges appeared incorrectly after variant changes

Some products showed no badge at all

Badge logic stayed stuck on previous variant selection

UI clarity was affected in product image carousel

Key Challenges Faced

Keeping badge logic synced with variant changes
Ensuring only the first image shows the badge
Preventing UI confusion for users
Maintaining smooth carousel experience

Encircle Approach:

Real Time Variant Driven Badge Logic

Solution: Smart Badge System with Real Time Image Logic

We built a dynamic JavaScript based system that updates badges instantly based on product variant selection.

Centralised Data Architecture

Badge logic tied directly to product variant data
First product image used as the source for badge detection
Keyword based mapping from image alt text

Streamlined Flow

JavaScript listens to variant changes in real time
Badge updates instantly based on selected variant
Badge appears only on first image of active variant
Automatically hides when no match is found

Technical Highlights

Variant change listener using JavaScript
Alt text based keyword detection for badge mapping
Conditional rendering logic for dynamic badges
Tailwind CSS for responsive and consistent styling
Lightweight implementation for smooth performance

The Results:

Smarter Shopping with Better DecisionsClean, Accurate, and Smart Product Badges

A fully dynamic badge system that improves product clarity without affecting UI performance.

Efficiency Improvements:

100%

accurate badge display based on active variant

Eliminated manual badge updates across products

Smooth performance with no UI lag or layout shifts

Business Outcomes:

Improved product clarity and user understanding

Cleaner and more professional product page experience

Better visual communication of promotions and highlights

Fully automated badge system reducing maintenance effort

Client Feedback

— Marketing Head, D2C Skincare Brand

“Encircle’s speed work was a game-changer. We saw an immediate lift in mobile conversions and organic traffic — performance truly equals profit.”

Rated: 4/5

Final Takeaways:

Smart UI Logic Improves Product Experience

Key Learnings

Real time variant tracking improves UI accuracy
Data driven badges reduce manual work
First image logic keeps product pages visually clean
Lightweight JavaScript ensures smooth performance
Small UI improvements can significantly enhance UX

Badge on Cue: Dynamic Labels That Follow the First Look

Technology

Role

Domain

Product Vision

The Challenge:

Incorrect and Inconsistent Badge Display

Key Points

Key Challenges Faced

Encircle Approach:

Real Time Variant Driven Badge Logic

Solution: Smart Badge System with Real Time Image Logic

Centralised Data Architecture

Streamlined Flow

Technical Highlights

The Results:

Smarter Shopping with Better DecisionsClean, Accurate, and Smart Product Badges

Efficiency Improvements:

100%

Business Outcomes:

Client Feedback

Final Takeaways:

Smart UI Logic Improves Product Experience

Key Learnings

Badge on Cue: Dynamic Labels That Follow the First Look

Technology

Role

Domain

Product Vision

The Challenge:

Incorrect and Inconsistent Badge Display

Key Points

Key Challenges Faced

Encircle Approach:

Real Time Variant Driven Badge Logic

Solution: Smart Badge System with Real Time Image Logic

Centralised Data Architecture

Streamlined Flow

Technical Highlights

The Results:

Smarter Shopping with Better DecisionsClean, Accurate, and Smart Product Badges

Efficiency Improvements:

100%

Business Outcomes:

Client Feedback

Final Takeaways:

Smart UI Logic Improves Product Experience

Key Learnings