 "Bringing Personalisation To Life: How blubolt Built Abbott Lyon’s Jewellery Visualiser on Shopify Plus")
When the Abbott Lyon team first partnered with blubolt, our goal was clear: create a Shopify Plus experience as distinctive and refined as their jewellery. After redesigning their website, the brand’s next stage of growth demanded something more: deeper personalisation that could bring every customer’s creativity to life.
Abbott Lyon wanted their shoppers to see their bespoke jewellery before purchasing, so they could preview every engraving, birthstone, and chain length in real time. That’s where we came in.
The challenge: Turning personalisation into a visual experience.
As the Abbott Lyon brand continued to grow, so did customer expectations. With personalisation at the heart of their product range, the team wanted to go beyond static images and dropdown menus.
They needed a seamless, visual experience that would:
Let shoppers build their own jewellery in real time.
Offer live, high-quality previews of every configuration.
Integrate effortlessly within Shopify Plus and the existing Online Store 2.0 setup.
Empower the Abbott Lyon team with in-house control over how products are visualised and configured.
The solution: A bespoke jewellery visualiser built for Shopify Plus.
blubolt designed and built a custom Jewellery Visualiser, that is, a fully integrated, interactive tool that lets customers preview their personalised pieces before purchase.
From finish and chain length to zodiac sign, birthstone, and initials, shoppers can now see their exact design update instantly as they make selections on the product page. The visualiser transforms the “build your own jewellery” process into an intuitive, confidence-boosting experience. The tool helps customers buy with certainty and excitement.
Behind the scenes, the visualiser is built for Shopify Plus and Online Store 2.0, using metafields to store configurations efficiently, and Cloudinary to serve layered images at high quality and speed.
The result is fast, reliable, and fully integrated with Abbott Lyon’s existing Shopify ecosystem. There are no third-party compromises involved; it’s just custom functionality tailored to their needs!
How it works.
In plain English: the visualiser assembles layered images based on each shopper’s selections, producing a live 2D preview of their custom jewellery.
When a configuration is saved, the app creates a JSON blueprint stored as a Shopify metafield on the relevant variant. This keeps everything portable, editable, and future-proofed within Shopify Online Store 2.0.
Products configured for the visualiser are automatically tagged, allowing Abbott Lyon’s team to enable or disable the experience across product pages with ease.
For example, with the 'Made Mine Charm Necklace', the customer can first select the finish (gold, rose gold and silver).
From there, the customer can select the type of chain and length.
Then the customer can select the various charms they want and see their choices displayed in real time.
Key features.
Live product preview: Real-time updates for finish, zodiac, birthstone, initials, and chain length.
High performance: Fast image handling via Cloudinary for crisp, layered previews.
Merchant control: Configurations saved as Shopify metafields (versionable, portable, and editable).
Built for Shopify Plus: React-based admin UI for setup, fully aligned with Shopify’s latest app framework.
Under the hood: Our tech stack.
Frontend: React + Vite with Shopify App Bridge for secure, authenticated requests.
Integration: GraphQL Admin API and Shopify metafields for structured, efficient data storage.
Assets: Cloudinary for image upload and delivery.
Backend: Node/Express with OAuth authentication using Shopify’s official app framework.
Storage: SQLite for shop sessions and tokens.
Deployment: DigitalOcean App Platform (UK region) with GitHub-connected CI/CD and environment variable management.
This foundation ensures the visualiser is both scalable and maintainable. It’s ready to evolve alongside Abbott Lyon’s growing product line.
The result: Personalisation, elevated.
The Abbott Lyon Visualiser makes custom jewellery tangible. It empowers shoppers to explore, experiment, and personalise with confidence while giving the brand complete control over how the experience evolves.
The impact is already visible in engagement and conversion: customers spend more time on product pages, interact more deeply with products, and buy with confidence that what they see is exactly what they’ll receive. Explore the tool on Abbott Lyon’s site.
Journey-led growth with blubolt.
At blubolt, we help ambitious Shopify Plus brands grow through journey-led design and development, combining strategic insight with custom engineering. Abbott Lyon’s visualiser is a perfect example: tailored to their brand, built to scale, and designed to deepen customer connection at every stage of the buying journey.
If you’re looking to extend Shopify’s capabilities to deliver smarter, more engaging customer experiences, get in touch to discuss your requirements. We would love to help!
