How To Add a Sizing Chart On Shopify
Shopify - Pay Only $1 /Pm For 3 Months   Free Trial
Detect Shopify Theme

Or go to our Shopify Theme Detector directly

How To Add a Sizing Chart On Shopify

Last modified: December 2, 2021

FAQ
How To Add a Sizing Chart On Shopify
Free Shopify Trial

Customers don’t like to get clothes to find out that their order doesn’t fit on them or that a product doesn’t fit within the space that they had in mind for the project. That’s why you need to include a sizing chart on your website for all products that come in a variety of sizes.

Here are several ways for you to create a size chart on your Shopify store.

Recommended: Top 10 Shopify Size Chart Apps – [2023]
# Name Image
Shopify
Get a Free Custom Shopify Store
1
Clean Size Charts
Clean Size Charts
2
Product Tabs | Size Chart Tabs
Product Tabs | Size Chart Tabs
3
Size Matters
Size Matters
4
Size Chart ‑ Clothes Fit Guide
Size Chart ‑ Clothes Fit Guide
5
Ultimate Size Chart
Ultimate Size Chart
6
Image Size Chart
Image Size Chart
7
VDR Size Suggestion
VDR Size Suggestion
8
Measured
Measured
9
Simple Size Helper
Simple Size Helper
10
BF ‑ Size Charts & Size Guides
BF ‑ Size Charts & Size Guides
Show More

Creating A Size Chart Page

This helps you create a page for your size chart.

Step 1 – Login

Login to your Shopify admin using your store credentials.

Step 2 – Add Page

Next go to the ‘Online Store’ and then ‘Pages’ option. From there you should click on the ‘Add Page’ option to create a new page.

Step 3 – Page Details

Use the title ‘Size Chart’ for the page.

Step 4 – Content

Now in the ‘Content’ box, create a table that contains all the size chart information your customers will need. You can also customize the table to appear exactly how you would like it to.

Step 5 – Visibility

In the ‘Visibility’ section of the website, ensure that you’ve set the page to ‘Visible’. When you’ve done this you can click on the ‘Save’ option.

Now you can link your size chart from any page on your website. It is a simple solution.

Add The Size Chart To A Theme

This is how to add a size chart to a theme.

Step 1 – Login

Login to your Shopify admin using your store credentials.

Step 2 – Themes

Next go to the ‘Online Store’ and then the ‘Themes’ option. From there you should click on ‘Actions’ and then ‘Edit Code’.

Step 3 – Sections

In the sections directory you need to find and click on the product-template.liquid file. This will open up the editor for the file.

Step 4 – Add Code

Now you can add a size chart by adding the code below into the theme above the ‘Add to cart’ button.

{% if product.options contains 'Size' %}
<a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
{% endif %}

You also need to add the following code to the bottom of the product-template.liquid file.

<div id="size-chart" class="mfp-hide">
{{ pages.size-chart.content }}
</div>
<style>
#size-chart {
  border: 2px #555 solid;
  background-color: #ffffff;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

Step 5 – Save

Now click on the ‘Save’ option.

Step 6 – Assets

Now you can go to the ‘Assets’ directory and click on the theme.js. Then you need to add this code to the bottom of that file.

$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midClick: true
});

Step 7 - Save

Now you can click on the ‘Save’ option.

Keep Reading

Final Word: How To Add a Sizing Chart On Shopify

Adding a sizing chart to your Shopify store can be vital for customers to have confidence to buy from you. There are lots of options to adding a size chart. You could manually add to it like you’ve been shown above. Or you could add the size chart using an app.

One of the most recommended apps is Size Chart. This app allows you to add the size chart to your website without the need to change any code. There is a free 7-day trial and there is a free plan available. For those who aren’t confident in adjusting code, this might be the best option.

Got Something To Say?

Your email address will not be published. Required fields are marked *