# Size Chart

A size chart is a tool that provides sizing information for clothing, footwear, or accessories, helping consumers select suitable products based on measurements such as height, weight, chest, waist, or foot length.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FviWNit0UH7bwWUx6PlES%2Fimage.png?alt=media&#x26;token=72143c4b-4598-4a81-9029-a76269375617" alt=""><figcaption></figcaption></figure>

**How to Add a Size Chart:**

### Method 1: Create Product Page Templates

You can create individual [product templates](https://help.shopify.com/zh-CN/manual/online-store/themes/theme-structure/templates) for different product categories, such as footwear, tops, or pants, and add size charts by uploading images.

1\. Navigate to the product template editing page.Click **Add Block** and select **Popup**.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2Ftz74o5ZorhJsj893AalL%2Fimage.png?alt=media&#x26;token=952d12d1-f710-4a06-948c-ef54628e7a09" alt=""><figcaption></figcaption></figure>

\
2\. Add size text or image.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FcPZtsBc91eg3lRmc1IHA%2Fimage.png?alt=media&#x26;token=6d8009f6-9b47-4cb9-bffa-3f506f32b248" alt=""><figcaption></figcaption></figure>

\
3\. Bind size picker

{% hint style="success" %}
The size name must be one of the following values to be associated:  size, 尺码, 尺碼, Größe, taille, tamaño, misura, размер, tamanho, サイズ, 크기, storlek, velikost, størrelsen, rozmiar, μέγεθος, ukuran, mărime, величина, kích thước, วัด, ölçü, suurus, dydis, izmērs, μεγέθος, размеры
{% endhint %}

### **Method 2: Add Dynamically Using Metafields**

You can flexibly set up product size charts by creating product metafields.

First, create a product metafield, for example, name it **"Size Chart"**.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FD1gDDf4MQhhGQPqeXsqb%2Fimage.png?alt=media&#x26;token=a36fa709-8c93-47a8-b873-924ce47816b7" alt=""><figcaption></figcaption></figure>

We found the newly created **Size Chart** field on the product page and added the size chart image to this field.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2F1AZyhqzLJzVbVb2kBEJ9%2Fimage.png?alt=media&#x26;token=9cd6a769-1937-4d1f-a2d1-e6a032d4f8ba" alt=""><figcaption></figcaption></figure>

In the product template editor, add a **Popup**  Block. Set the content of the block to **dynamic source** pull data from the **"Size Chart"** metafield.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FYDRocH4BdtgLwi7nMqlB%2Fimage.png?alt=media&#x26;token=c449b4b0-3e76-44f5-b400-bdc061033149" alt=""><figcaption></figcaption></figure>

This approach allows you to manage size charts for different products dynamically and efficiently.