{"id":26685,"date":"2020-11-19T16:40:14","date_gmt":"2020-11-19T14:40:14","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=26685"},"modified":"2026-05-08T15:46:13","modified_gmt":"2026-05-08T13:46:13","slug":"shopify-size-chart","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/shopify-size-chart.html","title":{"rendered":"How To Add Size Chart In Shopify in 2026"},"content":{"rendered":"\n

In this article, you will learn about three ways to add a Shopify size chart to your online shop. First of all, you can add it by editing the theme code. Another way is to implement the size chart pop-up by adjusting the theme code, and one more way is to use the Shopify App Store.<\/p>\n

<\/p>\n

Shopify’s Dawn and other Online Store 2.0 themes now support app blocks. It means size chart apps can often be added directly through the theme editor without touching any code.<\/p>\n

This article will help you to make up your mind regarding the best choice for your ecommerce website. After reading it, you can choose the one that works best for you.<\/p>\n

How to add the Shopify size chart by editing the theme code
\n<\/a>How to add the Shopify size chart pop-up by editing the theme code
\n<\/a>How to add the Shopify size chart pop-up using the Shopify App Store<\/a><\/p>\n

Why do you need size charts?<\/h2>\n

Did you know that the majority of returns of apparel from the ecommerce websites happen because the customer is not satisfied with the product size? High return rates resulting in lost revenue can be traced directly to sizing issues. Uncertainty about the product size is why a lot of online customers choose brick-and-mortar shops. According to the statistics, 30%<\/a> of all products ordered online are returned as compared to 8.89% in brick-and-mortar stores.<\/p>\n

The problem is that there is no decent size chart on the ecommerce websites which leads to the sizing issues. For instance, 65%<\/a> of the returns occur because the clothing fits poorly. So, if you sell items that require customers to specify their size before they make a purchase, you can add a special custom size chart to your product page. It will help you increase customer trust, boost sales, and reduce the rate of return.<\/p>\n

AI-powered sizing tools have grown significantly in popularity. With some Shopify apps now offering body measurement-based recommendations that go beyond traditional size charts.<\/p>\n

Sizing charts on the Shopify platform can be of 2 types: they are either placed on the product page or are presented in the pop-up form. You can create a size guide pop-up on Shopify by editing the code or by installing an app from the Shopify App Store<\/a>.<\/p>\n

<\/a>
\"ecommerce

Build custom Shopify solutions with BelVG<\/h3>

Let your customers use Shopify size chart<\/p>Contact us<\/span><\/a><\/div><\/div><\/div>\n

How to add the Shopify size chart by editing the theme code<\/h2>\n

All products that require reference to the size chart must have a Size option. First of all, you need to create size variations:
\n\"shopify-chart-1\"<\/p>\n

 <\/p>\n

To create a table with sizes, you need to do the following:<\/p>\n

    \n
  1. First of all, you should open Online Store<\/strong> > Pages<\/strong><\/li>\n
  2. Then, you should click Add page<\/strong><\/li>\n
  3. Enter Size chart<\/strong> for the page title<\/li>\n
  4. You should create a table that contains your size chart information in the Content<\/strong> box<\/strong><\/li>\n<\/ol>\n

    \"shopify-size-chart-2\"<\/p>\n

    5. In the Visibility<\/strong> section, make sure the page is set to Visible<\/strong>
    \n6. Do not forget to click Save<\/strong>
    \n7. Then, go to Online Store > Themes<\/strong>
    \n8. Find the theme you want to edit, and then you should click Actions > Edit code<\/strong>
    \n9. In the Sections <\/strong>directory, you need to click to open your product-template.liquid<\/strong> file
    \n10. Then, add a Size chart section with the following code below the Add to cart form:<\/p>\n

    {% if product.options contains 'Size' %}\r\n    <div id=\"size-chart\">\r\n        {{ pages.size-chart.content }}\r\n    <\/div>\r\n{% endif %}<\/pre>\n
     <\/p>\n
    \"shopify-size-chart-3\"<\/p>\n
    11. Do not forget to click Save<\/strong><\/p>\n
    If the product has a size, the size chart section will be displayed like this:<\/p>\n
    \"shopify-size-chart-4\"<\/p>\n
    With Shopify’s continued platform updates through 2026, always verify that any custom Liquid code snippets are compatible with your current theme version before implementing them.<\/p>\n
    How to add the Shopify size chart popup by editing the theme code<\/h2>\n
    Let’s consider how to create a new page with a size chart.<\/p>\n
      \n
    1. To open a popup in the product-template.liquid, <\/strong>you need to add the following trigger to the Section <\/strong>directory:<\/li>\n<\/ol>\n
      {% if product.options contains 'Size' %} \r\n        \t<a href=\"#size-chart\" class=\"popup-trigger\" data-popup-trigger=\"one\" >\r\n              See size chart\r\n        \t<\/a> \r\n{% endif %}<\/pre>\n
      \"shopify-size-chart\"<\/p>\n
      2. Click the Layout<\/b> directory to open your theme.liquid<\/b> file<\/p>\n
      3. Paste the following code before <\/body> to add a size chart popup:<\/p>\n
      <div class=\"body-blackout\"><\/div>\r\n  \t<div class=\"popup-modal shadow\" data-popup-modal=\"one\">\r\n \t<div class=\"popup-modal__close\">X<\/div>\r\n  \t{{ pages.size-chart.content }}\r\n<\/div>\r\n<script src=\"{{ 'popup.js' | asset_url }}\" defer=\"defer\"><\/script><\/pre>\n
      \"shopify-size-chart-popup-modal\"<\/p>\n
      4. Enter the following code to add a new asset popup.js<\/b> in the Assets<\/b> directory:<\/p>\n
      const modalTriggers = document.querySelectorAll('.popup-trigger')\r\nconst modalCloseTrigger = document.querySelector('.popup-modal__close')\r\nconst bodyBlackout = document.querySelector('.body-blackout')\r\n\r\nmodalTriggers.forEach(trigger => {\r\n  trigger.addEventListener('click', () => {\r\n    const { popupTrigger } = trigger.dataset\r\n    const popupModal = document.querySelector(`[data-popup-modal=\"${popupTrigger}\"]`)\r\n\r\n    popupModal.classList.add('is--visible')\r\n    bodyBlackout.classList.add('is-blacked-out')\r\n    \r\n    popupModal.querySelector('.popup-modal__close').addEventListener('click', () => {\r\n       popupModal.classList.remove('is--visible')\r\n       bodyBlackout.classList.remove('is-blacked-out')\r\n    })\r\n    \r\n    bodyBlackout.addEventListener('click', () => {\r\n      popupModal.classList.remove('is--visible')\r\n      bodyBlackout.classList.remove('is-blacked-out')\r\n    })\r\n  })\r\n})<\/pre>\n
      \"shopify-size-chart-assets-directory\"<\/p>\n
      5. Click the Assets<\/b> directory to open your theme.css <\/strong>file
      \n6. At the bottom of the file add styles for the popup:<\/p>\n
      \/*================ Popup ================*\/\r\nbody {\r\n\tposition: relative;\r\n}\r\n\r\n.body-blackout {\r\n  position: absolute;\r\n  z-index: 1010;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, .65);\r\n  display: none;\r\n}\r\n.body-blackout.is-blacked-out {\r\n  display: block;\r\n}\r\n\r\n.popup-trigger {\r\n  display: inline-block;\r\n}\r\n\r\n.popup-modal {\r\n  background-color: #fff;\r\n  position: fixed;\r\n  left: 50%;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  padding: 45px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: all 300ms ease-in-out;\r\n  z-index: 1011;\r\n}\r\n\r\n.popup-modal.is--visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.popup-modal__close {\r\n  position: absolute;\r\n  font-size: 25px;\r\n  right: 6px;\r\n  top: 3px;\r\n  cursor: pointer;\r\n}\r\n<\/pre>\n
      Now the size chart pop-up is ready:<\/p>\n
      \"shopify-size-chart-11\"<\/p>\n
      How to add the Shopify size chart pop-up using the Shopify App Store<\/h2>\n
      1. BF ‑ Size Charts & Size Guides<\/h3>\n
      You can create size charts<\/a> with a wide range of options:<\/p>\n