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 style="min-width:300px;width:100%;height:450px;">
<sayduck-viewer product="f9340390-2087-0137-a0d4-6eec82cfb9d4" mode="variants" ></sayduck-viewer>
</div><script src="https://viewer.sayduck.com" type="module" async></script>

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

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 style="min-width:300px;width:100%;height:450px;">
<sayduck-viewer product="f9340390-2087-0137-a0d4-6eec82cfb9d4" mode="variants" ></sayduck-viewer>
</div><script src="https://viewer.sayduck.com" type="module" async></script>
{% endif %}

Check out Embedding your products for 3D viewer customization!

Replace Sayduck product UUID with Shopify metafield

Now to load the correct 3D viewer for each product, replace the Sayduck product UUID in data-product-uuid with the Shopify metafield variable that you created.

Example: product="f9340390-2087-0137-a0d4-6eec82cfb9d4" with product="{{ product.metafields.sayduck.product-uuid }}" in the embed code.

Updated on: 12/12/2024