How to Add Size Charts to Each Product

This tutorial walks you through assigning a different size chart to each product using Shopify metafields and the theme editor.

What You’ll Learn

  • How to create a size chart metafield for products
  • How to link custom size chart pages to individual products
  • How to display each chart inside the “Additional Information” block on the product page

🧩 Overview

This tutorial walks you through assigning a different size chart to each product using Shopify metafields and the theme editor. This is useful for stores selling multiple brands or product categories with different sizing standards.

💡 You can follow the same process to display other types of product-specific info, like care instructions or material details.

Step 1: Create the Product Metafield

  1. From your Shopify Admin, go to Settings
  2. Click Custom data, then select Products
  3. Click Add definition

Now configure the metafield:

  • Name: Size Chart
  • Namespace and key: custom.size_chart
  • Type: Page
  • Click Save

Step 2: Create Your Size Chart Pages

  1. In the Admin sidebar, go to Online Store > Pages
  2. Click Add page
  3. Title the page based on the product type or brand (e.g., “Men’s Jackets Size Chart”)
  4. Add your chart content:
    • You can copy paste in a Google Sheets table
    • Or upload an image of a chart you made from Photoshop, Canva, etc
  5. Make sure the page is visible, then click Save

💡 Repeat this step to create additional pages for every unique size chart you'll be using.

Step 3: Assign Size Charts to Products

  1. Go to Products in your admin
  2. Select a product you want to assign a size chart to
  3. Scroll down to the Metafields section
  4. Locate the Size Chart metafield
  5. Select the correct page you created for that product’s size chart
  6. Click Save

Step 4: Connect the Metafield in the Theme Editor

  1. Open the Theme Editor
  2. Navigate to a Product page template
  3. Add or select an Additional Information block
  4. Change the Title and Icon to match your branding (e.g., “Size Chart”)

Then:

  1. Next to the Information Page setting, click the dynamic source icon (🔗)
  2. Select the Size Chart metafield (custom.size_chart)
  3. Click Save

✅ You’re Done!

Now, when you click on the Additional Information toggle on a product page, it will load the specific size chart linked through that product’s metafield.

🎉 You can reuse this workflow for other product-specific content too—like care instructions, fabric types, or warranty info.

Need Help?