Widget

Note

For a hands-off approach, we can handle the entire integration process for you. Simply grant us access to your store(s). Full details in our dedicated guide here.

To add the widget, you will need to edit the product page. As explained in the Widget section, you should integrate the loading of a script and the instantiation of the custom element.

We recommend using Shopify sections and/or snippets to keep your code modular. For more information, refer to the official documentation on theme architecture. For example, if you decide to use a snippet called fitle.liquid, you can then include it in the product page by adding {% render 'fitle' product: product %}.

Here is an example of Liquid code that defines the necessary variables for the widget using Shopify’s contextual information, and then instantiates the custom HTML element:

<div class="fitle-button">
  {% assign productId = <product_id> %}
  {% assign language = request.locale.iso_code %}
  {% assign imageUrl = product | image_url %}
  {% assign delimiter = ',' %}
  {% assign sizes = '' %}
  {% assign shopCountry = shop.address.country_code %}

  {% for a_variant in product.variants %}
    {% if a_variant.available %}
      {% unless sizes == '' %}
        {% assign sizes = sizes | append: delimiter %}
      {% endunless %}
      {% assign sizes = sizes | append: a_variant.options[0] %}
    {% endif %}
  {% endfor %}

  <script type="module" src="https://recommender.fitle.com/sr.js"></script>

  <fitle-size-recommender
    clientId="<client_id>"
    productId="{{ productId }}"
    availableSizes="{{ sizes }}"
    productImageUrl="{{ imageUrl }}"
    language="{{ language }}"
    shopCountry="{{ shopCountry }}"
  >
  </fitle-size-recommender>

</div>

Caution

Make sure to replace <client_id> with the client ID provided to you.

Caution

<product_id> is the identifier for the product. It has to be the same provided with feeds and events. If the feeds use Shopify’s product ID, you can use product.id.

Note

The field shopCountry is optional, and it should only be used if you need to segment data per-country in the back-office dashboard. More details about its values are on its widget counterpart. If set, all events will be automatically augmented with its value when sent.

---

Premium integration (Fitle SDK)

If you have a custom theme and cannot use the theme editor, or want all premium features (auto-size recommendation, auto-add-to-cart, auto-recommendation on page load), use the Fitle SDK integration with the companion helper script.

Prerequisites

• The Fitle app must be installed and configured on your store. This creates the shop.metafields.fitle_app.client_id metafield that the widget reads automatically.

Liquid snippet

Add the following code to your product page template (e.g. product-hero section) near the variant selector:

{%- assign fitle_client_id = shop.metafields.fitle_app.client_id.value -%}
{%- if fitle_client_id != blank -%}
  {%- liquid
    assign fitle_size_option_index = 0
    for option in product.options
      assign opt_lower = option | downcase
      if opt_lower contains 'size' or opt_lower contains 'taille' or opt_lower contains 'größe' or opt_lower contains 'grosse' or opt_lower contains 'talla' or opt_lower contains 'maat' or opt_lower contains 'koko' or opt_lower contains 'storlek' or opt_lower contains 'størrelse' or opt_lower contains 'taglia' or opt_lower contains 'tamanho' or opt_lower contains 'rozmiar' or opt_lower contains 'velikost' or opt_lower contains 'méret' or opt_lower contains 'mărime' or opt_lower contains 'beden' or opt_lower contains 'suurus' or opt_lower contains 'izmērs' or opt_lower contains 'dydis'
        assign fitle_size_option_index = forloop.index
        break
      endif
    endfor

    if fitle_size_option_index == 0
      assign fitle_size_option_index = 1
      for option_with_values in product.options_with_values
        for val in option_with_values.values
          assign val_lower = val | downcase | strip
          if val_lower == 'xs' or val_lower == 's' or val_lower == 'm' or val_lower == 'l' or val_lower == 'xl' or val_lower == 'xxl' or val_lower == '2xl' or val_lower == '3xl' or val_lower == 's/m' or val_lower == 'm/l' or val_lower == 'l/xl' or val_lower == 'one size' or val_lower == 'os'
            assign fitle_size_option_index = option_with_values.position
            break
          endif
        endfor
        if fitle_size_option_index != 1
          break
        endif
      endfor
    endif
    assign fitle_opt_key = 'option' | append: fitle_size_option_index
    assign fitle_sizes = ''
    for variant in product.variants
      if variant.available
        assign fitle_sizes = fitle_sizes | append: variant[fitle_opt_key]
        unless forloop.last
          assign fitle_sizes = fitle_sizes | append: ','
        endunless
      endif
    endfor
    assign fitle_size_option_name_index = fitle_size_option_index | minus: 1
  -%}

  <script id="fitle-config" type="application/json">
    {
      "clientId": {{ fitle_client_id | json }},
      "productId": {{ product.id | json }},
      "productImage": {{ product.featured_image | image_url: width: 600 | json }},
      "language": {{ request.locale.iso_code | json }},
      "shopCountry": {{ localization.country.iso_code | json }},
      "availableSizes": {{ fitle_sizes | split: ',' | json }},
      "sizeOptionName": {{ product.options[fitle_size_option_name_index] | json }},
      "variants": { {% for variant in product.variants %}{{ variant[fitle_opt_key] | json }}: {{ variant.id }}{% unless forloop.last %},{% endunless %}{% endfor %} }
    }
  </script>
  <div id="fitle-widget-container"></div>
  <script src="https://sdk.fitle.com/sdk.js" defer></script>
  <script type="module" src="https://recommender.fitle.com/shopify-theme.js"></script>
{%- endif -%}

What you get

Feature	Supported
Auto-size recommendation widget	✅
Auto-select recommended size on page	✅ (15+ theme patterns)
Auto-add-to-cart after selection	✅
Auto-recommendation on page load	✅
Settings: buttonText, logoStyle, tooltipPosition, fontFamily, fontFallback, fontFaceCss, channel, unitSystem, braInputMandatory	✅ (add to the JSON blob)
Future SDK updates	✅ (CDN, automatic)
Future helper script updates	✅ (shopify-theme.js on CDN)
Liquid data changes	Only when new product fields are needed

Customising settings

Add optional fields to the JSON blob to override defaults. Fields can be placed directly on the config object or inside a settings object:

{
  "settings": {
    "buttonText": "Find my size",
    "logoStyle": "ruler",
    "tooltipPosition": "left",
    "fontFamily": "Helvetica",
    "fontFallback": "sans-serif",
    "fontFaceCss": "@font-face { font-family: 'Helvetica'; src: url('https://cdn.shopify.com/...'); }"
  }
}

Field	Values
buttonText	Custom CTA text
logoStyle	default, s, ruler, scale, none
tooltipPosition	bottom-left, left
fontFamily	Font family used inside the widget
fontFallback	Fallback stack (e.g. sans-serif)
fontFaceCss	@font-face rules when the font is not a Google Font
channel	Selling channel for data segmentation (default shopify)
unitSystem	metric or imperial
braInputMandatory	Require the bra input step for women’s clothing

The recommendation popup font is managed in the Fitle dashboard. fontFamily/fontFallback/fontFaceCss are optional overrides for integrations that explicitly want the popup to match the site.