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
- UX Mapping — Studied customer flow across variant-heavy product pages.
- Custom Build — Integrated variant data with image gallery dynamically.
- 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.