How to put an interactive 3D or AR design on to a Shopify website

shopify_vectary_3d_viewer_header

Vectary web embed is an easy way to input an interactive 3D element on your site or blog. The Vectary 3D/AR viewer works in a familiar way, with the generated code being simply copied and pasted into the web editor. This is the same process taken to embed a YouTube video. The automatically implemented ARkit means that users coming through the Safari browser, on iPhones or iPads running iOS12 or above, will be able to view your 3D content in augmented reality. Read more on our blog.

How to embed an interactive 3D/AR design to Shopify

  1. Import your 3D model to the Vectary editor or create your own model from scratch.
  2. Click on Embed tab and Generate code.
  3. Go to your Shopify themes, then go to Sections and Click on Add section. Some themes such as free Minimal theme allow adding Custom HTML section.
  4. Place the element where you need it on your site. Click on Edit custom HTML button and paste the generated embed code from Vectary editor.
  5. Preview the site, if you need to do some changes, just generate the code again and the viewer will automatically update.
  6. Publish your site.

Note: In Shopify, you can edit the HTML/CSS of the whole template. However, for this a little more advanced skills are required. To enter Code mode click on Theme actions - Edit code.

For AR experience Shopify also have their own solution 3D Warehouse.

Embed mode Vectary

How to make changes in your 3D web viewer

Say you want to change color, view or an entire shape of your 3D model. Vectary editor works like instant 3D/AR CMS for your web viewer:

  1. Open your 3D project on Vectary.
  2. Make changes.
  3. Click on Web Embed tab and click on Generate button again - there is no need to replace the code. The 3D viewer will be automatically updated on all of your sites.

Vectary 3D/AR Viewer example:

Open this site on iPhone with Safari or Android with Chrome to see it in augmented reality.

FAQ

How to get rid of the watermark?

Watermark on your web viewer means you are using a free version of Vectary or you run out of bandwidth for your plan. You can check your monthly bandwidth usage on your Vectary dashboard. 

Is it paid?

A limited watermarked version of the feature is for free so you can use it for client presentation and for feedback of your 3D design before you decide to buy a Premium package. With our paid plans you can get more bandwidth for the viewer - so you can be sure your visitors will see a version without the watermark. 

Why not just use USDZ export for AR view?

This is a great alternative to USDZ embeds as all your website visitors can get an interactive 3D experience, not just those with iPhone. AR view is now limited only to iPhones and iPads with iOS12, however, we are working on an implementation of AR experience for Android devices too. Stay tuned.