> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/how-to-guides/how-to-set-up-size-charts.md).
# How to set up size charts
The size chart button appears next to the variant picker on the product page. When clicked, it opens a page in a popup or drawer. Use one chart for all products, or assign a different chart per product with a metafield.
***
## Set Up a Default Size Chart
**Step 1 — Create a size chart page**
In Shopify admin, go to **Online Store → Pages** and create a new page. Add your size chart content — tables, images, or rich text. Name it clearly, e.g. `Size Chart`.
**Step 2 — Configure the Variant Picker block**
In the theme editor, go to the product page → **Product Information** section → **Variant Picker** block. Set the **Variant option name** to the option that should show the button (for example, `Size`), and set **Size chart page** to the page you created.
The button then appears next to that variant option. You can also choose how the chart opens (popup or drawer) and its width.
***
## How to Use Metafields to Show Different Size Charts per Product
To show a different chart per product, create a product metafield that holds the page and connect it to the **Size chart page** setting with a dynamic source. The namespace and key are your choice — Helix reads whatever page is connected to the setting, not a fixed key.
**Step 1 — Create the metafield definition**
In Shopify admin, go to **Settings → Metafields and metaobjects → Products**, click **Add definition**, and set:
* **Name** — `Size chart`
* **Namespace and key** — `custom.size_chart` (or any name you prefer)
* **Type** — Page, one value
Click **Save**.
**Step 2 — Create size chart pages**
Go to **Online Store → Pages** and create a page for each chart you need — e.g. `Size Chart — Tops`, `Size Chart — Footwear`, `Size Chart — Accessories`.
**Step 3 — Assign the metafield to products**
Open a product, scroll to **Metafields → Size chart**, select the relevant page, and save. Repeat for every product that needs its own chart.
**Step 4 — Connect the metafield to the block**
In the theme editor, open the **Variant Picker** block. On the **Size chart page** field, click the **Connect dynamic source** icon (next to the field), select your **Size chart** metafield, and save.
{% hint style="info" %}
Each product now shows the page stored in its own **Size chart** metafield. Products that leave it empty fall back to the static page selected in the block.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}