Welcome to CodeCrew Infotech

shape shape
Shape Shape Shape Shape

How To Add The Shopify Size Chart By Editing The Theme Code

The size chart represents your ideal customer body type across your size set.

Your size chart is comprised of a series of main body measurements such as arms, colors, and many more for men.

small medium and large are wide sizes used all over the globe cloth collection because these are the actual fit.

the major return from the eCommerce websites of any product is the customer is not satisfied with the product size.

If you are providing a comprehensive size chart in your store you may boost customer confidence, increase sales, and reduce returns.

Some shop owner has the experience of customer buying the same thing in different size and checking one which fits their body and feels comfortable with the other product they may return to the shop.

A size chart is important when you make and produce a custom product.

In this blog, we will show you How to add the Shopify size chart by editing the theme code.


First of all, you should open Online Store > Pages.


Then after, you should click Add page on the right side top of the corner.


Enter the Size chart name for the page title

You should create a table that contains your size chart information in the Content box.

You can also create the HTML table on different platform such as https://www.tablesgenerator.com/html_tables# and copy all the generated table code and paste it into your HTML editor in Shopify.

In the Visibility section, make sure the page is set to Visible or not then after Save it.


Then, go to Online Store > Themes

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


In the Sections directory, you need to click to open your main-product.liquid file

Then, Search the </product-form> and paste this Size chart code after it.

 {% if product.options contains 'Size' %}

 <div id="size-chart">

 {{ pages.size-chart.content }}


 {% endif %}


Do not forget to click Save


If the product has size, the size chart section will be displayed like this:

Must note that:-  Checkmark enable of "Options" in product detail page and add the size according to your size table.