How to Add a Size Chart to Shopify in 5 Steps (No Code)
A Size Chart that lives in a product description is a PDF shoppers pinch-zoom on a phone. A Size Chart that only opens inside a try-on is a table most people never see. The job is a link next to Size, on the product they are about to buy.
There are three ways to do it on Shopify. This guide compares them, explains Shopify's free method, and then walks through the five steps with an app, which needs no code.
Three ways to add a size chart to Shopify
| Shopify's pop-up + metafield | Custom code in the theme | Size chart app | |
|---|---|---|---|
| Cost | Free, built into the theme editor | Free if you code it, otherwise a developer's time | Depends on the app; many have a free plan |
| Theme code | None on themes with dynamic sources | Yes | Usually none; apps add theme blocks |
| Tells the shopper which size to pick | No, the shopper reads the table | Only if you build it | Some apps do |
| Big catalogs | You set the metafield on every product | Depends on the build | Usually assign one chart to many products |
| Best for | A few chart types | Agencies with a custom design in mind | Stores that want the size answer, not only the table |
On a phone, swipe the table sideways to see all three options.
Option 1: Shopify's pop-up and metafield (no app)
Shopify has a tutorial for this in its Help Center. In short, you keep each size chart on its own page, and the product page opens that page in a pop-up. There are four steps:
- Create a page for the size chart in Online Store → Pages, and put the table on it.
- Create a metafield for products, of the type Page, in Settings → Custom data → Products.
- Open each product and pick the right size chart page in that metafield.
- In the theme editor, open a product template, add a Pop-up block, and connect its content to the metafield with the dynamic source button.
This works well if you have a few chart types, for example one for tops and one for trousers. With a big catalog, you have to set the metafield on every product. It also only shows the table. The shopper still works out their own size.
Dawn and Horizon do it a little differently
Shopify's Help Center steps use a block called Pop-up, which is what Dawn has. Shopify's newer free theme, Horizon, lists "Size chart" among its product page features, and one setup guide describes adding a "Popup link" block with a Page block inside it. Some merchants moving to Horizon have reported that their page metafield didn't show up as a dynamic source. If that happens, check the metafield was created under Products rather than Variants, and that the product has a page selected.
Option 2: Custom code in the theme
Custom code makes sense when you or an agency want a design Shopify's blocks can't give you, for example a chart that changes by collection or sits inside a custom product layout. It is flexible, but someone has to build it, and someone has to maintain it when the theme updates. Code is also the only route on some older (vintage) themes.
Option 3: A size chart app, in five steps
The rest of this guide uses AI Frame as the example. No Liquid. No custom CSS. Five steps in Shopify admin.
Before you start
You need a published theme you can edit, and at least one product with a Size option (or you will still show the chart, just not "next to Size"). If you already have tables on the store, keep them up for now. The import copies them as drafts. Nothing live changes until you publish.
Step 1: Install AI Frame
In the Shopify App Store, install AI Frame: Size Chart & Try On. Open it from Apps in your Shopify admin and land on Get started with AI Frame.
Activate a plan. The Free plan includes 10 try-ons, 10 published Size Charts and size recommendations for 50 shoppers a month. You can add a chart on Free.
Step 2: Turn on AI Frame
Get started → Turn on AI Frame → Turn on in Theme Editor. Toggle the AI Frame app embed on. Save.
That embed is the switch for the whole theme. With it on, a published, assigned chart can appear as a Size Chart link. Vintage themes skip app blocks and keep the embed. OS 2.0 themes can also pin a Size Chart link block later. The embed stays on either way.
If you skip this step, no chart, no Try On pill, no Estimate my size.
Step 3: Import or create the first Size Chart
Get started will scan the store for existing tables and copy matches as drafts. One full scan per shop per 24 hours, up to 15 chart groups. Publishing is optional to finish setup.
If the scan finds nothing (image-only charts, a password-protected storefront, or you never had a table), use Import from photo, Import from CSV or PDF, or a template. Swimwear is in the template grid. Clothing, shoes, and accessories each need their own logic (see the shoe and swimwear guides).
In the editor, set What do these measurements describe? Body or Garment. That field is required. Garment charts add measured flat or around, how the garment is meant to fit, and how stretchy the fabric is (0–20%). Switching cm and inches in the editor converts the table.
Step 4: Assign products and publish
Assign by all products, specific products, categories, Tags, Vendor, or Collections (ANY or ALL). Confirm the tag or vendor on the product actually matches.
Publish when the table is right. Caps: Free 10, Starter 30, Growth 100, Advanced unlimited. The header shows X of Y published size charts. Drafts do not count.
Then, in Get started, Add sizing to your product page. Click Add Size Chart link. You can also Add Sizing assist. Or Skip for now, because the embed can still auto-place Size Chart when a chart is assigned.
Step 5: Check it on the storefront
Open a product that has that published chart.
- Size Chart is a text link, next to Size when the product has a Size option.
- Tap it. The table opens. No photo required.
- The cm / inches toggle is there. The first unit follows the shopper's location (inches in the US, cm elsewhere).
If the link is missing: the chart is still a draft, it is not assigned to this product, the embed is off, or you are previewing the wrong theme. The help article Size Chart not appearing is the checklist.
Try On on the photo is a separate step (Show try-on on product images). Leave it for after the chart is live. Most shoppers will use the table and never upload.
A size answer most shoppers never see is worth less than a decent one on every product page.
What you can skip
Theme code. A second "size guide" page shoppers cannot find. Pasting the same HTML into 40 descriptions. Inferring a size from the try-on photo: AI Frame never does that.
After the five steps
Turn on the size recommendation so Estimate my size can sit above Add to cart. The Free plan covers 50 shoppers a month, and paid plans cover more. Shoppers enter height, weight and gender; age is optional. Read how shoppers find a size from height and weight.
If you are replacing Kiwi, turn Kiwi's embed off after AI Frame is showing, so you do not get two links. Here are some Kiwi alternatives.
Install AI Frame. The Free plan is enough for steps 1 to 5 on a real product.
FAQ
Does Shopify have a built-in size chart?
Not as a standalone feature, but the theme editor and metafields let you add one without an app. You put the chart on a page and show it on product pages through a pop-up block, as Shopify's Help Center tutorial shows.
How do I add a size chart in the Horizon theme?
Horizon uses a Popup link block with a Page block inside it to open your chart page. If your page metafield doesn't appear as a dynamic source, check it's set up under Products and that the product has a page selected.
Can I add a size chart to Shopify without editing theme code?
Yes. Shopify's pop-up method needs no code on themes that support dynamic sources, and most size chart apps add theme blocks instead of editing code. Code is only needed on vintage themes or for a custom design.
What's the difference between a size chart and a size recommendation?
A size chart lists the measurements for each size and leaves the shopper to work out theirs. A size recommendation does that work and shows one size, usually next to the size picker. Many stores use both, with the chart behind the recommendation.
