> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.sayduck.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Embed Products to Shopify

# Embed Products to Shopify

Embedding the Sayduck 3D Viewer into Shopify is simple. Follow the steps below to connect each Shopify product with its matching Sayduck product.

${youtube}[](f5vejqTTwWA)

The Shopify interface shown in the video may look different from the current version, but the general process remains the same.

# 1. Create a metafield for your Shopify product

Create a Shopify product metafield where you can store the matching Sayduck product UUID for each Shopify product.

In Shopify, go to:

**Settings → Custom data → Products → Add definition**

Create the following metafield:

* **Name:** Sayduck product UUID
* **Namespace and key:** `sayduck.product_uuid`
* **Type:** Single line text

You can then enter the matching Sayduck product UUID in the metafield section of each Shopify product.

Learn more about [Shopify product metafields](https://help.shopify.com/en/manual/custom-data/metafields).

# 2. Locate the Sayduck product UUID

You can find the Sayduck product UUID in the embeed code or in the specific field on the platform:

```
<div style="min-width:300px;width:100%;height:450px;">
  <sayduck-viewer
    product="177e5f90-478c-013f-cc56-164ab6d60eb7"
    mode="variants"
  ></sayduck-viewer>
</div>

<script
  src="https://viewer.sayduck.com"
  type="module"
  async
></script>
```

The UUID is the value of the `product` attribute:

```
177e5f90-478c-013f-cc56-164ab6d60eb7
```

Copy this UUID and add it to the **Sayduck product UUID** metafield of the matching Shopify product.

# 3. Embed the 3D Viewer

In Shopify, go to:

**Online Store → Themes → Customize**

Open your product template and add a **Custom Liquid** block where you want the 3D Viewer to appear.

You can also add the code directly to your product section or product template if your theme does not support Custom Liquid blocks.

Paste the following code:

```
{% assign sayduck_uuid = product.metafields.sayduck.product_uuid.value %}

{% if sayduck_uuid != blank %}
  <div style="min-width:300px;width:100%;height:450px;">
    <sayduck-viewer
      product="{{ sayduck_uuid | escape }}"
      mode="variants"
    ></sayduck-viewer>
  </div>

  <script
    src="https://viewer.sayduck.com"
    type="module"
    async
  ></script>
{% endif %}
```

The 3D Viewer will only be displayed when the Shopify product has a Sayduck product UUID assigned.

The correct Sayduck product will automatically load using the UUID stored in the Shopify metafield.

You can customize the width and height of the container to match your Shopify theme.

Replacing the Shopify product gallery with the Sayduck 3D Viewer may require theme-specific changes because product gallery structures differ between Shopify themes.

# 4. Select the correct viewer mode

For products that use Sayduck Variants, use:

```
mode="variants"
```

For products created with the Sayduck Configurator, use:

```
mode="configurator"
```

The viewer mode must match the product type used in Sayduck.

# Existing metafields using `product-uuid`

If your Shopify store already uses the older metafield key:

```
sayduck.product-uuid
```

Use bracket notation when reading the metafield:

```
{% assign sayduck_uuid = product.metafields.sayduck['product-uuid'].value %}
```

The complete embed code would be:

```
{% assign sayduck_uuid = product.metafields.sayduck['product-uuid'].value %}

{% if sayduck_uuid != blank %}
  <div style="min-width:300px;width:100%;height:450px;">
    <sayduck-viewer
      product="{{ sayduck_uuid | escape }}"
      mode="variants"
    ></sayduck-viewer>
  </div>

  <script
    src="https://viewer.sayduck.com"
    type="module"
    async
  ></script>
{% endif %}
```

Check out [Embedding your products](https://help.sayduck.com/en/article/3d-viewer-embed-code-19bw806/) for more information about customizing the Sayduck 3D Viewer.