Free · No Shopify App Required

How to add AR to
Shopify product pages

Let customers see your products at real scale in their own room before they buy. No app subscription, no developer, no code beyond one copy-paste. Takes about ten minutes.

Get Your AR Embed Free → Jump to Steps
Works with every Shopify theme · Free for 3 products
This is what sits on your product page
Customers rotate it, then tap the AR icon to place it in their room.
Try It Free →

Why AR belongs on your product pages

Online shoppers can read every spec and still get the size wrong. AR removes the guesswork by putting the product in the room before the order is placed.

📉

Fewer returns

Most size-related returns happen because the customer misjudged scale from a photograph. AR shows true dimensions in context.

🛒

Higher confidence

A shopper who has placed the item in their own space is far closer to a decision than one still scrolling through photos.

Longer engagement

Interactive 3D holds attention longer than a static gallery, which helps on product pages where hesitation kills conversions.

Step by step: adding AR to Shopify

You need one 3D model per product. Everything else is copy-paste.

1

Get a 3D model of your product

You have three realistic options depending on budget and volume:

Scan it yourself (free). Apps like Luma AI let you walk around a product for thirty seconds and download a GLB file. Works well for furniture, bags, shoes and packaged goods.

Convert existing CAD (cheap). If your product was designed in SolidWorks, Fusion 360 or Rhino, you already have the geometry. Export to GLB or have a freelancer clean it up.

Commission a 3D artist ($50–$300). Highest quality and fully optimised. Worth it for hero products you will sell for years.

2

Upload the model to ARView

Drag the .glb file onto arview.space. Within a few seconds you get an AR link, a downloadable QR code and an embed snippet. No account needed for your first upload.

3

Copy the embed code

Open the model in your dashboard and click Embed. You get a snippet that looks like this:

<iframe src="https://arview.space/embed.php?id=YOUR_MODEL_ID" width="100%" height="480" frameborder="0" allow="xr-spatial-tracking"></iframe>

The allow="xr-spatial-tracking" attribute matters — without it some browsers block the AR permission.

4

Paste it into your Shopify theme

In your Shopify admin go to Online Store → Themes → ⋯ → Edit code.

Open sections/main-product.liquid (on older themes this may be product-template.liquid).

Find the product description block and paste the iframe just above or below it. Save.

Prefer not to touch theme code? Paste the same snippet directly into the product description field using the HTML editor. It works, though it only applies to that one product.

5

Make it dynamic for multiple products

Hard-coding one model ID means every product shows the same item. To make it per-product, add a metafield.

Go to Settings → Custom data → Products → Add definition. Name it AR Model ID, namespace custom, type single-line text.

Then use this in your theme instead:

{% if product.metafields.custom.ar_model_id %}
  <iframe src="https://arview.space/embed.php?id={{ product.metafields.custom.ar_model_id }}"
    width="100%" height="480" frameborder="0" allow="xr-spatial-tracking"></iframe>
{% endif %}

Now paste each product's model ID into its metafield. Products without one simply skip the block.

6

Test it on a real phone

Open the product page on an iPhone and an Android device. Tap the AR icon, point at the floor, and confirm the model appears at the right size. Desktop shows the rotatable 3D viewer instead, which is expected.

Shopify AR options compared

ApproachCostSetupQR codesAnalytics
ARView embedFree / $5 mo10 min, copy-paste
Shopify native 3DIncludedPer-product upload
Dedicated AR apps$20–$100 moApp installVaries
Custom development$2,000+Weeks

App pricing varies by vendor and plan. Check current listings on the Shopify App Store.

Getting the model right

Technical limits that matter

File size under 10MB. Shoppers are often on mobile data. Anything heavier and they leave before it loads.

Under 100,000 triangles. Mid-range Android phones struggle above this.

Textures at 2048×2048 or smaller. Larger textures rarely improve the AR experience and multiply file size.

Common mistakes

Wrong scale. Export in metres. A model built in centimetres appears a hundred times too large in AR.

Origin point off-centre. Place the origin at the base centre so the model sits flat on the floor.

Missing the allow attribute. Without xr-spatial-tracking the AR button silently fails in some browsers.

Frequently asked questions

Do I need a Shopify app for AR?
No. The embed is a plain iframe, so it works on any Shopify plan and any theme without installing an app or paying an app subscription.
Will this slow down my product pages?
The iframe loads lazily and the 3D model only downloads when the viewer comes into view. Keep models under 10MB and the impact on page speed is minimal.
Does it work on Shopify Basic?
Yes. Theme code editing and product metafields are available on all Shopify plans including Basic.
What if a customer is on desktop?
They see an interactive 3D viewer they can rotate and zoom. The AR placement button only appears on AR-capable mobile devices, which is the correct behaviour.
How many products can I add AR to?
Three on the free plan. Pro is five dollars a month for unlimited products with permanent hosting and no watermark.
Can I track how many people use the AR view?
Yes. Each model records view counts in your ARView dashboard, and you can see which products get the most AR engagement.

Add AR to your first product free

Upload a 3D model, copy the embed, paste it into your theme. Ten minutes from start to a working AR button.

Start Free →