How to Add 3D Models to Shopify Products (and Keep Them Fast)

To add a 3D model to a Shopify product, open the product in your Shopify admin and upload a GLB or USDZ file (up to 500 MB) in the Media section. Shopify converts it so a GLB and a USDZ version both exist, and themes that support 3D show it in an interactive viewer with a View in your space AR button on supported phones.

Uploading is the easy part. Keeping the model fast is harder: a 40 MB export straight out of a 3D tool makes shoppers wait and AR slow to open. This guide covers Shopify's actual requirements, how the viewer and AR work, and how to get a GLB down to a sensible size before you upload it.

Shopify 3D model requirements

These are the rules from Shopify's product media types and add media help pages:

If your model is a .gltf file with a separate .bin and texture folder, pack it into one GLB first. Our free glTF to GLB converter does that in the browser. For background on the two formats, see glTF vs GLB.

How to add a 3D model to a Shopify product

1. From your Shopify admin, go to Products.
2. Click the product you want to edit.
3. In the Media section, click Upload new and select your .glb or .usdz file, or drag and drop it into the section.
4. Wait for Shopify to process the model, then open the product page on your storefront to check it.

To change how the model is presented, click the 3D icon on the model in the Media section and choose Edit file. You can pick an environment preset, adjust exposure, set a background color (or a transparent background), and set the starting camera rotation and zoom.

In the Shopify mobile app you add media with the + button in the product's Media section. On iOS, the app also has a 3D scanner option for scanning a product directly.

How Shopify displays 3D models and AR

Themes render 3D media with the model_viewer_tag Liquid filter. It outputs Google's <model-viewer> web component, with the media's preview image as the poster, the media's alt text, and camera controls turned on:

{% for media in product.media %}
  {% if media.media_type == 'model' %}
    {{ media | model_viewer_tag }}
  {% endif %}
{% endfor %}

The View in your space button comes from Shopify's shopify-xr library. It opens AR Quick Look in Safari on iOS (using the USDZ) and Scene Viewer on Android (using the GLB). Shopify's media UX guidelines say to show the button only on AR-capable devices, which means iOS 13 or later and Android 9 or later. Shopify's own themes support 3D media out of the box (Dawn, for example, includes the viewer and the button), so there is nothing to code. In a custom theme, the button is an element with data-shopify-xr attributes, as shown in Shopify's support product media tutorial.

When to use a 3D app instead

The built-in viewer covers a product with one or a few static models. Third-party apps in the Shopify App Store are worth a look when you need what the native media can't do: a different model per variant, a configurator (colors, materials, parts), hotspots and annotations, or a custom viewer. Apps load their own scripts and host files their own way, so check which formats and compression they accept, and measure the page speed impact before committing.

Why 3D model file size matters on product pages

• Mobile download time. A 20 MB model takes about 16 seconds to download on a steady 10 Mbps phone connection, before it can render.
• Page speed. Dawn shows the poster image and loads the model only when the shopper taps it, so the model doesn't slow the first paint. If your theme or an app loads the model right away, it competes with your product photos and scripts and can hurt Largest Contentful Paint.
• AR launch time. Tapping View in your space hands the model to AR Quick Look or Scene Viewer, which has to load it before anything appears. Shoppers watch a loading screen until it does.
• Control. Above 15 MB, Shopify optimizes the file itself. Doing it yourself keeps you in charge of which details and texture resolutions survive.

Sensible targets for a Shopify GLB

Shopify doesn't publish polycount or texture limits for merchants. These targets come from Shopify's 3D modeling checklist for partners and Google's Scene Viewer requirements (the Android AR viewer Shopify launches). Treat them as guidance:

How to shrink a GLB for Shopify

1. Check what makes the file big

Run the model through our free glTF validator. It reports errors, vertex and triangle counts, draw calls and the extensions in use, so you can see whether the weight is in the geometry or in the textures.

2. Fix textures first

On product models, textures are often most of the file. A 4096 × 4096 texture has four times the pixels of a 2048 × 2048 one, and a PBR material usually has three or four of them (base color, normal, a combined occlusion/roughness/metalness map, sometimes emissive). Resize to 2048 px (1024 px is often enough for small, simple items), re-encode as JPEG, and keep PNG only for textures with an alpha channel.

Skip WebP and AVIF textures for Shopify. Shopify doesn't document support for them inside an uploaded GLB, and Scene Viewer lists only two supported glTF extensions (KHR_materials_unlit and KHR_texture_transform).

3. Clean up the geometry

CAD exports, 3D scans and high-poly sculpts can carry millions of triangles and duplicated data. Removing duplicate and unused vertices, merging meshes that share a material, and simplifying toward your triangle target can cut the geometry substantially. Compare before and after at the size shoppers will see it. If you work in Blender, fixing it before export is often easiest: see how to reduce GLB file size in Blender.

4. Test Draco before you rely on it

Draco compression often shrinks geometry by 80% or more, and <model-viewer> can decode it. But the viewer is only half the story on Shopify.

Our GLB compressor does each of these steps in one pass: texture resizing and JPEG re-encoding with a quality setting, duplicate and unused vertex removal, simplification, mesh merging, and Draco as an option you can turn off. Save a Shopify preset (Draco off, JPEG textures, 2048 px), run a whole catalog through it with batch uploads, and every output is checked with the Khronos glTF validator. For a fuller walkthrough of every technique, read how to reduce GLB file size.

Checklist before you publish

• The file is a single .glb and passes the glTF validator without errors.
• The model is at real-world scale, with its origin at the base of the product.
• File size is around 4 MB, and well under 15 MB.
• Textures are 2048 px or smaller and JPEG where possible.
• The media has alt text (the viewer uses it).
• You opened the product page on desktop, then tested View in your space on an iPhone and an Android phone.

FAQ

What 3D file formats does Shopify support?

Shopify accepts GLB and USDZ files up to 500 MB as product media. Whichever you upload, Shopify converts it so both a GLB and a USDZ version are available for Android and iOS.

Do I need a separate USDZ file for iPhone AR?

No. Upload a GLB and Shopify generates the USDZ used by AR Quick Look on iOS. Still open the product in AR on a real iPhone before publishing to confirm the converted model looks right.

What is the maximum 3D model size on Shopify?

The upload limit is 500 MB, but files over 15 MB are automatically optimized by Shopify. For fast product pages, aim for about 4 MB, which is what Shopify's own modeling checklist suggests.

Can I upload a .gltf file to Shopify?

No, only GLB and USDZ. Convert a .gltf with its .bin and textures into one GLB with the free glTF to GLB converter, then upload that.

Why doesn't the View in your space button show up?

The button only appears on AR-capable phones (iOS 13+ or Android 9+) and in themes that support 3D media. If it is missing on a supported phone, update your theme or ask its developer, and check that the model finished processing in the admin.