How To Add a Size Chart to Shopify Product Page Using Shopify 2.0 Metafields

Adding size charts to your product pages is a very smart decision that will most probably help you to increase your store conversion rate especially if you sell clothes and shoes.

In this article, I will show you 3 different ways to ad size charts to your Shopify Product Pages using Shopify 2.0 metafields. No app is needed, I promise you!

Adding A Size Chart using the image with text section

With this method, I will add the size chart to my product pages as an image.

So what I need to do is :

Create a product metafield and give it the image type

Go to your theme editor and within your product page template add a "text with image" section

Assign the metafields you have created in the first step to the image container

Fill the text part with text explaining how to use the size chart

Go to your products and start adding the size charts to your product pages under the new field you have created in the first step

Adding A Size Chart using an image section

Do exactly what we have done in the first method, but this time instead of adding a text with image section, choose an image section.

Each theme provides a list of sections that you can use. So depending on the theme you are using choose between the different image-based sections.

For the dawn them for example, you can choose between collage, image banner, or image with text overlay.

Adding A Size Chart using the popup block

This method is the best one because it will allow you to have your size chart as a popup.

In order to be able to use this method, your theme must have the popup block as one of the blocks that you can add. The Dawn theme for example, which is the first free Shopify 2.0 theme, has this block.

The steps are similar to what we have done before:

Create a product metafield and give it the url type

Go to your theme editor and within your product page template add a "pop up" block under the product section

Assign the metafields you have created in the popup block

Create a page for each size chart. Lets say you have one size chart per product, you need to create a separate size chart page for each product and within this page you add your size chart information.