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

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")
Content	The size chart content — supports rich text formatting
Text	Instructions or fitting advice shown above the table
Unit toggle	Adds a cm/inches toggle so visitors can pick their preferred unit

Blocks

Image

Add an Image block to include a size chart graphic alongside the richtext content.

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 sources:

• Metaobject list — connect a list of size_chart metaobjects. When a metaobject list is connected, the inline richtext Content field is hidden and the metaobject data is used instead.
• Inline content — if no metaobject list is connected, enter the size chart content directly using the richtext Content field and Image blocks.

See the Metaobjects guide for instructions on creating size_chart metaobjects.

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.