A "view in your room" button turns a product page into a virtual try-out: the shopper points their phone at the floor or a table and sees the product placed there at real size. For furniture, decor or electronics, it answers the question "will it fit and will it look right?" directly. Below we explain how augmented reality (AR) works in the browser and what you need to prepare for a good result.

What happens when the shopper taps the AR button

AR for online stores does not need a dedicated app. Phones use technology already built into the operating system:

On Android

The GLB model opens in Google Scene Viewer, an AR viewer provided by Google on ARCore-supported devices, or, in some browsers, directly in the page through WebXR. The shopper sees the product placed on a surface detected by the camera and can move or rotate it.

On iPhone and iPad

Apple uses AR Quick Look, which opens USDZ files. That is why iOS needs a USDZ version of the model. The format differences are covered in GLB, USDZ and OBJ explained.

The model-viewer component

The best-known way to show 3D models on the web with AR is <model-viewer>, an open-source web component started by Google. You give it a GLB file and it renders the interactive model and, on phones, the AR button. The ar-modes attribute sets the order of modes (WebXR, Scene Viewer, Quick Look). For iOS you have two options: supply a separate USDZ file through the ios-src attribute, or let the component generate a USDZ from the GLB on the fly when the shopper taps the button. A USDZ prepared in advance gives you more control over the result. Exact behaviour and compatibility change between versions, so check the project's current documentation.

The 3DView.ai viewer already includes AR on phones, and models created by scanning come in both GLB and USDZ, so there is nothing extra to configure.

Real-world scale: the detail that makes or breaks AR

In the glTF standard the unit is the metre. If an armchair model is 80 units wide in the file, the phone shows an 80-metre object. Conversely, a model exported in millimetres without conversion appears tiny. Before publishing:

  • Measure the real product (width, height, depth).
  • Compare with the model's dimensions in the viewer or in 3D software.
  • Check in AR with a tape measure next to where the object appears.

For products where size matters, such as furniture, some viewers let you disable shopper scaling so the product cannot be shrunk by accident. Check the options available in the viewer you use.

File size and textures for mobile

AR runs on a phone, often over mobile data. A heavy model means waiting, and shoppers give up. Practical rules:

  • Moderate textures: a product seen on a phone does not need very large textures.
  • Simplified geometry where detail is not visible.
  • One clean object, with no leftover background or stand from the scan.
  • Test loading on a mobile connection, not only on Wi-Fi.

From desktop to phone: the QR code

There is no AR on a desktop computer. A simple solution is a QR code next to the viewer: the shopper scans it with their phone, opens the same product page and taps the AR button. Someone browsing on a laptop can see the product in their room within seconds.

Getting the right model for AR

AR exposes every flaw in a model, because the product appears next to real objects. Fidelity matters:

  • Phone scan on /scan: starts from the real product, keeps shape, textures and logos, and produces GLB and USDZ. The full guide is scanning products in 3D with your phone.
  • AI from a photo or text on /create: fast, good for a preview or concept, but less faithful to the real product.

AI is fast for a preview; for the best result, scan the real object. A detailed comparison is in product photos vs 3D scan vs AI.

Common problems and fixes

  • The AR button does not appear on the phone: the device or browser may not be supported, or the right file is missing (USDZ on iOS). Try another phone and confirm both formats are available.
  • The product "floats" above the floor: the model's origin is not at its base. The model should rest with its base on the ground plane.
  • Colours look different from the photos: room lighting affects the AR image. Start from textures captured in even light, without harsh shadows.
  • Loading takes too long: reduce texture size and remove unnecessary parts of the model.

Adding it to your store

The viewer embed code (iframe or script snippet), with AR included, is on the e-commerce page, along with an example product page. Platform-specific steps are in how to add 3D models to Shopify and WooCommerce. Some platforms also have their own 3D model support; check their current documentation. For the bigger picture, see our guide to 3D product visualization, and plans are on the pricing page.