Project Overview

Belffin needed a smarter, more visual way for users to choose product variants.
We designed and developed a custom variant picker that bridges aesthetics with usability.

---

The Challenge

Shopify's default variant picker limited customization —
no visual feedback, poor accessibility, and limited flexibility.

---

The Approach

We reengineered the variant logic using a custom Liquid block and event-driven JavaScript.
Users can instantly preview variant changes with live product image switching.

Process

1. UX Mapping — Studied customer flow across variant-heavy product pages.
2. Custom Build — Integrated variant data with image gallery dynamically.
3. Testing — Ensured consistency across color, size, and bundle variations.

---

Key Features

• Real-time variant image sync
• Click / hover preview
• Compatible with Shopify's native inventory logic

---

Results & Impact

+19% add-to-cart rate
-28% user hesitation time between variant changes

---

Technical Stack

Shopify Liquid
JavaScript (Dynamic Binding)
Shopify Variant API

---

Insight

Good UX design in e-commerce is invisible — it simply feels faster and smarter.