3D models for e-commerce: a guide

We've built 3D models for online shops since 2017. Each section below gives the short answer to one question about them and links to the article with the detail, so the guide can be read straight through or by section.

What a 3D model does on a product page

A photo shows the product from one angle in one fabric. A 3D model is the product itself, described in geometry and materials, which the browser draws on demand. From the same file a shop gets a viewer the customer can turn, a real-size placement in the customer's room through augmented reality, a configurator that swaps fabrics and modules, and renders for marketing.

The page can then answer questions a shopper would otherwise put to a salesperson, such as how big the piece is and whether the oak matches their floor. In the published figures we've found, shoppers who use the 3D view stay longer and convert more often than those who don't. What a 3D model does for an e-commerce product page goes through the changes on the page, and Does 3D increase online sales: the evidence checked looks at what those figures do and don't show.

Model, viewer, renders and configurator

The word "3D" covers four deliverables, and a quote for one is often read as a quote for another.

1. The model is the source asset, made of geometry, materials and textures. Everything else is produced from it.
2. The viewer is the model on a web page, turnable and zoomable, usually inside a tab on the product gallery.
3. Renders are still images or clips produced from the model, replacing or extending a photo shoot.
4. A configurator is the viewer plus rules about which fabrics exist, which modules connect and what each combination costs.

Augmented reality sits on top of the viewer and uses the same file. What is 3D product visualization: five types explained breaks the deliverables down further, and 3D product visualization in e-commerce: the four formats and when each one pays covers when each one pays for itself.

How a model gets made

The route depends on what you can supply.

• If you manufacture the product, the CAD file already contains the exact geometry. It needs simplifying for the web and real materials applied, which is routine work for a 3D artist.
• Most furniture and home products are modelled by hand from reference photos, drawings and the published dimensions, because the CAD either doesn't exist or belongs to a supplier.
• Photogrammetry and AI reconstruction turn photographs into geometry. They suit organic shapes and one-offs and cope badly with clean edges, glass, chrome and anything that has to be configurable.

We compared the three routes in Three ways to make a 3D model from photos, compared. Whichever route you take, the finished model has to be accurate enough that a customer who buys on the strength of it isn't surprised by the delivery; 3D model accuracy: tolerance for size, colour and materials sets out the tolerances we work to.

GLB and USDZ

Web 3D has settled on two files. GLB (the binary form of glTF) is what browsers and Android use; it carries geometry, materials and textures in one file. USDZ is Apple's format, needed for AR Quick Look on iPhone and iPad. A production pipeline exports both from the same source, and a product page serves whichever the device asks for. If a vendor delivers only one of them, AR won't work on the other platform's phones.

Polygon count and texture resolution decide whether the model loads fast. A model built for a studio render is usually far too heavy to load on a phone over mobile data. How to put a 3D model on a mobile product page without wrecking your page speed gives the numbers that work and how to keep a heavy model from hurting your page speed score.

Viewer, 360 spin or video

A 360 spin is a ring of photographs taken on a turntable, so the customer can turn the product but can't tilt it or zoom past the photo's resolution. A video shows the angles that were filmed. A 3D viewer lets the customer look at whatever they want to check, at real scale, and the same file feeds the AR view and the configurator. The longer comparison, 3D product viewer vs 360 photos vs video: what each costs, includes the cases where a spin is the better choice.

Once you have a viewer, hotspots can explain details on it, such as a marker on the armrest about the joinery or one on the seat that names the fabric. Hotspots on a 3D product model: what to annotate and how to write them covers both the choice of details and the wording.

Putting the model on the page

For most shops this is one script tag and one element in the product template, placed by whoever maintains the theme. Shopify, Shopware, Magento and WooCommerce all take it the same way. Shopware shops that want options and prices on the model as well can read our 3D configurator for Shopware page, which has a live demo and the prices. The model files live on a content delivery network, so the shop's own server never serves them.

On a phone the same viewer shows a View in AR button, and the file opens in the customer's room at real size. What happens when you tap View in AR, step by step on iPhone and Android walks through each tap, and How to implement web AR on an e-commerce site: formats, code and what breaks has the implementation detail and the things that commonly break.

Configurators

A modular sofa range in several fabrics and leg finishes runs to thousands of combinations, and a modular configurator shows each one with its price. The product types we build configurators for, with prices, are on our 3D product configurator for e-commerce page.

Building one is a different job from building a model. The fabrics have to be captured so they look right under any lighting, and the rules have to say which modules connect and what each combination costs. What a furniture configurator has to do lists those jobs, and Fabrics and materials in a 3D product configurator shows how the fabrics are captured.

What it costs

Which way of paying for 3D is cheapest depends on how many products you have and how often they change.

• An agency builds models for a fee per model. That suits a launch and gets expensive at catalogue scale, and you host and maintain the files yourself.
• In our experience an in-house team pays off past a few thousand products a year.
• A subscription charges per product per month, with hosting, updates and the viewer included. That's how we charge, for the reasons given in 3D as a service pricing per product per month.

3D SaaS vs agency vs in house: three ways to get models makes the case for each. If you're putting a number in next year's budget, Planning a 3D e-commerce budget by product count and phase works through per-product cost, catalogue size and what to leave out.

A 3D model is often cheaper than the photo shoot it replaces, because it produces every angle and colourway without a studio day. 3D renders vs product photography: which costs less sets out where that holds and where photography is still cheaper.

Other uses for the same model

The model you paid for once can produce renders for the catalogue and the trade fair, clips for social media, images for email and ads, a dealer portal for B2B buyers and digital samples before the first physical prototype. Where a 3D model is used away from the product page lists them with examples, and Reusing one 3D model across e-commerce content marketing covers the marketing side.

Search engines

A 3D model doesn't improve a page's ranking by itself. What it changes shows up in session length, return rate and the product data search engines can read. There is also a direct route into Google's own results. Merchant Center accepts 3D models for products, and a product with a model can show a 3D badge in Shopping. What 3D models do for SEO, and where they don't help sticks to what Google documents, and Getting your 3D products into Google Search: what Merchant Center requires lists the Merchant Center requirements.

Knowing whether it worked

The reliable answer comes from a test in which the same product page runs with and without the 3D view, split between visitors, for long enough to reach a usable sample. Without it, a lift can't be separated from the season or a campaign. How to A/B test a 3D product page properly covers how to run the test and the sample sizes it needs.

How to start

Pick one product with shape and visible material, where a model has something to show. Have it built, put it on the live page and measure for thirty days before deciding about the rest of the catalogue. That sequence is How to run your first 3D product page pilot in 30 days, and before you sign with anyone, ask them the questions in Questions to ask a 3D and AR vendor before you sign.

We build the first product free as a web-ready model with AR, so the pilot can run on your own page before you buy anything. The form is at free sample.

Terms used in this guide

GLB, USDZ, polygon count, PBR materials, photogrammetry, hotspots, AR Quick Look, Scene Viewer and the rest are defined in the glossary.