The Short Answer
To add a 3D product viewer you need a web-optimised model in two formats: GLB for browsers and Android AR, and USDZ for AR on iPhone. On Shopify, upload them as product media and the theme shows them with a built-in viewer. On any other site, Google's model-viewer component displays a GLB with rotate, zoom and AR in a few lines of code, and a custom Three.js viewer handles anything more ambitious.
The Two Formats You Need
| Format | Used by | Notes |
|---|---|---|
| GLB (glTF) | Web browsers, Android AR, Shopify viewer | The web standard; supports compression |
| USDZ | iPhone and iPad AR Quick Look | Apple's AR format; made from the same model |
Both should come from one source model, so they match. If a supplier only sends a render file or an OBJ, ask for proper GLB and USDZ exports.
On Shopify
Shopify supports 3D models as product media alongside photos and video. Upload the GLB (and USDZ where needed) to the product, and most modern themes show an interactive viewer with a "view in your space" button on phones. Shopify's own documentation lists the current file limits and theme requirements.
The built-in viewer is enough for most stores. If you want buyers to change colours or parts, that is a configurator, covered in our Shopify configurator guide.
On Any Other Website
For WordPress, Webflow, Next.js or a hand-built site, Google's open-source model-viewer is the fastest route. It is a single HTML element that loads a GLB, adds rotate and zoom, and offers AR on supported phones.
A custom Three.js viewer makes sense when the product needs brand-specific lighting, animation such as opening or exploding into parts, hotspots that explain features, or a link to product data. It is more work, and it gives complete control.
Launch Checklist
- True scale. AR places the model at its real size, so a wrong scale is obvious immediately.
- Small files. 1 to 5 MB after Draco or Meshopt and KTX2 compression; see our GLB optimisation guide.
- A poster image. Show a still until the buyer interacts, so the page stays fast.
- Honest materials. Colours and finishes must match the real product, or 3D creates returns instead of preventing them.
- Lighting that matches your photos. The viewer should look like the same product as the gallery beside it.
- Accessible fallback. Alt text, keyboard controls and the photo gallery for anyone who cannot use 3D.
Where the Model Comes From
The viewer is the easy part; the model decides whether it looks premium or cheap. A good model starts from CAD files or precise references and is built for the web from the start. See what a 3D product model costs and how CAD files become web models.
Working With Kalex
Kalex makes web and AR-ready product models in Blender and builds custom viewers in Three.js, for Shopify stores and custom sites worldwide. See our 3D modelling service or our 3D website service.