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 the section file product-template.liquid:

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

   Some themes such as Jumpstart may need items 2. and 3. to be placed inside the templates/product.liquid file

1. At the bottom of the sections/product-template.liquid file, 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>
   

2. Open the assets/theme.js file and add this to the very bottom:

   $('.size-chart-open-popup').magnificPopup({
    type:'inline',
    midClick: true
   });
   

   If the Size chart isn't appearing yet, extra code may be needed. Since Magnific Popup is required for this to work, some themes (including Debut) will require the following.

3. Open your assets/theme.scss.liquid file (or assets/timber.scss.liquid in some cases) and add this css to the bottom.

4. If you have an assets/vendor.js file, open it and add this code to the bottom. If you do not, place this code just above the $('.size-chart-open-popup').magnificPopup code in step 4 in your assets/theme.js file.