You have a 3D model of your product. Now you want shoppers to rotate it on the product page and, on a phone, place it in their own room with augmented reality. How you do that depends on your store platform. Below are the steps for Shopify, WooCommerce and a plain HTML website.

First: you need a good model

For the web the core format is GLB, and for AR on iPhone a USDZ file helps too (see GLB, USDZ and OBJ formats explained). On 3DView.ai you have two routes:

Shopify: native 3D support

Shopify accepts 3D models as product media, just like photos and videos. Modern themes built for Online Store 2.0 display them with a 3D viewer and, on supported phones, a "View in your space" AR button.

Option 1: upload the GLB to the product

  1. In the Shopify admin, open Products and pick the product.
  2. In the Media section, upload the GLB file the same way you would upload a photo.
  3. Order the media so the model sits near the start of the gallery, usually right after the main photo.
  4. Save and open the product page on desktop and on a phone.

File size limits and display behaviour depend on Shopify and on your theme and can change, so check Shopify's current documentation and your theme's docs. If the model does not appear, your theme may be an older one without 3D media support.

Option 2: embed code in a custom section

If you prefer the 3DView.ai viewer (hosted model, AR and the same look across every channel), copy the embed code and paste it into a Custom Liquid or custom HTML section in the theme editor. Section names vary from theme to theme.

WooCommerce: no native 3D viewer

WooCommerce does not ship with a 3D viewer. You have two paths:

  • Embed code (iframe or script): paste it into the product description using a Custom HTML block in the block editor, or the Text tab of the classic editor. No plugin required.
  • A 3D/AR plugin: several plugins add 3D models to the product gallery. Check compatibility with your WordPress and WooCommerce versions, when the plugin was last updated and which formats it accepts.

Embed code is the simplest route when the model is already hosted: one less plugin to maintain, and you update the model in a single place.

The 3DView.ai embed code

The e-commerce page shows ready-to-copy code for Shopify, WooCommerce and HTML. The flow is:

  1. Create the model by scanning or with AI.
  2. In your dashboard, choose the model and copy the iframe code or script snippet.
  3. Paste it into the product page in the place described above for your platform.
  4. Check on a phone that the model loads and the AR button works.

For a complete example of a product page with an embedded viewer, see the product page demo.

A plain HTML website

On a hand-built site or another CMS you have the same two options: an iframe copied from your dashboard, or the open-source <model-viewer> web component if you host the files yourself. A minimal model-viewer example looks like this:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="product.glb" ios-src="product.usdz" poster="product.webp"
  alt="3D model of the product" camera-controls ar loading="lazy"></model-viewer>

The ios-src attribute points to the USDZ file used for AR on iPhone, and poster is the image shown until the model loads.

Tips that make a difference

  • Poster image: show a photo or a render of the model while it loads, so the page never looks empty.
  • Lazy loading: the model should not delay the title, price and buy button. Load it when it scrolls into view or on interaction.
  • Keep the photo gallery: 3D complements photos; it does not replace them. Shoppers, search engines and ad platforms still need images.
  • Mobile performance: test on an average phone over mobile data. If the model is heavy, reduce textures and polygons.
  • Real-world scale: for AR the model must be at the correct scale, or shoppers will see the product larger or smaller than it really is.

Common mistakes

  • An iframe without dimensions: without a set height the viewer can collapse into a thin strip. Give it an explicit height and 100% width.
  • Code pasted into the visual editor: some editors turn code into plain text. Use the custom HTML block or the code editing mode.
  • GLB only, no USDZ: AR on iPhone needs USDZ, or a viewer that provides it automatically.
  • Not retesting after theme updates: after a theme or plugin update, check the product page again.

For more on where 3D adds value, read 3D product visualization for your online store, and for AR see augmented reality for online stores. Hosting is included with every model; details are on the Pricing page.