How to add a 3D model to your Shopify product page

Quick answer: How do you add a 3D model to a Shopify product page? Two paths, and the difference is your theme:

1. Shopify’s built-in 3D media. Upload a GLB file into the product’s Media section. Shopify converts it so iPhones get a USDZ for AR, serves the viewer, and renders it on any theme built for Online Store 2.0. Free, native, no code.
2. An iframe embed. Paste one line of HTML into a custom section in the theme editor. The hosted viewer (model plus AR button) loads inside the frame. Works on old themes, works the same outside Shopify, and nothing about your theme’s media handling changes.

Either way you need a GLB file of the product, ideally kept near 4 MB (Shopify’s own partner guidance for delivery), and a quick test on an iPhone and an Android before you call it done.

Below: both paths step by step, how AR actually opens on each platform, and the five-minute test that catches every common failure.

Before you start: get a file worth uploading

If you already have a model, skip to the path you want. If not, three ways to get one:

• Shopify’s scanner. The Shopify mobile app can scan a product into 3D on compatible iPhones. Convenient, quality varies with the object.
• DIY with an AI generator. Upload photos, download the GLB. Cheapest route; expect to fix textures and likeness yourself.
• A modeler or managed service. Finished quality without touching 3D software. Our image to 3D model guide breaks down what each route costs.

Whatever produced the file, the requirements are the same: GLB (and a USDZ if you are hosting it yourself), textures sized for phones, and a product likeness you would stake a sale on.

Path A: Shopify’s built-in 3D product media

This is the default route for any current theme, and it costs nothing beyond the model itself.

1. Confirm your theme supports 3D. All Online Store 2.0 themes built by Shopify render 3D models, as does the Horizon family. On an older or heavily customized theme, update it first or use Path B. Shopify’s docs list what counts as supported (Shopify, product media types).

2. Upload the GLB to the product. Products → open the product → Media section → Upload new → select the .glb file. It sits alongside your photos as a media item.

3. Let Shopify convert it. Shopify generates the USDZ for iOS automatically and keeps both formats available for Android and iOS. Files over 15 MB get optimized on the way in, though shipping a lightweight file yourself beats waiting on automatic optimization.

4. Arrange the media. Put the 3D model where you want it in the gallery order. Two limits to know: a product holds up to 250 media items total (photos, video, 3D together), and 3D models cannot be attached to individual variants.

5. Save, then open the product page. The viewer appears in place of a static image where your theme renders 3D media.

AR setup on the built-in path

Nothing extra to configure. When the model and theme are in place, supported devices show the AR launch: iPhones open the USDZ through Quick Look, Androids hand the GLB to Scene Viewer. If the AR control is missing, the cause is almost always the theme or a conversion that has not finished, not a setting you forgot.

Path B: iframe embed, on any theme

Use this when your theme is old, when you want the same viewer off Shopify too (WooCommerce, a landing page, a marketplace microsite), or when you want the viewer’s own AR and engagement behavior rather than the theme’s.

1. Publish the model to a hosted viewer. In Peka AR that is the project’s embed URL, produced automatically when a model reaches Published; the how-it-works section shows the full pipeline.

2. Add a custom HTML slot. In the theme editor, add a Custom Liquid section to the product template (available on Online Store 2.0 themes), or ask a Shopify Partner to add it on an older theme.

3. Paste the iframe. It looks like this:

<iframe
  src="https://app.pekaar.tech/embed/YOUR_PROJECT_ID"
  title="Interactive 3D product view"
  width="100%"
  height="480"
  loading="lazy"
  style="border: 0; max-width: 720px"
  allow="fullscreen; xr-spatial-tracking"
></iframe>

4. Test it the same way as Path A. Desktop rotation, mobile, and AR on both platforms.

The embed travels: the same line works on any platform that accepts HTML, which is the practical answer to vendor lock-in.

How AR opens on each phone (so you know what “broken” looks like)

• iPhone / iPad: the USDZ opens in Quick Look, Apple’s built-in AR viewer. No app install, works in Safari and Chrome on iOS.
• Android: the GLB opens in Scene Viewer, or the page can run WebXR directly in Chrome. Scene Viewer is the fallback path.

The model’s scale is what makes AR believable: a chair should land at chair size on the floor, not tabletop size. Test standing up, in a room with something of known size nearby.

The five-minute test

Run this before publishing every model:

1. Desktop, first load. Viewer renders without a console error, model appears within a couple of seconds on a normal connection.
2. Rotate and zoom. Drag works, and on a mid-range phone the frame rate stays smooth.
3. iPhone AR. Tap the AR control, place the model, walk around it. Scale looks right.
4. Android AR. Same test. If it fails here but works on iPhone, the USDZ/GLB pairing is the suspect.
5. Page weight. Product page still loads fast; if the model takes longer than the photos to appear, the file is too heavy.

When something looks wrong

Symptom	Likely cause	Fix
Model never appears	Theme does not render 3D media	Update the theme, or use the iframe path
AR control missing	Theme hides it, or conversion still running	Check theme docs; re-save the product media
Blurry textures	Oversized texture compressed too far	Cap mobile textures at 2048×2048, model near 4 MB
Page feels slow	Untouched heavy export	Re-export compressed, or let Shopify optimize >15 MB files
Viewer shows, AR does not	USDZ missing on self-hosted setup	Provide both GLB and USDZ (Shopify does this automatically)

Shopify’s partner checklist covers the texture and logo specifics in depth (Shopify, creating 3D models).

Getting models onto products without the hobby

Between scanner output and raw AI drafts, the gap is always the same four fixes: geometry, textures, likeness, and file weight. If you would rather hand those to someone, that is the Artist tier: photos in, finished GLB and USDZ out, delivered in hours, embedded with the one line above.