3D Product Viewer for E-commerce: Shopify Options and a Three.js Build

A 3D product viewer lets shoppers rotate, zoom and sometimes place a product in their room with augmented reality. For products where shape, finish or scale matter — furniture, footwear, cosmetics packaging, electronics, jewellery — it answers questions a gallery of photos can't.

Three ways to add a 3D product viewer

Option	Best for	Effort
Shopify native 3D media	Shopify stores that want rotate/zoom and AR quickly	Low
<model-viewer> web component	Any site; simple viewer with AR	Low–medium
Custom Three.js viewer / configurator	Brand experiences, colour and material options, animations	Medium–high

1. Shopify's built-in 3D models

Shopify supports 3D models as product media. Upload a GLB file and most modern themes show an interactive viewer, with "view in your space" AR on supported devices. It is the fastest route when you already have models.

2. model-viewer

Google's open-source <model-viewer> web component displays a GLB with orbit controls, lighting presets and AR in a few lines of HTML. Shopify's own viewer builds on it.

3. A custom Three.js viewer

When the viewer is part of the brand experience — changing colours, swapping parts, animating how a product opens — you need a custom build. Our open-source threejs-commerce-experience is a starting point: a WebGL product showcase with PBR materials, a key and rim light setup, drag-to-orbit and idle auto-rotation, bundled with Vite. It uses procedural geometry so it runs offline; for production you swap in a GLTFLoader call for your real model.

new GLTFLoader().load("/models/product.glb", (gltf) => {
  scene.add(gltf.scene);
});

Building a product configurator

A Three.js product configurator maps options to the model: a colour option changes a material's colour, a size option swaps a mesh, a finish changes roughness and metalness. Keep the option-to-model mapping in data, not code, so merchandisers can add variants — and sync the selected options with the Shopify variant so the cart gets the right SKU.

Models and file formats

• GLB (glTF binary) — the web standard; use it for viewers and Shopify.
• USDZ — used by Apple's AR Quick Look; Shopify can generate it from GLB.
• Size — aim for a few megabytes at most; compress geometry with Draco or Meshopt and textures with KTX2.
• Accuracy — real dimensions matter for AR; a sofa at the wrong scale erodes trust.

Performance: don't let 3D slow the page

3D should never block the product page from loading. Show the main product photo first, load the viewer when the shopper interacts or scrolls to it, and pause rendering off-screen. We cover the technique in web 3D performance — it is how our own site keeps 100 Lighthouse scores with 3D on board (see 3D web experiences).

Is 3D worth it for your products?

Start with your best-selling products where shoppers ask about shape, scale or finish. Measure engagement with the viewer, add-to-cart rate and returns for "not as expected" before rolling out to the whole catalogue.

Want a viewer or configurator built for your store? Explore our 3D website development service.