> For the complete documentation index, see [llms.txt](https://en-ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en-ascent.webvista.studio/pages/main-product/size-chart.md).

# 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="/files/wuGdnCiLipxP125bkrAh" 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="/files/Yo8N9XlaD1bkrBoO7fhG" alt=""><figcaption></figcaption></figure>

\
2\. Add size text or image.

<figure><img src="/files/2YlmiPOTUaK7BSQUvRKT" 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="/files/xE5IOg0FbDSiUMnAYkmX" 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="/files/oU0mGmV5OwnaHY31AdAU" 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="/files/KGlXHTMQtybP1xyjPil8" alt=""><figcaption></figcaption></figure>

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