Quicksloth

How to add a size chart to a Shopify product page

Last updated: 13 October 2026 · By Quicksloth

Shopify's own free themes, Dawn and Horizon, can show a size chart without any app. This guide shows the free way in Shopify's own themes, how to show a different chart for each type of product, and when an app is worth it. The names of blocks and settings are copied from the code of Dawn 16.0.0 and Horizon 4.3.0, the latest versions on 13 October 2026.

Short version: put your chart in a page, as a real table. Then, in the theme editor, add a pop-up or collapsible row to your product template and point it at that page. If you need a different chart for each product type, use a page metafield or a second product template.

Step 1: put the chart in a page, as a table

A size chart is easier to keep up to date in one place, and Shopify pages are that place. Shopify's rich text editor can insert a real table: "you can insert tables in your blog posts, pages, product descriptions, and collection descriptions" (Using the rich text editor for content, read on 13 October 2026).

  1. In your Shopify admin, go to Online Store > Pages and click Add page.
  2. Give it a clear title, for example "Size chart: women's tops". In Dawn, the pop-up shows this title as its heading.
  3. In the content box, click Insert table, then Insert table again. Shopify creates a table with one row and one column; add more with Insert row below and Insert column after from the same button.
  4. Put the sizes in the first column and one measurement in each of the other columns, with the unit in the header: "Chest (cm)", "Waist (cm)".
  5. Under the table, add one or two lines on how to measure. An image is fine here, as an extra.
  6. Click Save. You do not need to add the page to your menu.

Why a table and not only an image: a screen reader only reads an image's alt text, not the sizes inside it; the text is not translated with the rest of your store; and it becomes tiny on a phone. A table is also the only way to show the chart in a theme block: text settings in the theme editor do not accept tables, while a page does. If you already have the chart as an image, keep it under the table.

Our suggestion for phones (not a Shopify rule): keep the table to about five columns. If you need more, split it into two tables, for example one in centimetres and one in inches.

Step 2: one chart for every product

Open the theme editor: Online Store > Themes > Customize. In the selector at the top of the editor, choose Products and then the product template (usually Default product). What comes next depends on your theme.

Dawn

Other free Shopify themes built on Dawn often have the same blocks; we checked only Dawn.

In the Product information section, click Add block and choose one of these two:

Drag the block so that it sits just under the Variant picker block, where customers choose a size. Click Save.

Horizon

Horizon builds the product page from smaller blocks. Its pop-up and accordion have no page setting of their own, so you add a Page block inside them:

The Page block also shows the page title as a heading, so keep the title short.

Other themes

Many Online Store 2.0 themes have a similar block: look in the product section for "Pop-up", "Popup", "Modal", "Tab", "Collapsible tab" or "Accordion", or search your theme's documentation for "size chart". Older (vintage) themes often need a small code change or an app.

A different chart for each product type

Shoes and T-shirts do not share a chart. There are two free ways.

Way 1: a page metafield (best for many products)

  1. Make one page per chart, as in Step 1.
  2. Create a product metafield of type Page: Shopify's help lists it as "Page reference": "Allows you to link to an existing page" (Metafield content types and values, read on 13 October 2026). Steps: open any product, and in the Metafields section click Add definition, name it "Size chart", click Select type and choose Page, then Save (Creating custom metafield definitions).
  3. On each product, pick its chart page in the new "Size chart" field.
  4. In the theme editor, open the block that holds the chart (in Dawn the Pop-up block, in Horizon the Page block inside your Popup link), and next to its Page setting click the Connect dynamic source icon, then choose the "Size chart" metafield. Save.

This works because a theme setting of type page accepts a metafield of type page_reference, and only that one (Shopify's dynamic sources table, read on 13 October 2026).

Watch out: in Dawn's code, the pop-up link and the collapsible row are shown even when the page is empty. A product without a chart in its metafield will show a "Size chart" link that opens an empty window. In Horizon, an empty Page block shows placeholder text instead. Give every product that uses the template a chart, or use Way 2 for products that have none.

Way 2: a second product template (best for a few product types)

  1. In the theme editor selector, choose Products and Create template. Name it, for example, "shoes", and base it on your default product template.
  2. In the new template, set the pop-up or collapsible row to the shoes chart page. Save.
  3. In the admin, open each shoe product and choose the "shoes" template in its theme template setting. Shopify only lets you assign templates of your published theme.

Templates belong to one theme: if you install a new theme, you will need to create them again.

When an app is worth it, and what to check

The free ways above are enough for most stores with a few charts. An app starts to save time when you have many charts and rules (by tag, vendor, collection or product type), want a centimetre and inch switch, or want to edit charts without touching the theme.

Before you install one, check these on its Shopify App Store listing and in its reviews:

If you use ESC Size Charts and your chart has stopped showing, see our page on ESC Size Charts and the 2027 Shopify dates. We are also building our own size chart app, Quicksloth Size Chart. It is not available yet, and the free ways in this guide work without it.

Common problems

The chart does not show on my product page.
Check that the product uses the template you edited (in the product's theme template setting), that you clicked Save in the theme editor, and that you edited your live theme, not a copy.
The pop-up opens but it is empty.
The block has no page selected, or the product's "Size chart" metafield is empty (see "Watch out" above).
The table is cut off on phones.
The table has too many columns for a phone screen. Split it into two tables, or shorten the headers ("cm" and "in" in the header instead of in every cell).
My table lost its borders.
The table style comes from your theme. Some themes show tables without borders; your theme's settings or a few lines of CSS can change that.

Questions and answers

Do I need an app to add a size chart on Shopify?
No. Dawn has the Pop-up and Collapsible row blocks, Horizon has Popup link and Accordion with a Page block inside, and many other Online Store 2.0 themes have something similar. An app helps when you have many charts and rules.
Can I show the size chart next to the size selector?
Yes. In the theme editor, drag the pop-up or collapsible row block just under the Variant picker block.
Will the free way break on 1 March 2027?
No. The March 2027 change concerns script tags added by apps. A theme block that shows a Shopify page does not use a script tag.
Does a size chart help with returns?
It is commonly said that clear sizing reduces size-related returns, but we have no figures of our own to share, so we do not quote any.

Theme names come from the public code of Shopify's Dawn 16.0.0 and Horizon 4.3.0 themes and from the Shopify Help Center, read on 13 October 2026. Shopify can rename menus and blocks: if something looks different in your admin, your theme's documentation has the current names. Written with AI tools and checked by Quicksloth. ESC Size Charts is a product of Eastside Co. Quicksloth is an independent developer and is not affiliated with Shopify or Eastside Co. Shopify is a trademark of Shopify Inc.