Skip to navigation Skip to main content

Have a great "Build your engagement ring" feature Module in your Jewelry eCommerce website for increased sales conversions| Customised for Shopify , Magento and Woocommerce

By Prashant Telang.

Update July 2020: Check out our Blazing Fast ReactJS based ring builder  demo Here


TransPacific Software specializes in Diamond and jewellery e-store development. It has developed custom built "Design your Ring" features on various platforms including Magento, Opencart, Prestashop ,Woocommerce with Rapnet diamond data integration.
"Design your engagement ring" or "Build a Ring" is a popular feature on diamond jewellery e-commerce stores. In fact, as per our study jewellery buyers spend 70% of total visit time on build-a-ring feature.
The ring designer lets you select from numerous styles to create a bespoke ring design. They not only allow to select the style but also metal and diamonds in various shapes to be studded in the ring.
If your jewellery e-store is not having "Design your Own ring" feature, you may be losing big on visitor conversion.

Creating an intuitive "Design a ring" feature:

Developing a good quality "build a ring" feature is a complex task. One requires to invest in software development and ring photography.


Good quality Photographs and renderings are the core ingredient to build a ring feature. You need to have white background images of settings, preferably in multiple metals. It's important that all rings should be photographed from a similar perspective so a user can compare them side by side.

Data compilation:

The second most important aspect is the data. Is your ring specification data compiled and tabulated? Get your data organized in a spreadsheet. Below is the list of sample data fields for compiling ring/settings data.
Design ID, Metal, Design style, Diamond shape, Diamond carat Range, Side diamond details description, Diamond details, delivery time ,Cost etc.
The data compilation needs to be in the correct format depending on your e-store framework. If your e-store is in Magento data compilation needs to be formatted into configurable products and simple products pattern. It is essential that you consult your development team on the correct data format.

The flow of Design your ring tool:

There are two ways a user may try to build a ring.
Initially selecting a Diamond followed by designs selection. Selecting a Ring design and then searching for an appropriate diamond.
The second option of Ring selection followed by Diamond selection is popular. However, Some websites may incorporate both the flows.

How a good quality Build-A Ring feature should be:

1. The interface needs to be pretty straightforward

"Design a ring tool" should be unambiguous. It should have a step-by-step format starting from Select A ring - select Diamond - add to cart-purchase. With the ability to change the ring and diamond design at any point.

2.Status indicator

During build a ring process there should be a status bar to indicating the progress. This helps user to get an overview of progress.


The user may try numerous stone and ring combinations. So page load speed is important. We suggest extensively incorporating AJAX calls so the page doesn't load repeatedly. Page load testing and code audits must be done to achieve maximum speed. After all, no one wants to lose a customer simply because of sluggishness in the tool.

4. Save in wish List

Very few users will buy the ring immediately. Most of them would like to create a few combinations and save them in their wishlist or My account. They may also share the combinations with friends. This can be done through creation of "My account" and provision to save and share the combinations.

Flow chart of design a custom ring.(Click to Expand)

Technology and need for customization

Lots of Javascript:

Although Build a Ring feature can be built on any platform including Magento, Opencart, Prestashop, Woocommerce or custom-built shopping cart it is unique for each e-commerce site. Depending on requirements extensive customization is suggested. For example, a  setting may not accommodate pear and Heart shape stone. Or a particular design may not be available in Rose Gold metal. These restrictions are to be in-built by the developer.
Design a ring feature have intuitive screen-based activities including drag and drop a stone on the ring design, or check the cost of the ring in multiple metals. These require lots of JavaScripting and jquery making it particularly vulnerable to cross-browser compatibility.
It's absolutely imperative to extensively test "Built a Ring" feature in multiple browsers and multiple devices including mobile devices.

Constantly changing metal prices:

Due to constantly fluctuating metal prices of Gold and platinum; the developer should provide functionality for the website administrator to adjust metal prices from the back-end admin interface. Alternatively, third party web services like Precious Metal API can be used to pull the metal prices.

Diamond image overlaying on settings:
TPS Diamonds
Going a step forward; an advanced functionality can be provided to overlay diamonds of various shapes on the ring photograph. This provides instant visualization of how a ring will appear with various shape diamonds. However, creating such a feature requires renderings of settings/mountings (without diamond) in a perspective angle. Further, expert-level java scripting is required for diamond overlay feature.
3D models:

The future advancements of "Design your ring" is creating interactive 3D renderings of settings which can be viewed in 360 degrees.Such functionality requires 3D models of settings(3DS,Obj format)which can be rendered in html5 browsers.

For more details Contact: Prashant Telang on [email protected]
TransPacific Software Prashant Telang