Size Chart Generator

Build a responsive size chart table from your own measurements and paste the HTML straight onto a product page.

Your details

Chart title

Units

Column headers, comma separated

One row per size, matching the headers above

Notes under the chart

HTML to paste into your product page

<div class="size-chart-block">
  <h3>Women's Tops — Size Chart</h3>
  <table class="size-chart"><thead><tr><th>Size</th><th>Bust</th><th>Waist</th><th>Hip</th></tr></thead><tbody><tr><td>XS</td><td>32-33</td><td>24-25</td><td>34-35</td></tr><tr><td>S</td><td>34-35</td><td>26-27</td><td>36-37</td></tr><tr><td>M</td><td>36-37</td><td>28-29</td><td>38-39</td></tr><tr><td>L</td><td>38-40</td><td>30-32</td><td>40-42</td></tr><tr><td>XL</td><td>41-43</td><td>33-35</td><td>43-45</td></tr></tbody></table>
  <p class="size-chart-note">If you're between sizes, size up for a relaxed fit. Measurements are in inches.</p>
</div>
<style>
  .size-chart-block { font-family: inherit; }
  .size-chart { width: 100%; border-collapse: collapse; margin-top: 8px; }
  .size-chart th, .size-chart td { border: 1px solid #ddd; padding: 8px 10px; text-align: center; font-size: 13px; }
  .size-chart th:first-child, .size-chart td:first-child { text-align: left; font-weight: 600; }
  .size-chart-note { font-size: 12px; color: #666; margin-top: 8px; }
</style>

Shopify: paste this into a product's description using the code view (the </> icon in the description editor). WooCommerce: paste it into a Custom HTML block, or into the short description with HTML editing enabled.

This is a plain HTML table, not an image, so there's nothing to export as a picture. Take a screenshot of the preview above if you need an image version.

Live preview

Building your own chart

Set the column headers once (Size, Bust, Waist, Hip, or whatever fits your product), then add one row per size. The preview updates live, and the output is a plain HTML table with inline styles, so it keeps its look wherever you paste it.

Ranges like "34-35" work fine as plain text in a cell; the tool doesn't do any math on the numbers, it just lays out what you type.

Adding it to your product page

01
Shopify
Open the product's description field, switch to the code view (the </> icon in the editor toolbar), and paste the HTML in. It renders as a normal table on the storefront.
02
WooCommerce
Paste it into a Custom HTML block in the product's Short description or full description, with the block editor's HTML view, or the Classic editor's Text tab.
03
One chart per product type
Build a separate chart for tops, bottoms and outerwear rather than trying to force very different measurements into one table.

Questions people ask

Can I add this to every product automatically?

Not from this tool directly. Paste the HTML into one product, or into a reusable content block or metafield your theme includes across similar products, depending on what your theme supports.

Does it export as an image?

No, it outputs an HTML table, not a picture. If you specifically need an image, take a screenshot of the preview.

Should I use inches or centimeters?

Match what your main audience expects: inches for the US, centimeters almost everywhere else. Some stores show both by adding a second set of columns.

Where do I get accurate measurements for my chart?

Measure the actual garment flat (for chest and length) or trace a size run from your manufacturer's spec sheet. Guessing at numbers leads to fit complaints and returns.

Last reviewed 30 September 2026.

Your details

Building your own chart

Adding it to your product page

Shopify

WooCommerce

One chart per product type

Questions people ask

Can I add this to every product automatically?

Does it export as an image?

Should I use inches or centimeters?

Where do I get accurate measurements for my chart?

Related tools

Want this builtinto your store?