---
title: "Recommend a shoe size"
audience: "A shoe retailer, or the person embedding their product page"
goal: "Show an advisory shoe-size recommendation for one product"
status: gated
requires:
  - "A public clientId agreed with WEARFITS"
  - "Every production and staging origin that will host the button"
  - "A stable product id"
  - "Internal shoe dimensions in millimetres (length required for each size)"
produces:
  - "A size label"
  - "An advisory fit reading for overall, length, width, and instep"
do_not:
  - "Look for this button in the Shopify app or the WooCommerce shoes plugin"
  - "Call POST /api/v1/size-fitting — that endpoint is for clothing"
  - "Block checkout or describe the result as a guaranteed fit"
  - "Document an on-shoe fit heatmap as something you can install from this page"
manual: true
last_updated: "2026-09-22"
description: "A shopper scans their feet once, then the product page shows which of your sizes is the closer match. The result is advisory. It is a modal on your page,..."
---


# Recommend a shoe size

A shopper scans their feet once, then the product page shows which of **your** sizes is the closer match. The result is advisory. It is a modal on your page, not a heatmap painted on the shoe, and not a clothing size.

The scan app is [size.wearfits.com](https://size.wearfits.com). Android uses Chrome (WebXR). iOS uses an App Clip, with a web scan if the App Clip is not used. A later shoe can reuse the same foot profile.

An on-shoe fit picture is not part of this integration. The steps below are the advisory recommendation you can integrate now.

## At a glance

| | |
|--|--|
| Status | WEARFITS must register your `clientId` and origins before go-live. |
| Who does it | You send the registration details. Someone who can edit the product template pastes the snippet. |
| You need | Origins, a stable product id, and a millimetre table of the shoe's internal length (width and instep if you have them). |
| You connect | `https://size.wearfits.com/sdk/v1/index.js` on the product page. No Dashboard API key in that page. |
| The shopper sees | A size check, a short scan the first time, then a recommendation modal. |
| You receive | A size label and fit ratings. You do not receive the raw foot measurements. |

## Where this is not available

- The [Shopify app](../get-started/shopify.md) only shows the shoe on the foot.
- The [WooCommerce shoes plugin](../get-started/woocommerce.md) only shows the shoe on the foot.
- [Clothing size](../clothing/recommend-size.md) uses a body chart and `POST /api/v1/size-fitting`. Do not point a shoe catalog at it.

Both platform apps can still run visual try-on beside a custom size embed, but the size button is not one of their settings.

## 1. Register the store

Send WEARFITS:

- a stable public `clientId`, such as `example-shop` (this is not a secret)
- every origin that will host the button, including staging (`https://shop.example.com` and `https://staging.shop.example.com` are different)
- the languages you need (`en`, `pl`, `fr`, and `es` are included)

Production origins use HTTPS. Go-live waits on this registration. A wrong host, a missing `www`, or `http` instead of `https` is rejected as `origin_not_allowed`.

## 2. Prepare each shoe

For every size you sell, provide internal dimensions in millimetres:

| Field | Required | Meaning |
|-------|----------|---------|
| `name` | Yes | The label the shopper already knows, such as `42` or `US 9` |
| `length` | Yes | Internal length, millimetres |
| `width` | No | Millimetres |
| `instep` | No | Millimetres |

`unit` is `"mm"`. Send 1–64 sizes. Use one stable `productId` per product. Do not create a new id on every click.

## 3. Place the button

The snippet, the content-security policy, and the events are in the [Size SDK guide](../size/sdk-guide.md). Two shapes exist: the SDK draws the button, or you keep your own button and attach the SDK to it.

The shopper leaves for `size.wearfits.com` in a popup or a new tab (a same-tab redirect if the popup is blocked), then comes back to a modal. The widget is not an iframe.

## 4. What comes back

```json
{
  "recommendation": {
    "size": "43",
    "confidence": "advisory",
    "fit": {
      "overall": "good",
      "length": "good",
      "width": "good",
      "instep": "tight"
    }
  }
}
```

`confidence` is always `"advisory"`. Show it as guidance. Do not block checkout, and do not hide the size selector.

## What the shopper does

The scan itself is described in the [foot-size user guide](../size/user-guide.md): camera permission, both feet, a result page with size and width labels, then a return to the shoe when you passed `return_url`.

A public demo at [size.wearfits.com/demo_size.html](https://size.wearfits.com/demo_size.html) uses a sample person and does not scan.

## Try-on is separate

Visual try-on stays on [See a shoe on the foot](see-on-foot.md). Size does not create a 3D model, and try-on does not read this size table.