Size Button Options

Size button options are configured by adding the size button script and passing attributes to the strutfit-size-button component.


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


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

Required Parameters

product-code: Unique product identifier used for products in StrutFit.
- Type: string

Optional Parameters

id: Custom HTML id for the size button element.
- Type: string
product-name: Overrides the product name used in the app.
- Type: string
- Default: Product name set on the StrutFit dashboard
product-image-url: Overrides the product image used in the app.
- Type: string
- Default: Product image set on the StrutFit dashboard
default-size-unit: Overrides the default size unit used in the app.
- Type: string
- Default: Size unit set on the StrutFit dashboard
- Common values include: us, uk, eu
default-apparel-size-unit: Sets the default apparel size unit.
- Type: string
is-kids: Indicates whether the product is for kids.
- Type: boolean
- Default: The value is automatically set to true if the product is marked as a kids product on the StrutFit dashboard.
variant: Sets the button variant style.
- Type: string
- Allowed values: contained, outlined
disabled: Disables button interaction when set to true.
- Type: boolean
full-width: Makes the button fill the width of its container when set to true.
- Type: boolean
show-icon: Controls icon visibility.
- Type: boolean
border-radius: Sets button border radius.
- Type: string
background-color: Sets button background color.
- Type: string
border: Sets the full CSS border value.
- Type: string
border-color: Sets the border color.
- Type: string
font-family: Sets button font family.
- Type: string
- Default behavior: Attempts to inherit your website’s primary font then falls back to -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
font-size: Sets button font size.
- Type: string
font-weight: Sets button font weight.
- Type: string
color: Sets text color.
- Type: string
icon-color: Sets icon color.
- Type: string
margin: Sets shorthand margin.
- Type: string
margin-top: Sets top margin.
- Type: string
margin-left: Sets left margin.
- Type: string
margin-bottom: Sets bottom margin.
- Type: string
margin-right: Sets right margin.
- Type: string
text-transform: Sets text transform (e.g. uppercase, lowercase, capitalize).
- Type: string
line-height: Sets the line height.
- Type: string
- Default value: 1

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>