Shopify size chart generator
Last updated
One click and a working chart appears below. The measurements in it are ours, not a sizing standard, so replace them with your own in step 2.
Pick one of the three charts above. The chart, working beside a placeholder product, and the code you paste both appear here.
How the chart is put together
A Shopify size chart is a table on the product page that matches each size label to body or garment measurements, and this generator builds one from your own figures, converts between centimetres and inches, and outputs HTML to show in the page or behind a size chart link that opens a popup or side drawer.
No sizing standard is built in. Sizes differ between brands and between countries, so every figure in the chart comes from you, and the only thing the generator adds is the unit translation.
The measurements are yours; the generator only lays them out and translates the units. These are the choices that change the code.
- Rows and columns
- One row per size, up to 12, and up to 6 measurement columns such as chest, waist, hips or inseam. The size label is always the first column and is marked as the row header, so a screen reader announces it with every value.
- Typed unit
- The unit you entered the figures in. It is the one shown first, and the one your figures stay exact in; the other unit is a rounded translation.
- Unit switch
- Both units are written into the table and a small switch picks which one shows. It works with no script, using two hidden radio buttons, so it still works if a theme loads scripts late. Inches are rounded to one decimal place and centimetres to whole numbers.
- Ranges and text
- A single number or a range such as 86-90 converts. Anything else, such as S/M or One size, is copied to both units unchanged, and the generator counts those cells so none slips through unnoticed.
- Display mode
- In the page, as a table under the description; or behind a Size chart link that opens a centred popup or a panel from the right. The two link modes add a short script that only opens and closes the chart.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Four charts, and how each one converts
Invented garments. The cells converted, the ones left as text and every message come from the same function the generator runs.
| Scenario | First size, both units | Shown | What the generator says |
|---|---|---|---|
| Womens tops typed in cm, shown with a switch | XS: 80-84 / 62-66 / 86-90 cm → 31.5–33.1 / 24.4–26 / 33.9–35.4 in | In the page | Nothing to flag |
| Mens jeans typed in inches, opened in a drawer | 30: 30 / 32 in → 76 / 81 cm | Side drawer | Nothing to flag |
| Letter sizes in the cells | S/M: 55-57 / Most cm → 21.7–22.4 / Most in | Popup | 2 cells are not a plain number or range, so they show the same in both units. Use numbers such as 86 or 86-90 if the switch should convert them. |
| Sizes but no measurement columns | — | — | Name at least one measurement column, such as Chest or Waist. |
What a size table cannot settle
Body size and garment size are different tables
A chart of body measurements tells shoppers which size to pick. A chart of the garment laid flat tells them how it fits. Say which one yours is in the note under the table, or shoppers will read it the wrong way.
Rounded conversions are for choosing, not for sewing
The translated unit is rounded so it reads cleanly. If a precise figure matters, such as an inseam for tailoring, type the chart in the unit your customers use most.
One template, one chart
A Custom Liquid block belongs to a product template, so every product on it shows the same chart. Tops and trousers need two templates, each assigned to its own products.
Fit words still matter
A table cannot say that a style runs small or is cut loose. A line such as size up if between sizes, placed in the note, answers the question most size charts leave open.
Size chart questions
How do I add a size chart to Shopify without an app?
Build the chart here, then in the theme editor open the product template, add a Custom Liquid block to the product information area and paste the code. Every product using that template shows the chart, in the page or behind a Size chart link.
Can shoppers switch between centimetres and inches?
Yes. With the switch on, both units are written into the table and a small toggle picks one. It needs no script. The unit you typed stays exact and the other is rounded for reading.
How do I show different charts for different products?
Make one product template per chart, add the block to each, and assign each product to the right template from its page in your admin. The generator can build each chart in turn; give them different chart names so their ids never clash.
Should the chart open in a popup or sit in the page?
In the page it is visible without a tap, which suits products where fit decides the sale. Behind a link it keeps the page short. Put the link right beside the size selector, where the question comes up.
Will a wide chart break on a phone?
No. The table sits in a container that scrolls sideways when it is wider than the screen, so columns keep their width instead of squashing into each other.
Is anything sent to Nudgesmart when I use this?
No. The table is built in your browser, the preview runs in a sandboxed frame, and nothing you type is stored or sent.
Fit is settled on the product page. Attention is settled before it.
Nudgesmart starts on-site popups from ready-made templates grouped by industry and campaign type, for the visitors still browsing.
