In today’s digital world, Shopify is the most popular way to set up an e-commerce store. If you run an e-commerce store, chances are you use Shopify already. With 3D and 360° product catalogues becoming more and more important, there is a need to add a 3D product viewer in Shopify.

You can achieve this by using HelloAR’s do-it-yourself technology. To know more about HelloAR, you can refer these 2 articles: 360° Catalog – Frequently asked questions, 3D/AR Catalog – Frequently asked questions

Let’s take a look at what we are finally going to get after completing this tutorial:

For this article, let’s assume that you’ve already added a 3D/360° product on HelloAR’s platform.

Steps To Integrate HelloAR on Shopify

1. Link Shopify products to HelloAR

The first step is to link your Shopify products with HelloAR. To do this we will add the HelloAR product id in the Shopify product as a metafield.

We will need to add a metafield editor app to achieve this. You can install the Metafields Editor app by Webify Technology in your shopify store.

Once installed, you can go to any product in the admin dashboard and you would see the Metafields options.

After going to Metafields option, add the HelloAR product ID as a metafield with the following values:

• namespace: helloar

• key: pid

• value type: string

• value: ENTER_YOUR_HELLOAR_PRODUCT_ID_HERE

Note: You can contact HelloAR if you’re unable to find the HelloAR product id

2. Specify the location of the button

Next we will specify where we want to add the “View in 3D” button.

To do this we will have to edit the theme’s code. Go to the theme section on the shopify dashboard and press Actions->Edit Code on your current theme.

You need to add an empty html div with a unique id anywhere on the product page.

For the sake of this tutorial, we’ll use Shopify’s default theme (Debut).

Go to the product-template.liquid file under the Sections tab and add the following line on line number 132

<div id="helloar-button"></div>

note: If you’re a different theme, the location to add this code would be a bit different. You can ask your developer to find the correct location.

3. Add HelloAR’s script to your Shopify theme

Next, go to the product.liquid file and add the following code at the bottom of the file:

{% if product.metafields.helloar.pid != blank %} https://content.helloviewer.io/js/helloar_embed_0.0.21.min.js {% endif %}

4. Customise the button

The above steps are enough to add the “View in 3D” button on your shopify store. But if you want to change the button styling to match your store’s design, you can pass the required styles to the script we wrote in step 3.

Available styling options:

• data-button-color [Color of the button] (can be a color string like “red”, “yellow” etc or a hex code like “#fff”)

• data-button-width [Size of the button] (can be width in px or %. example – “300px”, “75%”)

• data-button-border-radius [Border Radius of the button] (example: “5px”, “40px” etc)

• data-font-color [Text color] (same as data-button-color)

• data-font-size [Size of the text] (size in px example – “21px”, “45px” etc)

• data-margin-top [Space between the button and the content above it] (example: “10px”, “25px” etc)

• data-button-text [Display text of the button] (example: “View in 3D”)

Example code with all styling options:

https://content.helloviewer.io/js/helloar_embed_0.0.21.min.js

5. Fin

That’s all. Simple, isn’t it?

This is how the “View in 3D” button would look finally:

After completing all the above steps, you should be able to see a button which opens the 3D viewer when clicked.