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

If your theme version is higher than 2.7.0
  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 (see this for assistance): 
    <!-- custom size chart [start] -->
    <br />
    <a id="size-chart-open" href="#size-chart" class="button outline dark">See size chart</a>
    
    <div id="size-chart" aria-hidden="true" class="hide">
      <div class="size-popup" style="
          background: #fff;
          padding: 30px 40px 10px;
          max-height: calc(100vh - 100px);
          overflow: scroll;
        ">
        {{ pages.size-chart.content }}
        <div class="basicLightboxClose" style="color: #000">×</div>
      </div>
    </div>
    
    <script>
      window.addEventListener('load', function(){
        const sizeModal = basicLightbox.create(document.getElementById('size-chart'));
        document.getElementById('size-chart-open').addEventListener('click', function(e){
          sizeModal.show(function(){
            document.querySelector('.size-popup .basicLightboxClose').addEventListener('click', function(){
              sizeModal.close();
            });
          });
        });
      })
    </script>
    <!-- custom size chart [end] -->
  4. Click Save.
If your theme version is lower than 2.6.x
  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.