<tys-size-guide>

Web component@tryyoursize/sdk/elements

The size guide element as a tag: “Size guide” with the TryYourSize mark, then “Your size: M” once the shopper is connected.

Attributes

publishable-keystringObligatorio

Your publishable key (pk_test_… / pk_live_…).

productstringObligatorio

Your product ID or SKU.

variant"link" | "button"Opcional

A text link (default) or an outlined button.

labelstringOpcional

Your own words for "Size guide" (otherwise localized).

localestringOpcional

BCP 47 language; default: your page's <html lang>, then the browser.

Example

HTML

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

<script>
  document.querySelector("tys-size-guide")
    .addEventListener("tys:recommendation", (e) => e.detail.status === "ready" && preselect(e.detail.size));
</script>

See also

• Shopify (no code)
• Size guide quickstart