iJewel3D Docs

Appearance

BigCommerce Integration: Complete Example ​

Embed the Wedding Band Builder on a BigCommerce storefront using a custom product template.

Back to iframe Embedding guide

Custom Product Template ​

In BigCommerce's Stencil theme, create or edit a product template:

html
<!-- templates/pages/custom/product/wedding-band.html -->
{{#partial "page"}}

<div class="wbb-product-page">
    <h1 class="productView-title">{{product.title}}</h1>

    <div class="wbb-viewer-container">
        <iframe
            id="wbb-iframe"
            src="https://your-cdn.com/wbb-viewer.html"
            style="width: 100%; height: 70vh; border: none; border-radius: 8px;"
            allow="camera; xr-spatial-tracking"
        ></iframe>
    </div>

    <div class="wbb-actions" style="margin-top: 24px; display: flex; align-items: center; gap: 16px;">
        <span id="wbb-price" style="font-size: 28px; font-weight: 700;">Loading...</span>
        <button id="wbb-add-to-cart" class="button button--primary">Add to Cart</button>
    </div>
</div>

<script>
    (function() {
        var iframe = document.getElementById('wbb-iframe');
        var reqId = 0;
        var productId = {{product.id}};

        function query(method, args) {
            return new Promise(function(resolve) {
                var id = 'req-' + (++reqId);
                var handler = function(e) {
                    if (e.data && e.data.id === id) {
                        window.removeEventListener('message', handler);
                        resolve(e.data.result);
                    }
                };
                window.addEventListener('message', handler);
                iframe.contentWindow.postMessage({ id: id, method: method, args: args || [] }, '*');
            });
        }

        // Live price updates
        window.addEventListener('message', function(e) {
            if (e.data && e.data.event === 'price:updated' && e.data.data && e.data.data.pricing) {
                document.getElementById('wbb-price').textContent =
                    '$' + e.data.data.pricing.totalUsd.toFixed(2);
            }
        });

        // Add to cart via Storefront API
        document.getElementById('wbb-add-to-cart').addEventListener('click', async function() {
            var btn = this;
            btn.disabled = true;
            btn.textContent = 'Adding...';

            try {
                var config = await query('exportConfig');

                var response = await fetch('/api/storefront/carts', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        lineItems: [{
                            productId: productId,
                            quantity: 1,
                            optionSelections: [{
                                optionId: 0,   // Replace with your custom field option ID
                                optionValue: JSON.stringify(config),
                            }],
                        }],
                    }),
                });

                if (response.ok) {
                    window.location.href = '/cart.php';
                }
            } catch (err) {
                console.error('WBB error:', err);
            }

            btn.disabled = false;
            btn.textContent = 'Add to Cart';
        });
    })();
</script>

{{/partial}}
{{> layout/base}}

Assigning the Template ​

  1. In BigCommerce admin, go to Products and edit (or create) your wedding band product
  2. Under Template, select wedding-band from the custom template dropdown
  3. Save the product

The configurator will now appear on that product page instead of the default product layout.