Ready-to-Wear

Previous Steps

Sign-Up or Account Registration Client Id and ApiKey Generation Sizing Guidelines

Ready-To-Wear

The Size Me Component is designed for ready-to-wear (RTW) fashion brands that adhere to predefined sizing guidelines. If your business manufactures clothing based on standard sizes—such as Small, Medium, Large, or numerical sizes (e.g., 6, 8, 10)—this component is the ideal choice.

In ready-to-wear fashion, there are two types of usage: Shopify and non-Shopify.

Shopify +

Non-Shopify +

V2.1 Shopify Integration[light Theme]

Use this Liquid code snippet in your Shopify White theme:

{% 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 %}
<script src=""https://www.truesize.ai/Common/external/v2/sizeme_integ.js"></script>
                                   
<style>
.highlight {
    border: 2px solid #8800b7;
    box-shadow: 0 0 10px #8800b7;
  }
  </style>
  
  <div class="product-form__buttons">
    <sizeme-integ
      clientid="use your client id"
      apiKey="use your api key"
      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 }}"
      available_sizes="{{ available_sizes | join: ',' }}"
      highlight_event="Highlight_Size"
      target="modal"
    >
    </sizeme-integ>
  </div>
  
  
    <script>
        function Highlight_Size(size) {
          //const sizeRadios = document.querySelectorAll('input[name*="Size-1"]');
          const sizeRadios = document.querySelectorAll('input[name="Size"]');
          sizeRadios.forEach((radio) => {
            const label = document.querySelector(`label[for="${radio.id}"]`);
            if (radio.value.trim() === size) {
              radio.checked = true;
              radio.dispatchEvent(new Event("change"));
              label.classList.add("highlight");
              label.title = "Your recommended size";
            } else {
              label.classList.remove("highlight");
            }
          });
        }
      </script>                                    
       </div>

V2.2 Shopify Integration[Dark Theme]

Use this Liquid code snippet in your Shopify Dark Theme:

     {% 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 %}
     <script src="https://www.truesize.ai/Common/external/v2.2/sizeme_integ.js"></script>
                                                                       
    <style>
    .highlight {
    border: 2px solid #8800b7;
    box-shadow: 0 0 10px #8800b7;
    }
    </style>
                                      
    <div class="product-form__buttons">
        <sizeme-integ
          clientid="Use Your Cleint Id"
          apiKey="Use Your API"
          brand="Your Brand Name"
          email="{{ customer.email | default: '' }}"
          product="Shirt"
          category="{{ product.category | default: '' }}"
          gender="{{ target_gender_string | escape }}"
          productid="{{ product.id | default: '' }}"
          domain="{{ shop.domain | default: '' }}"
          enabled="{{ aisizing_enable | default: false }}"
          available_sizes="{{ available_sizes | join: ',' }}"
          highlight_event="Highlight_Size"
          target="modal"
        >
        </sizeme-integ>
      </div>
                                      
     <script>
     function Highlight_Size(size) {
        const sizeRadios = document.querySelectorAll('input[name="Size"]');
        sizeRadios.forEach((radio) => {
          const label = document.querySelector(`label[for="${radio.id}"]`);
          if (radio.value.trim() === size) {
            radio.checked = true;
            radio.dispatchEvent(new Event("change"));
            label.classList.add("highlight");
            label.title = "Your recommended size";
          } else {
            label.classList.remove("highlight");
          }
        });
      }
   </script>

V2.3 Shopify Option[3D Store]

Use this Liquid code snippet in your 3D Store:

{% 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 %}
                                        
                                        
<script src="https://www.truesize.ai/Common/external/v2.3/sizeme_integ.js"></script>
                                                                                                           
<style>
.highlight {
    border: 2px solid #8800b7;
    box-shadow: 0 0 10px #8800b7;
  }

  @font-face {
    font-family: "HelveticaNeue";
    src: url("https://www.truesize.ai/Common/external/font/helvetica-neue/HelveticaNeueBlack.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
  }

  sizeme-integ {
    font-family: "HelveticaNeue", Arial, sans-serif;
  }
</style>
                                                                          
 <div class="product-form__buttons">
 <sizeme-integ
    clientid="Use Your Client ID"
    apiKey="Use Your API"
    brand="Your Brand Name"
    email="{{ customer.email | default: '' }}"
    product="Shirt"
    category="{{ product.category | default: '' }}"
    gender="{{ target_gender_string | escape }}"
    productid="{{ product.id | default: '' }}"
    domain="{{ shop.domain | default: '' }}"
    enabled="{{ aisizing_enable | default: false }}"
    available_sizes="{{ available_sizes | join: ',' }}"
    highlight_event="Highlight_Size"
    target="modal"
                                              
    >
    </sizeme-integ>
    </div>
                                                                          
    <script>
    function Highlight_Size(size) {
    //const sizeRadios = document.querySelectorAll('input[name*="Size-1"]');
    const sizeRadios = document.querySelectorAll('input[name="Size"]');
    sizeRadios.forEach((radio) => {
    const label = document.querySelector(`label[for="${radio.id}"]`);
    if (radio.value.trim() === size) {
    radio.checked = true;
    radio.dispatchEvent(new Event("change"));
    label.classList.add("highlight");
    label.title = "Your recommended size";
    } else {
        label.classList.remove("highlight");
          }
        });
      }
</script>

V2.3 NonShopify Option

Include this JavaScript snippet in your HTML page:

<script src="https://www.truesize.ai/Common/external/v2.3/sizeme_integ.js"></script>
                                                                                                           
<style>
 .highlight {
 border: 2px solid #8800b7;
 box-shadow: 0 0 10px #8800b7;
     }
                                    
@font-face {
font-family: "HelveticaNeue";
 src: url("https://www.truesize.ai/Common/external/font/helvetica-neue/HelveticaNeueBlack.otf") format("opentype");
font-weight: normal;
 font-style: normal;
  }
                                    
 sizeme-integ {
font-family: "HelveticaNeue", Arial, sans-serif;
    }
 </style>
                                                                                                              
 <div class="product-form__buttons">
 <sizeme-integ
clientid="Use Your Client ID"
apiKey="Use Your API"
brand="Your Brand Name"
email="customer email id"
product="Product name"
category="product category"
gender="target_gender_string"
productid="product.id"
domain="shop domain"
enabled="True/false"
available_sizes="available_sizes(XS,S,M,L,XL,XXl)"
highlight_event="Highlight_Size"
target="modal"
                                                                                  
 >
</sizeme-integ>
</div>
                                                                                                              
<script>
 function Highlight_Size(size) {
//const sizeRadios = document.querySelectorAll('input[name*="Size-1"]');
const sizeRadios = document.querySelectorAll('input[name="Size"]');
sizeRadios.forEach((radio) => {
const label = document.querySelector(`label[for="${radio.id}"]`);
if (radio.value.trim() === size) {
radio.checked = true;
radio.dispatchEvent(new Event("change"));
label.classList.add("highlight");
label.title = "Your recommended size";
 } else {
label.classList.remove("highlight");
}
});
 }
</script>

Next Step

Configuration of Product Enablement