How to Add a Size Chart to Shopify Dawn Theme (4 Ways, No Code)

Before you start

Dawn is Shopify's free reference theme. It launched with Online Store 2.0 in 2021, and a lot of newer free and paid themes are built on the same structure. That's good news for size charts, because Online Store 2.0 themes let you add blocks to product pages through the theme editor, without touching Liquid files.

Two quick things before you change anything:

1. Duplicate your live theme. In your Shopify admin, go to Online Store, then Themes. Next to your current theme, open the "..." menu and choose Duplicate. Make your changes on the copy, preview it, and publish when you're happy. If something goes wrong, your live store is untouched.
2. Prepare your chart as a table. Text-based tables are better than images. They're readable on any screen size, they work with screen readers, they can be translated, and search engines can read them. Our article comparing a size chart image vs a table goes into why.

Method 1: Dawn's Pop-up block

This is the most common setup, and for a store with one size chart for everything it's often all you need.

Step 1: create the size chart page

1. In your admin, go to Online Store, then Pages, and click Add page.
2. Title it something like "Size guide."
3. In the content editor, click the table icon to insert a table, and add your sizes and measurements. Include both inches and centimetres if you sell internationally.
4. Add a short "How to measure" paragraph under the table.
5. Under Visibility, you can leave it visible. It won't appear in your menus unless you add it.
6. Save.

Step 2: add the Pop-up block to your product template

1. Go to Online Store, then Themes, and click Customize on your duplicated theme.
2. From the page selector at the top, choose Products, then Default product.
3. In the left sidebar, under the Product information section, click Add block.
4. Choose Pop-up.
5. In the block settings, set the Link label to "Size guide" and choose the page you just created.
6. Drag the block so it sits just above or just below the variant picker. Shoppers look for size help right where they choose a size.
7. Save, then preview a product.

Shoppers now see a "Size guide" link. Clicking it opens your page in a modal window without leaving the product.

Good for: one chart for the whole store, quick setup, no apps. Limits: every product shows the same chart; no unit switch; the pop-up is only as good as the table you put in the page.

Method 2: Dawn's Collapsible row block

Some stores prefer the size chart visible on the page as an accordion, so shoppers don't have to open anything. That's what the Collapsible row block is for.

1. Create your size chart page, as in Method 1.
2. In the theme editor, open Products, then Default product.
3. Under Product information, click Add block and choose Collapsible row.
4. Set the Heading to "Size guide" and pick an icon if you like. Dawn includes a ruler icon that works well.
5. In Row content from page, choose your size chart page. You can also type the content straight into the row, but using a page keeps it in one place.
6. Drag it near the variant picker, and save.

Many stores use both: a Pop-up link next to the size selector for people who are actively choosing, and a Collapsible row lower down with materials and care.

Good for: keeping the chart on the page, mobile shoppers who don't like pop-ups. Limits: same as Method 1. One page per row, no per-product logic on its own.

Method 3: different charts per product with metafields

If you sell T-shirts and jeans, one chart doesn't work. Metafields let you attach a different size chart page to each product, and the Pop-up or Collapsible row block shows whichever page that product has.

Step 1: create a page for each chart

Create one page per chart: "Size guide: tops," "Size guide: jeans," "Size guide: shoes," and so on.

Step 2: create a product metafield

1. Go to Settings, then Custom data, then Products.
2. Click Add definition.
3. Name it "Size chart."
4. For the type, choose Page (a page reference), and save.

Step 3: assign charts to products

Open each product in your admin. Scroll to the Metafields section at the bottom, and choose the right size chart page in your new "Size chart" field. You can also use the bulk editor to assign the same chart to many products at once.

Step 4: connect the block to the metafield

1. In the theme editor, open your Pop-up or Collapsible row block.
2. Next to the page setting, click the dynamic source icon (it looks like a small stack of layers).
3. Choose your "Size chart" product metafield.
4. Save.

Now each product shows its own chart. If a product has no chart assigned, the block shows nothing, so you won't get an empty pop-up.

Whether the dynamic source icon appears next to the page setting depends on your Dawn version. If you don't see it, update Dawn to the latest version from the theme library, or use Method 4. Our full guide to size chart metafields on Shopify covers metafields in more depth.

Good for: stores with a handful of different charts. Limits: you manage every chart as a separate page, and every product needs assigning. Still no unit switch or size recommendation.

Method 4: a size chart app block

A size chart app gives you everything above plus features the built-in blocks can't do. Tailor Size Guide is our app, so take this section with that in mind, but the steps are similar for most size chart apps on Dawn.

1. Install the app from the Shopify App Store.
2. Create your charts in the app, and assign them to products, collections, or product tags.
3. In the theme editor, open Products, then Default product.
4. Under Product information, click Add block, scroll to Apps, and choose the size chart block.
5. Drag it next to the variant picker and save.
6. If the app uses a pop-up or floating button, also check Theme settings, then App embeds, and make sure the app's embed is switched on.

Because Dawn uses standard theme colour and font settings, a well-built app block picks up your theme's look automatically.

What you get that the built-in blocks don't:

• Per-product, per-collection or per-tag charts managed in one place.
• A cm/inch toggle, so shoppers can read the chart in their own units. See how to add a cm/inch unit switch.
• A fit recommender that suggests a size from the shopper's measurements. See how to add a size recommender.
• Custom measurement fields for made-to-order products.

Which method should you use?

Where to put the size chart on the page

Placement matters as much as the chart itself. A few rules that hold up across stores:

• Next to the size selector. Shoppers decide on size there. A size guide link two scrolls down doesn't get used.
• Visible on mobile without scrolling past the buy button. Most fashion traffic is on phones. Check on a real phone, not just the editor's mobile preview.
• Clearly labelled. "Size guide" or "Find your size" works better than an icon on its own.
• One click away, not three. If shoppers have to leave the product to find the chart, many won't come back.

Our guide on popup vs tab vs inline size charts compares placements, and optimising your size chart for mobile covers the small-screen details.

What to put in the chart

The method you choose only controls how the chart is shown. The content is what helps people pick the right size:

1. Body measurements or garment measurements, labelled clearly. Shoppers need to know if "chest 40" means their chest or the shirt's.
2. Inches and centimetres if you ship outside the US.
3. A short how-to-measure section, with a diagram if you can.
4. Fit notes: "runs small," "relaxed fit, size down for a closer fit," model height and size worn.
5. International size conversions if you sell abroad.

Common problems on Dawn

The Pop-up block doesn't appear. Check you're editing the right product template. If you've created custom product templates (for example, one for shoes), each one needs its own block.

The chart looks cramped on mobile. Wide tables with many columns scroll sideways on phones. Keep columns to what's needed, or split one big chart into two smaller ones.

Different products show the wrong chart. With metafields, check each product's metafield value. With an app, check the assignment rules, especially if a product matches more than one collection or tag.

Another app's widget clashes with the size chart. Our guide on preventing size chart conflicts with other apps covers this.

Other themes

Most Online Store 2.0 themes work the same way as Dawn, though block names vary. See our guides for Impulse, Prestige, and Shopify 2.0 themes in general.

Frequently asked questions

Sources and standards

1. Shopify Help Center: Online store themesShopify's documentation for the theme editor, sections, blocks and app embeds.
2. Shopify Help Center: MetafieldsHow to create metafield definitions, including page references, and connect them as dynamic sources.
3. Dawn theme on the Shopify Theme StoreShopify's free reference theme, built for Online Store 2.0.
4. Tailor Size Guide documentationSetup steps for the Tailor Size Guide app block and app embed, available on our docs page.