Size Chart Popup
The Size chart popup block adds a product-page link that opens a modal with size chart content. It can use product-specific metafields first, then fall back to shared content from the theme editor when you want one chart for many products.
Use this for size charts, fit guides, measurement diagrams, or any product reference content that should be available without sending shoppers away from the product page.
Where It Lives
Theme Editor -> Product template -> Product information/product details area -> Add block -> Size chart popup
Recommended Metafields
Create one or more product metafields depending on the content you need:
| Namespace/key | Type | Best for |
|---|---|---|
custom.size_chart_page | Page reference | Rich reusable size chart pages |
custom.size_chart_image | File or image reference | Chart images or measurement diagrams |
custom.size_chart_text | Rich text or text | Short product-specific notes |
The default block settings already look for the custom namespace and these three keys. You can change the namespace or key names in the block if your store uses different metafields.
Quick Start
- Create the product metafields listed above, or decide which ones your store needs.
- Add size chart content to a test product.
- Open the product template in the theme editor.
- Add the Size chart popup block.
- Keep Hide link when no product metafield is found enabled if the link should only appear on products with chart content.
- Update Button text and Heading if needed.
- Preview products with and without size chart metafields.
Content Priority
The block checks the product first:
- Product page-reference metafield
- Product image/file metafield
- Product text/rich-text metafield
If any product metafield content exists, that product-specific content is used.
If no product metafield content exists and Hide link when no product metafield is found is off, the block uses the fallback page, image, and text configured directly in the theme editor.
Fallback Content
Use fallback content when many products share the same size chart.
- Turn off Hide link when no product metafield is found.
- Select a fallback page, image, or rich text in the block settings.
- Leave product metafields blank on products that should use the shared fallback.
- Add product metafields only where a product needs a different chart.
Settings Reference
| Setting | What it does |
|---|---|
| Button text | Link text shown on the product page. |
| Heading | Heading shown inside the popup. |
| Hide link when no product metafield is found | Hides the link unless product-specific metafield content exists. |
| Metafield namespace | Namespace to read from, usually custom. |
| Page metafield key | Product metafield key for a page reference. Leave blank to skip. |
| Image metafield key | Product metafield key for a file or image reference. Leave blank to skip. |
| Text metafield key | Product metafield key for rich text or text. Leave blank to skip. |
| Fallback page/image/text | Shared content used only when no product metafield content is found and the hide setting is off. |
| Show page title | Shows the selected page title inside the popup. |
Troubleshooting
The size chart link does not appear
Check whether Hide link when no product metafield is found is enabled. If it is enabled, the current product needs at least one configured size chart metafield with content.
The fallback chart does not appear
Fallback content only appears when Hide link when no product metafield is found is off and the product does not have size chart metafield content.
The wrong chart appears
Product metafields take priority over fallback content. Clear the product metafield if that product should use the shared fallback chart.
Rich text formatting looks different than expected
Use a rich text metafield for formatted product-specific notes. Plain text metafields are better for short unformatted copy.
Launch Checklist
- Metafield namespace and keys match the product metafields in Shopify admin.
- Products that need custom charts have the correct metafield content.
- Products without chart content hide the link or show fallback content, depending on your intended setup.
- Chart images are readable on mobile.
- The popup heading and button text are clear for shoppers.