‍By Association Only creates bespoke Story Chain visualiser for jewellery brand Astrid & Miyu

‍By Association Only creates bespoke Story Chain visualiser for jewellery brand Astrid & Miyu

“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.

Astrid & Miyu Story Chain
The aim was to create a bespoke online visualiser that allows customers to build and purchase their necklace

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.

Astrid & Miyu Story Chain
The process of building the Story Chain begins with customers choosing from four gold or white gold chains

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.

Astrid & Miyu Story Chain
Next the customer can choose from a variety of charms including gemstones

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.

Astrid & Miyu Story Chain
Customers are able to choose how far apart each of the charms is

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.

Astrid & Miyu Story Chain
Once the Story Chain has been added to the cart we group the constituent parts in an accordion

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.

Astrid & Miyu Story Chain
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.

Recent articles you may also like

By Association Only sponsors Vervaunt’s Pulse Ecommerce Summit for the third year

Last week London-based ecommerce consultancy and paid media agency Vervaunt hosted the third Pulse Ecommerce Summit at The Brewery in London. Here are the highlights.

A/B Testing for ecommerce

We look at the advantages and disadvantages of A/B testing, what can be tested, and which tools are most useful.

“The greatest things ever built start with incredible foundations”

Yesterday, Shopify released its first round of updates this year under the name Foundations. We break down the most exciting updates for retailers and explore how they might benefit your business.