{% assign target_gender_values = product.metafields.shopify.target-gender.value | default: "" %} {% assign target_gender_string = '' %} 
{% for value in target_gender_values %} {% if forloop.last %} {% assign target_gender_string = target_gender_string | append: value.label %} {% else %} {% assign
target_gender_string = target_gender_string | append: value.label | append: ',' %} {% endif %} {% endfor %} {% assign available_sizes =
 product.variants | map: 'option1' | uniq %} {% assign aisizing_enable = product.metafields.custom.aisizing_enable.value | default: false %}
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://www.truesize.ai/Common/external/v2.1/measureme_integ.js"></script>

     <style>
    .highlight {
         border: 2px solid #8800b7;
        box-shadow: 0 0 10px #8800b7;
             }
     </style>
                                      
     <div class="product-form__buttons">
     <measureme-integ>
     clientid="use your client id"
     apiKey="use your apikey"
     brand="Your brand name"
    email="{{ customer.email | default: '' }}"
   product="{{ product.title | default: '' }}";
    category="{{ product.category | default: '' }}"
    gender="{{ target_gender_string | escape }}"
    productid="{{ product.id | default: '' }}"
    domain="{{ shop.domain | default: '' }}"
    enabled="{{ aisizing_enable | default: false }}"
    target="modal"
    garment_type="{{ product.metafields.custom.garment_type.value | default: '' }}"
                                      
    </measureme-integ>
    </div>


                                

{% raw %}{{ 'another-size-me-component.js' | asset_url | script_tag }} 
{% endraw %}
                                

{% raw %}{{ 'another-size-me-component.js' | asset_urlllll | script_tag }} 
{% endraw %}
                                

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://www.truesize.ai/Common/external/v2.1/measureme_integ.js"></script>
                                   
<style>
 .highlight {
border: 2px solid #8800b7;
box-shadow: 0 0 10px #8800b7;
 }
</style>
                                                                         
<div class="product-form__buttons">
<measureme-integ>
clientid="use your client id"
apiKey="use your apikey"
brand="Your brand name"
email="customer email"
product="product title";
category="product category"
gender="target_gender_string"
productid="product id"
domain="shop domain"
enabled="True/False"
target="modal"
garment_type="product metafields"
                                                                         
</measureme-integ>
</div>
                                   
                                

<script src="https://cdn.sizeme.com/another-size-me.js"></script>
<size-me product-id="12345"></size-me>