Size chart

A proper size chart: one row per size, one column per measurement, with a cm/in toggle above it and an optional set of numbered “how to measure” steps underneath. It powers the size guide page template.

The point of the toggle is that you author the numbers once, in centimetres, and the inches are worked out in the browser. There is no second table to keep in step, and no chance of the two drifting apart after an edit.

Section settings

Setting	Type	Default	What it does
Heading	Text	Measurements	Section heading, also used as the table’s accessible caption.
Side note	Text	Still unsure? Ask us	Side note on the right of the header row.
Side note link	URL	—	Makes the side note a link — point it at your contact page.
Columns	Text	Chest, Waist, Hip, Sleeve, Length	The measurement column headings, comma separated. Give every row the same number of values, in the same order.
How to measure — heading	Text	How to measure	Heading above the measuring steps.
Footnote	Text	Garment measurements, taken flat and doubled. Allow 1cm either way on every run.	A small note under everything.
Colour scheme	Select — Default / Light / Deep	default	Which ground the section sits on.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

Up to 24 blocks in total, size rows and measuring steps combined.

Size row blocks

Setting	Type	Default	What it does
Size	Text	M	The size name, shown in the display face in the row’s first cell.
Measurements in cm	Text	104, 82, 106, 63, 71	The measurements, comma separated, in centimetres. Inches are calculated automatically.

Measuring step blocks

Setting	Type	Default	What it does
Question	Text	Chest	What is being measured.
Text	Textarea	Lay the garment flat, measure across one inch below the armhole, and double it.	How to measure it.

The preset ships with three size rows and two measuring steps.

Behaviour worth knowing

The unit toggle is arithmetic, nothing more. Each cell carries its centimetre value. Switching to inches divides by 2.54 and rounds to one decimal place; switching back restores the original figure exactly. A note beside the toggle reads “Shown in centimetres” / “Shown in inches” so there is never any doubt which you are looking at.

The toggle is per section. Two size charts on one page toggle independently.

The steps number themselves. Measuring steps render as 01, 02, 03 in the accent colour, counted automatically from their order. Reorder them and they renumber. The whole guide block is omitted if you have no step blocks.

The table scrolls on narrow screens. It has a 520 px minimum width inside a focusable scroll region, so a phone gets a horizontally scrollable table — and a keyboard user can tab to it and scroll it with the arrow keys rather than being stuck.

Setting one up

1. Type your column headings into columns, comma separated: Chest, Waist, Hip, Sleeve, Length.
2. Add one Size row block per size. Set the size name.
3. Enter that row’s measurements in values — same count, same order as the headings, in centimetres, no units.
4. Repeat. Every row must have the same number of values or the table will be ragged.
5. Add Measuring step blocks explaining how you took each measurement.

Caution

Enter numbers only — 104, not 104cm and not 102–106. Anything that is not a plain number is left alone when the toggle is switched, so a cell reading 104cm stays 104cm in inches view and the table silently becomes wrong.

Tip

Say in the footnote whether these are garment measurements or body measurements, as the default does. It is the single most common source of “it didn’t fit” returns on oversized cuts — a shopper who measures their chest and compares it against a flat-and-doubled garment figure will order a size too big.

Note

For a size guide that opens in a pop-up beside the variant picker on the product page, use the product section’s Size guide settings instead — see the product page. This section is for a full standalone page.