Custom Shopify App — Charm Necklace Configurator
We built a private Shopify app for Charm Builder that enables personalized jewelry design with a real-time configurator, instant pricing, and scalable admin tools.
Industry
Jewelry & E-commerce
Technology
Shopify (Private App), React.js (frontend), Node.js/Laravel (admin backend)
Services
UX/UI design, Shopify app development, Backend/admin tooling
Project Overview
A jewelry brand (“Charm Builder”) wanted to let customers design personalized charm necklaces and bracelets online. We set out to build a private Shopify app that embeds a visual, interactive configurator into their store, enabling shoppers to assemble chains and charms in real time, view pricing updates instantly, and complete checkout without leaving the brand experience. The solution also needed robust admin tools to manage charms, categories, chains, closures, and pricing—while staying scalable for future growth and collections.
Project Objectives
- Develop a user-friendly charm necklace configurator that enables step-by-step customization, real-time visualization, and seamless Shopify integration.
- The configurator will include drag-and-drop charm placement, chain size options, gold/silver charm filtering, and optimized charm categorization.
Project Execution
1. Discovery & Experience Design
- Defined a three-step journey for shoppers:
- Select Your Chain (necklace/bracelet), with hover previews, length selection (e.g., 18″, 22″, 26″), attachment style (Fixed/Slider) and price that updates by length.
- Choose Your Charms, with dual browsing modes:
- Shop by Category (e.g., Symbols, Letters, Numbers)
- Shop by Type (e.g., Gold, Silver)
- Review Cart Subtotal, capturing itemized list, quantity, price/total, optional customer note and special message, agreement checkbox, and Add to Cart.
- Crafted a dedicated landing page for “Custom Functionality” featuring interactive banners and prominent CTAs that deep-link into the configurator.
2. Frontend App (React.js)
- Built a Shopify-integrated configurator that loads within the storefront:
- Drag-and-drop charm placement on the chain preview
- Rotate (clockwise/anti-clockwise) and delete actions for each charm
- Real-time price and length updates, plus “Back to Chain” / “Select Chain” CTA controls
- Clear selection tags (e.g., “Charm Added”), “On Sale” badges, and discounted pricing when applicable
- Gold/Silver filters and structured categorization for frictionless browsing
3. Admin Dashboard (Node.js/Laravel)
- Category Management: add, edit, rename, delete; organize for better frontend filtering (e.g., metals, symbols, letters, numbers).
- Charm Management: add images/descriptions/pricing; assign to categories; enable/disable availability; toggle drag-and-drop, rotation, and delete controls.
- Chain & Closure Management: configure chain variants, lengths, and closure types (Carabiner / Without Carabiner).
- Pricing Management (optional): set base/discounted pricing and promotional rules.
4. Shopify Integration & Data Model
- Implemented a private app that leverages Shopify storefront and cart APIs for a seamless add-to-cart flow.
- Mapped products/variants to chains and charms with a clean, scalable schema to support expansion of collections and materials.
5. QA, Launch
- Ran end-to-end testing across devices and browsers to ensure a native-like, performant experience.
- Delivered documentation & training for content ops: adding charms, managing categories, adjusting chain options and pricing.
- Noted an optional UX message for multi-item orders (e.g., “If ordering more than one custom piece, please do so in separate check-outs”) to align with brand policy.
Results & Feedback
Customer Experience
- Faster customization: Step-by-step flow and visual drag-and-drop make building a piece intuitive and enjoyable.
- Higher confidence to purchase: Live previews, rotation controls, and on-sale indicators reduce uncertainty and cart abandonment.
- Better discovery: Dual taxonomy (Intention and Size) plus Gold/Silver filters help shoppers find the right charm quickly.
Merchant Operations
- Operational efficiency: Centralized admin dashboard streamlines adding charms, adjusting categories, and managing chain/closure options—no developer intervention required.
- Scalability & flexibility: Private app architecture with Vue.js frontend and Node.js/Laravel backend supports future collections, metals, and pricing strategies.
- Marketing lift: The dedicated landing page and prominent CTAs channel traffic directly into the configurator, supporting campaigns and seasonal launches.
Client’s Feedback
“EbizON Digital delivered our custom jewelry builder on time and exactly as promised. Their great customer service and willingness to adjust along the way really impressed us. They were responsive to our needs and kept communication smooth through virtual meetings, emails, and messages. The builder has been a success on our site, and their customer support continues to be excellent.”
Paige Jamesyn
Director of Business Development, The Charm Bar Company
What Our Customers Says
reviewed by JOE WILLIAMS
Senior manager, Remedy Liqour
Head of Business Engagement, WRI
“Ebizon is one of the best in the business and they back this up with their quick and friendly support. The team is relentless to listen to our issues and come up with a solution. Have seen the team stretch beyond their knowledge to help us.”
reviewed by JOSEPH CURLEY
Vice President, Sokolin
Content Officer, Society for Science & Public
“My experience with this partnership has been positive. The support Ebizon extended towards us was commendable. It perfectly fulfils our requirements with their support we had no hassle.”
reviewed by Beat Walder
Manager, Forester Beauty
Chief of Staff, Strategic Dentistry
“I’m the owner of Forester Beauty in Switzerland. I’ve contacted Dee and he led me through the whole process of migrating our online shop to Shopify, including custom elements to enhance user experience. The whole Project Team at Ebizon has a very professional attitude and provide their support and insights promptly.”
reviewed by Wilma Pretorius
Managing Director, Cranimals
For fully managed WordPress installs, WPEngine is my Go-To
“The Team worked well with my company to migrate our Magento store to a new Shopify store. Ebizon was able to implement required applications to enable a near seamless transition. Thanks Team!
reviewed by Raul
Senior Manager, Emporium Embroidery
Head of Business Engagement, WRI
“Emporium Embroidery – customization module / Magento upgrade Thank you Ebizon and a great thank you to the team who was always very helpful on this journey.”
reviewed by Alexandre Salem
eCommerce Manager, Ada Cosmetic
Chief of Staff, Strategic Dentistry
“Thanks to EbizON solution, the platform enabled the company to sell products efficiently. The team worked in sprints and held weekly meetings, ensuring accurate outcomes.”
reviewed by Po Ming Lam
Manager, Avec Plaisirs Chefs Traiteurs
For fully managed WordPress installs, WPEngine is my Go-To
“Ebizon is helping our Magento development needs. Their customer oriented approach has made our experience very pleasant and efficient. We are definitely sending more work to them and recommend others to try them out!”
