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.

Add Size Chart to Product Page Shopify

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:

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. As always, if you have questions or need additional support, contact us.