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).

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.