Complete Guide to Shopify 3D Configuration Integration

// Example product configuration
{
  "productId": "gid://shopify/Product/123456789",
  "configuratorSettings": {
    "materials": ["wood", "metal", "fabric"],
    "colors": ["#FF0000", "#00FF00", "#0000FF"],
    "dimensions": {
      "width": { "min": 100, "max": 300, "default": 200 },
      "height": { "min": 50, "max": 150, "default": 100 }
    }
  }
}

# Install Shopify CLI
npm install -g @shopify/cli @shopify/theme

# Clone your theme
shopify theme pull

# Create development theme
shopify theme dev

<!-- In theme.liquid, before closing </head> tag -->
<script src="https://cdn.visionthree.com/v1/configurator.js"></script>
<link rel="stylesheet" href="https://cdn.visionthree.com/v1/configurator.css">

<!-- Initialize configurator -->
<script>
  window.VisionThree = window.VisionThree || {};
  VisionThree.config = {
    apiKey: '{{ settings.visionthree_api_key }}',
    environment: 'production'
  };
</script>

<!-- In product.liquid or product-form.liquid -->
<div id="visionthree-configurator" 
     data-product-id="{{ product.id }}"
     data-handle="{{ product.handle }}">
  <!-- Configurator will be injected here -->
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.VisionThree && window.VisionThree.Configurator) {
      new VisionThree.Configurator({
        container: '#visionthree-configurator',
        productId: {{ product.id }},
        onConfigurationChange: function(config) {
          // Update price and add to cart data
          updateProductPrice(config.price);
          updateVariantSelection(config.variantId);
        }
      });
    }
  });
</script>

function updateProductPrice(newPrice) {
  const priceElement = document.querySelector('.price');
  if (priceElement) {
    priceElement.textContent = formatMoney(newPrice);
  }
}

function updateVariantSelection(variantId) {
  const variantInput = document.querySelector('input[name="id"]');
  if (variantInput) {
    variantInput.value = variantId;
  }
}

// Add configuration data to cart
function addConfigurationToCart(configuration) {
  const form = document.querySelector('form[action="/cart/add"]');
  
  // Add configuration as line item properties
  const configInput = document.createElement('input');
  configInput.type = 'hidden';
  configInput.name = 'properties[_3d_configuration]';
  configInput.value = JSON.stringify(configuration);
  
  form.appendChild(configInput);
}

/* Custom CSS for configurator */
.visionthree-configurator {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.vt-control-panel {
  background: #f8f9fa;
  padding: 20px;
}

.vt-option-button {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.vt-option-button.active {
  border-color: #007bff;
  background-color: #e3f2fd;
}