Using the app
Theme block
The Size chart block controls how shoppers reach the chart on your product page: a text link, a button, or the chart shown right on the page. You set it up once in the theme editor, and it applies to every product using that template.
To find the block: Online Store → Themes → Customize, switch to a product template, and click Size chart in the product information section. Haven't added it yet? See Installation.
Display
| Setting | What it does |
|---|---|
| Label | The text shoppers click. Defaults to "Size chart" — try "Size guide" or "Find your size". |
| Display as | Text link (default), Button, or Inline (show chart on page), which places the whole chart in the product page with no click needed. |
| Alignment | Left, Center or Right. Link and button only. |
Most of the settings below only appear for the link and button styles, since an inline chart has nothing to click.
Placement
By default the link sits where you drop the block. Placement lets you put it on the same line as something else instead — the classic spot is next to the price.
| Setting | What it does |
|---|---|
| Show | Where this block is placed, On the same row as the price, or On the same row as another element. |
| Element class or selector | For "another element": a class or CSS selector from your theme's product section, such as product__title or .product-form__quantity. |
| Position in the row | After the element or Before the element. |
| Vertical alignment in the row | Center, Top, Bottom, or Text baseline. |
Same row as the price finds the price automatically in Dawn and most themes built on it, and in themes that use common price class names. The link stays in place when shoppers change variant.
Link
| Setting | What it does |
|---|---|
| Link colour | Leave empty to use your theme's text colour. |
| Underline | On by default. |
Icon
Put an icon beside the label. Icons take the link or button's text colour, so they always match.
| Setting | What it does |
|---|---|
| Icon | No icon (default), one of 27 built-in icons, or Custom image. |
| Custom icon | Your own image, shown in its own colours. A square PNG or SVG works best. |
| Icon position | Before label or After label. |
| Icon size | 12–40 px. Default 18 px. |
| Icon spacing | Space between the icon and the label, 0–24 px. Default 6 px. |
Modern
Size table · Size tag · Hanger with ruler · Tape measure case · Shirt width · Dress form · Pants waist · Shoe length · Body fit
Classic
Ruler · Tape measure · Tape roll · Shirt with tape · Folded tape · Floor plan · Shoe size · Hanger · Shirt dimensions · Letter sizes · Waist measure · Weight gauge · Dress with ruler · Sneaker · Hips · Body with tape · Set square · Width arrow
Button
| Setting | What it does |
|---|---|
| Background / Text | Leave both empty for an outlined button in your theme's text colour. |
| Size | Small (36 px tall), Medium (44 px, the height of most theme buttons) or Large (52 px). Custom shows a Button height slider. |
| Button height | 28–64 px. Default 44 px. Only with the Custom size. |
| Corner radius | 0–40 px. Default 4 px. |
| Show floating button | Also pins a tab to the edge of the screen, so shoppers can open the chart from anywhere on the page while they scroll. |
| Floating button side | Left or Right. |
| Floating button position | Top, Middle or Bottom of the screen. |
| Show floating button on mobile | On by default. Turn it off to hide the tab on phones, where shoppers use the regular button instead. |
Chart window
| Setting | What it does |
|---|---|
| Open as | Popup (centred, default), Drawer from the left, or Drawer from the right. |
Drawers slide in from the side and keep the product page visible behind them. On phones they open as the centred popup instead, since a drawer would fill the screen anyway. On larger screens, product photos only show in the popup, since drawers are too narrow; on phones they follow the Also show them on phones setting.
What shoppers get
- The popup or drawer closes with the close button, the Escape key, or — unless you turn it off in Appearance — a click outside it.
- When a table has unit conversion, the shopper's choice (say, inches) is remembered, so the next product opens in the same unit. Other tables in the chart switch with it.
- Wide tables scroll sideways on phones instead of squashing, and can keep the size column pinned.
- The chart is built for keyboard and screen-reader users: focus moves into the popup when it opens and back to the link when it closes.