Skip to content
Fitle

Widget

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' %}.

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:

{% 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 %}


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