Deploying Localized AI Fitting Rooms Across Shopify Markets with Automatic RTL & Privacy Compliance

Single Deployment, Every Locale: Shopify Markets + App Proxy

Style Swap AI installs as a Theme App Extension block on Online Store 2.0, and for Shopify Plus brands running Hydrogen, Next.js or Framer storefronts, a signed Shopify App Proxy exposes the full try-on engine under /apps/try-on/*. Because the proxy request is signed by Shopify, it inherits the active market context — currency, language and locale — so one integration serves US, UK, EU, UAE, KSA and Japan storefronts with no per-market code. Headless teams wire into custom DOM events (seed-try-on:open, seed-try-on:add-to-cart, seed-try-on:complete-look-add) to trigger the fitting room and route bundle add-to-cart data into their own analytics and Klaviyo stacks.

• In Shopify Admin → Markets, assign each region its own domain or subfolder (e.g., brand.com/en-ae); the signed App Proxy request carries the buyer's locale and currency, so the try-on UI renders local pricing and copy with zero per-market branching.
• Add the Style Swap AI app block or floating pill once to your product template — it injects with zero CLS, so Core Web Vitals hold on international CDN edges.
• Arabic, Hebrew and Urdu locales trigger automatic dir="rtl" mirroring and localized UI strings; QA the mirrored layout on a staging theme before peak trading moments like Ramadan and White Friday.
• Listen for seed-try-on:complete-look-add to push bundle SKUs, market handle and currency into GA4 or Klaviyo — this is the foundation of per-market AOV reporting.

// Headless storefront: listen for complete-look bundle event and sync to analytics
window.addEventListener('seed-try-on:complete-look-add', (e) => {
  const { items, market, currency, total } = e.detail;
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'style_swap_bundle_add',
    items: items.map(i => ({ sku: i.sku, qty: i.qty, price: i.price })),
    market,
    currency,
    value: total
  });
  // Optional: mirror to Klaviyo browser tracking
  if (window.klaviyo) {
    window.klaviyo.track('Complete Look Added', {
      items: items.map(i => ({ ProductID: i.sku, Quantity: i.qty })),
      Market: market,
      Currency: currency,
      Value: total
    });
  }
});

Zero-Photo Storage Meets GDPR, UAE PDPL & Saudi PDPL

Style Swap AI's privacyZeroPhotoStorage mode is enabled by default. Shopper selfies are stripped of EXIF metadata and compressed to a maximum dimension of 1400px on the client side, then processed over TLS 1.3 in volatile RAM only. No image is ever written to disk, logged, or visible in Shopify Admin. Because the data never persists, there is no residency requirement to engineer around and no try-on image payload to locate during a DSAR or right-to-erasure request — a decisive trust signal for luxury shoppers in the EU and GCC that generic try-on apps cannot match.

• EXIF data (GPS, device identifiers) is stripped in the browser before upload, and 1400px compression keeps inference fast on mobile networks across KSA, UAE and Japan.
• The selfie exists only in volatile RAM for the duration of the inference call (~8–10 seconds in Quick Mode) and is irrecoverably destroyed once the render returns.
• No shopper selfies appear in Shopify Admin, order exports or analytics — eliminating accidental PII exposure for staff and simplifying DSAR responses to a single sentence: nothing is stored.
• Document the zero-retention flow in each market's privacy policy and pair the in-app privacy badge with Shopify's native consent banner; server-side attribution means no third-party tracking cookies are needed for ROI reporting.

// Zero-photo storage is enabled by default — surface the toggle in your theme app embed
// settings_schema.json snippet for the app block
{
  "type": "checkbox",
  "id": "privacyZeroPhotoStorage",
  "label": "Zero-Photo Storage (GDPR/PDPL compliant)",
  "default": true,
  "info": "Strips EXIF, compresses to 1400px, processes in volatile RAM only. No selfies stored."
}

3-Piece Outfit Try-On Drives Multi-SKU Checkout Across Currencies

The 3-piece Complete the Look engine layers up to three garments (Top + Bottom + Outerwear/Abaya) using custom.pair_with metafields, DOM cross-sell detection, or the Shopify Product Recommendations API. When a shopper in Dubai tries on a Bouguessa-inspired minimalist dress, Style Swap AI can suggest a matching hijab and outer layer, then add all three SKUs to cart in one click via /cart/add.js. Because Shopify's cart API applies the active market's currency, rounding and pricing rules, the shopper sees one localized bundle total — higher AOV without the friction of manual cross-sells.

• In Settings → Custom Data, create a product metafield custom.pair_with (list of product references) and curate market-specific trios — e.g., abaya + hijab + slip dress for KSA, blazer + knit + skirt for the UK.
• If no pair_with values exist, fall back to the Shopify Product Recommendations API (or DOM cross-sell detection) so bundles always reflect live, market-appropriate inventory.
• The 1-click bundle posts an items array to /cart/add.js, which respects the current market's currency and rounding rules — never show a shopper a converted price that differs from checkout.
• Use the seed-try-on:complete-look-add payload (SKUs, quantities, localized prices) to trigger bundle discounts, loyalty points or market-specific post-purchase flows.

Atmosphere Remixes, Story Cards & Klaviyo Closed-Loop ROI

Five instant atmosphere and lighting remixes — Studio Editorial, Golden Hour, Evening Lounge, Parisian Street, Desert Resort — let you match the try-on render to each market's aesthetic: Desert Resort for UAE shoppers, Parisian Street for French customers. The 9:16 Social Story Card generator composes a 1080x1920 canvas entirely client-side and shares via the Web Share API — critical in the GCC, where WhatsApp is the dominant commerce channel. Every try-on fires a server-side Klaviyo 'Tried On Product' event, and Shopify orders/paid webhooks attribute revenue and AOV back to the session, delivering per-market ROI with no reliance on third-party cookies.

• Set a default atmosphere per Shopify Market in the app's localization settings — Desert Resort or Golden Hour for GCC, Parisian Street for FR/EU, Studio Editorial for US/UK — with overrides available via custom liquid or API.
• Story cards bundle the product image, try-on result and a deep link back to the product page; place the WhatsApp share target prominently in MENA markets where social sharing drives organic discovery.
• The Klaviyo 'Tried On Product' payload includes market handle, currency, product SKUs, mode (Quick vs Studio) and atmosphere — segment high-intent shoppers into localized, currency-correct email flows.
• Shopify orders/paid webhooks close the loop, tying revenue and AOV back to each try-on session for true per-market, per-campaign ROAS.

// Klaviyo server-side event payload (simplified)
{
  "event": "Tried On Product",
  "customer_properties": { "$email": "shopper@example.com" },
  "properties": {
    "product_skus": ["ABAYA-01", "HIJAB-02"],
    "market": "ae",
    "currency": "AED",
    "mode": "quick",
    "atmosphere": "desert-resort",
    "source": "app-proxy"
  },
  "time": 1742345678
}