Step 2: Widget

The widget is the size button on your product page. It opens the size finder and shows the recommended size. On Shopify, add it with the theme app block (see the Shopify app guide) or the theme snippet. On any other site, use plain HTML as shown here.

Plain HTML

Paste this where the button should appear, on every product page. Fill each {{ … }} value from the page: the product reference from your catalogue, the sizes on sale, the product image and the store language. Replace clientId with your own (Settings › Account shows this snippet with it filled in).

<script type="module" src="https://recommender.fitmytype.com/sr.js"></script>
<fmt-size-recommender
  clientId="625"
  productId="{{ product id }}"
  availableSizes="{{ available sizes, comma separated }}"
  productImageUrl="{{ absolute image url }}"
  language="{{ store language }}"
  shopCountry="WW"
></fmt-size-recommender>

The script loads as a module, in the background, so it never blocks your page. The button shows the text "What is my size?" unless you set buttonText. Every attribute is listed in Widget attributes.

From JavaScript

If your page builds its product area with JavaScript, create the button with FitMyType.createWidget. It takes the same values, with the names in the second column of Widget attributes, and the element to fill as target.

<script src="https://sdk.fitmytype.com/sdk.js" async></script>
<div id="size-button"></div>
<script>
  window.addEventListener("load", function () {
    window.FitMyType.createWidget({
      client_id: 625,
      product_id: 'JACKET-01',
      language: 'en',
      available_sizes: ['S', 'M', 'L'],
      target: document.getElementById('size-button'),
    });
  });
</script>

The product view is sent for you

You do not send a product view event. The widget sends product by itself, once for each button when it starts, or when the shopper gives analytics consent later. See Tag events.

Shop domains

The widget answers only on the shop domains you added in the back-office. If the button does not show, see Widget not showing.

Next: Step 3: Events.