Co-Ord Sets & Loungewear: Lift Attach Rates with 1-Click, 3-Piece Complete-the-Look AI Try-On

Zero-CLS App Block + Floating Pill for OS 2.0 and Headless Storefronts

Deploy as a Shopify Online Store 2.0 Theme App Extension—an App Block on the PDP plus a Floating Pill on collection and home pages—with zero Cumulative Layout Shift, or mount on Hydrogen, Next.js, or Framer via a signed Shopify App Proxy under /apps/try-on/*. Inference runs server-side (Seedream 5.0 Pro via OpenRouter), so shoppers install nothing and see a 1K Quick Mode co-ord try-on in ~8–10 seconds. Want proof before you commit? Paste any public Shopify product URL into the live zero-install sandbox at https://seed-try-on.fly.dev/demo and get a result in ~8–12 seconds.

• Place the App Block beside the size selector on co-ord PDPs; keep the Floating Pill on loungewear collection and home pages with a 'Try on this set' CTA—both render without layout shift, protecting Core Web Vitals.
• On headless builds, listen for seed-try-on:open, seed-try-on:add-to-cart, and seed-try-on:complete-look-add custom DOM events to sync try-on state with your own cart drawer and analytics layer.
• Quick Mode (1K, ~8–10s) covers evaluation traffic; Studio Mode (2K high-definition) suits high-intent PDPs—the Unlimited Fashion Plan ($199.99/mo) unlocks Priority 2K generation for drop-day spikes.
• The signed App Proxy passes Shopify customer context only; selfies are processed in volatile RAM and never stored—only the composited try-on result returns to the browser.

Pairing Metafields, DOM Cross-Sell Detection & 1-Click Multi-SKU Cart

Layer up to three garments—knit top + matching trouser + cardigan or abaya—resolved in priority order: the custom.pair_with product metafield, DOM cross-sell detection on your theme, then the Shopify Product Recommendations API. When the shopper accepts the outfit, Style Swap AI fires a single /cart/add.js call with an items array covering every SKU, preserving line-item properties so the bundle stays attributable end to end.

• On each co-ord top, set custom.pair_with (namespace: custom, key: pair_with) as a JSON array of product handles or variant IDs pointing at the matching bottom and layer; keep fabric and colorway aligned so the render reads as one intentional set.
• No metafield? The extension falls back to PDP cross-sell blocks, then to the Product Recommendations API—seed it by merchandising co-ords in the same collection and colorway so suggestions stay on-brand.
• The bundle add posts { items: [{ id, quantity }] } to /cart/add.js on OS 2.0; on headless, intercept seed-try-on:complete-look-add and call your own cart mutation (e.g., Storefront API cartLinesAdd).
• Create a 'modest bundle' rule for UAE/GCC catalogs that always appends a matching abaya or hijab-compatible layer—this is the fastest attach-rate win on loungewear PDPs.

// theme.liquid: expose co-ord pairings from the custom.pair_with metafield
const pairings = {{ product.metafields.custom.pair_with.value | json }};
window.StyleSwapPairings = Array.isArray(pairings) ? pairings : [];

// One-tap bundle: add every SKU from the Complete-the-Look event
window.addEventListener('seed-try-on:complete-look-add', (e) => {
  const items = e.detail.items.map(({ variant_id, quantity }) => ({
    id: variant_id,
    quantity,
    properties: { _style_swap: 'complete-the-look' } // line-item attribution
  }));
  fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items })
  });
});

Zero-Photo Storage, Volatile-RAM Inference, and Full RTL Arabic UI

privacyZeroPhotoStorage is true by default: EXIF GPS/timestamps are stripped and the selfie is compressed to a 1400px max dimension in the browser, then uploaded over TLS 1.3 and processed in volatile RAM only. No shopper photo is ever written to your database, an external bucket, or Shopify Admin—critical for GDPR, UAE PDPL, and Saudi PDPL, and for luxury loungewear shoppers who will not upload to a store that keeps their image.

• Keep privacyZeroPhotoStorage: true (the default); the client strips EXIF and compresses to maxDim 1400px before any network call leaves the device.
• Say it on the PDP: 'Your photo is never stored.' Volatile-RAM processing means nothing persists in Shopify Admin or external storage—an actual conversion lever for privacy-obsessed shoppers.
• Offer the built-in modest studio model presets as the default try-on path so shoppers can evaluate a co-ord's drape and proportions with zero selfie required.
• Ship the full dir=rtl Arabic UI—buttons, error states, and share flows—validated on Astra Loungewear UAE and Bouguessa-inspired minimalist silhouettes; auto-switch via locale detection for GCC traffic.

Klaviyo Closed-Loop Attribution and 9:16 Story Card Compositor

A server-side 'Tried On Product' Klaviyo event fires on every completed try-on, and the Shopify orders/paid webhook ties revenue and AOV back to that session—so you can prove exactly what each co-ord bundle earned. The native client-side HTML5 canvas compositor exports a 1080x1920 story card with the try-on, product names, and CTA, shared in one tap to WhatsApp or Instagram via the Web Share API.

• Klaviyo sync unlocks on the Runway Plan ($49.99/mo); the 'Tried On Product' event carries product and variant IDs so flows can trigger co-ord-specific follow-ups like 'Your set is still in stock.'
• Pair the Klaviyo event with the orders/paid webhook to attribute AOV lift per bundle—compare 1-SKU vs 3-SKU checkouts from seed-try-on:complete-look-add sessions.
• The 9:16 compositor bakes the try-on, product names, and a 'Shop the co-ord' CTA into one 1080x1920 card—no design tool, one tap to WhatsApp/IG via the Web Share API.
• Pick an atmosphere per campaign—Evening Lounge for nightwear drops, Desert Resort for linen co-ords; the Unlimited Fashion Plan ($199.99/mo) adds Priority 2K generation and unlimited shares for influencer seeding.