Nocte: a fine jewelry store where every piece is real 3D, built with three.js (demo store)
Nocte is a demo fine jewelry store I built on Shopify. The brand, pieces and prices are fictional and no orders ship. It's a development store, so it's password protected (password: nocte).
Fine jewelry shoppers, often buying a gift for someone else.
The Challenge
Let shoppers see the exact piece they'll buy, in their metal and stone, and get the ring size and the gift details right.
Jewelry sells on detail and trust. Shoppers want to see the stone up close and the metal they picked, and to know the ring will fit. Most jewelry stores show one photo per product, leave ring size to a guess and ask for the gift note by email after the order. Nocte is a demo store, so this is the problem it was built for, not a past client's.
Solution
Every ring, earring and chain is modeled in three.js from real measurements, down to a 57-facet diamond. On the product page the piece changes as soon as the shopper picks a metal or a stone, turns with a drag and shows the engraving inside the band as it's typed. Every combination is a real Shopify variant.
3D that changes metal and stone with the variant picker
An engraving preview inside the band, saved with the order
A ring size guide that measures a ring the shopper already owns
Gift packaging with a handwritten card in the cart, and the card message reaches the order
Consultation booking that lands in the store's inbox
The 3D loads only after the shopper starts to interact, so the first screen stays fast
Result
Shoppers see the piece in their metal and stone before they buy, and the engraving and the card message reach the order. The size table is edited in the Shopify admin. Nocte is a demo store, so there are no sales figures.