Or go to our Shopify Theme Detector directly
How To Add a Sizing Chart On Shopify
Last modified: December 2, 2021
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.
# | Name | Image | |
---|---|---|---|
|
Get a Free Custom Shopify Store | ||
1 |
|
Clean Size Charts
|
|
2 |
|
Product Tabs | Size Chart Tabs
|
|
3 |
|
Size Matters
|
|
4 |
|
Size Chart ‑ Clothes Fit Guide
|
|
5 |
|
Ultimate Size Chart
|
|
6 |
|
Image Size Chart
|
|
7 |
|
VDR Size Suggestion
|
|
8 |
|
Measured
|
|
9 |
|
Simple Size Helper
|
|
10 |
|
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.
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.