Step 1: Set Up Your Products in Dezyn3D

For this to work, you must link your Shopify products to 3D models in Dezyn3D.

1. Navigate to the Products & Inventory page.
2. Add your products. The Product ID you use in Dezyn3D must exactly match your Shopify Product ID for each product.
3. We recommend you connect your Shopify store and sync/import your products with just one button click. You can do this on the Shopify Integration page.
4. Link a 3D model to each product in the inventory list.

Step 2: Add the Custom Liquid Block

This code only needs to be set up once in your main product page template.

1. In your Shopify admin, go to Online Store > Themes. Click Customize/Edit Theme on your theme.
2. From the top dropdown menu, select Products > Default product. This will take you to your product page template.
3. In the left sidebar under "Product information", click + Add block and select Custom Liquid.
4. Copy the code snippet below and paste it into the Custom Liquid block.
5. Replace "REPLACE_WITH_YOUR_USER_ID" with your actual User ID from the Products & Inventory page.
6. You can adjust the `height` in the code (e.g., `height: 600px;`) to fit your layout needs.
7. Drag the Custom Liquid block to where you want the 3D model to appear on the page (e.g., below the product images).
8. Click Save. The correct 3D model will now automatically appear on each product page that has one linked.

Code Snippet

{%- comment -%}
  Dezyn3D: This Liquid code will display a 3D model if one is linked to the current product.
{%- endcomment -%}

{%- liquid
  assign YOUR_USER_ID = "REPLACE_WITH_YOUR_USER_ID"
-%}

<div class="dezyn3d-model-container" style="width: 100%; height: 600px; margin: 2rem 0;">
  <iframe 
    src="https://embed.dezyn.app/v1?uid={{ YOUR_USER_ID }}&product_id={{ product.id }}" 
    width="100%" 
    height="100%" 
    frameborder="0"
    title="{{ product.title | escape }} 3D Model"
    loading="lazy">
  </iframe>
</div>