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.

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


{% 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 }}"
>
</fitle-size-recommender>