We built Teilor's interactive wedding band configurator — a five-step wizard where customers design their rings in real time with 3D visualization, choose materials and gemstones, calculate their exact ring size, and see live pricing that updates with every selection.
The challenge
Teilor needed to bring their premium wedding band shopping experience online without losing the tactile, personalized feeling of an in-store consultation. Customers needed to configure rings across multiple dimensions — band model, ring size, width, metal type, finish, stone selection, stone settings, and custom engraving — with every combination affecting pricing in real time. The configurator had to support three shopping modes: matching bands for both partners, different bands for each, or a single ring purchase. On top of that, the application needed a built-in ring sizing toolkit so customers could determine their size at home, a 3D viewer rendering the configured ring live as selections changed, and seamless integration with Teilor's Opal ERP system for real-time inventory and pricing. All of this in both Romanian and English, with customer accounts carrying personalized discount tiers for gold and diamonds separately.
Our solution
We built the configurator as a single-page application on Quasar 2 with Vue 3 and TypeScript, using Pinia for state management across a complex multi-step wizard. The five-step configuration flow guides customers through model selection, ring sizing with a built-in sizing toolkit component, material and finish choices, stone selection with configurable attributes, and custom engraving — each step synchronized in real time with a WebGi-powered 3D model viewer that renders the ring live as selections change. Pricing updates dynamically on every interaction through a dedicated price calculation API that breaks down material costs and stone costs separately, applying personalized discount tiers per customer. The application integrates with Teilor's Opal ERP backend through a REST API layer handling models, band variants, configurable attributes, pricing, orders, and store locations. Vue I18n powers Romanian and English localization, and the customer account system supports phone and email registration with stored discount profiles. Orders persist through session interruptions and can be resumed or edited at any point.
Results
- Delivered five-step wedding band configurator with real-time 3D visualization via WebGi
- Built ring sizing toolkit enabling customers to determine their size without visiting a store
- Engineered real-time pricing engine with separate material and gemstone cost breakdowns
- Implemented three configuration modes: matching pairs, different pairs, and single ring purchases
- Integrated with Teilor's Opal ERP for live inventory, pricing, and order management
- Deployed customer account system with personalized gold and diamond discount tiers
- Delivered full Romanian and English localization with locale-aware pricing formats