Add a size chart to product pages

If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page.

Note

All products that require reference to the size chart must have a Size option for this solution to work:

Size option

Caution

This tutorial will not work for non-sectioned Brooklyn, which handles product options with its own custom JavaScript. If you use non-sectioned Brooklyn, you can follow this customization guide that is not supported by Shopify.

Creating a size chart page

  1. Click Add page.

  2. Enter Size chart for the page title:

    Creating a 'Size chart' page in the Shopify admin
  3. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:

    Customizing the size chart table
  4. In the Visibility section, make sure the page is set to Visible.

  5. Click Save.

Adding the size chart to your theme

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Sections directory, click to open your product-template.liquid file.

  3. Add a Size chart button by pasting the following code above the Add to cart button:

    
    {% if product.options contains 'Size' %}
    <a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
    {% endif %}
    
    
  4. Add the following code to the bottom of the product-template.liquid file:

    
    <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>
    
    
  5. Click Save.

  6. In the Assets directory, click theme.js. Add the following code to the bottom of the file:

    $('.size-chart-open-popup').magnificPopup({
      type:'inline',
      midClick: true
    });
    
  7. Click Save.

Note

If the size chart isn't appearing, you might need to add extra code to your theme. Because Magnific Popup is required for this customization to work, some themes, such as Debut, require that you complete the following steps.

  1. In the Assets directory, click to open your theme.scss.liquid file, or your timber.scss.liquid file, and add this css to the bottom.

  2. Do one of the following:

    • If your theme has a vendor.js file in the Assets directory, open the file and add this code to the bottom.
    • If your theme does not have a vendor.js file in the Assets directory, place this code just above the $('.size-chart-open-popup').magnificPopup code in your theme.js file.
  3. Click Save.

Creating a size chart page

  1. Click Add page.

  2. Enter Size chart for the page title:

    Creating a 'Size chart' page in the Shopify admin
  3. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:

    Customizing the size chart table
  4. In the Visibility section, make sure the page is set to Visible.

  5. Click Save.

Creating a size chart snippet

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Snippets directory, click Add a new snippet.

  3. Name your snippet size-chart, and click Create snippet:

    Size chart 4
  4. In a new browser tab, open one of the following code snippets:

  5. Copy all of the code you see in the file.

  6. Return to your new size-chart.liquid snippet, and paste the code into the file:

    Size chart 6
  7. Click Save.

  8. In the Layout directory, click theme.liquid.

  9. Find the closing </body> tag. Right before the closing </body> tag, paste the following code:

    {% include 'size-chart' %}
    
  10. Click Save.

Setting up a size chart specific to a vendor or product type

If you selected a size chart specific to a vendor or product type, you will need to make a size chart for each vendor or product type. The process is the same as making a chart for the whole shop, except you need to put the vendor or product type at the beginning of the size chart page title and handle. For example, if you have a vendor called Great Owls, your size chart page would be named Great Owls Size Chart, and the handle of the page would be great-owls-size-chart:

Great owls size chart

If your size chart is for a product type, you might have a chart for product type shoes. You would then call your size chart page Shoes Size Chart, and the handle would be shoes-size-chart .

Using a different language or changing the 'Size chart' text

If your store's operating language is not English, or you want to use different text than 'Size chart' on your product page, you can make these changes in your size chart snippet.

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Snippets directory, click size-chart.liquid.

  3. Find {% assign size_options = 'size,taille' | split: ',' %}.

  4. Edit the size_options values to match the translation you have for your product option. Separate each option value with a comma.

    For example, to add a German translation, you might change the code to:

    {% assign size_options = 'size,taille,Größe' | split: ',' %}

  5. Find {% assign size_chart_text_link = 'Size chart' %}.

  6. Replace Size chart with the wording that you prefer.

  7. Click Save.

Want to discuss this page?

Visit the Shopify Community