Back to all case studies
Hybrid Headless E-Commerce

Sandalwood Memorials

Hybrid Headless Platform — Next.js, WordPress & 3D Memorial Rendering

Client
Sandalwood Memorials
Duration
6 weeks
Year
2024

The Challenge

What we set out to solve

1

Sales team needed a familiar CMS to manage products, categories, and enquiries without developer involvement

2

Families couldn't visualise bespoke memorial designs before ordering

3

Legacy WordPress sites were slow and poorly ranked; performance mattered for SEO and conversions

4

Requirement for a seamless path from browsing to enquiry or brochure request

5

Need to showcase granite options, shapes, inscriptions, and grave decorations in a dignified, accessible way

Our Approach

How we tackled it

We architected a hybrid headless platform that delivers the best of both worlds. WordPress and WooCommerce power the backend—familiar, flexible, and fully under the sales team's control for product management, pricing, and order handling. Next.js drives the customer-facing site, delivering server-side rendering, blazing-fast page loads, and exceptional Core Web Vitals. We connected the two via GraphQL using WPGraphQL and WooGraphQL, so the Next.js front-end fetches only the data it needs—products, categories, custom fields, media—without the bloat of traditional REST. The standout feature: an immersive 3D memorial renderer built with Three.js. Families can explore headstones, plaques, and monuments in real time, swap stone colours, preview inscriptions, and understand scale before requesting a brochure or enquiry. The design is compassionate and elegant—serene photography, warm typography, clear CTAs for 'Our Memorials', 'Request Brochure', and 'Enquire', with WhatsApp for instant support. The result is a site that feels premium and performant whilst giving the team full control behind the scenes.

Process

Execution timeline

1

Hybrid Architecture

  • Designed headless architecture: Next.js for front-end, WordPress/WooCommerce for back-office and product management
  • Connected via GraphQL (WPGraphQL + WooGraphQL) for efficient, type-safe data fetching
  • Sales team retains full control over products, categories, and enquiry routing
2

Next.js Front-End & Performance

  • Built server-side rendered pages for SEO and fast first-contentful paint
  • Optimised Core Web Vitals and image delivery for memorial galleries
  • Responsive, accessible design with clear navigation: Our Memorials, Grave Decorations, Create A Memorial
3

Three.js Memorial Rendering

  • Developed interactive 3D visualisation for headstones, plaques, urns, and benches
  • Real-time preview of stone types, colours, shapes, and inscription text
  • Families visualise their bespoke design before enquiry—reducing hesitation and improving conversion
4

Conversion & Commerce

  • Streamlined flows: Request Brochure, Enquire, and Create A Memorial with gentle, dignified UX
  • WhatsApp integration for instant support; brochure and enquiry forms routed to sales team
  • Ongoing optimisation and content updates driven by the WordPress admin

Impact

The results

+280% increase in enquiries

Online Quote Requests

+58% increase (from £2,100 to £3,300)

Average Order Value

4.2% conversion rate (vs. industry average 0.8%)

Website Conversion

Now represent 65% of sales (up from 15%)

Custom Orders

4.9/5 stars with 94% recommending Sandalwood

Customer Satisfaction

"The platform gives us the best of both worlds—our team manages everything in WordPress like we're used to, whilst families get a fast, beautiful site. The 3D memorial preview has been a game-changer. Customers can really see what they're choosing.

Sophia Clarke

Marketing Manager, Sandalwood Memorials

Capabilities

What we delivered

  • Headless Architecture
  • 3D Memorial Rendering (Three.js)
  • WordPress/WooCommerce Integration
  • GraphQL Data Layer
  • Performance Optimisation
  • Conversion-Focused Design

Stack

Technologies we used

Next.jsThree.jsWordPressWooCommerceWPGraphQLWooGraphQLTailwind CSSTypeScript

Let's work together

Ready to transform your digital presence?