Size Chart Block

The Size Chart block puts a link on the product page that opens your size chart in a popup — either a page you wrote or an image you uploaded. Add it via Product Section → Add block → Size.

Where the link sits

By default the link is a line of its own, wherever you place the block in the list. That stacks: color, size, size chart link, everything underneath each other.

With Show next to the size option the link moves into the size option row instead — the option label stays on the left, the size chart link sits right-aligned on the same line:

Size                                    Size chart
[ S ]  [ M ]  [ L ]

This is the placement most shoppers know from other stores, and it saves a full row in the buy area — the part of the page where every row pushes the add to cart button further down.

The block stays in the block list either way. Its position there is then only used as a fallback (see below); drag it wherever you like, the link renders in the option row.

What it needs

The link only moves when all of this is true:

• the Product Option Selector block is on the page
• the product actually has a size option — an option named "Size", or one named exactly like the Label you set for the size option in the Product Option Selector (e.g. "Größe")

If any of it is missing, the link falls back to its own position in the block list, so it never silently disappears. A product without variants, or one that only has a color option, keeps the link as a separate line.

Text size

The block's text size default is meant for a standalone line and is too big for the option row. Turn Size chart text size down to roughly the size of the option label (around 14px) when you move it in. Desktop and mobile are set separately, and the icon scales with the text so both stay on one baseline.

This matters for the layout too: label and link share one row, and if together they are wider than the column, the link wraps to the next line. That is intended — it beats the link running off the edge — but it also means a size chart text that is still at the standalone default will look like it ignored the setting. If the link sits under the label instead of next to it, the text is simply too big.

Settings

• Show next to the size option — placement, see above
• Background color — only used when the link sits in its own row
• Size chart text size — desktop and mobile
• Headline typography — uppercase / capitalize / lowercase
• Text color
• Icon image or Icon symbol — a Google Material Symbol name. straighten is a ruler, checkroom a clothes hanger, design_services a set square. Browse them at fonts.google.com/icons
• Size chart text — the link label, e.g. "Size chart"
• Show underline
• Size chart page — a shop page shown in the popup, see below
• Size chart image — used when no page is selected, up to 1200px wide
• Text above / Text below — notes around the page or image, see below
• Popup width — 400–1100px, desktop only
• Popup text size — desktop and mobile, for those two notes
• Block margin — desktop and mobile, only used in its own row

Page or image

The popup takes either. Size chart page wins when it is set and the page has content; otherwise the image is used, and without either a placeholder appears.

A page is the better source in almost every case:

	Page with a table	Image
On a phone	text stays sharp, table scrolls sideways	shopper pinches and zooms
Screen readers	read the values	see nothing
Translations	follow the shop's languages	one image per language
A correction	one edit, every product updated	re-export and re-upload everywhere

Write the page under Online Store → Pages, put the measurements in a normal table, and leave it out of the navigation — it only needs to exist, not to be findable. The popup renders the page content, so headings and text around the table come along.

Wide tables are handled: on a narrow screen the table scrolls sideways inside the popup instead of pushing the dialog off the edge. Cells do not wrap, so a row stays readable as one line.

An image still makes sense when your chart is a drawing rather than numbers — a body diagram with arrows, for instance.

Text above and below

Text above and Text below wrap the page or image with rich text. Both are empty by default and render nothing when left that way.

They exist for the case an image cannot cover. A drawing of a shirt with arrows is the clearest way to show where to measure, but the sentences around it — how to measure, what to do between two sizes, that the numbers are taken on the garment and not on the body — are miserable inside a picture: they cannot be selected, screen readers skip them, translations need a second file, and a correction means re-exporting the whole graphic.

So put the drawing in the image and the sentences in these fields. A short line above ("All measurements in cm, taken on the shirt laid flat") and the instructions below is the usual split.

Both notes are left aligned regardless of the block's other alignment settings: they are instructions, and centred instructions read as a slogan. Their size is set separately for desktop and mobile.

They also work with a page, though there you can just as well write everything into the page itself.

Popup width

Popup width sets how wide the dialog opens on desktop, 720px by default. On phones it always uses 90% of the screen, so the setting has no effect there.

A wide measurement table wants more room than a drawing does. Go up to 900 or 1000px if your table has many size columns and you would rather not have it scroll sideways on a laptop.

The image fills that width, so export it at least as wide as the value you set here — a smaller file gets scaled up and goes soft. For a 900px popup, export the chart at 900px or more.

In the Product block section

The Product block section has its own, simpler Size block. Everything above describes the Size block in the Product Information section, including Show next to the size option, the page as popup source, the notes above and below, and the popup width. Those options stay exclusive to the Product Information section.

In the Product block section the Size block has these settings:

• Background color
• Size chart text size (desktop) and Size chart text size (mobile): 10–44px, 28px by default
• Headline typography: uppercase / capitalize / lowercase
• Text color
• Icon image or Icon symbol
• Size chart text
• Size chart image: shown in the popup
• Block margin: desktop and mobile

The text size used to be a choice of Small, Medium, Large and Extra Large. It is now a pixel value, set separately for desktop and mobile. The old choices correspond to 20px (Small), 28px (Medium), 36px (Large) and 44px (Extra Large). If you had picked anything other than Medium, check the size after the update and set the matching value.

Tips

• Keep the link label short. "Size chart" reads better in an option row than "Find your right size here".
• If your chart differs per product type, point the block at different pages via separate product templates, rather than cramming several tables into one image.
• A hanger icon (checkroom) next to the link reads as clothing at a glance, where a ruler (straighten) reads as measuring. Both work; pick one and use it on every product.
• The most common size complaint comes from measuring around the chest and comparing it against a half-chest number. Whichever source you use, say "across, not around" where nobody can miss it.
• The link and its popup always travel together, so the popup works the same in both placements.