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
You can use a size chart app to avoid editing liquid.

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' %}

See size chart

{% endif %}

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

{{ pages.size-chart.content }}

 

 

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.