Add an augmented reality QR code to an e-commerce product page
In short
To offer augmented reality from an online store, open “View / Share” on your 3D object, copy the QR code HTML and paste it into the product page. Desktop visitors scan the code with their phone and see the product in their own space, with no app.
In the example above, a QR code is embedded in the product page: with one scan, the customer views the object in augmented reality to try it at home.
Prerequisites
- A Visuality account with an active subscription or an ongoing trial.
- A 3D object uploaded to the 3D Object Library, in GLB or USDZ format.
- Access to the HTML editor of your product pages.
Steps
- In the 3D Object Library, click the object's “View / Share” button.
- In the “HTML integration of the QR code” section, click “Copy to clipboard”.
- Open the product page in your store's admin, switch the description editor to HTML mode and paste the code where you want it.
- Save, then scan the QR code with a smartphone to check that it opens your object.
For printed materials, click “Download the QR code” instead: you get the QR code image, ready to place on a catalog, a label or a poster.
You can also skip the QR code and directly share the link to your object.
Good to know
- Augmented reality works on smartphones and tablets, with Safari, Chrome or Edge; on desktop, the QR code acts as a bridge to the phone.
- On iPhone, Visuality automatically generates the USDZ file used by AR Quick Look; on Android, augmented reality runs through Scene Viewer or WebXR.
- The same QR code can be printed on a catalog, a label or a trade show booth.
- If your license becomes inactive, access links are disabled until it is reactivated.
To display the 3D viewer directly in the page, use the iframe code; on Shopify and PrestaShop, our integrations add the QR code with no copy-pasting: 3D viewer for websites · Shopify app · PrestaShop module