Documentation

Web: Multi-Product Embed

Dynamically display the correct 3D model for each product on your e-commerce site. This is the ideal solution for product pages.

Step 1: Set Up Your Products in Dezyn3D

For this to work, you must link your 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 Product ID or SKU on your website.
  3. Link a 3D model to each product in the inventory list.

Step 2: Add the Embed Code to Your Site

This code only needs to be set up once in your main product page template. It will automatically fetch the correct 3D model for each product.

  1. Copy the two parts of the code snippet below.
  2. Place the `div` container where you want the 3D viewer to appear on your product page.
  3. Place the `script` tag at the bottom of your product page template, just before the closing `</body>` tag.
  4. In the script, replace "REPLACE_WITH_YOUR_USER_ID" with your actual User ID from the Products & Inventory page.
  5. Most importantly, replace 'REPLACE_WITH_YOUR_PRODUCT_ID_VARIABLE' with the actual template variable from your e-commerce platform that outputs the product ID (e.g., `{{ product.id }}` in Shopify, `product.id` in WooCommerce, etc.).
  6. You can adjust the `height` in the container `div` (e.g., `height: 600px;`) to fit your layout.

Code Snippet

<!-- 1. Add this container where you want the 3D model to appear. -->
<div id="dezyn3d-viewer-container" style="width: 100%; height: 600px;"></div>

<!-- 2. Add this script just before your closing </body> tag. -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // --- Configuration ---
    const YOUR_USER_ID = 'REPLACE_WITH_YOUR_USER_ID';
    
    // This part is crucial. You MUST replace this with the variable from 
    // your e-commerce platform that holds the product's unique ID or SKU.
    const currentPageProductId = 'REPLACE_WITH_YOUR_PRODUCT_ID_VARIABLE';
    // --- End Configuration ---

    const container = document.getElementById('dezyn3d-viewer-container');
    if (container) {
      const iframe = document.createElement('iframe');
      iframe.src = `https://embed.dezyn.app/v1?uid=${YOUR_USER_ID}&product_id=${currentPageProductId}`;
      iframe.width = '100%';
      iframe.height = '100%';
      iframe.style.border = 'none';
      iframe.title = 'Dezyn3D Model';
      iframe.loading = 'lazy';
      
      container.innerHTML = '';
      container.appendChild(iframe);
    }
  });
</script>