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 product.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 product.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 theme.min.js (for older theme versions: js_main.dev.js or js_main.min.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. 
  10. In the Assets directory, select the theme.css (or css_main.scss.liquid file for older theme versions) and add the following code to the bottom of the file:
  11. #size-chart { overflow-x: scroll; }
    	
  12. Click Save
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.