How to add AR to Shopify and WooCommerce product pages
In short: To add AR to a product page you need a 3D model of the product as GLB (Android and web) and USDZ (iPhone), at the real size of the product. Shopify supports 3D models as product media; on WooCommerce or any other site you embed the free model-viewer component with both files.
Step 1: make the 3D files
- Flat products (art prints, posters, canvases, rugs, wallpaper samples): upload the product photo to jpgtousdz and enter the real width or height. You get GLB and USDZ at that size.
- Objects (vases, chairs, shoes): record a slow video around the product and use video to 3D, entering the real height.
- Keep each file small (textures 2048 px or less) so the product page stays fast.
Step 2a: Shopify
- In Shopify admin open the product, then Media, and upload the GLB file as a 3D model.
- Shopify shows it with its 3D viewer, and themes that support it add a View in your space button on phones.
- Check the product on an iPhone and an Android phone. Shopify's help center lists current file size limits and supported themes.
Step 2b: WooCommerce, WordPress or any website
Upload the GLB and USDZ to your media library, then add a Custom HTML block to the product description with model-viewer:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="50 x 70 cm print"></model-viewer>Step 2c: the no-code option
If you cannot edit the page, add a button or QR code that links to the jpgtousdz AR viewer link of the product. It opens in AR on iPhone and Android with no app.
Checklist before going live
| Check | Why |
|---|---|
| Real size is correct | Shoppers judge the size from AR; a wrong scale causes returns. |
| Placement is right (wall or floor) | Art goes on walls, furniture on the floor. |
| Works on iPhone and Android | Each uses a different file. |
| Alt text set | Accessibility and search. |
Try it now
Turn a photo into a real-size USDZ and GLB in a few seconds, or a video into a 3D model. Your first photo conversion is free.
Product Photo ARFAQ
Does Shopify need USDZ?
Upload the GLB to Shopify; it handles the display. Keep a USDZ too in case your theme or another channel needs it.
Does WooCommerce support AR natively?
No. Use a plugin or embed model-viewer with GLB and USDZ files as shown above.
How much does it cost?
model-viewer is free. A photo to AR conversion on jpgtousdz is free the first time, then part of a plan. The API costs $0.15 per photo and $1.50 per video 3D model.