3D product viewer

A 3D product viewer is the model on the page. It loads a model file, draws it in the browser using the phone's or computer's graphics chip, and lets the shopper rotate it, zoom into details and, with hotspots, read notes about specific parts. On a phone it usually carries the View in AR button as well.

Modern viewers run in any browser without a plugin or an app, using WebGL or WebGPU. The speed depends on the model file more than on the viewer software, so polygon count and texture size are where the work goes.

A 360 spin is a ring of photographs taken around the product, and a video plays a fixed sequence. In a viewer the shopper decides which side to look at and how close to get.

What the shopper can do with it

Turn the product all the way round, including the back and the underside, which product photography rarely shows. Zoom in until the weave of a fabric or the grain of a veneer fills the screen. Read the measurements drawn on the model. Tap a hotspot to see a note about a joint, a mechanism or a material. On a phone, open the same model in the room at real size.

Our viewer article has four products to try: a gaming PC, a grill, an e-bike and a swivel chair, each with its own notes and measurements.

How it gets on a product page

The viewer goes on the page as one snippet, so Shopify, Magento, WooCommerce, Shopware and custom shops all work the same way. The snippet loads the viewer script and the model file from a CDN. The shop's own templates stay as they are, and the viewer sits where the product photos sit, or next to them.

The model file is a GLB. For the AR view on iPhone a second file in Apple's USDZ format is served to that device; Android opens the same GLB. The shop does not need to know which is which, because the viewer picks the file for the device that asks.

File sizes

A product page model has to load on a phone over a mobile connection, so size matters more than it does for a render. The sofa in our sofa configurator article holds five fabrics in one file of just under 5 megabytes, with 111,000 triangles. The coupé in our car configurator article is a 1.3 megabyte model plus about 2.1 megabytes of light images on a computer, and less on a phone. Shopify's own guidance for its product media gives about 4 megabytes as a sensible target.

The work is on the model: fewer triangles where the shopper never looks, textures at the size the screen can show, and compression on the geometry. The entries on polygon count, 3D model optimisation and Draco compression cover each step.

What the model has to get right

The first thing to get right is scale. A sofa modelled a few centimetres short looks normal on screen and only shows up wrong in the AR view, against the wall. After scale come the materials: if the fabric has no visible weave or the metal does not reflect, the product looks as if it is made of plastic. Then come the parts a shopper looks at before buying, which for furniture is usually the back, the underside and the joins. Our article on what a furniture 3D model has to get right goes through these.

Where a viewer stops and a configurator starts

A viewer shows one product as it is. When the product is sold in fabrics, colours or modules, the same file can carry those as options the shopper switches between, and the page becomes a 3D product configurator. The viewer is the first step either way, and the model built for it is the one the configurator uses.

What it costs

A viewer with AR is on our Basic plan, from 10 dollars per product per month on a twelve-month term, for at least 100 variants. The Value plan, from 20 dollars per model per month over 24 months, adds a configurator for colours and materials. Both include the 3D model, hosting, updates and implementation. The plans are on the prices page. We build the first product free: send one product and it comes back as a viewer with AR, with no card and nothing to sign. That is on the free sample page, and our 3D product viewer page shows the viewer and AR on a live product.

Questions

What is a 3D product viewer?

A component on a product page that shows a 3D model of the product in the browser. The shopper can turn it, zoom in, read notes on details and, on a phone, place it in the room through AR.

Does a 3D product viewer need an app?

No. It runs in the browser on desktop and phone. The AR view on a phone uses AR Quick Look, built into iPhone, and Scene Viewer, which comes with the Google app on Android.

How big is a 3D model for a product page?

Between about 1 and 5 megabytes for most products once it is optimised. A sofa with five fabrics in one file is just under 5 megabytes in our build; a car is about 3.5 megabytes with its light images.

Can a 3D product viewer work in a Shopify or Shopware shop?

Yes. It goes on the product page as one snippet, so it works the same way on Shopify, Shopware, Magento, WooCommerce and custom shops.

What does a 3D product viewer cost?

From 10 dollars per product per month on our Basic plan, for at least 100 variants on a twelve-month term, with the model, hosting and AR included. The first product is free.