Suokko: wedding ring configurator integration

  • App development
  • Fashion and apparel

Team

Tech Lead, 2 Full Stack Developers, QA, Project Manager, Account Manager

Technologies

Docker, Nginx, MySQL, Laravel Horizon, Redis, WebSockets, Scheduler, PHP, JavaScript, ReactJS, Laravel, Shopify Polaris, AWS Amazon, Bitbucket

Time

2 months

The task

  • Create an app to integrate a wedding ring configurator into a jewelry store.
  • Ensure a seamless process of purchasing the rings with the data the customer has chosen and further transferring it to the ring manufacturer's side.

Results

  • +36% total orders
  • +52% revenue
  • +93% usability

About the business

Suokko is a Finnish family-owned business offering novelty watches and jewelry from renowned brands – necklaces, earrings, rings, including wedding rings.

Challenges and solutions

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.

About the app

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.

Price display

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.

Data transfer to order

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.

Loading speed

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.

Product variants

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.

Summary

As a result, we integrated an engagement ring configurator into the Shopify environment and added extra features like customized features on the collection page, Shopify's checkout, and payment. After the successful launch of the configurator, our cooperation with the client carried on. Here's what our client says about working with us:

“We felt we were in good hands with their professional work. They really found out what was the goal of this project and wanted to understand it completely before anything was done. Their level of executing all the features is top-class, and no compromises have been made in the quality of work. Communication was rapid and clear.”

Liro Suokko
Owner, Suokko

For more details, the full review is available on our Clutch profile.

Recent projects

AZ Factory: ERP integration



  • App development

  • Fashion and apparel

Suokko: theme customization



  • Custom theme development

  • Fashion and apparel

Madam Glam: The warehouse integration



  • App development

  • Health, beauty, and cosmetics

We’ve got the experience and skills to solve any issue


    The field is required.

    Invalid Email FormatInvalid Email FormatThe field is required.



    *Required

    This website uses cookies.