How To Add a Sizing Chart On Shopify [2024]
Shopify - 3 Day Free Trial - No cc Needed   Free Trial
Detect Shopify Theme

Or go to our Shopify Theme Detector directly

How To Add a Sizing Chart On Shopify

Last modified: November 13, 2023

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 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.

Key Takeaways
1
Creating a size chart page involves steps like logging in, adding a page, and detailing page content.
2
You can integrate the size chart into your Shopify theme through a process that includes code addition.
3
Embedding a size chart in a theme requires editing the product-template.liquid file and adding specific code.

 

Recommended: 10 Best Shopify Size Chart Apps – [2024]
# 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
BF ‑ Size Charts & Size Guides
BF ‑ Size Charts & Size Guides
9
Simple Size Helper
Simple Size Helper
10
Measured
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.

Keep Reading

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.

FAQs
  • 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.

Got Something To Say?

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