How to add a size chart to Shopify (2 easy ways)

Step-by-step: add a size chart to your Shopify product pages, either with your theme's built-in pop-up block or with a size chart app. Includes different charts per product.

Updated October 14, 20265 min read

A size chart is one of the most useful things you can put on a clothing or shoe product page. It answers "which size should I pick?" right where the customer is deciding, before they add to cart.

Shopify doesn't have a dedicated size chart feature, but there are two reliable ways to add one:

  1. The free way: a Shopify page shown in your theme's pop-up block. Good for one chart for the whole store.
  2. With a size chart app: good when different products need different charts, or you want a proper table with a cm/in switch.

Method 1: Use your theme's pop-up block (free)

Most recent Shopify themes, including Dawn and other free Online Store 2.0 themes, have a Pop-up block you can add to the product page. It opens a Shopify page in a modal, which works well for a size chart.

Step 1: Create a page for the chart

  1. In your Shopify admin, go to Online Store → Pages and click Add page.
  2. Give it a clear title, like "Size chart".
  3. Add your size table and measuring instructions in the content editor. You can paste a table, or upload an image of your chart.
  4. Click Save.

Step 2: Add the pop-up block to the product page

  1. Go to Online Store → Themes and click Customize on your live theme.
  2. Open a product page using the page selector at the top.
  3. In the product information section, click Add block and choose Pop-up.
  4. Set the link label (for example "Size chart") and pick the page you created.
  5. Drag the block so it sits next to the size options, just under the variant picker.
  6. Click Save.
Note

Block names vary between themes. If you don't see Pop-up, check your theme's documentation for a "popup", "drawer" or "collapsible content" block that can show a page.

Limits of the free method

  • One chart for everything. Every product shows the same page unless you set up a page metafield per product and connect it to the block, which takes manual setup for each product.
  • No unit switch. Customers see whatever units you typed.
  • Hard to keep consistent. Charts written by hand in the page editor drift over time, and tables often don't fit well on phones.

Method 2: Use a size chart app (Jotly)

A size chart app handles the parts the free method can't: different charts per product, a proper responsive table, and a cm/in switch. Here's how it works with Jotly, a free Shopify app built for this.

Step 1: Install the app and create a chart

  1. Install Jotly from the Shopify App Store. There's a free plan, no card needed.
  2. In the app, click Create Chart.
  3. Give the chart a name you'll recognise, like "Women's Dresses", and set its status to Active.

Step 2: Choose which products show it

This is where an app saves the most time. Instead of setting up each product by hand, assign the chart once:

  • Collections: for example, every product in "Dresses". New products added to the collection get the chart automatically.
  • Individual products: for one-off items that need their own chart.
  • Tags or vendors: for charts that cut across collections, such as a "slim-fit" tag or a specific brand (on the Global plan and above).
  • All products: a store-wide fallback chart.

If a product matches more than one chart, the chart's priority decides which one shows. See how size chart priority works.

Step 3: Build the chart from a template

Pick one of 120+ ready-made templates (T-shirts, jeans, dresses, bras, shoes, rings and more), then edit the numbers to match your products. Each template comes with a size table, a labelled how-to-measure drawing and measuring instructions. You can preview all of them in our free size chart templates.

You can also add tabs (for example "Size chart" and "How to measure"), images, videos and a fit scale. Everything is drag and drop, no code.

Step 4: Turn it on in your theme

  1. In Jotly, go to Settings and click Enable App Embed, then Save in the theme editor.
  2. Choose where the size chart button appears: next to the size selector, above or below Add to cart, as a floating button, or anywhere you like using the Jotly app block.
  3. Open a product page on your store to check the button appears and the chart opens.

The full walkthrough, with a video, is in How to enable Jotly in your live theme.

Where to put the size chart button

Wherever you add it, place the size chart link next to the size selector, or just above Add to cart. That's the moment a customer is choosing a size. A link at the bottom of the page or in the footer is easy to miss.

Tips for a size chart customers actually use

  • Say what you measured. State whether the numbers are garment measurements (the item laid flat) or body measurements. Mixing them up is a common cause of wrong sizes.
  • Show both cm and inches, or give customers a switch.
  • Add a "how to measure" diagram. A labelled drawing is clearer than text alone.
  • Add a fit note, such as "runs small, size up" or "relaxed fit".
  • Check it on a phone. Most shoppers will see your chart on mobile.

For more on what to measure, read How to measure clothing for a size chart.

Frequently asked questions

Does Shopify have a built-in size chart?

No. Shopify doesn't have a size chart feature. You can show one using a page in your theme's pop-up block (Method 1) or with a size chart app (Method 2).

Can I show different size charts on different products?

Yes. With the free method this takes a page metafield set up on every product. With an app like Jotly you assign charts by collection, tag, vendor or product, and new products pick up the right chart automatically.

Will a size chart app slow down my store?

A well-built app loads its script only where needed. Jotly is a Built for Shopify app, a status Shopify gives to apps that meet its performance and quality standards.