# WEARFITS Shopify Integration

Add WEARFITS virtual try-on to Shopify product pages.

## Architecture

1. A theme app embed or snippet loads `https://api.wearfits.com/widget/tryon.js`.
2. The product page injects product JSON from Liquid.
3. A "Try on" button calls `Wearfits.openTryOn()`.
4. Production stores route API calls through a Shopify app proxy or backend
   service so the service API key is never exposed in the theme.

## Theme snippet

```liquid
<script src="https://api.wearfits.com/widget/tryon.js"
        data-api-key="{{ settings.wearfits_browser_token }}"></script>

<button type="button" id="wearfits-tryon">Try it on</button>

<script>
  document.getElementById('wearfits-tryon').addEventListener('click', function () {
    Wearfits.openTryOn({
      products: [{
        id: {{ product.id | json }},
        name: {{ product.title | json }},
        category: 'top',
        images: {{ product.images | map: 'src' | json }},
        sizes: {{ product.options_by_name['Size'].values | json }},
        variants: {{ product.variants | json }}
      }]
    });
  });
</script>
```

## Category mapping

Infer the WEARFITS category conservatively from product type, tags, or
collection:

- shirts, tops, tees, blouses -> `top`
- pants, trousers, skirts, shorts -> `bottom`
- dresses, jumpsuits -> `full-body`
- shoes, sneakers, loafers -> `shoe`

When unsure, require a merchant-set product metafield rather than guessing.

## Security

- Do not expose long-lived service API keys in public Liquid.
- Prefer a Shopify app proxy that forwards the virtual-fitting and job-status
  requests with the service key added server-side.
- If a browser token is used, document its scope and rate-limit assumptions.

## Deliverables checklist

- Theme snippet or app embed.
- Product JSON handoff from Liquid.
- "Try on" button placement.
- App proxy route (production).
- A smoke test with a real product page payload.

The widget contract is in the `wearfits-virtual-tryon-widget` skill; the REST
API and proxy targets are in `wearfits-api-integration` and the OpenAPI spec at
https://api.wearfits.com/doc.