Add Widget

info

We now need to add the widget code which will open the widget. This is a server side rendered custom html element.

There are three different options for the code.

1. Predefined Sizing Button is a convenient way to get up and running fast, since it comes pre-packed with styles and customization options in the Smartfit Analytics backend.

2. Custom Sizing Button is fully customizable and meets the highest design standards.

3. Custom Sizing Button with Fallback is the same as the custom sizing button but additonally shows a fallback element of your choice if the sizing widget can't be loaded.

Regardless of which code you choose, the following attributes are mandatory. You would set those config attributes using your usual template variables, for example Liquid tags:

• name: The product title as it appears on your product page. You will usually use the same template tag to output this title as you're already using in the headline of your page.
• global-id: This takes the EAN/UPC product code of your bike. This can be the code of any of the frame sizes you are selling. For example the EAN code for the "XS" frame size. Our API will know which model you are looking for.
• variant-id: Unique product identifier that must be the same identifier used in the product feed for that product (see also Data Attributes in our Product Feed Requirements).
• image: A full URL to the image of the bike which you would like to see in the widget. Typically the first of the product images.
• price: The price of the product formatted as a floating number. This is necessary for the Recommendation Engine to work at its best.
• product-type: This information is necessary to control which features the widget can offer. Possible values are: Bike, Ski

The following attributes can also be passed optionally.

• id: Assign an ID to the widget to make it easier to select it afterwards.
• lang: To specify a fix language for the widget. Otherwise the language will be set based on the browser language.
• style-name: If we have set up a custom style for you you can specify the style to be applied on the widget here by the style name.

important

The widget should only be loaded on relevant product pages. This can be achieved e.g. with a condition that checks if the product belongs to a certain category or is of a certain type. The condition is individual and depends on the conditions given in the online shop (e.g. categories, product types etc.).

Widget Code

Predefined Sizing Button

This is the easiest implementation which appears in the same styling as the CTA button inside the product sizing widget.

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<sf-product-sizing  
  name="{{ Product title variable }}" 
  global-id="{{ GTIN variable }}" 
  variant-id="{{ Variant-ID variable }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
</sf-product-sizing>

Custom Sizing Button

This variant allows you to style the button to your liking. The button will respect all CSS of your page as if it were placed anywhere else.

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<sf-product-sizing  
  name="{{ Product title variable }}" 
  global-id="{{ GTIN variable }}" 
  variant-id="{{ Variant-ID variable }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
  <button type="button" style="visibility: hidden" class="custom-btn"></button>
</sf-product-sizing>

Initial Visibility

It is highly recommended to include the style="visibility: hidden" attribute to ensure the button isn't shown until our code was processed.

The reason behind this is that web components show the elements inside them (in this case inside the <sf-product-sizing> tag) until they're fully loaded.

Button Content

In this section multiple methods of configuring the text displayed on the button are shown. The required attributes for the sf-product-sizing tag are omitted for brevity.

Default Text

To use the default button text provided by us, you can simply leave the button element empty:

<sf-product-sizing>
  <button></button>
</sf-product-sizing>

Custom Button Text

You can also put your own text inside the button. This text will be displayed initially until the button can display a text about a fitting size.

<sf-product-sizing>
  <button>Determine your ideal size!</button>
</sf-product-sizing>

Assuming a first-time user visits your site the button will show the following texts:

• Visits page -> Determine your ideal size!
• Opened widget and finished until the end -> Your recommended size: L
• Deleted data inside widget -> Determine your ideal size!

Custom Button Text with additional Content

If you want multiple elements inside the button like icons or multiple texts, the data-sf-label attribute needs to be used:

<sf-product-sizing>
  <button>
    <img src="sizing-icon.png" alt="Sizing Icon" />
    <span data-sf-label>Determine your ideal size!</span>
    <span>This text will not be changed by the widget</span>
  </button>
</sf-product-sizing>

warning

If you don't include any element with the data-sf-label the entire content of the button will be overriden by our text.

Custom Sizing Button with Fallback

This variant is identical to the above one, with the added bonus of allowing you to include elements which get displayed in case our script doesn't load:

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<sf-product-sizing  
  name="{{ Product title variable }}" 
  global-id="{{ GTIN variable }}" 
  variant-id="{{ Variant-ID variable }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
  <!-- The elements outside the <template> are shown if the widget cannot be loaded -->
  <a href="#">Your fallback element</a>
  <span>You may also use multiple elements here</span>

  <!-- The template tag must be a direct child of the sf-product-sizing element! -->
  <template>
    <button type="button" class="custom-btn"></button>
  </template>
</sf-product-sizing>

tip

For this variant you don't need the style="visibility: hidden" attribute, as template tags are invisible already.