Size guide and measurements

Signal gives you two places to answer “will it fit”: a pop-up next to the size option on the product page, and a full measurement table as its own section for a size guide page.

On the product page

The pop-up beside the size option

Configured on the Variant picker block:

Setting	Type	Default	What it does
Size guide label	Text	Size guide	The control’s text, and the dialog’s heading
Size guide content	HTML	(empty)	Shown in a pop-up beside the option. Tables are supported
Size guide page	URL	(empty)	Used only when no content is set — links out instead

Three states:

• Content set → a Size guide button opens a <dialog> with your markup in it.
• Content empty, page set → the same label renders as a plain link to that page.
• Neither set → nothing appears.

The control is only placed beside non-swatch options, so a colour option never gets one. It sits inline with the option label — “Size — M · Size guide” — which is where a shopper looks for it.

Because size_guide_content is an HTML setting, a pasted <table> works and is styled by the theme’s rich-text rules. Keep it to the measurements and one line of method; a full guide belongs on a page.

Note

These settings live on the block rather than on the Product section because a theme block cannot read section.settings. It’s also the better home — the control belongs beside the option it explains, and a product with no size option shouldn’t be carrying size-guide settings.

The dialog is a native <dialog> opened with showModal(), so the focus trap, Escape and the top layer come from the browser. It closes on Escape, on the close button, and on a backdrop click.

As a page section

The Size chart section

A standalone measurement table for a size guide page, with a centimetre/inch toggle.

Measurements are authored once, in centimetres. The toggle converts to inches in the browser, so you never maintain two tables that can drift apart.

Setting	Default	What it does
Heading	Measurements	Section heading
meta / meta_link	Still unsure? Ask us	A side note, optionally a link
Columns	Chest, Waist, Hip, Sleeve, Length	Comma-separated column headings
How to measure — heading	How to measure	Heading above the method notes
Footnote	Garment-measurement note	Small print under the table

Two block types:

• Row — a size (M) and its comma-separated values (104, 82, 106, 63, 71), in the same order as columns.
• Guide — a method note: a title (Chest) and the instruction for measuring it.

The default footnote is worth keeping in some form: “Garment measurements, taken flat and doubled. Allow 1cm either way on every run.” Stating whether your numbers are garment or body measurements removes most size-related support email.

Tip

Build the page once, then point every product’s size_guide_page at it and keep size_guide_content empty. You get one table to maintain and the product page still has a link where shoppers look for it. Use size_guide_content only where a product’s sizing genuinely differs from the house chart.

Which to use

Situation	Use
One sizing standard across the catalogue	The Size chart section on a page, linked from each product via size_guide_page
A product with its own fit — oversized cut, unisex sizing, a collaboration	size_guide_content on that product’s variant picker
Footwear alongside apparel	One page per category, each linked from the relevant products