How to Add a Size Chart in Shopify (Without Editing Code)

To add a Shopify size chart without editing code, put each chart on its own page, create a product metafield of type Page, and connect that metafield to a Pop-up block in a product template. Each product then points to the chart that fits it, so dresses, jeans and shoes can each show their own guide from one link next to the size selector. This is the method in Shopify's own pop-up size chart tutorial, and it works in themes that support dynamic sources, such as Dawn and Horizon.

Shopify's theme architecture comparison lists dynamic sources for Online Store 2.0 and theme block themes, not vintage themes. In a vintage theme, showing metafields means editing theme code.

Which way to add a size chart in Shopify is right for you?

The question that matters most: can different products show different charts without extra work?

The page metafield route is the best default. It uses only Shopify features, and when you correct a measurement on one chart page, every product that points to it updates. An app can make sense for hundreds of products or features your theme lacks; test it on a duplicate theme first.

How to add a size chart with a page metafield, step by step

These steps follow Shopify's tutorial and use Dawn's block names.

Step 1: Create a product metafield for the chart page

1. In your Shopify admin, go to Settings > Metafields and metaobjects.
2. In Metafield definitions, click Products, then Add definition.
3. Enter "Size chart" in the Name field.
4. Click Select type and choose Page. "One page" is selected by default.
5. Click Save.

Some Shopify help pages, such as the guide to building a metaobject, call this area Settings > Custom data; use whichever label your admin shows. The pop-up tutorial notes that Storefront access is selected by default for a new definition; leave it on.

Consider also turning on Filter on the product list and in the Admin API in the definition's Options. Page references are among the filterable types, and the final check uses that filter.

Step 2: Create a product template with a Pop-up block

1. Go to Online Store and click Edit theme.
2. From the Home page drop-down at the top, select Products, then click Create template. Name it, for example "size-chart", and base it on your default product template.
3. Under Template > Product information, click Add block and choose Pop-up.
4. Enter "Size chart" in the Link label field.
5. Next to Page, click the Connect dynamic source icon and select the Size chart metafield.
6. Drag the block just below the variant picker, then click Save.

Why a separate template? Shopify's tutorial notes that a product using the template without a page reference still shows the link, and the pop-up opens blank. Assign the template only to products that need a chart.

Want the chart inline instead? Shopify's care instructions tutorial connects a Collapsible row block to a metafield the same way, and in Dawn's product section code that block has a Row content from page setting for the page metafield.

In Horizon, use a Popup link block (or an Accordion row) and add a Page block inside it, connected to the metafield. Horizon's Page block shows placeholder text when no page is set, another reason for a separate template.

Step 3: Create a page for each chart

1. Go to Online Store > Pages and click Add page.
2. Enter a title. Dawn shows it as the heading inside the pop-up, so "Women's tops size chart" beats "SC-01".
3. Add the chart in Content with the Insert table button. Click it again to insert rows and columns.
4. Under Visibility, select Visible, then click Save.

Shopify's guides to pages and the rich text editor cover the table options. Create one page per product type. The metafield holds one page per product, so a product needing two charts, such as a pyjama set, gets one page containing both.

Step 4: Point each product to its chart and template

1. In Products, open a product.
2. In Product metafields, click Size chart, click Select pages, and choose the chart.
3. In the Theme template section, choose the template from step 2.
4. Click Save.

For many products, Shopify's templates guide shows how to add the Template column (under Columns > General) in the bulk editor and set it in one pass; our Shopify bulk editor guide covers adding columns. Metafields can be edited in bulk too. The template list shows templates from your live theme, so create the template in the published theme.

When are metaobjects a better fit?

Shopify's metaobjects documentation uses size charts as an example: a definition with a size field and a field per measurement, and a sample entry holding one size's measurements. Products point to entries through a metaobject reference metafield (connecting metaobjects), and our guide to Shopify metaobjects covers creating the definition and entries and linking them to products. Through dynamic sources, a block can read a referenced entry's fields, but each field fills one setting. That suits a fit note. A measurement table built from separate fields generally needs a purpose-built section or custom Liquid, and Shopify's rich text field is described as supporting headings, lists, links, bold and italics, with no mention of tables. For no code, pages are simpler.

How to build a size chart shoppers can actually use

A useful chart answers three questions: which measurement, measured how, and what to do between sizes.

Which measurements belong on each chart?

Body or garment measurements?

Body measurements describe the shopper ("waist 74 cm"). Garment measurements describe the item laid flat ("waistband 38 cm across"). Mixing them without a label misleads, so write "Body measurements" or "Garment measurements, laid flat" above the table.

Centimetres and inches

Convert with 1 inch = 2.54 cm and round consistently; one decimal place stops neighbouring sizes rounding to the same number. Put both units in each cell, as below, rather than separate cm and in columns, which won't fit a phone.

How-to-measure and fit notes

Add short notes under the table:

• Bust or chest: around the fullest part, tape level under the arms.
• Waist: around the narrowest part of the torso.
• Hip: around the fullest part of the hips, feet together.
• Inseam: crotch seam to hem, along the inside leg of trousers that fit well.
• Foot length: stand on paper, mark heel and longest toe, measure between the marks; use the longer foot.

Then add a fit note, such as "Relaxed fit. Between sizes? Take the smaller one." The model's height and size help too.

A sample size chart

Women's tops, body measurements. Sample values only: replace them with your own.

How do you make a size chart work on phones and screen readers?

• Use a real table, not a picture of one. WCAG 1.4.5 Images of Text (level AA) asks for text rather than images of text when the technology can present it. Text in an image can't be restyled or reflowed, and screen readers only get its alt text. A measuring diagram can sit below the table, with alt text and the right image size.
• Keep it narrow. Four or five columns, size first. In Dawn's product page CSS, a pop-up table scrolls sideways on screens under 750 px wide, so wide charts make shoppers swipe.
• Write a clear link label. "Size chart" or "Size guide", not "Click here". Dawn also uses the label as the pop-up's accessible name.
• Remember quick add. Dawn hides Pop-up and Collapsible row blocks in the quick-add window on collection pages, so quick-add buyers never see the chart.
• Mark the header row. The W3C tables tutorial says header cells must be marked up as <th> so screen readers can announce them.

The rich text editor help doesn't describe a header-row option. For proper headers, paste a table like this into the page's HTML view, with one row per size:

<table>
  <thead>
    <tr><th scope="col">Size</th><th scope="col">Bust</th><th scope="col">Waist</th><th scope="col">Hip</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">XS</th><td>82 cm (32.3 in)</td><td>64 cm (25.2 in)</td><td>88 cm (34.6 in)</td></tr>
  </tbody>
</table>

That is page content, not theme code. After saving, reopen the HTML view to confirm the header cells were kept. To skip typing the markup, our free size chart generator builds a table like this from your own measurements, in centimetres, inches or both, ready to copy into the same view.

How to check the size chart shows on every relevant product

A missing template or blank page reference looks fine in admin. Run these checks after setup and after catalog changes.

1. Filter by chart. In Products, click the search and filter icon, then Add filter +, and pick Size chart under Metafields. Choose a chart page, save the view, and compare it with the products you expect.
2. Find gaps in the bulk editor. Select one product type's products, open the bulk editor, and add the Template and Size chart columns. A blank cell means no chart or the wrong template. If values are rejected, see fixing metafield validation errors.
3. Test on a phone. For each chart, open a product, tap the link, check the chart and scroll it. Then confirm a product without a chart shows no link.
4. Build it into product creation. Add "template and size chart" to your new-product checklist and your regular metafield audit.
5. Recheck after theme changes. Templates live inside a theme, so confirm the size chart template exists in any new theme before publishing it.

If you offer free size exchanges, say so near the link and in your refund policy. A "How do I find my size?" question on your FAQ page can link to each chart.

Frequently asked questions

Can I show a different size chart for each product in Shopify?

Yes. Create one page per chart and set each product's Size chart metafield to the right page. Products sharing a chart point to the same page, so one correction updates them all.

Why does my size chart pop-up open blank?

The product uses the size chart template but has no page in its Size chart metafield. Select a page, or switch the product back to your default template.

Can I add a size chart to a vintage Shopify theme without code?

Not with this method, which needs a theme that supports dynamic sources. In a vintage theme, edit the theme code, hire a developer or use an app that supports your theme.

Sources

• Adding a pop-up size chart to your product pages — Shopify Help Center, accessed 28 October 2026.
• Adding product care instructions using metafields — Shopify Help Center, accessed 22 October 2026.
• Theme architecture versions and sources — Shopify Help Center, accessed 22 October 2026.
• Templates — Shopify Help Center, accessed 22 October 2026.
• Creating and editing pages — Shopify Help Center, accessed 22 October 2026.
• Using the rich text editor for content — Shopify Help Center, accessed 22 October 2026.
• Filtering products using product metafields — Shopify Help Center, accessed 22 October 2026.
• Editing metafields in bulk — Shopify Help Center, accessed 22 October 2026.
• Building a metaobject — Shopify Help Center, accessed 28 October 2026.
• Connecting and displaying metaobjects — Shopify Help Center, accessed 28 October 2026.
• About metaobjects — Shopify developer documentation, accessed 28 October 2026.
• Dynamic data sources — Shopify developer documentation, accessed 22 October 2026.
• List of data types — Shopify developer documentation, accessed 22 October 2026.
• Dawn theme source code, version 16.0.0 — Shopify on GitHub, accessed 22 October 2026.
• Horizon theme source code, version 4.3.0 — Shopify on GitHub, accessed 22 October 2026.
• Understanding SC 1.4.5 Images of Text (Level AA) — W3C Web Accessibility Initiative, accessed 22 October 2026.
• Tables Tutorial — W3C Web Accessibility Initiative, accessed 22 October 2026.