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 work only in themes that use the globally-hosted file option_selection.js for product options. It will not work in the Brooklyn theme, which handles product options with its own custom JavaScript. Review the theme compatibility section before you tackle this tutorial.

Create 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 to create your new size chart page.

Your size chart page has been successfully created. Next, you'll add some code to your theme to make the size chart page appear on your product page. The steps for adding the code differ according to whether your theme supports sections:

Add the size chart to your theme

Follow these instructions if you are using a theme that supports sections.

Note

If your theme does not support sections, follow the instructions to create a size chart snippet instead.

  1. Click Online store, and then click Themes.

  2. For the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click the Sections directory.

  4. Click the product-template.liquid file.

  5. Add a Size chart button by copying 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 %}
    
    
  6. 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>

  1. In the Assets directory, open the theme.js file and add the following code to the bottom of the file:

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

    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 perform the following steps.
    
  2. In the Assets directory, open the theme.scss.liquid file or the timber.scss.liquid file, and add this css to the bottom.

  3. 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 the theme.js file.

Create a size chart snippet

Do these steps if your theme does not support sections.

Theme compatibility

Brooklyn

If you use the non-sectioned Brooklyn theme, this tutorial won't work for you. You need to follow this customization guide that has been provided by the community and is unsupported by Shopify.

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. Click Snippets.

  3. Click Add a new snippet.

  4. Name your snippet size-chart.

  5. Click Create snippet:

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

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

  8. Return to the browser tab with the Edit HTML/CSS page.

  9. In the online code editor, paste the code you copied into your size-chart.liquid snippet:

    Size chart 6
  10. Click Save to save your new snippet.

  11. Under Layouts, click theme.liquid:

    Size chart 5
  12. In the online code editor, find the closing </body> tag.

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

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

To see this in action, take a look at this demo shop.

Set 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 .

Use a different language or change 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 the ... button, and then click Edit HTML/CSS.

  2. Click Snippets.

  3. Click size-chart.liquid.

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

  5. 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: ',' %}

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

  7. Replace Size chart with whatever wording you prefer.

  8. Click Save.

Want to discuss this page?

Visit the Shopify Community