Glowsy: 3D configurator

Client

Glowsy - a brand of personalised engraved jewellery whose store we had already built. The configurator is the next stage of that work: it replaced a simple flat image preview.

Challenge

In this store personalisation is the product, and customers were buying it blind. A flat image preview did not show how the engraving would actually sit on the object, which left uncertainty before the purchase and a risk of complaints after it. On top of that, every new product meant bolting on another interface variant, and the engraving data had to reach the workshop in a form that could not be read two ways.

Comparison

View 1

View 2

Solution

We built the configurator from scratch as a single-page application wired into WooCommerce. (1) A 3D preview on Three.js: a .glb model with named engraving zones, with text and icons rendered through canvas into textures and mapped onto those zones, calibrated for position, curvature and depth so the engraving sits on the object realistically. (2) The wizard doses decisions one at a time instead of dumping a single long form: front engraving, the question about the back, font, packaging. Choosing a double-sided engraving adds a step on the fly. (3) A configuration engine: every product is a definition describing its fields, model, pricing and presets, so the next product is added as a definition rather than a rewritten interface. (4) Price is calculated twice, in the preview and bindingly on the server, from the same rules, so the customer never sees an amount different from what they pay. (5) The configuration lands on the order line in a form the engraving workshop can read: text, icon with position, side. Plus undo, saving a project to the account, and sharing a configuration by link.

Scope of work