How to Add a Size Chart on Shopify (4 Ways, Step by Step)

Why a size chart is worth the effort

Online returns are expensive. The National Retail Federation estimates that 19.3% of online sales were returned in 2025, compared with 15.8% across retail as a whole. In clothing and shoes, wrong size and poor fit come up again and again as the top reason people send things back.

A wrong-size return is also the most preventable kind. Nothing is wrong with the product; the shopper just didn't have enough information when they chose a size. A clear size chart, in the right place, closes that gap. It also cuts the "what size should I get?" emails and the habit of ordering two sizes and returning one, which our guide to reducing bracketing covers in more detail.

So this isn't just a design task. Done well, a size chart is one of the cheapest ways to protect your margin. If you want to put a number on it for your store, the returns cost calculator will estimate what wrong-size returns are costing you.

First, check which kind of theme you have

How you add a size chart depends a little on your theme.

• Online Store 2.0 themes (Dawn and most themes released since 2021) let you add blocks to product pages in the theme editor, including app blocks. Everything in this guide works without code.
• Vintage themes (older themes like Debut) don't support app blocks on product pages. Apps usually work through an "app embed" switch in theme settings instead, and a few methods below need a small code change.

To check, go to Online Store, then Themes, click Customize, and open a product page. If you can click Add block inside the product information section and see an Apps category, you're on a 2.0 theme.

Whichever theme you have, duplicate it before you change anything. On the Themes page, open the "..." menu next to your current theme and choose Duplicate. Edit the copy, preview it, and publish when you're happy.

Method 1: a table in the product description

This is the quickest option and needs nothing but the product editor.

1. In your admin, go to Products and open a product.
2. In the Description box, place your cursor where the chart should go, usually at the end.
3. Click the table button in the editor toolbar and choose the number of rows and columns.
4. Fill in the sizes and measurements. Put sizes in the first column and measurements across the top.
5. Add a heading above the table, like "Size guide," and a line saying whether the numbers are body or garment measurements.
6. Save.

Why it's tempting: no apps, no theme editing, done in two minutes.

Why I'd only use it for a handful of products: you're copying the same chart into every product by hand. When a measurement changes, you have to find and fix every copy, and some always get missed. Charts in descriptions also tend to sit far below the size selector, especially on mobile, where the description is often collapsed. Our guide to adding a size chart in the product description has more on making this method work if you do choose it.

Method 2: a size chart page plus a theme block

This is the best free option for a store that uses one chart for everything, or just a few.

Step 1: create the page

1. Go to Online Store, then Pages, and click Add page.
2. Give it a clear title, like "Size guide."
3. Insert a table with your sizes and measurements. Add inches and centimetres if you sell internationally.
4. Under the table, add short "How to measure" instructions.
5. Save.

Step 2: show it on product pages

On most 2.0 themes you have two built-in blocks to choose from:

• Pop-up block: shows a "Size guide" link that opens the page in a window. Good when you want the chart one click away without taking up space.
• Collapsible row block: shows the page as an accordion section on the product page. Good for mobile shoppers who don't like pop-ups.

To add either one:

1. Go to Online Store, then Themes, and click Customize.
2. Choose Products, then Default product from the page selector.
3. Under the product information section, click Add block and pick Pop-up or Collapsible row.
4. Label it "Size guide" and select your page.
5. Drag it next to the variant picker, save, and check it on your phone.

Block names vary a little between themes. Dawn calls them Pop-up and Collapsible row; other themes may say "Popup," "Tab," or "Accordion." Our step-by-step guide for the Dawn theme has screenshots of each setting, and there are guides for Impulse and Prestige too.

Limits: every product shows the same page. If you have a second chart, you'd need a second product template, and that gets messy fast.

Method 3: a different chart on each product with metafields

Metafields let you store extra information on each product. You can use one to attach the right size chart page to each product, then connect your Pop-up or Collapsible row block to it.

1. Create one page per chart: "Size guide: tops," "Size guide: jeans," "Size guide: shoes."
2. Create a metafield: go to Settings, then Custom data, then Products, click Add definition, name it "Size chart," and choose the Page reference type.
3. Assign a chart to each product: open a product, scroll to Metafields, and pick its size chart page. The bulk editor speeds this up when many products share a chart.
4. Connect the block: in the theme editor, open your Pop-up or Collapsible row block, click the dynamic source icon next to the page setting, and choose the "Size chart" metafield.

Each product now shows its own chart, and if a product has no chart assigned, the block stays hidden. Whether the dynamic source option appears depends on your theme and version; if you don't see it, update the theme or use Method 4. Our full guide to size chart metafields covers other metafield types, like rich text, if you'd rather store the table on the product itself.

Limits: you still manage every chart as a separate page, and someone has to remember to set the metafield on each new product. There's also no unit switch or size recommendation.

Method 4: a size chart app

An app gives you everything above, plus things the built-in options can't do. Tailor Size Guide is our app, so weigh this section accordingly, but the steps are much the same for any good size chart app.

1. Install the app from the Shopify App Store.
2. Create your charts inside the app. Most apps include templates for common garments, so you're editing rather than starting from scratch.
3. Assign charts to products, collections, product types or tags. Assigning by collection or tag means new products pick up the right chart automatically.
4. Add the app block: in the theme editor, open the product template, click Add block, go to Apps, and choose the size chart block. Drag it next to the variant picker.
5. Turn on the app embed if the app uses a pop-up or floating button: Theme settings, then App embeds. On vintage themes, this is usually the only step needed.
6. Save and test on desktop and mobile.

What apps add that the free methods don't:

• Rules-based assignment, so you're not setting each product by hand.
• A cm/inch toggle, so international shoppers read the chart in their own units. See how to add a unit switch.
• A fit recommender that suggests a size from a few questions. See how to add a size recommender.
• Custom measurement fields for made-to-order and tailored products. See made-to-order on Shopify.
• Analytics on which charts get opened, which tells you where shoppers are unsure.

Which method should you choose?

What to put in your size chart

How you add the chart is the easy part. What's in it decides whether it actually prevents returns.

1. Say what kind of measurement it is. "Body measurements" (fit your body to these) and "garment measurements" (the item laid flat) are different numbers. A chart that just says "chest 40" gets misread constantly.
2. Show the measurements that matter for that garment. Chest, waist and length for tops. Waist, hip, inseam and rise for jeans. Foot length for shoes.
3. Use both inches and centimetres if you ship outside the US, or offer a toggle.
4. Add how-to-measure instructions, ideally with a simple diagram. Our how to measure guides are a good reference.
5. Include fit notes. "Runs small, size up." "Relaxed fit." "Model is 5'9" and wears a Medium." These lines are often more useful than the table itself.
6. Add international sizes for markets you sell to: UK and EU dress sizes, EU shoe sizes.

If you're starting from scratch, our Shopify size chart templates give you a ready-made structure for common garments, and the free size chart generator makes a branded version you can download.

Use a table, not an image

A lot of stores upload a size chart as a picture. It's quick, but it causes problems:

• Images get blurry or tiny on phones, where most fashion shoppers browse.
• Screen readers can't read them, which fails people using assistive technology. The W3C's accessibility guidelines ask for text alternatives, and a real table is the simplest way to meet that.
• They can't be translated if you sell in more than one language.
• Search engines and AI assistants can't read the numbers.

A text table avoids all of that. Our article on size chart image vs table goes into the trade-offs, and size chart accessibility covers the accessibility side.

Where to put it on the page

Placement is the most overlooked part. A great chart in the wrong spot doesn't get used.

• Right next to the size selector. That's where the decision happens. A link just above or below the size buttons works best.
• Visible on mobile without hunting. Test on a real phone. If shoppers have to scroll past the buy button or open a collapsed description to find it, many won't.
• Clearly labelled. "Size guide" or "Find your size." A ruler icon on its own isn't enough.
• One tap away. Don't send shoppers to another page they have to navigate back from.

Our comparison of popup vs tab vs inline size charts and the guide to optimising size charts for mobile go deeper on layout.

Test it before you call it done

1. Open three different products on your phone and check each shows the right chart.
2. Tap the size guide link and make sure the chart is readable without zooming.
3. Check the table scrolls sideways neatly if it's wide, rather than squashing.
4. Switch units, if you have a toggle, and spot-check a few conversions.
5. Ask someone who hasn't seen it to find their size. Watch where they get stuck.

After launch: keep improving it

A size chart isn't a one-off job. A few habits keep it working:

• Read your return reasons. If one product keeps coming back as "too small," add a "runs small" note or adjust the chart.
• Look at reviews for fit comments. Our guide to turning fit reviews into size chart improvements shows how.
• Audit your charts once or twice a year, especially when you change suppliers. See how to audit existing size charts.

Common problems

The chart doesn't show up. Check you edited the template your products actually use. Stores with several product templates need the block added to each one.

The wrong chart appears. With metafields, check the product's metafield value. With an app, check the assignment rules, especially if a product sits in more than one collection.

It clashes with another app. Two apps adding widgets to the same spot can overlap. Our guide on preventing size chart conflicts covers fixes.

It slows the page down. Text tables are light. Large chart images and heavy scripts aren't. See improving size chart page speed.

Frequently asked questions

Sources and standards

1. National Retail Federation, 2025 Retail Returns LandscapeEstimates 19.3% of online sales and 15.8% of total retail sales were returned in 2025.
2. Shopify Help Center: Online store themesDocumentation for the theme editor, blocks, app blocks and app embeds.
3. Shopify Help Center: MetafieldsHow to create product metafield definitions and connect them to themes as dynamic sources.
4. W3C Web Content Accessibility Guidelines (WCAG) 2.2The accessibility guidelines behind using text tables instead of images for size charts.