BACK TO SCHOOL 2026 PROMOTION - 15% OFF WEBSITE REDESIGN
BACK TO SCHOOL 2026 PROMOTION - 15% OFF WEBSITE REDESIGN
BACK TO SCHOOL 2026 PROMOTION - 15% OFF WEBSITE REDESIGN
BACK TO SCHOOL 2026 PROMOTION - 15% OFF WEBSITE REDESIGN
From Static PDPs to a Production-Accurate Charm Studio
Sugar Blossom Jewelry
The Challenge
Sugar Blossom Jewelry didn’t want another product gallery. They wanted shoppers to design: build-your-own charm necklaces and bracelets that look right on screen and assemble correctly in production.
On paper, Shopify can sell jewelry. In practice, a true customizer breaks every default assumption.
Precision on every device
A mobile-first drag-and-drop studio had to snap charms to real anchor points along necklaces and bracelets. The preview had to match physical assembly, not free-float stickers.
Checkout that keeps the design
Standard Shopify bundling can’t carry charm IDs, coordinates, and production intent. The design had to survive cart → checkout → order metadata as the source of truth for the studio floor.
Performance under theme change
High-res charm combos on smartphones (80%+ of traffic) can’t ship as a bloated image app. And the revenue engine had to survive a full Broadcast V2→V3 rebuild without starting from scratch.
No off-the-shelf app was going to cover this. Sugar Blossom needed a partner who could build the studio, wire it into commerce and ops, and keep it alive through a full theme generation change.
The Engineering (The Solution)
We built a Charm Builder Ecosystem: part creative studio, part production system, part Shopify commerce layer. Then we owned it through V2 hardening and a V3 mobile-first rebuild.
Anchor-Point Mapping & Creative Studio
We built a custom coordinate system for each jewelry base so charms snap to realistic positions: a production-accurate preview, not decoration. On V2 we matured CustomizerV2 end to end: customizer API, auto variant picking, Inspirations, removable clasps, and size selection so the studio sells real configurations.
Optimized Asset Pipeline for Mobile
We engineered dynamic rendering of high-resolution charm combinations without image-app bloat. On V3 we ported the customizer into a Vite/React pipeline on Broadcast 8.1.0, shipped a dedicated mobile customizer, then a v2.1 pass that removed dead weight so performance stayed a feature after the theme upgrade.
Bi-Directional Checkout & Production Blueprints
We bypassed standard Shopify bundling by mapping charm IDs and coordinates into order metadata. Designs survive from cart to confirmation, and sync as visual blueprints for the production team, cutting CX email threads. Metafield-driven price overrides keep commerce logic merchant-controlled as the assortment evolves.
Reliability Across V2 → V3
We hardened the customizer in production (state reset, wrong-product selection fixes, Shopify outage UX, and same-day hot fixes), then executed the high-risk ~5.4k-line port into sugarblossomV3 with mobile layout and charm-line edge cases. The revenue experience survived a theme generation change.
The ROI (The Results)
60+
Custom Designs / Day
Unique customer designs purchased daily across 19 core products. The customizer became a primary purchase path, not a novelty.
5+
Charms per Piece
Custom orders averaged 5+ charms per piece, driving meaningful Average Order Value lift versus pre-assembled SKUs.
80%+
Mobile Traffic
A frictionless mobile-first customizer (including the V3 mobile rebuild) where the vast majority of shoppers actually design.
Zero
Blueprint Email Threads
Order metadata blueprints eliminated back-and-forth between customers and fulfillment. Production gets a visual build sheet, not guesswork.
