DIY Code To Add a Size Chart to Shopify Product Pages

 Have you ever needed a size chart on your Shopify store product pages? This size chart Shopify tutorial will help you with just that problem. And you don’t even need to use the Shopify size chart app (which costs $7.99 a month); you can do it for free on your own. Ecomexperts will show you how to add a Shopify size chart snippet to your code to create a size chart button Shopify. Here’s how to add a Shopify size chart popup to your product page.

How to Add a Size Chart to Shopify Product Page

Step 1: 

We recommend making a copy of your theme to work in. That way, if you make a mistake, all is not lost. Once you are in your admin panel, go to “Online stores,” and in the theme where you want this new feature, click on the “Actions” button, and then click on “Duplicate.” Once you have done this, you can start to develop your size chart.

From your Shopify admin, go to Online Store > Pages.

Click Add page.

Enter Size chart for the page title:

In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:

In the Visibility section, make sure you set your page to Visible.

Click Save.

Add Size Chart to Product Page Shopify

From your Shopify admin, go to Online Store > Themes.

Find the theme you want to edit, and then click Actions > Edit code.

In the Sections directory, click to open your product-template.liquid file.

Add a Size Chart button by pasting the following code 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 %}

 

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>

Show All...

Click Save.

In the Assets directory, click theme.js. Add the following code to the bottom of the file:

$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midClick: true
})

Click Save.

Shopify Size Chart Popup Tutorial

If the size chart isn't appearing, you might need to add extra code to your theme. Because Magnific Popup is required for this customization to work, some themes, such as Debut, require that you complete the following steps:

In the Assets directory, click to open your theme.scss.liquid file, or your timber.scss.liquid file, and add this css to the bottom.

Do one of the following:

If your theme has a vendor.js file in the Assets directory, open the file and add this code to the bottom.

If your theme does not have a vendor.js file in the Assets directory, place this code just above the $('.size-chart-open-popup').magnificPopup code in your theme.js file.

Click Save.

Setting up a size chart Shopify specific to a vendor or product type

If you selected a size chart specific to a vendor or product type, you would need to make a size chart for each vendor or product type. The process is the same as making a chart for the whole shop, except you need to put the vendor or product type at the beginning of the size chart page title and handle. For example, if you have a vendor called Great Owls, your size chart page would be named Great Owls Size Chart, and the handle of the page would be great-owls-size-chart:If your size chart is for a product type, you might have a chart for product type shoes. You would then call your size chart page Shoes Size Chart, and the handle would be shoes-size-chart .Why spend money on an app when you can create size chart Shopify on your own? Not only will you save a chunk of change, but you’ll have developed a new skill. Your customers can choose more accurately-sized items, which will reduce your returns. It’s a win-win for everyone.
We hope you have gained some useful knowledge from this Shopify size chart tutorial.