Skip to content
View Markdown

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. 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

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. 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

{
  "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: 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 uses a sample person and does not scan.

Try-on is separate

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