Cacher is the code snippet organizer for pro developers

What you want

You want a See Size Chart button on the product page:

... that once clicked gives you this:

How to get there

1. Create a page that contains your Size Chart. Set its handle to size-chart.

2. Add a Size Chart button above your Add To cart button in product.liquid:

   {% if product.options contains 'Size' %}
   <a class="btn open-popup" href="#size-chart">See size chart</a>
   {% endif %}
   

3. At the bottom of product.liquid, add this:

   <div id="size-chart" class="mfp-hide">
     {{ pages.size-chart.content }}
   </div>
   <style>
   #size-chart {
     border: 1px #555 solid;
     background-color: #ffffff;
     padding: 20px;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
   }
   </style>
   

4. Before </body> tag in theme.liquid, add this:

   {% if settings.product_zoom_enable and template contains 'product' %}
     <script>
       $('.open-popup').magnificPopup({
         type:'inline',
         midClick: true
       });
     </script>
   {% endif %}