Size Chart

A size guide table with measurements, conversion info, and fitting advice. Add it to product pages so visitors can find their size without leaving the page.

Try it

Change the settings below and watch the preview update in real time. Click Split to see settings and preview side by side, or use the tabs to switch between them.

←Size Chart

Heading

Show modal border

Border radius

12px

Storefront preview

Size Guide

✕

Size	Chest (cm)	Waist (cm)	Hip (cm)
S	86–91	71–76	86–91
M	96–101	81–86	96–101
L	106–111	91–96	106–111
XL	116–121	101–106	116–121

Live demo — Size Chart on storefront

Image sizes

A diagram image is requested at 800px wide and keeps its own shape — it is not cropped. Measurement diagrams read best as a simple line drawing on a plain background.

Settings

Setting	What it does
Color scheme	Picks which set of colors to use for this section
Heading	The title at the top (e.g., "Size Guide")
Button label	The text on the button that opens the size chart (e.g., "Size guide")
Text	The size chart content — supports rich text formatting
Introductory text	Instructions or fitting advice shown above the table
Show unit toggle	Adds a cm/inches toggle so visitors can pick their preferred unit

Blocks

Image

Add an Image block to show a size chart graphic. When the section has Image blocks, they become the chart content — they take the place of the inline richtext Text field.

Setting	What it does
Image	The size chart graphic
Text	Supporting richtext below the image (measurements key, notes, etc.)

Data sources

The size chart content can come from two places, and Image blocks win when you use both:

• Image blocks — one block per chart, each an image with optional richtext underneath.
• Text — the richtext field on the section itself, used when you have added no Image blocks. Good for a single table you can type inline.

When it isn't showing

The section renders its heading whatever happens, so an empty one is a heading on its own. The chart needs at least one block; a block with neither a table nor an image shows a prompt in the theme editor.

Tips

• Include a "How to measure" note at the top with instructions for taking body measurements. This reduces returns caused by sizing mistakes.
• Turn on the unit toggle if you sell internationally, so visitors in any country can use units they're familiar with.