How to add a product size chart

If you are using our Kingdom theme and you're after adding a size chart for your site product pages, please follow these instructions:

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 products-page.liquid file.
  3. Add a Size chart button by pasting the following code above the Add to cart button:
  4. {% if product.options contains 'Size' %}
    <a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
    {% endif %}
    		
  5. Add the following code to the bottom of the same products-page.liquid file:
  6. {{ 'js_magnific.popup.min.js' | asset_url | script_tag }}
    <div id="size-chart" class="mfp-hide">
    {{ pages.size-chart.content }}
    </div>
    <style>
    #size-chart {
      border: 2px #555 solid;
      background-color: #ffffff;
      padding: 20px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
    </style>
    		
  7. Click Save.
  8. In the Assets directory, select the js_scripts.js file and add the following code to the bottom of the file:
    $(document).ready( function() {
    jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank');
    });
    
    $('.size-chart-open-popup').magnificPopup({
      type:'inline',
      midClick: true
    });
    		
  9. Click Save.