Interactive experience
3D product configurator
Shoppers customize a lounge chair on a live 3D model. Every choice maps to a real Shopify variant, so price, inventory and checkout stay native, and the monogram rides along as a line-item property.
Live Shopify product
Mystere Lounge Chair
$890.00
Up to 3 letters, stitched on the backrest. Saved as a line-item property.
See it in a real Shopify store
The same configurator runs as a Horizon theme section on a Shopify development store, editable in the theme editor.
Open the demo store ↗
Store password:
thirdageThe problem
Configurators often fight the platform: prices calculated in JavaScript, options that never reach the order, and a setup only a developer can change.
The approach
- Price-affecting choices are real product variants, so Shopify owns pricing, stock and checkout.
- Each option value maps to a 3D effect (a glTF material variant or a recolored part), editable in the theme editor without code.
- The model is the product’s own 3D media, served from Shopify’s CDN.
- The same configurator ships as a Horizon theme section and, here, as a headless Next.js page on the Storefront API.
Built with
- Shopify Horizon theme
- Liquid sections + blocks
- Storefront API
- Next.js
- <model-viewer>
- glTF / GLB