The most common misconception I hear from store owners is that 3D means a rebuild. They picture their working, revenue-producing website torn down and replaced by some canvas experiment, and they reasonably decline. But adding 3D product views to an existing site is an additive change, closer to embedding a video than to a redesign, and the entry level is genuinely one HTML tag.
This is a map of the three levels, what each one costs in effort, and where each one stops being enough. It applies whether the site is Shopify, WooCommerce, or fully custom.
Level zero: the model, which you need regardless
Every level below consumes the same input: a web-ready 3D model of the product, which in practice means a glb file somewhere between five hundred kilobytes and a few megabytes, with real materials and correct dimensions. If your manufacturer can export STEP, STL, or IGS files, those can be converted, and I wrote the full pipeline up in From STL to glTF. If no CAD exists, a 3D artist models the product from photos and measurements, which for a typical product runs a few hundred dollars per model at freelance rates.
This asset step is where the real cost of "adding 3D" lives, and it scales with catalog size. The viewers below are nearly free by comparison. Budget accordingly, and start with your five best-selling products rather than the whole catalog.
One more sourcing route worth knowing: photogrammetry and 3D scanning. For organic products, food, ceramics, anything where surface character matters more than precise geometry, a scan built from a few dozen photos can beat manual modeling on both cost and realism. The raw scans come out heavy and messy, so they still need the cleanup and compression pass, but as a starting point for products that were never designed in CAD, scanning has quietly become the practical option.
Level one: model-viewer, the one-tag solution
Google maintains a web component called model-viewer that turns a glb file into an interactive product view with rotation, zoom, and lazy loading, and it works in every modern browser. The entire integration looks like this:
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer
src="/models/lounger.glb"
ios-src="/models/lounger.usdz"
alt="Laylo lounger in white granite"
poster="/images/lounger-poster.webp"
camera-controls
shadow-intensity="1"
ar
></model-viewer>That drops into any page that accepts HTML: a Shopify product template, a WordPress block, a plain static page. The poster attribute shows an image until the visitor interacts, so the page loads exactly as fast as it did before. And the ar attribute is the quiet superpower: on phones, visitors get a button that places the product in their actual room through the native AR viewer, Quick Look on iOS and Scene Viewer on Android. "See it in your space" for the cost of one attribute, plus a usdz conversion of your model for the Apple side.
Shopify deserves a special note because the platform handles this natively: upload a glb directly to a product's media gallery and Shopify serves the viewer and the AR button itself, no code at all. If you are on Shopify and have models, you are twenty minutes away from 3D product pages, and you should go do that before reading further.
Where level one stops
model-viewer shows a model. It does not configure one. The moment the product has finishes to switch, options that change geometry, or logic connecting choices to prices, you have outgrown the tag. You will also outgrow it on brand grounds eventually: the lighting and framing are serviceable defaults, and a premium brand sitting next to competitors using the same defaults starts to feel the sameness.
Level two: a custom viewer, embedded
The next level is a small custom three.js application that owns one section of the page: brand-tuned lighting, your own controls, finish switching, annotations, whatever the product story needs. Critically, it still embeds into the existing site. Two integration routes work well. An iframe is the pragmatic one: the viewer lives at its own URL, the store embeds it like a video, and the two codebases never touch, which platform templates and tag-averse IT departments both appreciate. The tighter route is mounting the viewer into a div via a script bundle, which allows the viewer and the page to talk, so choosing a finish in the viewer can update the add-to-cart variant on the page.
Either way, the performance disciplines are the same ones I keep writing about: lazy load the viewer only when it scrolls near the viewport, show a poster image first, compress the models and textures, and keep the product name, price, and description in the page HTML rather than inside the canvas, both for search engines and for the customer whose phone chokes on WebGL. The 3D is an enhancement layer. The page must survive its absence.
Effort-wise, a polished single-product custom viewer is a tier-one project in my cost breakdown: low thousands, one to three weeks, dominated by asset preparation and lighting rather than code volume.
A practical note on the iframe route, since it is the one most stores end up choosing. The viewer and the page can still communicate through postMessage: the page tells the viewer which product variant to show, the viewer tells the page which finish the customer picked. That thin message channel gets you most of the integration value of a bundled build with none of the deployment entanglement, and it means the viewer can be developed, tested, and updated on its own URL without ever touching the store code. For a store on a locked-down platform theme, that separation is not a compromise, it is the feature.
Level three: the configurator
When the product genuinely has decisions attached, riser heights, fabric collections, modular parts, sizes that change fit, the viewer grows into a configurator, with product options as data driving the scene and suitability feedback answering the customer's actual question. That is a different budget and a different article, but the path there is continuous: the level-two viewer's scene, models, and lighting all carry forward. Nothing gets thrown away, which is why starting at level one or two is not a detour, it is the first phase.
The AR reality check
Since "view in your room" is often the feature that sells stakeholders, a quick reality check. Native AR through model-viewer or Shopify is free and works well for placement: is this the right size, does it suit the corner. It runs in the native viewer, outside your page, with the device doing its own lighting estimation, so brand control is limited and the experience varies by device. Custom WebXR AR inside the browser exists and offers full control, but device support is still uneven enough that for commerce I recommend the native route: it reaches almost every modern phone and costs nearly nothing. Just export the usdz alongside the glb and test both on real devices.
Mistakes I keep seeing
- Shipping the raw CAD export. A forty megabyte glb makes the feature slower than the photos it replaced, and gets 3D blamed for an asset problem.
- Autoloading heavy viewers above the fold on mobile. Poster first, load on interaction or approach.
- Replacing product photos instead of adding to them. Photos convert; 3D is an addition, not a substitution, and the photos also feed social previews.
- Skipping the usdz. Half your AR audience is on iOS, and without the usdz they get nothing.
- Modeling the whole catalog before measuring anything. Five bestsellers, one month, then read the numbers and decide.
Measuring whether it worked
Whichever level you pick, instrument it on day one, because the case for the next level is built from the numbers of this one. The events worth tracking are simple: how many product page visitors interact with the viewer at all, how long they hold it, how many launch AR, and, the one that convinces finance, conversion rate and return rate for sessions that touched the viewer versus sessions that did not. Correlation is not proof, the customers who engage with 3D were probably more interested to begin with, but track the same numbers across a few months and the trend speaks clearly enough to decide with.
Set expectations by category, too. Furniture, lighting, and anything size-sensitive tend to show the strongest AR and viewer engagement, because the tool answers a real question. Small flat goods often show polite indifference, and that is fine to learn cheaply at level one rather than expensively at level three.
Picking your level
If your products sell on shape and size, and options are simple: level one, today, especially on Shopify. If your brand competes on presentation quality, or the product needs finish switching in the page: level two, commissioned, embedded without touching the rest of the site. If the customer faces a real decision your support team keeps answering by email: that is configurator territory, and the email volume is your business case.
The through-line is that none of these require rebuilding anything. The site you have keeps doing its job, and 3D arrives as a layer where it earns its place. Start smaller than feels ambitious, measure honestly, and let the results argue for the next level.