How to embed AR USDZ files to your e-commerce website for iOS 12

Create a USDZ file within seconds

Create AR files with Vectary
embed AR usdz file to website ios12 header

Reading and shopping online is going to be a new experience now that Apple iOS 12 devices support AR files. Thanks to the AR Quick Look embedded in iOS 12, AR content can be viewed and shared on Safari, Messages, Mail and Files. Learn how to embed them on your website. 

Vectary is an online 3D design tool that enables you to create AR content and export it as USDZ or convert OBJ, STL and glTF files. You don't need any coding skills to be able to create USDZ files. 

Learn how to add AR content to a website: 

  • WordPress website
  • WIX website
  • Shopify store / website 
  • Squarespace website
  • Webflow site 

How to embed AR USDZ files to any website 

(visible only for devices running iOS 12)

  1. Export or convert AR USDZ files with Vectary.
  2. Upload the image and the USDZ file to your server or media library.
  3. Add a link to the USDZ file and the image tag inside the link (see the code below). Your link must contain rel="ar". Apple will automatically overlay the AR badge on your image. 
  4. Save and preview. 


Code:
<a href="http://example.com/file.usdz" rel="ar">

<img src="http://example.com/image.jpg">

</a>

If you are having trouble, get help from our community on Spectrum. We hang out there a lot ;) 

How to add AR files to a Shopify store

This is a much easier feat since Shopify does a lot of the heavy lifting for you. If you have a Shopify store, make sure you install the 3D Warehouse app first.

  1. Open Vectary and export or convert your 3D model to USDZ.
  2. Add 3D models to the 3D Warehouse app.
  3. Edit your theme to enable AR Quick Look. 
  4. Add the AR badge to your products.

Read the in-depth manual on Shopify's AR help page

If you are having trouble with this, get help from our community on Spectrum.

How to add AR files to a WIX website

  1. Open Vectary and export your 3D model as USDZ file.
  2. Follow the link from the email you received from Vectary, and copy the embed code of the 3D model.
  3. Add an HTML box to your website in WIX.
  4. Paste the HTML code in the box.

The image of the AR object that will appear on your website will be a render of your 3D object on the scene. If you want to change the position or zoom on the object in the image, rotate it/zoom in Vectary before you export the file.  

If you don't like the rendered image, you can upload your own image. Use the method described at the top of this post "How to embed AR USDZ files to any website". 

If you need more help, visit our community on Spectrum. 

How to add AR files to the Squarespace website

1. Open Vectary and export your 3D model as a USDZ file.

2. Follow the link from the email you received from Vectary, and copy the embed code of the 3D model.

3. Add a code block to your page design and paste the code. Adjust the width and height in the code.

The iframe embed option is part of the paid Business plan only - this might be subject to change. 

The image of the AR object that will appear on your website will be a render of your 3D object on the scene. If you want to change the position or zoom on the object in the image, rotate it/zoom in Vectary before you export the file.

If you don't like the rendered image, you can upload your own image. Use the method described at the top of this post "How to embed AR USDZ files to any website". 

Visit our community on Spectrum if you need more help on this.

How to add AR files to a Webflow website 

1. Open Vectary and export your 3D model as a USDZ file.

2. Follow the link from the email you received from Vectary, and copy the embed code of the 3D model.

3. Add an embed component to your page design and paste the embed code. 

The embed component is part of the paid Business plan only - this might be subject to change. 

The image of the AR object that will appear on your website will be a render of your 3D object on the scene. If you want to change the position or zoom on the object in the image, rotate it/zoom in Vectary before you export the file. If you don't like the rendered image, you can upload your own image. Use the method described at the top of this post "How to embed AR USDZ files to any website". 

Issues with the USDZ file? The USDZ file does not show up in the AR Quick Look?

Try the following:

  • Downscale the resolution of the model's textures while exporting.
  • Simplify the geometry and reduce materials count.
  • Make sure you have max 100k polygons.

Still not working? Submit your question to our community forum.