How to Add an Augmented Reality (AR) Experience to your eCommerce Store
Tags: tutorial, programming, augmentedreality, development
Published: 2021-05-17 19:15:44

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9hkiy7lag723foeboah.png)

Even before COVID-19 was a thing, augment reality (AR) has been redefining the [retail industry](https://medium.com/echoar/augmented-reality-virtual-reality-fashion-try-before-you-buy-fcd281ef6d4b) and [online shopping](https://medium.com/echoar/how-augmented-reality-is-redefining-online-shopping-and-my-own-shopping-experience-125fa42e921c). 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](https://hbr.org/2020/10/how-ar-is-redefining-retail-in-the-pandemic) 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](https://www.echoar.xyz/), 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](https://console.echoar.xyz/#/auth/register) and get your own API key (also check your inbox for an automatic email with your key).

![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1621277293083/PATn_rst7.gif)

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

![2.5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621277445568/sXASpHieJ.png)

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

![3.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1621277389453/2I-f_Ybgp.gif)

* You can create your own 3D models with [Tinkercad](https://www.tinkercad.com/), [Blender](https://www.blender.org/), [Fusion 360](https://www.autodesk.com/products/fusion-360/overview), [MagicaVoxel](https://ephtracy.github.io/), [Maya](https://www.autodesk.com/products/maya-lt/overview), [Maya LT](https://www.autodesk.com/products/maya-lt/overview), [Maxon Cinema4D](https://www.maxon.net/en-us/) or use  [3D scanning apps](https://docs.echoar.xyz/3d-scanning/3d-capture-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](https://poly.google.com/),​ [Sketchfab](https://sketchfab.com/), ​[TurboSquid](https://www.turbosquid.com/), ​[Sketchup’s 3D Warehouse](https://3dwarehouse.sketchup.com/), ​[Clara.io](https://clara.io/), and ​[Archive3D](http://archive3d.net/)).

* **You did it!** 🎉


![4.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621277618783/st6kdzQd9.jpeg)

# 🛒 Shopify + echoAR

* You can easily integrate 3D content from echoAR to your store on [Shopify](https://www.shopify.com/)!

* Go to your store admin page on [Shopify](https://www.shopify.com/).

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


![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621277679473/QJ9hj4-lJ.png)

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


![6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621277697946/6q0Bs87lx.png)

* 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](https://apps.shopify.com/advanced-custom-field) app to your store (NOTE: Any other app that allows you to add custom fields would work too).    

![7.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278064995/pKrh1s6s2.jpeg)

* Open the [Advanced Custom Fields](https://apps.shopify.com/advanced-custom-field) app and add the following data to your products:

![7.4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278150924/Pcq9MoFnY.png)

Where `https://go.echoAR.xyz/ABCD` is the short link to your 3D content which you can obtain through the [Share Button](https://docs.echoar.xyz/quickstart/share-it-with-others) 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:

![8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278097092/NhPqDANHd.png)

* **You did it!** 🎉

![9.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278270231/WdQxYT910.jpeg)

# 🌐 Wix + echoAR


You can easily integrate 3D content from echoAR to your store your [Wix](https://www.wix.com/) website!

* Go to your site dashboard on [Wix](https://manage.wix.com/account/sites) and under **Site Actions** click on **Edit Site**.


![10.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278316353/Km8hyEUs0.jpeg)

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

![11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278342617/5Vt0czGJw.png)

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

![12.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278359983/xzLFZLN53.jpeg)

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


![13.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278380093/W2YchQVaz.jpeg)

* 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](https://docs.echoar.xyz/quickstart/share-it-with-others) in the Content Card.

* Click **Apply**.

![14.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278424525/fa48Pk3QE.jpeg)

* 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](https://docs.echoar.xyz/unity/troubleshooting). You can check out our full documentation for other useful tutorials [here](https://docs.echoar.xyz/) and also reach out to our support team [here](http://go.echoar.xyz/join).
*****
> 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.


![15.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621278476152/hvVeexsT3.png)