Add a size chart in the product page

Create a size chart page

Create a simple Shopify page ( Online Store > Pages) named "Size chart" where you can add either a table or an image with the size chart you want to use. 

Add the size chart to your theme

1. From your Shopify admin, go to Online Store > Themes and select Actions > Edit code in the theme.
2. In the Sections directory, click to open your theme main-product.liquid file.
3. Add a Size chart button by pasting the following code above the Add to cart button (see this for assistance): 

   <!-- custom size chart [start] -->
   
   <a id="size-chart-open" href="#size-chart" class="button outline dark" style="padding-left: 0;">See size chart</a>
   
   <div id="size-chart" aria-hidden="true" class="hide" style="display: none;">
     <div class="size-popup" style="
         background: #fff;
         padding: 30px 40px 10px;
         max-height: calc(100vh - 100px);
         overflow: scroll;
       ">
       {{ pages.size-chart.content }}
       <div class="basicLightboxClose" style="color: #000">×</div>
     </div>
   </div>
   
   <!-- custom size chart [end] -->
   	

4. Click Save.
5. Then open the templates/theme.liquid file and add this code just before the closing </body> tag - screenshot:

<script>
  window.addEventListener('load', function(){
    const sizeModal = basicLightbox.create(document.getElementById('size-chart'));
    document.getElementById('size-chart-open').addEventListener('click', function(e){
      sizeModal.show(function(){
        document.querySelector('.size-popup .basicLightboxClose').addEventListener('click', function(){
          sizeModal.close();
        });
      });
    });
  })
</script>
	

Again, save the file and you're done.