Complete DashboardGuide
3D product viewer for online stores: what it needs to have
The 3D viewer is the frame on the product page where shoppers rotate the piece, zoom in and, on a phone, see it in their own space. It looks like an interface detail, but it is what decides whether 3D helps you sell or only makes the page slower.
What shoppers do with it
In practice, shoppers use the viewer for three things: rotating the piece to see the side the photo does not show, zooming in to check stitching, texture or finish, and, on a phone, opening augmented reality to see the real size. A good viewer does all three without any instructions, because nobody reads a manual on a product page.
Five points to check before you choose
- 01
File weight
A 3D model can weigh a few megabytes or dozens of them. The viewer should load the essentials first and never block page scrolling while the rest arrives. Test it on an ordinary mobile connection, not on the office network.
- 02
Works in the browser
No app and no extension. On a computer, shoppers rotate the piece with the mouse; on a phone, with a finger, and augmented reality opens in the viewer the device already has built in.
- 03
Real scale
In augmented reality, the piece has to appear at its true size. A viewer that shows a handbag the size of a suitcase destroys the very trust it was meant to build.
- 04
Simple installation
Ideally, a snippet of code you paste into the description or into a theme block, without rewriting the product page. The less installation depends on a developer, the more products end up in 3D.
- 05
Measurement
Views, augmented reality taps and QR code scans. Without these numbers there is no way to know whether the 3D is being used, or which products are worth continuing with.
How the Complete viewer goes into your store
Every product created in Complete Dashboard gets its own address and an embed code, shown in “My products” with a copy button. The code is a standard iframe, accepted by most e-commerce platforms:
<iframe src="https://www.completemagazine.com.br/ar/PRODUCT-CODE" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>The width follows the page column, and the height can be adjusted in the code itself. The permissions in the allow attribute are what enable the camera and augmented reality inside the frame on a phone. Without them, the piece rotates, but the button to view it in your space does not work.
On a computer, where the device cannot open augmented reality, the viewer offers a QR code: the shopper points their phone at it and continues the experience in their own space.
Where to put it on the page
The spot that works is next to the photo gallery, not at the end of the description. Someone who scrolls to the last paragraph has already decided; someone still looking at the photos is the one with the question 3D answers. If your platform only accepts the code in the description, a line at the top of the text saying the piece can be viewed in 3D already helps.
Complete’s installation guides explain the path on each platform, including those that do not accept iframes in the product description.
Frequently asked questions
Does a 3D viewer slow the page down?
It can, if the model is heavy and loads before everything else. The Complete viewer runs inside its own isolated frame, and the store page keeps loading normally while the piece arrives.
Do I need a developer to install it?
On most platforms, no: you paste the code into the product description. To place the viewer on every product at once, next to the gallery, a theme block is usually the way, and then it helps to have someone who knows the theme.
See it with your own product
The first piece in Complete Dashboard is free and ready in minutes. For custom projects, talk to Complete.