Tutorial: add a 3D viewer and augmented reality to a Shopify product page
To add a 3D viewer and augmented reality to a Shopify product page, install the Visuality app from the Shopify App Store, link a 3D model to the product, then add the “Visuality 3D Viewer” block in the theme editor. Without the app, you can also paste the Visuality iframe code into the product description.
Which method should you choose to add 3D to Shopify?
There are two ways to display a Visuality viewer on Shopify. The table below summarizes their differences to help you choose before you start.
| Criterion | Visuality app | Visuality iframe code |
|---|---|---|
| Compatible themes | Online Store 2.0 themes, such as Dawn | All themes, including older “vintage” themes |
| Setup | Install from the Shopify App Store, then add a block to the theme | Copy and paste into each product page, or use a custom Liquid block |
| Display per product | Automatic on every product linked to a 3D object | Page by page, or automatic with a metafield |
| Display modes | 3D viewer, QR code, or both | Iframe and QR code, pasted separately |
| Code to write | None | None in the description; a few lines of Liquid for an automatic block |
| Subscription | Billed by Shopify, in US dollars | Visuality subscription purchased on visuality.fr |
What do you need before you start?
- A Shopify store and admin access, to install an app and edit the theme.
- One 3D model per product, in GLB or USDZ format. No file? Visuality can generate it from a photo with AI, guide you through a scan with RealityScan or create a custom model on quote.
- The product's real dimensions, to check that it appears at the right size in augmented reality.
- A smartphone, ideally an iPhone and an Android device, to test augmented reality.
Useful guides: generate a 3D model with AI · scan an object with RealityScan · GLB and USDZ formats
Method 1: install the Visuality app (recommended)
The Visuality app has been available on the Shopify App Store since May 2026. It connects your store to your 3D object library and adds a theme block that appears on every linked product.
Step 1: install the app and choose a plan
Open the Visuality listing on the Shopify App Store, click Install and grant access to your products. Then choose your plan in the app: Shopify handles payment and your Visuality account is created automatically, with no API key to enter. App pricing and free trial
Step 2: add your 3D objects
On the app's Settings page, click “Open my workspace”: you are signed in to visuality.fr in one click. In the 3D Object Library, click “Add an Object” to upload a GLB or USDZ file, or to generate a model from a photo.
Before going back to Shopify, set the object's scale so it appears at its real size, and choose floor or wall placement. The USDZ file used by iPhone is generated automatically on our servers a few moments after upload. Set the size of a 3D object
Step 3: link an object to each product
In the app's Products tab, open a product, select the matching 3D object and choose the display mode:
- 3D Viewer: the interactive viewer is embedded in the product page.
- QR Code: only a QR code is shown; shoppers scan it to see the product in augmented reality on their phone.
- Both: the viewer, with the QR code below it for desktop visitors.
Save. The configuration is stored in a product metafield that the theme reads directly: displaying the product page doesn't depend on any extra call to the app.
Step 4: add the “Visuality 3D Viewer” block to the theme
- In the Shopify admin, open Online Store > Themes, then click Customize.
- At the top of the editor, switch pages: select Products > Default product.
- In the left sidebar, in the Template section, click Add block.
- In the list, under Apps, select Visuality 3D Viewer.
- Place the block wherever you like, for example below the photo gallery or below the add-to-cart button, then click Save.
The block appears automatically on every product that has a linked 3D object. If some products use a different page template, repeat the process for that template.
Method 2: paste the Visuality iframe code
This method suits older themes that don't accept app blocks, or merchants who already have a Visuality subscription purchased on visuality.fr.
Get the code
In your 3D Object Library, click “View / Share”. The page provides an access link, a QR code, the HTML code for that QR code and, in the “Direct integration on your website (IFrame)” section, the viewer code. Click “Copy to clipboard”.
Option A: in the product description
- In the Shopify admin, open Products and select the product.
- In the description editor, click the Show HTML button (the <> icon).
- Paste the iframe code where you want it, then save the product.
For a viewer that spans the full width of the description, with lazy loading, you can enhance the code as follows:
<iframe src="https://visuality.fr/en/viewer/object/YOUR-ID"
title="Product 3D viewer"
width="100%" height="500"
style="border: 0;"
loading="lazy"
allow="xr-spatial-tracking; fullscreen"
allowfullscreen></iframe>Option B: in a custom Liquid block, for the whole catalog
To avoid editing every description, create a URL-type product metafield in Shopify's custom data settings, for example custom.visuality_url. Fill it with each product's viewer address, then add a custom Liquid block containing this code to the product template:
{% if product.metafields.custom.visuality_url != blank %}
<iframe src="{{ product.metafields.custom.visuality_url.value }}"
title="3D viewer"
width="100%" height="500"
style="border: 0;"
loading="lazy"
allow="xr-spatial-tracking; fullscreen"
allowfullscreen></iframe>
{% endif %}The viewer then only appears on products whose metafield is filled in: other product pages stay unchanged.
The iframe embed is explained in detail, with a video, in the documentation: embed the 3D viewer on a page.
What about Shopify's native 3D?
Shopify can also display 3D models uploaded to a product's media, in GLB or USDZ format, and derives a USDZ version for iPhone. This option is built into Shopify and requires no extra subscription, but it assumes you already have ready-to-use 3D files and a theme that displays 3D media.
Read the detailed comparison: Visuality vs Shopify's native 3D
How do you check that everything works?
- On desktop: the viewer loads, the model rotates with the mouse and zoom works. If you chose the QR code, scan it with your phone.
- On iPhone or iPad: tap the augmented reality button; AR Quick Look opens and the product is placed on a horizontal surface (wall placement currently works on Android only).
- On Android: augmented reality opens in Google Scene Viewer or in WebXR, depending on the device.
- Scale: compare the virtual object with a piece of furniture or a tape measure next to it. If it's off, correct the scale in Visuality.
- Page speed: check that the product page stays smooth on an entry-level smartphone, on 4G as well as on Wi-Fi.