Suokko: wedding ring configurator integration

The client came to us with a request to integrate a third-party custom wedding ring configurator into the Shopify order system. Using it, couples can choose their desired size, shape, cut, material, number, and shape of stones, add engraving, etc. – and thus create unique rings.

The chosen configurator could create the desired ring, but the process of purchasing such a ring was impossible because:


• There were no product options in the store.
• It was difficult to display the actual price of the rings, as the price of materials could change on the manufacturer's side every day.
• All of the product data had to be transferred to the cart, to check out, added to the order confirmation email, and then sent to the manufacturer.

To achieve this goal, we created a custom application and integrated it with two merchant stores - wholesale and retail.

To integrate the engagement ring configurator into the Shopify jewelry store, we created a custom app. This app handles data from the wedding ring configurator API and thus effortlessly integrates it into the Shopify environment. Besides, our team modified the Shopify Liquid code to ensure a seamless integration process.

The app allows us to:

• Replace the price of Shopify store items on the collections page with the price from the ring generator service.
• Display items from the ring generator instead of Shopify store items.
• Create a Draft Order and transfer all the selected parameters, links, and prices to it.
• Apply WhatsApp chat for communication between the customer and the store owner. A link to the product and snapshot ID created for the ring is automatically attached to the message.
• Display the Social Share modal window. When you click on the "Share" icon, a modal window appears, and you can share the created ring design on Facebook, WhatsApp, email, or copy the link.

Since the product price can vary daily, it was necessary to find a solution to get the current price of the configured product from a third-party service and display it directly on the collections page. So we installed a preloader on all product prices that hides the actual prices and then automatically displays them as the updated price is loaded from the generator.

Since the page had to be constantly refreshed, we developed a feature to save previous price details. This allows us to avoid numerous requests to the app within one session.

Ring configuration, price, and visuals should be transferred to the order. Taking into account that the price in the Price product is not actual, but instead taken from a service configurator, we employed the DraftOrder API to transfer it. When a DraftOrder is created, all ring details are added as Shopify order properties. Then, ring properties are displayed on the checkout page, including links to ring images, prices, and basic ring characteristics.

It was difficult to ensure the proper loading speed of the collections page since the number of requests per page could potentially be high. So we decided to make the first request to load the configurator, and the second - to upload the current price.

We created products in the admin panel with all the possible ring variants from the configurator and connected them to the product in Shopify using snapshot IDs.