# Shopify

You can integrate 3D content from echo3D 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**.

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-MRSQeDLRNQzS9f6fMcJ%2F-MRSRgIvYUAQ4O9gFl4_%2FShopify%20-%20Menu.png?alt=media\&token=b47d525c-abf0-41dc-b277-a0564e52e5f3)

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

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-MRSQeDLRNQzS9f6fMcJ%2F-MRSRmfk9VzyWbTCd20y%2FShopify%20-%20Actions.png?alt=media\&token=918ba24b-1531-4a90-acb1-29ddd78a12ea)

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

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

Add the following code:

```
{% assign metafiled = product.metafields.echo3D %}
{% 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.

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-MRSUec3Qe08IWnSc282%2F-MRSYQcDFx69z3I7U1lT%2FShopify%20-%20Advanced%20Custom%20Fields.JPG?alt=media\&token=6b1a71b2-b9d1-4468-be4f-4574c2db8560)

{% hint style="info" %}
&#x20;Any other app that allows you to add custom fields would work too.
{% endhint %}

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

| Data      | Value                       |
| --------- | --------------------------- |
| Namespace | echo3D                      |
| Key       | shortURL                    |
| Value     | <https://go.echo3D.co/ABCD> |

Where `https://go.echo3D.co/ABCD` is the short link to your 3D content which you can obtain through the the asset card.

{% hint style="info" %}
Use a different link for each of your products.
{% endhint %}

Now back at your store's product page the result should look something lik&#x65;**:**

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-MRSUec3Qe08IWnSc282%2F-MRScHs6dn2Va-eaKUat%2FShopify%20-%20Product.png?alt=media\&token=3735fb03-e588-4623-bc3f-a50e989b3a78)

**You did it!** 🎉