# YourSizer (/yoursizer)

<ProductBanner product="yoursizer" />

## How it works [#how-it-works]

<StepGrid
  steps={[
    ['Height and weight to start', 'The shopper enters two values. The remaining key body metrics are estimated from population data rather than asking anyone for a tape measure.'],
    ['Adjust the 3D body model', 'In the size flow a 3D body model takes shape from the shopper’s measurements. Chest, waist and hip can be tuned directly and the model updates as they move.'],
    ['Match against this product', 'The recommendation is computed against the size chart that applies to this product — product override, then category, then brand — with the garment’s tolerance and the brand’s intended fit applied.'],
    ['One size, plus the caveat', 'The widget returns a size, and when the shopper sits between two it says so and names the measurement driving it. The size can be selected and added to the cart without leaving the page.'],
  ]}
/>

<Cards>
  <Card title="What the shopper never has to do">
    - Take a photo or upload a body scan to get a size
    - Measure themselves with a tape
    - Read a size chart or convert between EU / UK / US
    - Rebuild their model on every visit — it is remembered on that store
  </Card>
  <Card title="What the merchant has to do">
    - Connect the store — app install, or one script tag
    - Upload or import size charts, including from images
    - Choose where the button appears on the product page
  </Card>
</Cards>

## Under the hood [#under-the-hood]

A calculator maps height and weight onto one chart. YourSizer resolves _which_ chart applies, how tolerant that garment is, and how the brand intends it to fit.

<Cards>
  <Card icon={<Ruler />} title="Layered chart resolution">
    Product override → category → brand → system default. Published charts are immutable; editing one creates a new version, so an old recommendation can still be explained.
  </Card>
  <Card icon={<Shirt />} title="Tolerance resolver">
    How much a garment stretches or drapes resolves through a layered chain — system, category, brand, product — with a hard cap so no single layer can make a garment infinitely forgiving.
  </Card>
  <Card icon={<Brain />} title="Fit-style multiplier">
    Fit intent is an explicit multiplier on tolerance: slim, regular, relaxed and oversize each scale it differently.
  </Card>
  <Card icon={<BarChart3 />} title="Adaptive measurement weighting">
    A dress is driven by bust and hip; trousers by waist and inseam. The engine weights the measurements that actually decide the fit of that category.
  </Card>
  <Card icon={<Baby />} title="Children’s sizing">
    The European height-grid convention with a growth-percentile anchor — a child’s size is driven by height and age far more than by weight.
  </Card>
  <Card icon={<ScanText />} title="Charts from images">
    Charts can be ingested from an uploaded picture and turned into structured measurement rows for review, rather than retyped.
  </Card>
</Cards>

## Virtual try-on [#virtual-try-on]

### See it on yourself, not on a hanger [#see-it-on-yourself-not-on-a-hanger]

Alongside the size recommendation, YourSizer offers photo-based AI try-on: the shopper uploads one ordinary photo and gets an image of the product on themselves, on the same product page. Try-on is optional — a size never needs a photo.

Try-on is a separate entitlement from sizing. It can be enabled per store and per product — categories where an AI rendering would not be honest can be excluded — and there is a safety filter on generated imagery.

<Callout title="Try-on and the 3D model are not the same thing">
  The **3D body model** belongs to the size flow: it is shaped by the shopper’s measurements, it is deterministic, and it is what the recommendation is based on.

  The **try-on image** is generated from the shopper’s own photo to help them picture the product. It is a merchandising aid — it never overrides the size the engine computed.
</Callout>

## What the dashboard tells you [#what-the-dashboard-tells-you]

<Cards>
  <Card title="Size distribution per SKU">
    Which sizes shoppers are actually being recommended for each product — the earliest signal that a production run is cut small.
  </Card>
  <Card title="Interaction funnel">
    Button clicks, time in the interface, how far shoppers get and where they drop, per store and per placement.
  </Card>
  <Card title="Assisted conversion">
    Orders where a recommendation or try-on was involved, deduplicated, with the signal that proved the link recorded next to the number.
  </Card>
  <Card title="Geo and device trends">
    Where your recommended sizes skew by region — useful before you commit a buy for a new market.
  </Card>
  <Card title="Return drivers">
    With ResReturn connected, size-related return reasons are joined back to the recommendation that preceded them.
  </Card>
  <Card title="Chart health">
    Products with a missing, stale or implausible chart are surfaced instead of silently falling back to a default.
  </Card>
</Cards>

## Two ways in [#two-ways-in]

<Tabs items={['App / theme install', 'Script tag, any storefront']}>
  <Tab value="App / theme install">
    On Shopify, ikas, Ticimax, T-Soft, IdeaSoft and Faprika the widget is installed through the platform integration: authenticate the store, sync the catalogue, place the button. No theme code for the common case. [See platform coverage →](/platform/coverage)
  </Tab>
  <Tab value="Script tag, any storefront">
    Any other store pastes one loader script tag into the page `<head>`. The widget recognises product pages by matching the page address against your YourSizer catalogue and places the button itself; button text, design and placement are set in the merchant panel. WooCommerce gets a native integration later — until then it uses the same tag. [Developer guide →](/yoursizer/integrations/script-tag)

    ```html title="every page — inside <head>"
    <!-- copy this line from the Widget page of the merchant panel -->
    <script src="https://cdn.yoursizer.com/api/public/widget/v1/loader/YOUR_PUBLIC_KEY.js" async></script>
    ```
  </Tab>
</Tabs>

## Built to sit on your store [#built-to-sit-on-your-store]

<Cards>
  <Card icon={<ShieldCheck />} title="Accessibility">
    WCAG 2.1 AA target: keyboard navigable, labelled controls, and no information conveyed by colour alone. On mobile it renders as an edge-to-edge bottom sheet, not a cramped modal.
  </Card>
  <Card icon={<Palette />} title="It won’t fight your theme">
    Rendered inside an isolated root so your CSS cannot leak in and its styles cannot leak out, with stacking defences against third-party overlays.
  </Card>
  <Card icon={<ShieldCheck />} title="Data protection">
    Body measurements are personal data and are treated as such: explicit retention, deletion on request, and per-store isolation.
  </Card>
</Cards>