How to Add a Size Chart to Shopify: Page, Metafield or App

Does Shopify Have a Built-In Size Chart?

You can add a size chart without an app. Shopify's Help Center walks through it in a tutorial called Adding a pop-up size chart to your product pages: a page holds the chart, a metafield on the product points at that page, and a block in the theme editor opens it. Beyond your plan, the route has no extra cost.

What you won't find is a screen called Size chart. None of the Shopify pages we read on November 2, 2026 describes a dedicated size chart screen or setting in the admin: the Help Center pages on metafields, metaobjects, the rich text editor, bulk editing, CSV and theme sections, the developer docs on dynamic sources and metaobjects, and the RSS feeds of the Shopify Changelog and Shopify's developer changelog. Where the Help Center and developer pages among them mention a size chart, they treat it as an example of a metafield, a metaobject or a pop-up.

One label can mislead you. The Theme Store lists Size chart among Horizon's features, but we found no block with that name in the code of Horizon v4.3.0 as of November 2026. You assemble the feature from blocks, which is what this guide does.

The hard requirement on most plans is the theme. If your store is still on the Starter plan, which Shopify says isn't available to new stores, expect more limits: Shopify says other themes and customization options aren't available on it, and that creating other pages takes a higher plan. Shopify says the tutorial “requires a theme that supports dynamic sources”, and it defines Online Store 2.0 themes as themes that support sections on all pages as well as dynamic sources.

Our Online Store 2.0 guide shows how to tell whether your theme is one. An old tutorial at shopify.dev now redirects to a general themes page, so steps copied from guides that relied on it may match nothing in your admin.

Which of the Four Routes Fits Your Catalog?

Three of the four routes keep the table on a Shopify page. They differ in how a product finds its page, so start with the simplest one that covers your catalog and move up only when it stops fitting.

Here is the path through this guide for each route:

• Route 1: build the page, add the block, then check products with no chart.
• Route 2: build the page, add the metafield, link each product or assign in bulk for a large catalog, add the block, connect it to the metafield, then check products with no chart.
• Route 3: the same page, then the metaobject steps, adding the block before the last one.
• Route 4: go to the app comparison.

We carry one example through the guide: a clothing store with three charts, Tops, Bottoms and Dresses. On route 2 that means three pages. Each product links to one of them, and correcting a measurement on Tops means editing one page, however many products use it.

Build the Chart as a Page

Start with one chart. In the example, that is Tops.

1. From your Shopify admin, go to Online Store > Pages and click Add page.
2. In Title, enter a name a shopper can read, such as Size chart: Tops.
3. In Content, click the Insert table button in the toolbar, then Insert table. That creates a table with one row and one column; the same toolbar button then adds rows and columns.
4. In the Visibility section, set the page to Visible, then click Save.

In Shopify adminOpen in your store

1. Online Store
2. Pages

Zoom

The form opened with Visibility set to Hidden when we created a page in our development store on November 2, 2026, although Shopify's page on creating pages says a new page is visible by default, so check this setting before you save. Shopify's tutorial sets the page to Visible; we did not test whether a pop-up can show a Hidden page.

In Shopify adminOpen in your store

1. Online Store
2. Pages

Zoom

Repeat these steps for each chart. A baby store uses the same page mechanics, and our baby store guide covers how age bands and weight ranges fit around them.

Should the chart be a table or an image?

A picture of a chart is quick to upload, but it is still a picture of text. WCAG 2.2 has a level AA rule for this, 1.4.5 Images of Text. It doesn't name size charts and it lists exceptions, but its default is plain:

The exceptions cover text that is customizable or essential to the presentation. If you still use an image, W3C's guidance on complex images asks for a two-part text alternative; it is written for graphs and diagrams, so take it as an analogy, and keep the measurements in text next to the picture.

Width is the other thing to test. We opened the pop-up at 390 CSS pixels using browser emulation, not on a phone, and a table of 3 columns with short values fit without sideways scrolling. We did not test wider tables, so open yours at phone width before you rely on it.

Storefront pop-up at phone width

Zoom

How to Show the Chart on a Horizon Product Page

Shopify's tutorial names a block called Pop-up with a Link label field, and that isn't what you see in Horizon. In the code of Horizon v4.3.0 the block is Popup link and its content comes from nested blocks.

Our test on a draft Horizon theme in a development store, on November 2, 2026, showed the same names. Everything in this section comes from that code and that test, not from Shopify's documentation, so check the labels against your own version.

You have three ways to show the chart:

• Popup link: hidden until a shopper clicks.
• Accordion: collapsed under a heading on the product page.
• Inline: always visible, for stores where almost every shopper checks.

Pop-up: the Popup link block

1. From your Shopify admin, go to Online Store, click Edit theme and open a product template.
2. Under Details, click Add block, search for pop and choose Popup link in the Links group.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

3. Select the block. Under Link, change Text from Learn more to Size chart. Under Popup, Behavior offers Default or Drawer; we only checked Default on the storefront.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

4. Inside the block, click Add block and choose Page. Remove the two sample Text blocks, a question about returns and its answer, with Remove block.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

5. Beside Page, click Select and choose your page, then Save. For different charts on different products, connect the metafield here instead, as described below.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

With the page chosen this way in our draft, the pop-up on a sample pair of jeans opened the Tops table. That is route 1 and its limit: every product on the template shows the same chart.

6. In our draft the block landed first in Details, above the product title. To put the link under the product's options, drag Popup link below Variant picker in the block list, then click Save.

Storefront preview of a draft Horizon theme

Zoom

Storefront pop-up open over a sample product page

Zoom

The pop-up prints the page title in large type above the table, so shoppers read it. Name the page for them: Size chart: Tops works, and an internal label like Tops v2 doesn't. That large type is the default style in our draft, and your theme settings may change it.

Accordion or inline instead of a pop-up

Pick by how much of the page you want the chart to take. An accordion row keeps it on the product page without a separate window. In Details, add Accordion, then add Page inside a row; the block arrives with sample rows to edit or remove. Our guide to collapsible blocks on product pages covers how those blocks behave.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

An inline table suits a store where almost every shopper checks the chart. Add Page directly under Details and connect it the same way. We saved both forms in the draft, confirmed the table in the storefront text, then removed them.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

Dawn and older themes

The metafield is set in the admin rather than in the theme, and what changes from theme to theme is the block that shows it.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

How to Show a Different Chart on Each Product

Back to the example: three pages already exist for Tops, Bottoms and Dresses. What is missing is a way for each product to say which one it wants. A setting of type page accepts a metafield of type page reference, and that is the link you are about to build.

Create the page-reference metafield

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

In Shopify adminOpen in your store

1. Settings
2. Metafields and metaobjects

Zoom

Link a page to each product and connect the block

1. From your Shopify admin, go to Products and click a product.
2. In the Product metafields card, click Add in the Size chart row, select the page, then click Save.

In Shopify adminOpen in your store

1. Products
2. Product metafields

Zoom

3. In the theme editor, open the Page block. Beside Page, click the database icon, then Closest Product and Size chart, then Save.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

In our draft, the picker listed only Size chart and Size chart record, a metafield we had added for route 3. Once the connection was saved in that Horizon draft on November 2, 2026, the storefront pop-up on a sample tee showed the Tops page. That is one template in a draft, so check yours on two products with different charts.

There is one limit to plan around, and Shopify states it in the tutorial:

So a set sold as one product, such as a top with trousers, needs one page holding both tables. That is our advice for working within the limit, not a Shopify rule.

If you prefer to watch the build, this tutorial from the independent channel Coding with Jan covers the chart page, the metafield and the pop-up. It was published in February 2023, so expect block names that differ from Horizon: take the order of steps from it, and the names from above.

Products with no chart

Storefront preview of a sample scarf

Zoom

In the preview of our draft theme, not a published storefront, clicking that link opened a window with placeholder text rather than an error.

Pop-up on a product

Zoom

The fix Shopify gives is a second template, so products with a chart and products without one use different templates. In the theme editor, open the template menu at the top, go to Products and click Create template. Remove the block from the new template, then assign it in the Theme template section of the products with no chart.

How to Assign Charts Across a Whole Catalog

A metafield is set product by product, so a large catalog needs a faster way. Shopify's page on editing metafields in bulk gives the first steps; the cell behavior comes from our test.

1. Go to Products, select the products with the checkboxes and click Bulk edit. Shopify's metafields page calls this button Edit products, while Shopify's general bulk editing page says Bulk edit.
2. Click Columns and, in the Metafields section, select Size chart.
3. Click a cell in that column, press Enter and click Select page. Choose the page in the Find pages picker.
4. Click Save.

In Shopify adminOpen in your store

1. Products
2. Bulk editor

Zoom

Neither bulk editing page we read on November 2, 2026 names which metafield types the editor accepts, so this rests on our test: 3 products, one cell at a time, in a development store. We did not test filling a value down a column.

CSV is a narrower route. Shopify's product CSV page supports product metafields in columns headed with product.metafields.custom.KEY and lists the types it accepts. On November 2, 2026 that list included list.metaobject_reference, by ID or by handle, and didn't name page_reference or a single metaobject_reference.

We did not run an import, so for route 2 plan on the bulk editor. We wouldn't plan on list.metaobject_reference for route 3 either: shopify.dev says it returns a list of values and pairs a page setting only with page_reference.

Two neighbouring limits: Shopify says variant metafields aren't supported for product CSV import or export, and creating metaobject entries in bulk is a separate question, covered in our answer on importing them.

Does a Metaobject Beat a Page for a Size Chart?

Metaobjects come up in size chart discussions for a good reason: Shopify uses the example itself.

The catch is the table itself. Shopify lists blog posts, pages, product descriptions and collection descriptions as the places its editor inserts tables, and metafields aren't on that list.

On November 2, 2026 we opened a Rich text metafield on a product: bold, italic, links and lists, with no table button and no HTML view. We did not open a Rich text field inside a metaobject.

In Shopify adminOpen in your store

1. Products
2. Product metafields

Zoom

So a Rich text metafield on a product is not a way to get a table. What did work is an entry with a field of type Page, which keeps the table on a page and adds a record in front of it.

Compare that with route 2. Both keep the table on one page, and a correction lands once in both. The metaobject adds a definition and an entry per chart, so it earns its place when each record also holds something else your theme displays, such as fit notes. Otherwise, skip it.

If a record must hold more, here are the steps:

1. Go to Settings > Metafields and metaobjects, open metaobject definitions and add one named Size chart, with a field of type Page. Add a text field for the name too (see below). The entry needs Storefronts access to display; that option was on by default in our test.

In Shopify adminOpen in your store

1. Settings
2. Metafields and metaobjects

Zoom

2. Go to Content > Metaobjects and add one entry per chart, each pointing at its page.
3. Add a product metafield definition: click Select type and choose Metaobject, then your Size chart definition.
4. On each product, select the entry in the Product metafields card.
5. In the theme editor, click the database icon beside Page, then Closest Product, the record metafield and its page field.

In Shopify adminOpen in your store

1. Online Store
2. Theme editor

Zoom

Name the entries yourself: an entry that holds only a Page field gets an auto-generated name, so a text field for a readable name is our advice, not a Shopify requirement.

To check that the entry really drives the chart, we gave one sample product a Bottoms page in the plain metafield and an entry pointing at Tops. Page, connected to the entry's field, showed Tops. That was one entry on one product in a draft theme.

On a product with no entry, Shopify's metaobject tutorial says its example section is left blank, leaving whitespace, and that the behavior can vary by theme and section, so test your template. We did not test that case with the Popup link block.

How the choice between a metafield and a metaobject shifts with catalog size is what our metafields guide weighs. Its comparison is about a metafield that holds the chart itself, which is where copies pile up, rather than one that points at a page.

Translated Charts and Regional Sizes

For a store selling across regions, the simplest chart is one table with US, UK and EU columns side by side. That is formatting advice from us, not a Shopify feature, and every column makes the table wider, so repeat the phone-width check. Footwear has its own conventions, which our shoe store guide sets out.

For translation, the one option we can point to is on metaobjects: Shopify's metaobject options page says of the Translations option that “Entries can be translated into different languages.” On route 3 the table still sits on a page, so don't count on that option to translate it. This guide gives no steps for translating a chart page. Start with what Translate & Adapt covers and where it stops.

Apps approach this from the other side. Kiwi's listing says it updates the sizing unit based on the customer's location and auto-translates charts on paid plans: English and Spanish on Premium, plus Dutch, French, German and Italian on Plus. We did not test either claim.

When Is a Size Chart App Worth It?

Everything above needs no app. What the listings add is a size recommender, imports and assignment by rule, and the cards below compare four of them. Treat this as a snapshot of November 2, 2026 rather than a full list: App Store search renders in the browser, so we can't prove it is complete.

Three more we saw: Smart Size Chart, which had a single review on November 2, 2026; Milople Size Chart, whose listing title offers a popup, a button trigger or an embedded chart and whose cheapest paid plan cost less than any on the cards above, though the listing had no reviews; and MP Size Chart & Size Guide, rated 5.0 from 881 reviews, whose free Starter plan lists AI size recommendations. Some listing titles also promise fewer returns; those are the vendors' claims, not something we measured.

Before You Rely on It: The Setup Checklist

The metafield comes before the block because Shopify says you need a metafield definition to connect it to the pop-up block. On route 1, skip steps 3 and 4 and pick the page directly in step 5. On route 3, step 3 becomes the metaobject definition, its entries and a metafield that references them, and step 4 means selecting an entry on each product. Step 6 is the one that stops an empty link from reaching shoppers.

What Happens to the Chart When You Change Themes?

Shopify's page on adding themes says that products, collections, menus, pages and blog posts “aren't changed or deleted when you switch to a new theme”. It then lists what you must set up for each theme, and two items on that list touch a size chart:

• Settings on sections and blocks: the pop-up block, its label and its connection to the metafield.
• Theme templates: a separate template for products with no chart has to exist in the new theme too.

That sentence doesn't name metafields, so check a product after the switch. In our test, Dawn's Pop-up block showed the same source icon beside Page, though we didn't open its source list. The full sequence for a switch is in what you redo in the new theme.

The Bottom Line

Frequently Asked Questions