Add a size chart in the product page

If you are using our Split 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.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 href="#size-chart" class="size-chart-open-popup">See size chart</a> {% endif %} 		
  5. Add the following code to the bottom of the same products.liquid file:
  6. <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_main.js file and add the following code to the bottom of the file:
    $('.size-chart-open-popup').magnificPopup({
      type:'inline',
      midClick: true
    });		
  9. Click Save.

For our Kingdom theme, please see this article from our documentation.