Knowledge Base

Back to home

Knowledge Base

Using Spott

Integrations

[SPOTT] Shopify integration

Add interactive images to your Shopify account

Go to your Shopify account and copy and paste the overlay code snippet into the HTML head section of your website. Code snippets and examples can be found here!
Basic example:
```
<script>
(function ImageExtension(s,p,o,t,T){
s.spottOptions = t || {};
T=p.getElementsByTagName('head')[0];
var el=p.createElement('script');el.async=1;el.src=o;
T.appendChild(el);
}(window,document,'https://static.spott.ai/embed/imageExtension.js', {
className: 'spott',
idAttribute: 'data-spott-id'
}));
</script>
```
This will scan your entire webpage and will detect all elements with className ‘spott’. The script will search for the data-spott-id attribute. If this exists, it will make the image interactive with this specific spott id (=project id). The value of data-spott-id can be 'copy/pasted' from within the app. Open the corresponding project and copy the last part of the URL from the URL bar of your browser (between the last / and the first ?), for example:

957ee099-5bcd-4e00-babf-54a2156d267b
Extend your existing HTML <img /> and parent <div /> element with the specified attributes:
```
<div style=”spott”>
   <img src=”xxx.jpg” data-spott-id=”957ee099-5bcd-4e00-babf-54a2156d267b” />
</div>
```
Our script will automatically fill the corresponding container with your interactive elements defined in our studio.
Check out the result on your webshop!

<div style=”spott”> <img src=”xxx.jpg” data-spott-id=”957ee099-5bcd-4e00-babf-54a2156d267b” /></div>

Shopify Product Feed

Read all about product feeds here!
Creating a product feed can be done automatically (export each x interval to have the latest price updates) or manually (single-time export):
- Automatic
  Shopify doesn't have a product feed out of the box, so you need to install a 3rd party Shopify app:
- Manual
Copy the CSV link generated by Shopify
Go to your Spott account > Integrations > Product feeds
Click the "+ Feed" button to add a new product feed
Enter a feed name, paste your Shopify feed URL inside the "Link" field continue all required steps
Have fun using your Shopify products in your interactive content

For more info, read here!