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 main-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] -->
    
    <a id="size-chart-open" href="#size-chart" class="button outline dark" style="padding-left: 0;">See size chart</a>
    
    <div id="size-chart" aria-hidden="true" class="hide" style="display: none;">
      <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>
    
    <!-- custom size chart [end] -->    
    	
  4. Click Save.
  5. Then open the templates/theme.liquid file and add this code just before the closing </body> tag - screenshot:
    <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> 

Again, save the file and you're done.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.