Size chart block with customizable trigger button, rich content or page source, and modal display.
Size Chart
The Size Chart block displays a button that opens a size guide in a modal. It is an essential tool for fashion, footwear, and accessories stores that reduces returns by helping customers choose the right size.
How it works
- The block displays a button/link on the product page (usually near the size selector)
- The customer clicks the button
- A modal opens with the size guide
- The customer reviews the measurements and closes the modal
- They select the right size and continue their purchase
💡Place the Size Chart block right after the Variant Option block (size selector) so the customer sees the link at the moment they need to choose their size.
Trigger button settings
| Setting | Description | Options |
|---|---|---|
| Text | Button label | Free text ("Size guide", "What size should I choose?") |
| Icon | Icon next to the text | Ruler / Question / Size / None |
| Style | Trigger appearance | Link / Outline button / Filled button |
| Position | Button alignment | Left / Center / Right |
Modal content
The size chart supports two content sources:
Source 1: Richtext (inline content)
Content is entered directly in the block setting via the Shopify rich text editor. You can add:
- Size tables
- Explanatory text
- Images (measurement diagrams)
- Tip lists
| Setting | Description |
|---|---|
| Content | Richtext editor with full HTML support |
ℹ️The Shopify rich text editor supports HTML tables. You can create size correspondence tables directly in the block content, without needing a separate page.
Source 2: Shopify page
Content is pulled from an existing Shopify page. This is the recommended method for detailed size guides shared across multiple products.
| Setting | Description |
|---|---|
| Page | Selection of an existing Shopify page |
💡Create a dedicated "Size guide" page in your Shopify admin (Online store > Pages). You can reuse it in the Size Chart block across all your products. If your products have different guides (clothing vs footwear), create one page per category.
Modal appearance
| Setting | Description | Options |
|---|---|---|
| Modal title | Title displayed at the top of the modal | Free text |
| Size | Modal width | Medium / Large / XL |
Size table example
Here is an example of content you can include in the richtext or in a Shopify page:
| Size | Chest | Waist | Hips |
|---|---|---|---|
| XS | 82-86 cm | 62-66 cm | 86-90 cm |
| S | 86-90 cm | 66-70 cm | 90-94 cm |
| M | 90-94 cm | 70-74 cm | 94-98 cm |
| L | 94-98 cm | 74-78 cm | 98-102 cm |
| XL | 98-102 cm | 78-82 cm | 102-106 cm |
Accessibility
| Aspect | Implementation |
|---|---|
| Focus trap | Focus stays within the modal |
| Close | X button + Overlay + Escape key |
| ARIA | role="dialog", aria-modal="true" |
| Label | aria-label with the modal title |
| Focus return | Focus returns to the trigger button |
Mobile behavior
| Aspect | Desktop | Mobile |
|---|---|---|
| Modal | Centered, configurable width | Fullscreen or bottom sheet |
| Scroll | Internal scroll if content is long | Native scroll |
| Table | Normal display | Horizontal scroll if too wide |
⚠️Size tables with many columns can be hard to read on mobile. Prefer a compact format (4-5 columns maximum) or use a vertical layout on mobile.
Best practices
- Placement: Position the block right after or next to the size selector
- Button text: Use engaging text like "Find my size" rather than just "Size chart"
- Measurement images: Add a diagram showing where to take body measurements
- Units: Include measurements in both cm AND inches for international stores
- Product-specific: If possible, use different guides for different categories (clothing, footwear, accessories)
- Keep it updated: Update guides when you add new sizes or when measurements change