3D viewer for a product page: embed, AR, no spray paint

A 3D viewer lives on three things: a file it can open, a viewer library, and hosting. Most “why won’t my 3D model show on my store?” problems are one of those three missing. Here is the shortest honest version.

You need a model in a format the web understands — GLB — plus its AR twin, USDZ, for iPhones. You need a viewer on the page: the open-source <model-viewer> element is the standard choice on a product page because Google maintains it and it renders the same on desktop and phone. And you need to serve those two files from a stable public URL, or embed the page that does.

Once those are in place, the embed is one line. Paste this into your theme where the product image sits. Replace the src with your GLB and the ios-src with your USDZ:

<model-viewer
  src="/models/chair.glb"
  ios-src="/models/chair.usdz"
  alt="Velvet Sheen armchair, 3D view"
  camera-controls
  ar
  ar-modes="webxr scene-viewer quick-look"
  shadow-intensity="1"
  style="width:100%;aspect-ratio:1/1"
></model-viewer>

The ar attribute is what makes the built-in button appear on a supported phone. On iPhone it launches Quick Look, on Android it falls back to WebXR or Scene Viewer. No app for the shopper to install, and the scale is taken from the model, which is why true 1:1 sizing matters.

The two files, and why you need both

GLB is the Khronos binary container built for the web. Texture, geometry, and animation package into one file, and it streams. It is the file <model-viewer> opens on the page.

USDZ is Apple’s format, the one Quick Look requires. If you ship GLB only, Android shoppers get AR (WebXR or Scene Viewer) and iPhone shoppers get nothing past the on-page viewer.

The cleanest version is to export both from the same source model. A seller who “has a 3D model” without a USDZ beside it is missing the iPhone AR half of the audience.

Getting the files if you don’t have them

If you start from photos and not an existing model, there are three real routes (the image to 3D model guide prices all of them):

• AI generation — fast, but the output is a raw mesh that usually needs cleanup before it belongs on a product page.
• A freelancer or agency — file in hand in days to weeks, priced per model.
• A managed pipeline — an AI draft plus an artist finish, hour-scale turnaround.

Whichever one you pick, the deliverable you are asking for is “GLB plus USDZ, scaled correctly, files under about 4 MB.” If a quote does not include both files at 1:1 real-world scale, it is not a product-page package.

What the host has to do

<model-viewer> reads the file from a URL, so the page and the files share infrastructure. Three practical notes:

1. Put the files somewhere fast. ACDN or, like us, a static host that serves the GLB with a proper Content-Type (model/gltf-binary). A misconfigured type renders a black box, not a model.
2. Respect the budget. Shopify’s partner guidance asks for a model near 4 MB with textures capped at 2048×2048. A heavy file loads late on a cellular connection and the shopper reads the poster, not the model.
3. Test the AR button on a real phone. Desktop browsers will not show it. Open the page on an iPhone and an Android before you call it done.

Where the modes come from

• iOS: AR Quick Look. This is why USDZ is non-negotiable.
• Android Chrome: WebXR / Scene Viewer, which uses the GLB.
• Desktop: plain WebGL viewer with camera controls; AR is simply absent.

So the single GLB + single USDZ pair covers every placement a shopper would use.

Shopify, WooCommerce, and the rest

Every major storefront accepts either a native 3D media slot or a 2D embed block where the <model-viewer> snippet goes. For Shopify specifically, both routes are covered in the add a 3D model to your Shopify product page walkthrough.

If your theme does not let you edit product templates, the fallback is a page-builder section or a small app that injects the snippet. The snippet is platform-neutral — the iframe line we use on our own homepage sandbox is the same one you would paste anywhere else.

The part people forget: the file is the product

A 3D viewer is only as good as the model it shows. The back of most AI-generated meshes is a best guess, labels warp, and the shopper never sees the angle you did not photograph. That is the gap between “we rendered a mesh” and “a shopper can judge the real thing.”

Managed options close it with an artist pass: likeness checked against the photo, textures rebuilt, geometry cut to the web budget. The result is a GLB you can trust on a phone over cellular — and the reason a managed service is priced differently from a raw generator.

Before you commit to a route

• The deliverable should say “GLB and USDZ, 1:1 scale.” GLB alone misses every iPhone AR session.
• The turnaround should be measured in hours for a finished storefront-ready model, not days of cleanup.
• You should own the files after delivery.
• If someone is selling you “AR for e-commerce” and has never mentioned USDZ, ask which iPhone they mean.

If you want to skip the generation half and get the model already finished and hosted, that is the service side of this — see the pricing or run the free pilot; the first model is free.