Shopify Integration: Complete Example

Add the Wedding Band Builder to a Shopify store using a custom Liquid section.

Back to iframe Embedding guide

<!-- sections/wedding-band-builder.liquid -->
<div class="wbb-section">
  <iframe
    id="wbb-iframe"
    src="https://your-cdn.com/wbb-viewer.html"
    style="width: 100%; height: 70vh; border: none;"
    allow="camera; xr-spatial-tracking"
  ></iframe>

  <button id="add-to-cart" class="btn" style="margin-top: 16px; width: 100%;">
    Add to Cart - <span id="wbb-price">Loading...</span>
  </button>
</div>

<script>
  const iframe = document.getElementById('wbb-iframe');
  let reqId = 0;

  function query(method, args = []) {
    return new Promise((resolve) => {
      const id = `req-${++reqId}`;
      const handler = (e) => {
        if (e.data?.id !== id) return;
        window.removeEventListener('message', handler);
        resolve(e.data.result);
      };
      window.addEventListener('message', handler);
      iframe.contentWindow.postMessage({ id, method, args }, '*');
    });
  }

  // Update price display
  window.addEventListener('message', (e) => {
    if (e.data?.event === 'price:updated' && e.data.data?.pricing) {
      document.getElementById('wbb-price').textContent =
        `$${e.data.data.pricing.totalUsd.toFixed(2)}`;
    }
  });

  // Add to cart with ring configuration
  document.getElementById('add-to-cart').addEventListener('click', async () => {
    const config = await query('exportConfig');
    // Pass config to your Shopify cart as line item properties
    console.log('Ring config to add:', config);
  });
</script>