How to Add a Size Chart in Webflow
By the ZeDaq.ai team · · 4 min read
On this page
To add a size chart in Webflow, put an HTML table in a CMS rich text field on each product, or use a code embed on the product template. Webflow's help center says custom code in a rich text field can create tables, so the table is built in HTML.
For a chart that also recommends a size to the shopper, you add a script to the page. This guide covers both. The same script-tag pattern is used in virtual try-on for WooCommerce.
What are your options for a Webflow size chart?
| Option | Where the chart lives | Best for |
|---|---|---|
| Rich text field with an HTML table | In each CMS item | A different chart per product |
| Code embed on the template | In the page design | One chart for all products |
| Size widget script | Added to the page | A chart that recommends a size |
Pick the first option if your products need different charts, such as tops and trousers.
How do you add a table in a CMS rich text field?
Webflow's help center says custom code, including tables, can be added in a rich text field. Its rich text element overview notes that you create tables and dividers with HTML. The steps are:
- Open your product collection in the CMS.
- Select the item and the rich text field.
- Press Enter for a new line and click the plus icon.
- Choose the HTML embed or code block option, then paste your table.
- Click Save and close, then publish and preview.
Webflow warns in its custom code in the CMS page that incorrect code can cause issues when you preview or publish, so test every product after the first.
What should the table contain?
Use body measurements, not garment widths. Add one row per size and one column per measurement. A tops chart needs chest. Dresses need chest, waist and hips.
This is an example layout, so use your own brand's numbers:
| Size | Chest | Waist | Hips |
|---|---|---|---|
| Small | Your range | Your range | Your range |
| Medium | Your range | Your range | Your range |
Close gaps between ranges, so a shopper who measures between two sizes still has a clear answer. If your store sells across platforms, how to add a size chart to Shopify product pages shows the same table logic in another system.
How do you use a code embed on the template?
A shared chart can go on the collection page template, so it appears on every product. Webflow's Code Embed learning page, checked November 2026, says the element requires a paid site plan or Workspace. The embed also has a size limit, so keep the table small.
Style the table in Webflow's designer or in the embed itself. Check it on a phone, where wide tables are hard to read.
How do you add size recommendations?
A table lists what each size measures. A widget helps the shopper choose. ZeDaq.ai provides a script-tag widget for WooCommerce, Wix, Squarespace, BigCommerce and custom sites, and Webflow stores are custom sites. It adds "Try it on" and "Find my size".
- Create an account and open Dashboard → API keys.
- Lock the key to your Webflow domain.
- Paste the script into the product template's custom code:
<script src="https://www.zedaq.ai/widget/zedaq.js" data-key="…" defer> - Enter your own chart in Dashboard → Size charts, one chart per garment type.
The widget documentation has the full setup. Developers can instead use POST /api/v1/tryon with an x-api-key header, described in the API reference.
The scan matches the shopper's measurements to your chart. If the shopper falls between sizes, it sizes up to the largest relevant measurement. Without a chart, they get a generic UK, US, EU or AU size. For a platform overview, read virtual try-on on Webflow.
What should you test before launch?
- The table renders on phone and desktop.
- Every product shows the right chart.
- The widget loads only on product pages.
- A test shopper near a size boundary gets the size you expect.
If you also run other platforms, compare with how to add a size chart in PrestaShop and in WooCommerce.
Add size recommendations to your Webflow store
FAQs
Can I use one size chart for every product in Webflow?
Yes, with a code embed on the template. A rich text field per product is better when garment types differ.
Do I need a paid Webflow plan?
Webflow's learning page says the Code Embed element requires a paid site plan or Workspace. Check your plan before you start.
Will the widget work with the Webflow designer?
Add the script to your published site's custom code and test on the live page.
What if I make an error in the embed code?
Webflow notes that incorrect code can cause problems in preview or when published. Fix the table and publish again.
Try ZeDaq.ai free
Virtual try-on and Find my size for your store, plus client, order and invoicing tools for tailors, in one subscription.
