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 embeded 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. 

How to embed AR USDZ files to your website (visible for iOS 12 only)

  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>

How to add AR files to your 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, install the 3D Warehouse app first.

  1. Open Vectary and export or convert your 3D model to USDZ / GLTF. 
  2. Add 3D models to the 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

Issues with USDZ file? USDZ file does not show up in AR Quick look?

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

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