Size Button

Remember, the Assistant Manager must always be present for any StrutFit features to work.

The size button is a small component that is placed on the product page. It is used to display a button that when clicked opens the size assistant.

Integrating the Size Button

To integrate the size button, add the following script to your website on pages where the size button should appear:


<script src="https://store-assistant-sizebutton.strut.fit" async></script>

Adding the Component

Place the component where you want the size button to appear:


<strutfit-size-button product-code="{{ProductIdentifier}}"></strutfit-size-button>

Replace {{ProductIdentifier}} with the unique product identifier you use for products in StrutFit.

Required Parameters

product-code: The unique product identifier you use for products in StrutFit.

Optional Parameters

id: Custom HTML id for the size button element.
product-name: Overrides the product name used in the app. By default, this uses the name set on the StrutFit dashboard.
product-image-url: Overrides the product image used in the app. By default, this uses the image set on the StrutFit dashboard.
default-size-unit: Overrides the default size unit used in the app. By default, this uses the size unit set on the StrutFit dashboard. Common values include us, uk, and eu.
default-apparel-size-unit: Sets the default apparel size unit.
is-kids: Set to true for kids products.
variant: Sets the button variant style. Valid values are contained or outlined.
disabled: Set to true to disable button interaction.
full-width: Set to true to make the button fill the width of its container instead of sizing responsively to its text.
show-icon: Set to true or false to control icon visibility.
border-radius: Sets button border radius.
background-color: Sets button background color.
border: Sets the full CSS border value.
border-color: Sets the border color.
font-family: Sets button font family.
font-size: Sets button font size.
font-weight: Sets button font weight.
color: Sets text color.
icon-color: Sets icon color.
margin: Sets shorthand margin.
margin-top: Sets top margin.
margin-left: Sets left margin.
margin-bottom: Sets bottom margin.
margin-right: Sets right margin.
text-transform: Sets text transform (e.g. uppercase, lowercase, capitalize).
line-height: Sets the line height. Defaults to 1.

Note: font-family will try to inherit your primary website font by default. If you change it, make sure that font is loaded on your website.

For a full list of options, see the Size Button Options page.

Example With All Options


<strutfit-size-button
  id="size-button-123"
  product-code="{{ProductIdentifier}}"
  product-name="{{ProductTitle}}"
  product-image-url="{{ProductImage}}"
  default-size-unit="EU"
  default-apparel-size-unit="EU"
  is-kids="false"
  variant="contained"
  disabled="false"
  full-width="true"
  show-icon="true"
  border-radius="8px"
  background-color="#fdc283"
  border="1px solid #d9a35f"
  border-color="#d9a35f"
  font-family="arial"
  font-size="14px"
  font-weight="700"
  color="#3d2a1a"
  icon-color="#3d2a1a"
  margin="8px 0"
  margin-top="8px"
  margin-left="0"
  margin-bottom="8px"
  margin-right="0"
  text-transform="uppercase"
  line-height="1"
></strutfit-size-button>