Try-on Button

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

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

Integrating the Try-on Button

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


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

Adding the Component

Place the component where you want the try-on button to appear:


<strutfit-tryon-button product-code="{{ProductIdentifier}}"></strutfit-tryon-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

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.
variant: Sets the button variant style. Valid values are contained or outlined.
show-icon: Set to true or false to control icon visibility.
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.
border-radius: Sets button border radius.
font-family: Sets button font family.
font-size: Sets button font size.
font-weight: Sets button font weight.
background-color: Sets button background color.
border: Sets the full CSS border value.
border-color: Sets the border color.
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 Try-on Button Options page.

Example With All Options


<strutfit-tryon-button
  product-code="{{ProductIdentifier}}"
  product-name="{{ProductTitle}}"
  product-image-url="{{ProductImage}}"
  variant="contained"
  show-icon="true"
  disabled="false"
  full-width="true"
  border-radius="8px"
  font-family="arial"
  font-size="14px"
  font-weight="700"
  background-color="#3b82f6"
  border="1px solid #3b82f6"
  border-color="#3b82f6"
  color="#ffffff"
  icon-color="#ffffff"
  margin="8px 0"
  margin-top="8px"
  margin-left="0"
  margin-bottom="8px"
  margin-right="0"
  text-transform="uppercase"
  line-height="1"
></strutfit-tryon-button>