How to Add an Augmented Reality (AR) Experience to your eCommerce Store

Even before COVID-19 was a thing, augment reality (AR) has been redefining the retail industry and online shopping. Retailers are using AR technology to improve and reimagine the digital shopping experience with “try-before-you-buy” options, virtual store fronts, 3D imaging of their merchandise, and more!

“Shopify recently released new data that interactions with products having AR content showed a 94% higher conversion rate than products without AR.”

The popularity of AR integration, has resulted in more and more eCommerce sites adding 3D content to their online stores to increase sales and improve conversion! echoAR, one of the newest members of the Unity Verified Solutions Partners program, offers a 3D-first cloud platform which allows even non-technical users to integrate, manage & deliver 3D content in AR. By using echoAR, retailers who rely eCommerce platforms such Shopify or Wix, can harness the power of AR to make their online store more engaging and increase their sales.

Here’s is a step-by-step guide to how you can easily add 3D content to your online store with echoAR’s eCommerce web integrations:

🔑 Get an API key

• Register for FREE at echoAR and get your own API key (also check your inbox for an automatic email with your key).

• Upon registration you will be redirected to the console (you can also use the link in the registration email to get back to the console anytime.) Make sure your key is set in the header or type and load it yourself!

• You did it! 🎉

🎲 Add a 3D model

• You can add 3D models of your merchandise by clicking the “Add To Cloud” button.

• Upload your 3D model, then “Next”, “Next” again, and then “Done” (wait for the model to upload and appear in the Content page!)

• You can create your own 3D models with Tinkercad, Blender, Fusion 360, MagicaVoxel, Maya, Maya LT, Maxon Cinema4D or use 3D scanning apps.

• Use can also use the search bar to find free 3D models that you can instantly add to the console (you can also find additional free 3D models on​ Google Poly,​ Sketchfab, ​TurboSquid, ​Sketchup’s 3D Warehouse, ​Clara.io, and ​Archive3D).

• You did it! 🎉

🛒 Shopify + echoAR

• You can easily integrate 3D content from echoAR to your store on Shopify!

• Go to your store admin page on Shopify.

• Adjust the theme you are using by going to the on the left-side menu, clicking Online Store and then clicking Themes.

• Then click the Actions button of your current theme and choose Edit code.

• Choose the page to which you want to add an iframe. For example, to add echoAR to the product page edit product-template.liquid .

• Find the code area of the page where you wish to add echoAR. For example, under the product image

• Add the following code:
  

    {% assign metafiled = product.metafields.echoAR %}
    {% assign key = 'shortURL' %}
    <iframe src="{{ metafiled.shortURL }}""></iframe>

• Now add the Advanced Custom Fields app to your store (NOTE: Any other app that allows you to add custom fields would work too).

• Open the Advanced Custom Fields app and add the following data to your products:

Where https://go.echoAR.xyz/ABCD is the short link to your 3D content which you can obtain through the Share Button in the Content Card (Note: Use a different link for each of your products).

• Now back at your store’s product page the result should look something like:

• You did it! 🎉

🌐 Wix + echoAR

You can easily integrate 3D content from echoAR to your store your Wix website!

• Go to your site dashboard on Wix and under Site Actions click on Edit Site.

• On your website go to the page to which you want to add 3D content managed in echoAR.

• Click the + button in the left sidebar to add an object, choose Embed, and then under Custom Embeds click Embed a Widget.

• A new website element will appear. Click it and then click on the Enter Code button.

• The HTML Settings window will open. Choose the Code option.

• Add the following code:

<iframe src="https://go.echoAR.xyz/ABCD"
width="100%"
height="99%"
scrolling="no"
frameBorder="0"
</iframe>

• Where https://go.echoAR.xyz/ABCD is the short link to your 3D content which you can obtain through the Share Button in the Content Card.

• Click Apply.

• Adjust the widget size according to your needs in your website (Note: You can also adjust the iframe settings, such as size and scrolling option, by editing the code so it will fit better in your widget window.)

• You did it! 🎉

❔ Troubleshooting

Troubleshoot issues here. You can check out our full documentation for other useful tutorials here and also reach out to our support team here.

---

echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.