AZ Factory: ERP integration
- App development
- Fashion and apparel
Tech Lead, 2 Full Stack Developers, QA, Project
Manager, Account Manager
Docker, Nginx, MySQL, Laravel Horizon, Redis,
ReactJS, Laravel, Shopify Polaris, AWS
Suokko is a Finnish family-owned business offering novelty watches and jewelry from renowned brands – necklaces, earrings, rings, including wedding rings.
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:
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:
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.
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: