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 = 1
    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 'talla' or opt_lower contains 'maat'
        assign fitle_size_option_index = forloop.index
        break
      endif
    endfor
    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: button_text, logo_style, tooltip_position	✅ (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:

{
  "settings": {
    "buttonText": "Find my size",
    "logoStyle": "ruler",
    "tooltipPosition": "left"
  }
}