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.

All products that require reference to the size chart must have a Size option:

alt

Sectioned and non-sectioned themes

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, and then click Actions > 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.

  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, and then click Actions > Edit code.

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

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

  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:

  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:

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, and then click Actions > 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.

Ready to start selling with Shopify?

Try it free