How to Add a Size Guide to Shopify Product Pages

If you sell clothing, shoes, rings or anything else that has to fit, shoppers need sizing help at the moment they pick a size. This guide shows how to add a size guide to your Shopify product pages without an app, how to show a different chart on different products, when an app is worth it, and what to put in the chart itself.

Three ways to add a size guide

Method	Best for	What you need
One size chart page in a pop-up	Stores where every product uses the same sizing	A page and a theme with a Pop-up block
A chart per product, using a metafield	Stores with several charts, for example tops, trousers and shoes	A page metafield and a theme that supports dynamic sources
A size chart app	Many charts, unit switching, or size recommendations	An app from the Shopify App Store

The first two methods use features that are already in Shopify. They work with themes that have a Pop-up block in the product information section, which includes Shopify's free Dawn theme. Some themes call the block something else, such as "Size guide" or "Size chart", and some build it in as a theme setting. Check your theme's documentation if you can't find it.

Step 1: Create the size chart page

The pop-up shows the content of a normal Shopify page, so start there.

1. From your Shopify admin, go to Online Store > Pages.
2. Click Add page.
3. Enter a title, for example Size chart.
4. Add your sizing information in Content. The rich text editor has an Insert table button for the chart, and you can also insert images, such as a diagram that shows where to measure.
5. In the Visibility section, set the page to Visible.
6. Click Save.

If you need more than one chart, create one page for each: "Size chart: tops", "Size chart: shoes" and so on. You can create as many as you need.

Step 2 (simple version): Show the same chart on every product

If one chart covers your whole catalog, you can pick the page directly in the theme editor.

1. Go to Online Store and click Edit theme next to your theme.
2. In the drop-down menu at the top of the editor, click Products and open your product template.
3. In the sidebar, under Product information, click Add block, then click Pop-up.
4. In the Link label field, enter the text customers will click, for example Size chart.
5. Next to Page, select your size chart page.
6. Drag the block so it sits next to the size picker, then click Save.

The link now appears on every product that uses this template. That is a problem if you also sell products with no sizes, such as bags or gift cards. The fix is a separate product template for sized products. Our guide on how to create a custom product template in Shopify walks through it.

Step 2 (flexible version): A different chart for each product

To show the right chart for each product, Shopify's own tutorial uses a metafield. A metafield is an extra field on a product. Here it stores which size chart page belongs to that product, and the Pop-up block reads it.

Create the metafield

1. Go to Settings > Metafields and metaobjects.
2. In the Metafield definitions section, click Products.
3. Click Add definition.
4. In the Name field, enter Size chart.
5. Click Select type and choose Page. Keep the default, One page.
6. Click Save.

Connect the Pop-up block to the metafield

1. In the theme editor, open the Products drop-down menu and click Create template. Name it something clear, such as size-chart.
2. Under Product information, click Add block, then Pop-up.
3. Enter a Link label, such as Size chart.
4. Next to Page, click the dynamic source icon and select the Size chart metafield.
5. Click Save.

Assign a chart to each product

1. Go to Products and open a product.
2. In the Product metafields section, click Size chart, then Select pages, and choose the right page.
3. In the Theme template section, select the template you just created.
4. Click Save, then repeat for your other sized products.

Two things to know:

• A product can link to only one page through this metafield.
• If a product uses the template but has no page selected, the link still shows and opens an empty pop-up. Only apply the template to products that have a chart.

This method needs a theme that supports dynamic sources. Online Store 2.0 themes do. With an older vintage theme you would need to edit theme code or hire a Shopify Partner. Shopify's full walkthrough is in the Help Center: add a pop-up for a size chart.

Before you publish a new template on your live theme, try it on a duplicate first. Our guide on how to test a Shopify theme before you publish it explains how.

When a size chart app makes sense

The built-in method is free and adds no extra scripts to your store. An app starts to make sense when you want things a plain page can't do:

• Assigning charts by rule, for example by collection, tag or vendor, instead of product by product.
• A switch between centimetres and inches.
• A size recommender that suggests a size from the shopper's measurements.

Kiwi Size Chart & Recommender is one widely reviewed option on the Shopify App Store. Whichever app you look at, read the recent reviews and the pricing section before you install, and check that it adds its chart as an app block, so you can place it in the theme editor without touching code.

If you are still choosing a theme, look for one with sizing built in. Our Maison fashion theme, for example, includes a size guide and quick add with sizes, so you may not need a separate app at all.

What to put in a size guide

A size guide only helps if shoppers can use it in a few seconds on a phone. A good one has:

• Body measurements, not just labels. "M" means little on its own. Show chest, waist, hip or foot length for each size.
• Both units. Give centimetres and inches if you sell to more than one region.
• International conversions where they apply, such as UK, EU and US shoe sizes.
• How to measure. A short list or a simple diagram: where to place the tape, and whether to measure the body or a garment laid flat.
• Fit notes. Say if an item runs small, large or true to size, and what to do between sizes.
• Model details. For example, the model's height and the size they are wearing.

Keep the table narrow. Four or five columns read well on a phone; ten do not. If you have many measurements, split them into two small tables. Make sure the size names in the chart match the option values on the product exactly. If your product offers S, M and L, the chart should not say Small, Medium and Large in a different order. For more on how sizes work as options, see Shopify product options and variants explained.

Fit notes also belong in the product description itself, where shoppers who never open the chart will still see them.

FAQ

Can I add a size chart to Shopify without an app?

Yes. Create a page with your chart, then add a Pop-up block to the product information section in the theme editor and select that page. This works on themes that include a Pop-up block.

How do I show different size charts for different products?

Create a product metafield of the Page type, connect the Pop-up block's Page setting to it with the dynamic source icon, then pick the right size chart page on each product.

Why is my size chart pop-up empty?

Usually the product uses the size chart template but has no page selected in its Size chart metafield. Also check that the page's visibility is set to Visible.

Where should the size chart link go on the product page?

Next to the size picker, above the Add to cart button. That is where shoppers are when the question comes up. In the theme editor, drag the Pop-up block to just above or below the variant picker.