AI Complete-the-Look Outfit Builder for Shopify: Multi-Garment Virtual Try-On

Zero-Effort Merchandising: `custom.pair_with` Metafields + DOM Detection + Recommendations API

Merchandising teams want full control over hero lookbooks without having to manually configure thousands of back-catalog SKUs. Style Swap AI uses a cascading 3-tier discovery hierarchy inside the Theme App Extension:

• Tier 1 — Curated `custom.pair_with` Metafield: Attach a list of complementary Product references in Shopify Admin (`product.metafields.custom.pair_with`). The Liquid block serializes those exact handles, images, and default available variant IDs directly into the drawer.
• Tier 2 — Automatic DOM 'Pair It With' Detection: If your theme already renders a 'Pair it with', 'Complete the look', or 'Style with' section on the PDP, Style Swap AI's storefront script inspects `/products/{handle}.js` links inside that container and automatically populates the try-on outfit tray.
• Tier 3 — Shopify Product Recommendations API Fallback: For any remaining products, the drawer fetches `/recommendations/products.json?product_id={id}&limit=4`, ensuring 100% catalog coverage on day one.

// Example: Listening to multi-garment outfit cart additions in custom themes
window.addEventListener("seed-try-on:complete-look-add", (event) => {
  const { items, primaryProductId, outfitCount } = event.detail;
  console.log("Added Complete Look bundle to Shopify cart:", items);
  // Trigger your theme's slide-out cart drawer refresh
});

How Seedream Layers Tops, Bottoms, and Outerwear Without Visual Artifacts

When a shopper selects 2 or 3 items in the 'Complete the Look' tray, Style Swap AI passes the primary garment and `outfitItems` array to our server-side OpenRouter orchestrator (`app/services/openrouter.server.ts`).

• Multi-Reference Conditioning: All selected garment images are normalized and passed alongside explicit garment titles so tucking, waistlines, and open-front layering (such as blazers, cardigans, or abayas over trousers) render naturally.
• Persistent Outfit Audit Trail: The Prisma `TryOnJob` model records the JSON `outfitItems` array alongside `productId`, letting merchants see exactly which multi-item combinations shoppers generate most frequently.

Track Multi-Item Outfit Revenue via Shopify `orders/paid` Webhooks

Every multi-item cart addition stamps `_tryon_product_id` and `_tryon_timestamp` cart attributes. When the shopper completes checkout, Style Swap AI verifies the paid order via Shopify's `orders/paid` webhook and attributes the full bundle order value inside your Shopify Admin dashboard.

• Real-Time Admin Metrics: Track total Try-On Assisted Revenue, Try-On Conversion Rate, and Average Order Value (AOV) lift.
• Klaviyo 'Tried On Product' Sync: If a shopper generates a 3-piece look and enters their email to save it, Klaviyo receives the event immediately so your abandoned fitting room flow can cross-sell the full look.