> 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/drift-shopify-theme/drift-studio/metafields/size-chart.md).

# Size Chart

Add a size chart modal to any product PDP and quick-add.

The size chart metafield gives every product a "Size Chart" link on the PDP and inside the quick-add overlay. Click it, a modal opens with whatever size chart image you've uploaded.

DRIFT renders the image as a responsive `<img>` with a 600w / 900w / 1200w srcset, so a single uploaded image scales properly across devices.

## 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** (don't pick "Any file" — DRIFT calls `image_url` on the value)
4. Save

That's it for the definition. No "list of values," no validation.

## Filling in the size chart per product

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

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

## How to make the size chart image

Most brands design their chart in Figma, Canva, or Illustrator, export as PNG at \~1600px wide, and upload. The image is shown inside a centered modal capped at the card width, so anything wider than \~1200px just gets downscaled cleanly.

If you don't have a designer, the workflow that works:

1. Build the table in a spreadsheet or Notion
2. Take a clean screenshot
3. Crop tight
4. Upload

For apparel a typical chart structure is rows for sizes (S, M, L, XL) with columns for chest / length / sleeve measurements — but that's a content decision, not a theme one. Whatever PNG you upload renders as-is.

## Sharing one size chart across many products

Manually filling in the same chart on 200 t-shirts is painful. The image-based approach makes this easy compared to the old Rich text approach:

* **Bulk import via Matrixify/Excelify** — export all products, fill in the size chart column with the same image's MediaImage GID, re-import. One ID pasted into 200 rows.
* **Use product tags + custom liquid** — tag products with `size:tshirt`, then map the tag to a single shared image in a small Liquid snippet. Requires light theme customization (we can do this for you via [WEBEXP](https://webexp.dev/pages/hire-us)).

For most brands, Matrixify with a shared image GID is the right move.

## What if the modal doesn't open?

If you've uploaded an image but the trigger doesn't appear or clicking does nothing:

* Make sure the metafield **type** is **File → Image**, not "Any file" or text
* Check the namespace and key are exactly `custom.size_chart`
* Confirm the metafield actually has a value on this product (an empty metafield hides the trigger entirely)
* Hard refresh the storefront (`Cmd + Shift + R`)

If you created the metafield as Rich text or Single line text before, delete the definition, recreate it as **File → Image**, then re-upload values. The two types don't auto-convert.

## Removing the size chart on a product

If a product doesn't need a size chart (e.g., a sticker pack), just leave the metafield empty for that product. DRIFT only shows the size chart trigger when the metafield has a value.

## Where it appears

* **PDP** — a "Size Chart" link sits near the variant selector. Tapping it opens a centered modal with the image.
* **Quick-add overlay** — same trigger renders inside the quick-add for products that have a size chart. Opens its own modal stacked above the overlay.

Both surfaces use the same metafield value — set it once, get it everywhere.