Shopify Implementation: Adding Spoak's vizualization tool to your website PDPs

The Basics

Implementing Spoak's visualization tool on your Shopify PDP is quick and easy with little to no development work on your side. Here are the step-by-step instructions for adding Spoak to your website:

1. Spoak will provide you with a custom embed code snippet. We will generate a unique embed code featuring your brand's products and custom templates (if applicable). Once you have this embed code, you're ready to implement on your site. Here is an example embed code:

// Insert the below code into your theme's PDP in a custom liquid section.

<div id="spoak"></div>

<script type="text/javascript">
const iframe = document.createElement('iframe');
const productId = '{{product.id}}';
const url = `https://embed.spoak.com/vizi/demo-select?c_id=YOUR_CONFIGURATION_ID_HERE&c_product_id=${productId}`; 
iframe.src = url; 
iframe.style = 'width: 100%; height: 100%;'; 
const container = document.getElementById('spoak'); 
container.appendChild(iframe); 
</script> 

2. Add the custom snippet to your Shopify site. Using Shopify's liquid custom code template, add the HTML and Javascript to any page you'd like on your website. The same code should be used across all pages. If you put the experience on a PDP, the code snippet should automatically pull the given PDP’s product ID and insert it into the embed code. This means the default product used in the visualization experience will match the page the user is on.
3. Style the #spoak element. Add custom CSS styling for the liquid custom code template that suits your page or brand guidelines. We recommend using something like:

#spoak { 
width: 100%; 
height: min(480px, 50vh); 
}

4. (Optional) Optimize your mobile experience. Spoak visualization experiences should work across all browsers and devices. Out-of-the-box, the embed code will work on mobile. That said, the mobile experience can take up a lot of real estate. If you have access to dev resources, we recommend implementing the mobile visualization experience as a full-screen experience behind a button. Here is an example of what we do on our own site on mobile:

4. Publish your updates. 🙌 That's it! Your customers can now enjoy visualizing your products on your site!

Note: If you run into any issues or bugs with the experience, please let us know. Any fixes to the experience will go live automatically and won't require any additional work to update the embed code on your end.