Virtual Try-On for Framer + Shopify Headless Storefronts

Drop-In Framer Component (`StyleSwapTryOn.tsx`) with Native Property Controls

For agencies and founders building in Framer, `StyleSwapTryOn.tsx` exposes clean Framer `addPropertyControls` bindings so designers can wire virtual try-on to any Framer CMS collection item in under 2 minutes without writing glue code.

• CMS Field Binding: Bind `productImage`, `productTitle`, `productId`, and `variantId` directly from your synced Shopify CMS collection in Framer.
• 100% On-Device Pre-Processing: Shopper photo resizing (`maxDim: 1400px`), aspect-ratio cropping, and 9:16 Story Card canvas rendering execute 100% on-device in the shopper's browser for instant responsiveness.
• Shop Canvas & Headless Cart Compatibility: When the shopper clicks 'Add to Cart' inside the try-on result view, the component dispatches standard custom DOM events so your Framer cart component updates immediately.

// Example: Wiring Style Swap AI custom events into a Framer / Headless Shopify cart
useEffect(() => {
  const onTryOnCartAdd = (e: CustomEvent<{ variantId: string; quantity: number }>) => {
    shopifyHeadlessCart.addLineItem({
      merchandiseId: `gid://shopify/ProductVariant/${e.detail.variantId}`,
      quantity: e.detail.quantity || 1,
    });
  };
  window.addEventListener("seed-try-on:add-to-cart", onTryOnCartAdd as EventListener);
  return () => window.removeEventListener("seed-try-on:add-to-cart", onTryOnCartAdd as EventListener);
}, []);

Server-Side Security, Origin Allowlisting & Unified Shopify Billing

Unlike client-side widgets that leak API keys or require a separate billing account for headless storefronts, Style Swap AI routes all inference requests through your Shopify store's authenticated App Proxy (`/apps/try-on`).

• Zero Exposed Credentials: OpenRouter (`Seedream Lite` and `Seedream 5.0 Pro`) keys stay strictly on the server.
• SSRF & Payload Validation (`app/utils/proxy-security.server.ts`): Every product image URL is verified against HTTPS allowlists and private IP blocks (`127.0.0.1`, `10.x`, `169.254.x`, `192.168.x`), while base64 shopper images are MIME-verified in memory.
• Programmatic Drawer Trigger: Any custom Framer button can open the fitting room on demand by dispatching `window.dispatchEvent(new CustomEvent('seed-try-on:open'))`.