> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/sply-shopify-theme/sply-starter/metafields/size-chart.md).

# Size Chart

Add a size chart to the product view.

When a product has the size-chart metafield set, SPLY shows a **Size chart** button in the product view. Tapping it opens a modal with the image you uploaded.

## Setting up the metafield

1. Shopify admin → **Settings → Custom data → Products**
2. **Add definition**
3. Fill in:
   * **Name**: Size Chart
   * **Namespace and key**: `custom.size_chart`
   * **Type**: **File → Image** (SPLY calls `image_url` on the value, so it must be an image, not "Any file")
4. Save

## Filling it in per product

1. Open a product in admin
2. Scroll to **Metafields**
3. Find **Size Chart**
4. Upload the image (or pick one from the Files library)
5. Save

Supported formats: JPG, PNG, WEBP, SVG. A PNG with a transparent background renders cleanly over the modal in both light and dark mode.

> **Note** — The image is shown in a centred modal capped at the panel width and loaded at up to 1400px wide, so a single \~1600px export scales properly across devices.