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.

The size chart button and the chart it opens on the product page

---

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.

Creating a size chart page in Shopify admin

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.

Setting the variant option name and size chart page on the Variant Picker block

---

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.

Creating the Size chart product metafield definition

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.

Multiple size chart pages listed in Shopify admin

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.

Assigning a size chart page to a product's Size chart metafield

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.

Connecting the Size chart metafield as a dynamic source on the block

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.

---

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