Widget attributes

The size button reads its settings from the attributes of <fmt-size-recommender>, or from the keys you pass to FitMyType.createWidget. Attribute names are read in any letter case (clientId, clientid). A value that is not allowed is ignored with a console warning, and the default is used; the button still shows.

Attributes and keys

Attribute	createWidget key	Required	What it does
`clientId`	`client_id`	Yes	Your client ID from the back-office (a whole number). You may give brandId instead.
`brandId`	`brand_id`	No	A brand ID instead of clientId, for groups that share one catalogue.
`productId`	`product_id`	Yes	The product reference, exactly as in your catalogue feed or Shopify sync.
`language`	`language`	Yes	The store language as a language code (see the table below).
`availableSizes`	`available_sizes`	No	The sizes on sale, comma separated (or an array in createWidget). Sizes not listed are shown as not available.
`productImageUrl`	`product_image`	No	An absolute https:// URL of the product image, shown in the result.
`braInputMandatory`	`bra_input_mandatory`	No	true or false: whether the shopper must give a bra size. Unset: your back-office setting decides.
`buttonText`	`button_text`	No	Your own button text instead of the default.
`channel`	`channel`	No	A free label for the sales channel, such as web or app. It is stored with events.
`shopCountry`	`shop_country`	No	The shop country as an ISO 3166-1 alpha-2 code, or WW for a worldwide shop.
`debug`	`debug`	No	true writes what the widget does to the browser console.
`logo`	`logo`	No	The small logo on the button (see Logo below).
`logoStyle`	`logoStyle`	No	The same as logo, under the name the Shopify theme config uses (see Logo below).
`tooltipPosition`	`tooltip_position`	No	Where the tooltip opens next to the button (see Tooltip position below).
`unitSystem`	`unit_system`	No	metric or imperial. Unset: follows the language region and your back-office setting.
`endBehavior`	`end_behavior`	No	What happens when the shopper closes the widget with a size: none, select-size or add-to-cart.
`fontFamily`	`font_family`	No	The button's font family, to match your theme.
`fontFallback`	`font_fallback`	No	The fallback font list used while your font loads.
`fontFaceCss`	`font_face_css`	No	An absolute URL of a stylesheet with your @font-face rules.

Only for createWidget: target, text, size_picker_root. target is the element to fill; text is the button text, as one text or as { en: '…' } per language; size_picker_root is the element (or CSS selector) that holds your size picker, by default the button's closest form.

tooltipPosition takes one of 7 values. The default is bottom-left; a missing, unknown or default value also gives bottom-left. When the tooltip does not fit on the screen, an upper position opens below instead (and a bottom one above).

Value	Where the tooltip opens
`bottom`	Under the button, centred.
`bottom-left`	Under the button, starting at its left edge. The default.
`bottom-right`	Under the button, ending at its right edge.
`left`	Beside the button, on its left.
`upper`	Above the button, centred.
`upper-left`	Above the button, starting at its left edge.
`upper-right`	Above the button, ending at its right edge.

Logo

The logo on the button has two names. logo is the attribute and the createWidget key. logoStyle is the name in the Shopify theme snippet's config block, and the widget reads it too. When both are given, logo wins. An unknown value gives the default logo.

Value	Logo
`default`	The FitMyType wordmark. The default.
`s`	The short, square mark.
`ruler`	The mark with a ruler.
`scale`	The mark with a scale.
`none`	No logo.

After a size is chosen

endBehavior. Unset: your back-office setting decides.

Value	What happens
`none`	Only show the recommended size.
`select-size`	Also select it in your size picker.
`add-to-cart`	Also select it and add it to the cart.

Button text

The default English button text is "What is my size?". Set your own with buttonText, or in the back-office for every product at once.

Language codes

language takes a BCP-47 language code, such as your store's own locale. Letter case does not matter. Only English (en) ships today: every other code shows the widget in English until its language ships. us and en-US both give English with region US (inches, pounds and US bra sizes); en-GB gives English with region UK.