1. Home
  2. Blog
  3. 3D product visualization

Shopify 3D Model Viewer: Add 3D and AR to Product Pages

Shopify already ships a 3D viewer and AR. Here is the step-by-step: the file you need, the limits that matter, the theme check, and the point where native stops being enough.

ASFARI Lab6 min readOctober 2026

A glass phone on an ink-black surface projecting a chrome product object into the room as an AR preview

The Shopify 3D model viewer is built in: upload a GLB file as product media, and any theme that supports 3D shows it as a rotatable model, with an AR button that opens AR Quick Look on iPhone and Scene Viewer on Android. You do not need an app for a basic 3D product. You do need a well-made, lightweight GLB and a compatible theme.

What Shopify gives you out of the box

According to Shopify's product media documentation:

  • Formats: GLB or USDZ. Shopify converts the upload so both versions exist, one for Android and one for iOS.
  • Maximum size: up to 500 MB per model.
  • Automatic optimization: files over 15 MB are optimized automatically; files under 15 MB are left untouched.
  • Themes: all Online Store 2.0 themes built by Shopify and the Horizon family support 3D. Third-party themes need a version that does.

Under the hood, themes render models with Google's model-viewer component, and AR runs through Shopify's XR library, which supports AR Quick Look in iOS Safari and Scene Viewer on Android.

How to add a Shopify 3D model viewer, step by step

1. Check your theme

On a current Shopify-built theme, you are covered. On an older or custom theme, a developer can add the viewer with the model_viewer_tag Liquid filter and the AR button with the shopify-xr feature, as shown in the theme developer docs.

2. Get a GLB that meets Shopify's partner checklist

The 500 MB ceiling is a hard limit, not a target. Shopify's own 3D model standards for partners are much stricter:

Spec Shopify partner guidance
File GLB, textures embedded
Total size About 4 MB
Textures Optimized JPG where possible, no larger than 2048 x 2048 px for mobile web
Maps Base color, normal, and one packed occlusion/roughness/metalness map
Materials One material unless there is a reason for more
Scale Real-world units (their example: a table modeled at 73 cm high)
Origin Centered at the product's base
Geometry Sealed edges, no holes visible in AR
Chart of a 3D asset budget for the web: target file size, polygon count and texture resolution for hero, product viewer and AR models
A practical 3D asset budget for the web. Small files load before shoppers lose interest.

Scale matters more than people expect: a sofa modeled in the wrong units appears doll-sized in AR.

3. Preview before you upload

Load the GLB into the model-viewer editor or any glTF viewer. Check colors against the physical sample, that it faces forward on load, and that nothing is missing from the back.

4. Upload it as product media

In Shopify admin, open the product, click to add media, and upload the GLB as you would an image. Drag it into position in the media list. Our opinion: keep a photo first for the thumbnail and search snippets, and put the 3D model second, where shoppers who want detail go looking.

5. Test AR on real phones

On iPhone Safari, the AR button should open Quick Look at true size; on Android, Scene Viewer. Test in a real room, on at least one older phone. If the button does not appear, the usual causes are a theme that predates 3D support or a customized product template that dropped the AR block.

What a Shopify 3D model costs

Shopify's 2020 guide put simple product models at $40–200 and complex ones above $1,000. That article is dated; more recent developer estimates put a production-ready, PBR-textured model at roughly $150–1,500. Colorways usually change materials, not geometry, so one base model can serve several variants.

When native Shopify 3D is enough, and when to go custom

Need Native viewer Custom build
Rotate, zoom, view in AR Yes Yes
Color or material switching tied to variants Limited Yes
Rules, live pricing, multi-part products No Yes
Branded lighting, camera moves, animated reveals No Yes
Scroll-driven 3D on a landing page No Yes

If shoppers just need to inspect a product, native is the right call. If they need to build one, look at 3D product configurator cost. For 3D outside Shopify, including Sketchfab embeds and custom Three.js, see how to put an interactive 3D model on your website.

On results: Shopify's 2022 changelog says merchants who add 3D content see a 94% conversion lift on average. That is Shopify's own merchant data, not a controlled test; we look at what it does and does not prove in 3D configurator conversion statistics.

Questions people ask

Does Shopify support 3D models?

Yes. Shopify accepts GLB and USDZ product media up to 500 MB, and its Online Store 2.0 and Horizon themes display them with AR built in.

What file format does Shopify use for 3D models?

Upload GLB. Shopify creates the USDZ version Apple devices need for AR automatically.

Why is the AR button not showing on my Shopify product page?

Usually the theme is too old to support 3D, or a custom template removed the AR button. Test on a phone, since AR does not launch from desktop.

Do I need a Shopify app for 3D products?

Not for a basic viewer and AR. Apps or custom work come in when you need configurators, variant-linked materials or branded scenes.

Sources

LET’S OPEN A NEW TAB

What are you
thinking?

What’s on your mind?

This prepares an email to lab@asfari.studio. You review and send it from your email app.