How to Add a Size chart to Shopify (Without code or apps)

If you’ve ever had customers message you asking, “Will this fit me?” or dealt with a few too many size-related returns, this one’s for you.

In this post, I’ll walk you through two easy methods to add a size chart to your product pages. The best part? You don’t need to touch a single line of code or install yet another app. Whether you prefer a simple collapsible row or a sleek pop-up, you’ll learn how to set it up. I'll also walk you through how to show different size charts for different products using product metafields and the bulk editor.

Let's go! 🔥

‍

Create the size chart page

First things first, we need to create the page of our size chart. To do so:

1. Head over to Online Store and click on Pages
2. Add a new page and name it however you like. For example: “Size Chart”
3. In the content box, click on the three dots. Then, click on the icon that represents a table. It should show “Insert table” when hovered over.
4. Create the size chart table. You can add more columns and rows by, again, clicking on the three dots. Then, click on the icon that represents a table. It should show the options for adding rows and columns. Be sure to select the table before clicking on the table icon.
5. Once you have your table built, add spaces before and after the table in order for it to display properly.
6. If you like, you can also add an image. Just click on the image icon and add your size chart image.
7. Set the Visibility on the top right to be Visible. 
8. Click Save.

Awesome! We’re now one step closer to adding size charts for our products. If you have a different size chart for different products, just create a new size chart page using the same steps above. Just make sure you name it differently so that you can identify which is which.

‍

Different Size Charts for different products

If you only display the same size chart across all products, feel free to skip over to the “Adding the size chart” section. However, if you have different size charts for different products, you’ll need to follow this step before proceeding.

To display a different chart for each product, we’ll need to set up product metafields. In general, Shopify metafields allow us to add additional data to our store’s data. For example, we can add additional data to our products like cloth dimensions or size information. In this blog post’s context, we’re looking at size charts

So, for example, our store sells mens and womens tshirts. We’ll need a different size chart for each category because men and women don’t have the same sizes. And showing both size charts on the same page would not make sense. This is where metafields come in and save the day. Metafields allows us to choose what size chart we want to display for the product. 

So, to start using metafields and display different size charts:

1. Head over to Store Settings on the bottom left and click on Custom Data
2. Click on Products and then click on “Add definition”.
3. Choose any name you like. For example, “size chart”.
4. For the description, you can add anything you like.
5. Then, click on “➕ Select Type” and choose Page.
6. Then, for the other options, no need to be dealt with. Just make sure that “Storefront API Access” is turned on.
7. Click Save.

And done. We’ve now set up our metafields. Now, we just need to connect our product and the page we built using the new product metafield.

1. Head over to your Store’s Products and pick any product.
2. Scroll down until you find Product Metafields. In this, we should find the size chart metafield we just created.
3. Then, click on the size chart field and click on “Select Page”.
4. Click on the size chart you want to display for this product.

Then click on Save.

Shopify’s Bulk Edit

If you have a lot of products, it would get very annoying having to click on each product each time. Luckily, Shopify has us covered with Bulk Edit. Shopify's Bulk edit allows you to change product details (including our metafield) for multiple products at the same time. Bulk edit works like Excel or a spreadsheet, which will be pretty handy for managing multiple products.

To get started with Bulk Edit:

1. Simply head over to Products and select the products that you want to edit. There should be a checkbox to select products.
2. Then, a bulk edit button should appear on the top left. Click on the Bulk Edit button. 
3. You’ll then be redirected to a page to change your products’ details, just like a spreadsheet.
4. From here, to show our new size chart metafield, click on Columns found on the top right.
5. Show or hide the columns you want.
6. Then, scroll down until you find the size chart metafield. Mark that as checked.
7. From here, you can now easily add the size chart to multiple products. You can even, like a spreadsheet, drag a product field to easily copy the data to other products.
8. Make your changes and click Save.

And that’s it! We’ve now properly set up our store to allow different size charts for different products. Now it’s time to add the size chart to the page 🙌

‍

Adding the size chart to our product page

Now that we’ve set up our store for the size chart. We can now start adding the size chart to our product page 🙌

1. Head over to Online Store, Themes, and then Customize. You’ll then be redirected to the Shopify Theme Editor.
2. From here, we want to navigate to the product page. Clicking on a product will send us there. Alternatively, you can navigate to the product page by clicking on the “🏠 Home page” located at the middle-top of the Theme Editor. Then click “Products”, then click on “Default product”.
3. By now, we should be on the product page.
4. From here, I’ll show you two methods to add the size chart. One as a collapsible row (or collapsible tab) and the other as a pop-up.

Method 1: Adding the size chart in a collapsible row

In this method, we’ll be adding our size chart in a collapsible row or collapsible tab (as other Themes might name it).

Are you ready? Let’s go!

1. On the left-hand side of the Theme Editor, you should see sections and blocks of the product page. What we’ll do is add a block to the “Product Information” or the main section of the page that holds the add to cart button, product information, and so on. 
2. Hover over that portion of the Editor until it shows a blue “➕ Add Block”.
3. Search for collapsible row or collapsible tab and click on it to add it to the page.
4. Click on the newly added block to expose its settings.
5. In here, we’ll find the settings related to the collapsible-row block. You can set the other settings in any way you like. What we’re mainly interested in is “Row content from page”.
6. If you’re using metafields for the size chart, continue to step 8.
7. Click Select right beside the setting, and select your size chart page. Proceed to step 9.
8. Click the three-discs icon, then from here, you should be able to select the size chart metafield we’ve set up. Select the size chart metafield.
9. Save the page. Then, test out your new size chart in the collapsible row! 🥳

Method 2: Adding the size chart in a pop-up

In this method, we’ll be adding our size chart in a pop-up. 

Are you ready? Let’s go!

1. On the left-hand side of the Theme Editor, you should see sections and blocks of the product page. What we’ll do is add a block to the “Product Information” or the main section of the page that holds the add to cart button, product information, and so on. 
2. Hover over that portion of the Editor until it shows a blue “➕ Add Block”.
3. Search for Pop-up and click on it to add it to the page. If you don’t see a pop-up block or something similar, your theme might not have it built in. If so, feel free to reach out, and we’ll help you find a developer to add it in.
4. Click on the newly added block to expose its settings.
5. In here, we’ll find the settings related to the pop-up block. Set the label in any way you like. To add the size chart, we’ll be using the “Page” setting.
6. If you’re using metafields for the size chart, continue to step 8.
7. Click Select right beside the setting, and select your size chart page. Proceed to step 9.
8. Click the three-discs icon, then from here, you should be able to select the size chart metafield we’ve set up. Select the size chart metafield.
9. Save the page. Then, test out your new size chart in the popup! 🥳

Congratulations! We’ve now added our size chart to our page 🥳. Pat yourself on the back for this one, you did a really good job 🔥

‍

Final Thoughts

Adding a size chart to your Shopify product page doesn’t have to be complicated—and as you’ve seen, you don’t need any apps or custom code to do it.

In this post, we looked at two easy methods: adding a size chart as a collapsible row or as a pop-up, both using Shopify’s built-in theme editor. We also covered how to take things a step further by using product metafields to display different size charts for different products, which is super helpful if your store sells a variety of items with unique sizing.

Whether you’re keeping it simple with one chart or tailoring it per product, adding a clear and accessible size guide helps customers feel more confident when buying—and that means fewer returns and happier shoppers.

Hope this helped! If you're ready to keep customizing your store like a pro, check out the rest of the blog for more Shopify tips, like learning Liquid as a beginner so that you can customize your theme beyond the Theme Customizer. Until next time! 🚀