BigCommerce

BigCommerce product pages are rendered server-side from Stencil (Handlebars) templates, and the per-product try-on script needs a product identifier at render time — so the reliable place to add both snippets is the product template itself, not a site-wide script.

Sync products first

Same as any platform: create a TryOn product for each BigCommerce product before you can render anything, using the BigCommerce SKU as external_id so the two catalogs stay joined:

Request

curl -X POST https://api.integration.tryonvirtual.com/v1/products \
  -H "Authorization: Bearer tryon_sk_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Classic Fit Shirt — Red, XL",
    "category": "clothes",
    "external_id": "SHIRT-XL-RED",
    "images": ["https://cdn11.bigcommerce.com/.../shirt-xl-red.jpg"]
  }'

Pull your catalog from the BigCommerce Catalog API (GET /catalog/products) to loop this over every product, and enable try-on the same way as elsewhere once each one reports swap_ready: true — see Product lifecycle. See Using your own IDs for more on the external_id mapping.

Edit the product template

In the Stencil theme you’re running, edit the product page template (templates/pages/product.html, or the product-view component it includes, depending on your theme) and add both snippets where you want the button to appear. {{product.sku}} gives you the same value you set as external_id during sync:

templates/components/products/product-view.html

<button type="button" data-tryon-product-id="{{product.sku}}">Try On</button>

<script async
  src="https://api.integration.tryonvirtual.com/api/v1/tryon/scripts/embed/bootstrap.js?shop_slug=YOUR_SHOP_SLUG&productId={{product.sku}}">
</script>

Edit the template through the Stencil CLI (stencil push after a local edit) or your theme editor, depending on how your store is set up.

Note

Script Manager (Storefront → Script Manager, no theme access required) is the usual way to add third-party scripts on BigCommerce, but its page-scoping is coarse — Storefront pages, Checkout, Order confirmation, or All pages — with no product-page-specific option, and scripts added there are static text with no access to Handlebars variables like {{product.sku}}. That makes it a poor fit for a script that needs a different productId per product page; the template edit above is the reliable path if you have theme access.

Only render when ready

Check tryon_status and swap_ready before you decide whether to render the two snippets, same as any other platform — see Storefront integration. If your Stencil template can’t call the TryOn API directly at render time, keep a synced flag (a custom field on the BigCommerce product, or a lookup table on your side) that your sync job updates once a product is both enabled and processed, and branch on that in the template instead of calling out live on every page view.

Next

Custom storefront — the platform-agnostic version of the same integration, plus notes for single-page apps.