Sizing widget customization

1) Remove the sizing bar

If you only want to display the text recommendation, you can remove the bar.

✅ Recommended method (edit the code)

Find this section inside the renderSizingBar function:

container.innerHTML = `
  <div class="sizing-disclaimer">
    ...
  </div>

  <div class="sizing-bar-wrapper">
    ...
  </div>
`;

Replace it with:

container.innerHTML = `
  <div class="sizing-disclaimer">
    <span class="sizing-disclaimer-icon">
      <span class="sizing-disclaimer-i">i</span>
    </span>
    <span class="sizing-disclaimer-text">${disclaimer}</span>
  </div>
`;

✔ Result: only the message is shown
❌ The bar is completely removed

Alternative (no code change)

Hide the bar using CSS:

.sizing-bar-wrapper {
  display: none;
}

✔ Easier
⚠️ The bar is still loaded (just hidden)

2) Change the styling of the text message

The message is controlled by this class:

.sizing-disclaimer

Main styles you can change

.sizing-disclaimer {
  background: #f7f7f7;   /* background color */
  border-radius: 10px;   /* rounded corners */
  padding: 14px 18px;    /* spacing */
  font-size: 16px;       /* text size */
  color: #222;           /* text color */
}

Change only the text style

.sizing-disclaimer-text {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
}

Example: more compact message

.sizing-disclaimer {
  background: #efefef;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
}

Optional: remove the icon

Option A – remove from code

Delete:

<span class="sizing-disclaimer-icon">
  <span class="sizing-disclaimer-i">i</span>
</span>

Option B – hide with CSS

.sizing-disclaimer-icon {
  display: none;
}

3) Change text & add translations

All text is stored in:

window.sizingLabels = { ... }

Change existing text

Example: update English text

en: {
  small: 'Runs Small',
  normal: 'True to size',
  large: 'Runs Large',
  disclaimerSmall:  'Size Recommendation: This item is a small fit...',
  disclaimerNormal: 'Size Recommendation: This item is true to size...',
  disclaimerLarge:  'Size Recommendation: This item runs large...',
}

You can edit any of these values:

• small, normal, large → labels (used in the bar)

• disclaimerSmall, disclaimerNormal, disclaimerLarge → main message

Add a new language

Add a new block inside window.sizingLabels.

Example:

ro: {
  small: 'Mic',
  normal: 'Mărime normală',
  large: 'Mare',
  disclaimerSmall:  'Recomandare: Produsul este mic. Alege o mărime mai mare.',
  disclaimerNormal: 'Recomandare: Produsul are mărime normală.',
  disclaimerLarge:  'Recomandare: Produsul este mare. Alege o mărime mai mică.',
}

Language format

Use standard locale codes:

• en, es, fr, de, it

• pt-BR, pt-PT

• zh-CN, zh-TW

How language is selected

The widget automatically uses:

window.sizingLocale = ""

And falls back like this:

1. Exact match (e.g. pt-BR)

2. Base language (e.g. pt)

3. English (en)

Summary