Fit Tip

Remember, the Assistant Manager script must always be present for any StrutFit features to work. You may have already added this if you have integrated a StrutFit component in the past. If not, please add the script to all pages where StrutFit will be used. Ideally, we recommend adding it somewhere it is loaded on all pages (such as the <head>) so you don't have to think about it. The script is small and will be cached, so it won't affect your load times.

The fit tip is a lightweight component that is placed on the product page. It is used to display context-aware fit guidance for the current product.

Integrating the Fit Tip

Add the following script once per page where the fit tip should appear:

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

Adding the Component

You can then place as many instances of the component as you need on the page (e.g. one per product). Only the script above needs to be included once.

<strutfit-fit-tip product-code="{{ProductIdentifier}}"></strutfit-fit-tip>

Replace {{ProductIdentifier}} with the unique product identifier you use for products in StrutFit. If your data has not been integrated into our system yet, the fit tip may not appear. Your account manager can also provide you with an example product identifier that can be used for testing.

Required Parameters

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

Optional Parameters

variant: Sets the fit tip variant style. Valid values are text or outlined.
show-icon: Set to true or false to control icon visibility.
full-width: Set to true to make the fit tip fill the width of its container.
font-family: Sets fit tip font family.
font-size: Sets fit tip font size.
font-weight: Sets fit tip font weight.
background-color: Sets fit tip background color.
border-radius: Sets fit tip border radius.
border: Sets the full CSS border value.
border-color: Sets the border color.
color: Sets text color.
icon-color: Sets icon color.
icon-size: Sets icon dimensions.
padding-top: Sets top padding.
padding-left: Sets left padding.
padding-bottom: Sets bottom padding.
padding-right: Sets right padding.
icon-text-gap: Sets the gap between the icon and the text.
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 Fit Tip Options page.

Example With All Options

<strutfit-fit-tip
  product-code="{{ProductIdentifier}}"
  variant="outlined"
  show-icon="true"
  full-width="false"
  font-family="arial"
  font-size="12px"
  font-weight="500"
  background-color="#f8f9fa"
  border-radius="8px"
  border="1px solid #dee2e6"
  border-color="#dee2e6"
  color="#333333"
  icon-color="#333333"
  icon-size="12px"
  padding-top="12px"
  padding-left="16px"
  padding-bottom="12px"
  padding-right="16px"
  icon-text-gap="8px"
  margin="8px 0"
  margin-top="8px"
  margin-left="0"
  margin-bottom="8px"
  margin-right="0"
  text-transform="uppercase"
  line-height="1"
></strutfit-fit-tip>