Size guide button

For your developer

What it does: Puts a TryYourSize 'Size guide' link where our current size guide link is. Connected shoppers see 'Your size: M' on page load, and we can preselect that size. We receive sizes only.

Time needed: About an hour once the web SDK is on the page.

What to send them: The publishable key (pk_test_… first, pk_live_… to go live) and our site origins to register.

The sizeGuide element is link-sized (32–34 px tall) and sits next to your size picker, where a “Size guide” link usually is.

JavaScriptHTML (no code)React

<div class="size-row">
  <span>Size</span>
  <span id="tys-guide"></span>      <!-- where your "Size guide" link was -->
</div>
<script src="https://js.tryyoursize.com/v1/tys.js"></script>
<script>
  const tys = TryYourSize("pk_test_…");
  const guide = tys.elements().create("sizeGuide", { product: "SKU-123", variant: "link" }); // or "button"
  guide.mount("#tys-guide");
</script>

<script src="https://js.tryyoursize.com/v1/tys.js"></script>
<tys-size-guide publishable-key="pk_test_…" product="SKU-123" variant="link"></tys-size-guide>

<SizeGuide product="SKU-123" variant="link" />

States

“Size guide” (signed out) → “Calculating your size…” → “Your size: M” (connected, with a small dot on the mark), or “Size guide · connected” (connected, no size for this product yet). A click opens the full window.

Label and language

• The label follows locale ("auto": your page’s <html lang>, then the browser): “Size guide”, “Guía de tallas”, “Guide des tailles”, “Größentabelle”, “Guida alle taglie”.
• label sets your own words.

Look

It renders in your page (Shadow DOM, no visible iframe), so it takes your font and text colour where you mount it. Override with appearance.variables: colorText, fontFamily, colorPrimary (the “connected” dot) and borderRadius (for variant: "button"). See Appearance and theming.

Why it is safe in your page

The TryYourSize session lives in our origin’s storage, which your page cannot read. One invisible frame on our origin per page (a few KB, shared by every element) reads it and tells your page sizes only, and only when your page’s origin is registered for the key.

Preselect the size

The size guide always reports the recommendation event, so you can preselect your size picker on page load. See Recommended size and preselection.