How To Add a Sizing Chart On Shopify

This helps you create a page for your size chart.

Login to your Shopify admin using your store credentials.

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.

Use the title ‘Size Chart’ for the page.

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.

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.

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

Login to your Shopify admin using your store credentials.

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

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.

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>

Now click on the ‘Save’ option.

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
});

Now you can click on the ‘Save’ option.