How to add AR product visualisation to an online store

What the customer experience is like

1. On the product page they see a 3D viewer with the option to view in AR.
2. They press "View in your space" from the phone.
3. The camera activates and the product appears at real scale on the floor or the table.
4. They move, rotate and photograph it.
5. They return to the product page and add to basket.

On a computer, a QR code is shown so they can continue on the phone.

What you need

1. Suitable 3D models

• True to shape, scale and colour.
• Optimised for mobile (a few megabytes).
• GLB/glTF (Android and web) and USDZ (iPhone and iPad) formats.

More in model optimisation.

2. An integrated viewer

A web component that shows the model in 3D and activates AR mode on compatible devices.

3. Integration with your platform

• eCommerce platforms with native support or applications for 3D/AR.
• Custom stores: integration with a web component and file management in your system.
• Catalogue management: associate each model with its product and variant.

4. Analytics

Events to measure: 3D views, AR activations, time of use, adds to basket and subsequent purchases.

5. Production process

A workflow to create, approve and publish new models each time a product is added.

Implementation steps

1. Choose pilot products: bulky ones, ones that raise doubts, or ones with many returns.
2. Gather materials: CAD, photographs, measurements.
3. Create and optimise the models.
4. Integrate the viewer on the product page.
5. Test on iOS and Android, with different browsers.
6. Publish and announce the new feature.
7. Measure for several weeks.
8. Expand to more products.

Design best practices

• Visible button with clear text ("View in your space").
• Brief instructions when the camera opens.
• Real-scale models with the dimensions shown.
• Variants of colour and finish, selectable.
• Loading experience with an indicator while the model downloads.
• Link back to purchase from AR mode.
• Alternative if the device is not compatible (3D viewer).

Performance and SEO

• Deferred loading: do not load the model until the user asks for it.
• Compression of models and textures.
• Look after Core Web Vitals: a heavy 3D viewer can harm speed.
• Structured data for products (including the 3D model where appropriate).

Legal points

• Information about camera use.
• Privacy and cookie policy for the analytics.
• Rights over the 3D models and the images.

Which products work best

• Furniture and decoration.
• Appliances.
• Lighting.
• Windows, doors and coverings.
• Office equipment.
• Garden products.
• For fashion and beauty, virtual try-on.