“Your story, your stack”

As the Shopify Plus agency for the world’s most design-conscious luxury brands, we spend a great deal of time sourcing solutions to challenges.

Most recently the challenge was that of British jewellery brand Astrid & Miyu, which offers a customisable Story Chain necklace but had no way of showcasing it online or visualising it for customers in-store.

The task then was to create a bespoke online visualiser that allows customers to build and purchase their necklace through Astrid & Miyu’s website as well as visualise how it will look during in-store consultations.

The solution

The solution was to use HTML Canvas to build a bespoke visualiser – a fully customisable tool that gives Astrid & Miyu complete autonomy over a host of factors so that it can be adapted and utilised for future products.

How it works

To build the visualiser a HTML Canvas element is created, which allows multiple images to be added and positioned to build the final image.

In this case, the necklace was added first, followed by the charms, all positioned to create a seamless effect.

The process of building the Story Chain begins with customers choosing from four gold or white gold chains, each available in different lengths.

Shopify products and variants are used to handle these options, allowing Astrid & Miyu to manage these products as they would any other product in the store.

Next, the customer can choose from a variety of charms including gemstones, zodiac charms, initial charms, and motif charms. Again, these charms are Shopify products, so adding a new set of charms is as simple as selecting the collection to add.

Astrid & Miyu can customise the maximum number of charms that can be added to the product, as well as the size and position of the charms, through the customiser. This allows the brand to expand its offering to anklets and bracelets in the future, without any additional development changes being required.

Customers are also able to choose how far apart each of the charms is; Astrid & Miyu can set a default set of options as well as configure these options per product, giving the company maximum flexibility.

Leveraging the power of Canvas we have added several JavaScript event handlers, allowing customers to reorder the charms by simply dragging and dropping them, or clicking on a charm to remove them.

As charms are added, the visualiser zooms in, focusing on the charms. The zoom scale is based on the number of charms and the selected spacing, meaning customers can see the charms as clearly as possible whilst ensuring all charms are always visible.

A zoom button was also added, allowing customers to view the entire chain, or focus in on the charms.

Another powerful feature of Canvas is the ability to export the element as a static image. As layers are added to the canvas, a preview image is created and displayed in the summary drawer.

Once the necklace is finished and has been added to the cart, this preview image is exported as a JPEG and uploaded to a Cloud image storage.

The URL of the image is then returned and stored on the line item so it can be shown for reference in the cart and checkout as well as in the order confirmation emails. This ensures the customer knows exactly what they will receive, rather than using a generic product image.

As a majority of Astrid & Miyu’s sales are made on mobile, the visualiser needed to be responsive – working perfectly on both mobile and desktop devices. This is another area where Canvas excels – the interior dimensions of the canvas are fixed, so regardless of the size of the container all layers are positioned the same, and the Canvas element can be scaled to fit the device.

The visualiser is also used on iPads in-store while customers are ordering their Story Chains, so our team of developers and designers had to bear this in mind.

Once the Story Chain has been added to the cart we group the constituent parts in an accordion. The customer can then show or hide the selected product and charms, allowing them to confirm they’re happy with their choices before continuing to the checkout.

Payment is then taken and the Story Chain is sent to the customer’s chosen address within three weeks.

The results

The bespoke visualiser has had a positive impact on behavioural metrics, such as engagement rate which is up 29 per cent. AOV is up a staggering 546 per cent – largely due to UPT having increased by 255 per cent.

"We've been so happy with the work and the positive customer interest we have seen that we're rolling out the bespoke visualiser across more physical stores and are launching new products and charms into the bespoke range later this year," says senior ecommerce manager at Astrid & Miyu, Molly Allen.

"The visualiser has enabled us to bridge the gap between online and physical stores by offering our highly desired services to customers worldwide!"

About Astrid & Miyu

Founded in London by Connie Nam in 2012, jewellery maker Astrid & Miyu is best known for its signature ear stacks.

The brand has an in-house styling team that helps customers develop their style both in-store and online, through its social media channels and newsletters.

Astrid & Miyu commissioned By Association Only to migrate its store to Shopify 2.0. We also designed and developed a site that allows for and promotes personalisation – such as the engraving of pieces – as well as the opportunity to build your own jewellery sets.

Smoother product data management and increased flexibility of content were also important aspects of the brief. Read the case study here.

About By Association Only

By Association Only is the Shopify Plus agency for the world’s most design-conscious luxury brands. Get in touch to discover how our team of experts can support your brand’s Shopify ambitions.