# How to Add Size Charts to Each Product

## **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:

5. Next to the **Information Page** setting, click the **dynamic source icon (🔗)**
6. Select the **Size Chart** metafield (`custom.size_chart`)
7. 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?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/advanced/how-to-add-size-charts-to-each-product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.