Interactive 3D models let shoppers rotate a product, zoom in and, on supported phones, place it in their room with AR. Here is how to add them to Shopify and WooCommerce without slowing the store down.

🛒 What 3D adds to a product page

  • ✅ Rotation: the product seen from every angle
  • ✅ Zoom on textures, seams and finishes
  • ✅ AR: the product placed in the customer's own space (furniture, decor)
  • ✅ Fewer surprises about size and shape before buying

📦 Shopify: built-in support

Shopify accepts 3D models as product media (GLB, plus USDZ for iOS). The steps:

  1. Get the model: generate it on 3DView.ai from text or a photo, or buy one in the shop.
  2. Download the GLB and check its size (see the performance section below).
  3. Upload it in Shopify admin: open the product and add the file in the Media section.
  4. Check the product page: themes that support 3D media show the model in the gallery and, on supported phones, a button to view it in your space. If yours does not, check the theme's documentation.

🔌 WooCommerce: plugin or a few lines of HTML

WooCommerce has no built-in 3D viewer. You can install a plugin from the WordPress directory that displays GLB files (many are built on Google's model-viewer; check reviews and compatibility with your theme), or add the viewer yourself:

<model-viewer
  src="https://your-cdn.com/model.glb"
  alt="Product name"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
  style="width: 100%; height: 500px;"
></model-viewer>

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>

A model hosted on 3DView.ai can also be embedded with an iframe. Our installation guide shows the code for Shopify, WordPress and Wix.

⚡ Performance

  • 📊 File size: aim for a few megabytes per product.
  • 🔺 Polygons: reduce dense AI meshes in Blender (Decimate modifier).
  • 🖼️ Textures: resize them and store them as JPEG or WebP.
  • ⚙️ Compression: Draco can shrink the geometry a lot; check that your viewer supports it.

Step-by-step details are in our web optimization guide.

📱 Test on real devices

  • 📱 iPhone/iPad: Safari, AR Quick Look
  • 🤖 Android: Chrome, the AR button opens Google's Scene Viewer
  • 💻 Desktop: check that rotating with the mouse is smooth

🚀 Get started

Find 3D models for your products → · Or generate custom models with AI →

📚 More