Work / SerendiGem

eCommerce & WordPress

SerendiGem: a gemstone store where every stone tells its story

A full-stack colored-gemstone eCommerce platform for a Sri Lankan gem brand, with a guided ring builder, a detailed gemstone catalog, and a ready-made jewelry shop, all running on WordPress, WooCommerce, and React.

Client
SerendiGem, Ceylon Gemstones
Our role
Design and full-stack development
Platform
WordPress, WooCommerce, React
Launched
September 2026
serendigem.com
SerendiGem homepage with a sapphire hero and featured Ceylon gemstones
The brief

Fine gemstones are bought on detail: origin, treatment, carat, cut, and certification. SerendiGem needed a store that lets buyers explore stones by exactly those details, then turn the one they love into a finished ring.

Off-the-shelf WooCommerce couldn't handle gem-specific data or a custom ring journey at the polish a luxury brand needs, so we built a tailored experience on top of WordPress.

The signature feature

A ring builder that feels like a private consultation

Customers design their own ring in three guided steps. The chosen stone travels with them through the journey, and the price updates as they go.

01Select gemstone 02Select setting 03Complete ring
Step 1Design: choosing the gemstone
serendigem.com/build-your-ring
Ring builder step one with gemstone type, shape, carat, color, cut, clarity and price filters
Step 2Live site: choosing the setting
serendigem.com/build-your-ring/setting
Ring builder step two showing the selected sapphire, setting styles, metals and ring size
Selected stone stays in viewShown beside the setting preview, with a one-click option to change it.
Setting stylesHalo, solitaire, and unique settings shown visually.
Metal and ring sizeFour metals, a size selector, and a built-in size guide.
Live price summaryA summary bar combines gemstone and setting into one running total.
The catalog

Find the right stone in seconds

The full collection runs as a React app inside WordPress, reading gemstone data from a custom REST API, so results update instantly without reloading the page.

serendigem.com/gemstones
Browse Sri Lankan Gemstones page with unheated toggle, grading filters and certified gemstone cards123456
  1. Unheated or heatedTreatment status is the first choice serious buyers make, with an explainer one click away.
  2. Seven grading filtersType, shape, carat, color, cut, clarity, and price, in collapsible panels.
  3. Gem-specific scalesColor and clarity sliders that match how the brand grades its stones.
  4. Certification on every cardThe issuing lab is shown at a glance, or a clear "not certified" note.
  5. Live stock statusOne-of-a-kind stones are marked sold the moment they're gone.
  6. Visual or list viewBrowse by image or compare specs side by side, with adjustable results per page.
Ready-made collection

Finished jewelry, one of a kind

For customers who'd rather not design their own, a ready-made shop offers rings, pendants, and earrings already set with Ceylon gemstones.

  • WooCommerce shop restyled to match the luxury theme
  • Quick category filters for earrings and pendants
  • Single-piece stock: once it sells, it's gone
serendigem.com/shop-ready-made
Shop Ready-Made page with earrings and pendants on silk backgrounds
How it fits together

WordPress where it helps, React where it shines

The team manages everything in the familiar WordPress dashboard, while shoppers get an app-like experience.

AdminWordPress dashboard

Grading fields, CSV import, AI-assisted entry, video and certificates

DataCustom REST API

Serves gemstone data and grading details to the front end

StorefrontReact catalog and builder

Instant filtering, search, sorting, and the ring journey

CheckoutWooCommerce

Cart, checkout, and orders on proven eCommerce foundations

What we built

Three layers, one seamless store

01

Shopping experience

A store that makes rare stones easy to explore.

  • Three-step ring builder
  • React filter and search interface
  • Hover-video product cards
  • Built-in certificate viewer
  • WooCommerce cart integration
02

Admin tooling

Faster, more accurate listings for the team.

  • Custom gemstone grading fields
  • CSV import for bulk listings
  • AI-assisted data entry with the Gemini API
  • In-browser video compression before upload
03

Design and theme

A luxury feel that works on every screen.

  • Responsive Storefront child theme
  • Glass-effect sticky header
  • Scroll animations
  • Mobile-optimized filter panel

The hard part: making it look right everywhere

Glass effects, video cards, and animations look effortless, but they push browsers hard. Along the way we tracked down and fixed deep CSS and Safari rendering bugs, so the store looks just as polished on an iPhone as on a desktop.

Next project Caregiving guide illustrations

Planning a store with special requirements?

Product builders, custom filters, or admin tools that WooCommerce doesn't offer out of the box: that's exactly what we build.

Get a free consultation