About the Brand
Luxy Charms is a brand that celebrates self-expression through beautiful charms and keychains. They believe that every charm tells a story, and they wanted to create an experience where customers could build that story themselves, choosing pieces that truly resonate with them.
The vision was simple:
Give customers the freedom to create their own custom keychain, and make the process magical.
But achieving that vision online? Not so simple.
The Challenge:
Luxy Charms needed a custom charm builder that allowed users to:
-
Select 2 or 3 charms from different categories to create their keychain.
-
Browse charms by categories, with one special rule: Letter Charms had to be displayed individually with style and color options.
-
Preview their custom selection live on the site, showing:
-
The chosen charms.
-
Charm names and categories.
-
A visual representation of the ring with all selected charms.
-
Pricing details.
-
Choose a gold or silver key ring at the end.
-
Apply complex pricing rules:
-
Letter Charms should be 50% discounted unless all charms were letters.
-
In that case, one letter had to stay at full price ($10).
In short:
Luxy Charms wanted to recreate the feeling of hand-picking charms at a physical store, online, seamlessly, and beautifully.
Our Approach:
This wasn’t something Shopify could handle natively.
We knew we'd have to go deep, custom development, dynamic rendering, and smart pricing logic.
Here’s what we built:
1. The Dynamic Ring Builder Page
We created a fully customized Ring Builder using Shopify plus advanced JavaScript development:
-
Categories View: All charms displayed by category, cleanly organized for easy browsing.
-
Letter Charms: Shown individually with variant selections for style and color.
-
Selection Rules: Customers could only select 2 or 3 charms, enforced automatically.
2. Live Ring Preview
The magic happens here.
As users picked charms, a live preview updated in real time, showing:
-
A visual ring with the selected charms attached.
-
Details of each charm: Name, Category, and Price.
-
Total number of charms selected.
-
The current total price, recalculated dynamically based on user choices.
We also added an option to choose the ring color (gold or silver), instantly updating the preview.
This transformed the buying experience into something visual, emotional, and fun.
3. Advanced Pricing Logic
Now came the most complex part: the special discount rules for Letter Charms.
The logic was:
-
If customers chose 2 or 3 charms and not all were letters, every Letter Charm would be 50% off ($5 instead of $10).
-
If all selected charms were letters, one letter had to stay at full price.
Luxy Charms wanted to offer something extra special for their popular Letter Charms, but with conditions. So, we implemented custom pricing logic where discounts were applied only in certain combinations, and one charm would always retain full price in specific cases.
To bring this to life:
-
We built a JavaScript-based pricing engine that calculates real-time discounts based on the charms selected.
-
It updates the pricing dynamically in the Ring Builder without any need for manual intervention.
-
The logic is robust, scalable, and invisible to users, keeping the front-end experience seamless while handling the complexity behind the scenes.
We custom-coded this logic using JavaScript that checked the selected charms live, recalculated prices instantly, and displayed the correct final amount.
No manual errors. No confusion. Just smooth, intelligent automation.
4. Seamless User Experience
Above all, we wanted the experience to be:
-
Fast (optimized loading and no lag).
-
Intuitive (easy for any customer to understand and enjoy).
-
Mobile-Friendly (works perfectly on phones and tablets).
-
Beautiful (crisp, clean UI with animations).
The final builder made it easy for customers to explore, create, and fall in love with their custom keychain.
Tools Used:
Shopify, Custom JavaScript, Liquid Coding
The Final Result:
After one month of dedicated work, Luxy Charms had a truly one-of-a-kind customization experience live on their store.
The new builder delivered:
-
Increased time-on-site as customers spent more time playing with combinations.
-
Improved conversion rates thanks to a seamless buying journey.
-
A new level of brand differentiation, no other charm seller offered a similar customization flow.
Most importantly:
Customers loved it.
Creating their keychain became personal, exciting, and satisfying, exactly what Luxy Charms had envisioned.
Final Thoughts
Creating the Luxy Charms Ring Builder wasn’t a simple task, it was a complex custom solution that required creativity, coding precision, and a deep understanding of user behavior.
But in the end, we delivered a product that not only met but exceeded expectations.
Because when you help customers tell their story, you don’t just sell a product, you create an experience they remember.
Ready to Build Something Just as Magical?
Have a complex product idea or custom logic that most platforms can’t handle?
Whether it’s dynamic bundling, interactive previews, or smart pricing rules, our team can turn it into a seamless, high-converting experience.
Get in touch with Propero today to explore how we can build something just as intuitive for your brand.