Or go to our Shopify Theme Detector directly
How To Add a Sizing Chart On Shopify
Last modified: November 13, 2023
Customers don’t like to get clothes to find out that their order doesn’t fit 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 | |
|---|---|---|---|
| 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 |
|
BF ‑ Size Charts & Size Guides
|
|
| 9 |
|
Simple Size Helper
|
|
| 10 |
|
Measured
|
|
|
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.
Enhancing Customer Experience with Size Charts
Importance of Accurate Sizing Information
Providing accurate sizing information is crucial for customer satisfaction. It reduces returns and increases trust in your brand.
Ensure your size charts are easy to understand and accessible.
Customizing Size Charts for Brand Consistency
Customize your size charts to reflect your brand’s style and tone.
Consistency in design and messaging reinforces your brand identity and enhances the shopping experience.
Optimizing Size Charts for Mobile Users
With a significant number of shoppers using mobile devices, ensure your size charts are mobile-friendly.
This improves user experience and can lead to higher conversion rates.
Advanced Tips for Size Chart Integration
Using Images and Diagrams
Incorporate images and diagrams in your size charts for clarity.
Visual aids help customers better understand sizing, leading to more confident purchasing decisions.
Segmenting Size Charts for Different Products
If you offer a diverse range of products, consider creating separate size charts for each category. This tailored approach caters to specific needs and reduces confusion.
Regularly Updating Size Information
Keep your size charts up to date with the latest measurements and product changes.
Regular updates ensure accuracy and maintain customer trust in your sizing guidance.
Conclusion: How To Add a Sizing Chart On Shopify
Adding a sizing chart to your Shopify store can be vital for customers to have the confidence to buy from you. There are lots of options for 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.
-
Can I link to a sizing chart from product descriptions instead of embedding it?
Yes, you can add a link in your product descriptions that directs customers to a separate page with your sizing chart for a cleaner product page layout.
-
Is it possible to link to a size chart from multiple products in my Shopify store?
If you offer products with similar sizing guidelines, simply include a size chart link in the product description or as a pop-up on the product page. This not only saves time but also enhances the shopping experience by conveniently providing essential sizing information.
-
How can I ensure my sizing chart accommodates international customers?
Use a sizing chart that includes measurements in multiple units (e.g., inches and centimeters), and consider adding a conversion guide for different international sizing standards.
PageFly Landing Page Builder 
Shopify 
SEMrush 
Website Maintenance 
UpPromote