# Size guide

> A "Size guide" link next to your size picker that becomes "Your size: M" for connected shoppers, on the web, in apps and on Shopify.

Source: https://docs.tryyoursize.com/products/size-guide/

The **size guide** is the smallest way to add TryYourSize: a link-sized "Size guide" with the TryYourSize mark, placed where your store already has its size chart link. It renders in your page (no iframe to paint) and takes your store's own font and colour.

| Shopper | What they see |
|---|---|
| Not connected | "Size guide". A tap opens our window: sign in with an email code, or measure with a tape measure. |
| Connected, size known | "Your size: **M**", in your size labels. |
| Connected, try-on running | "Calculating your size…" |
| Connected, no size can be worn | "No size fits you" |

Your code gets the same information as a `recommendation` event, so you can **preselect** your size picker. You receive sizes only, never measurements.

## Where it runs

| Surface | How |
|---|---|
| Any website | `elements.create("sizeGuide", …)` or `<tys-size-guide>` ([Web SDK](https://docs.tryyoursize.com/reference/web/elements-create.md)) |
| React | [`<SizeGuide>`](https://docs.tryyoursize.com/reference/react/size-guide.md) |
| iOS | [`SizeGuide`](https://docs.tryyoursize.com/reference/ios/size-guide.md) (SwiftUI) and [`SizeGuideButton`](https://docs.tryyoursize.com/reference/ios/size-guide-button.md) (UIKit) |
| Android | [`SizeGuide`](https://docs.tryyoursize.com/reference/android/size-guide.md) (Compose) and [`SizeGuideView`](https://docs.tryyoursize.com/reference/android/size-guide-view.md) |
| React Native, Flutter | [`<SizeGuide>`](https://docs.tryyoursize.com/reference/react-native/size-guide.md), [`SizeGuide`](https://docs.tryyoursize.com/reference/flutter/size-guide.md) |
| Shopify | The "Size guide" theme block ([no code](https://docs.tryyoursize.com/quickstarts/shopify.md)) |

- [Size guide quickstart](https://docs.tryyoursize.com/quickstarts/size-guide.md): Add it next to your size picker in ten minutes.
- [Preselect the recommended size](https://docs.tryyoursize.com/guides/recommendation-event.md): Use the recommendation without overriding the shopper's choice.