Embed Products to Shopify

Embedding the Sayduck 3D viewer to Shopify is very simple. Here is a video that follows our help article and uses the information in it to embed the Sayduck 3D viewer to the Shopify default theme. Just follow along!



Create a metafield for your Shopify product

Create a metafield for your Shopify product, where you can store the matching Sayduck's product UUID for each of your Shopify products.

For example, create the metafield sayduck.product-uuid (namespace: "sayduck" and key: "product-uuid").

Locate product UUID

You can get the Sayduck product's UUID from the 3D Viewer embed code:

<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>

It's the value of the data-product-uuid attribute and look something like:
f9340390-2087-0137-a0d4-6eec82cfb9d4

Save it as the value for the metafield you created at step 1 for all products that you have published in 3D on
the Sayduck Platform.

Metafield example

Embed 3D viewer

Paste a 3D Viewer embed code where you want it to be visible - most likely in your Single Product
page's template code, for example replacing the product image(s).

You probably also want to customise the style of the 3D Viewer container div, so that it looks and behave as you desire. Additionally, you might want to only display the 3D Viewer if the product has a Sayduck product UUID stored in its metafield. For example, using:

{% if product.metafields.sayduck.product-uuid == blank %}
...
{% else %}
<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>
{% endif %}




Check out Embedding your products for 3D viewer customization!

Replace Sayduck product UUID with Shopify metafield

In the embed code, you just pasted, replace the Sayduck product UUID in data-product-uuid with the Shopify metafield variable that you created in step 1.

This will make the template load the appropriate product in the 3D Viewer, depending on which product the user has opened. For example, your original embed code might have looked like data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4", then you should replace it with something like data-product-uuid="{{ product.metafields.sayduck.product-uuid }}".

Was this article helpful?
Cancel
Thank you!