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.

Theme compatibility

Brooklyn

If you use the 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.

Create a Size Chart page

  1. From your Shopify admin, click Online Store, and then click Pages (or press G W P).

  2. Click Add page.

  3. Name your page Size Chart. Make sure that the URL & Handle field reads size-chart.

    Size chart
  4. Under Content, in the rich text editor, create a table that contains your size chart information.

  5. Customize the table to look however you choose:

    Size chart 2
  6. In the Visibility section, make sure Visible is selected:

    Choose visible
  7. Click Save.

Your Size Chart page has been successfully created. Our next step will be to add some code to your theme to make the size chart page appear on your product page.

Create a size chart snippet

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Click Snippets.

  4. Click Add a new snippet.

  5. Name your snippet size-chart.

  6. Click Create snippet:

    Size chart 4
  7. In a new browser tab, open one of the following gist files:

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

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

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

    Size chart 6
  11. Click Save.

  12. Under Layouts, click theme.liquid:

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

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

    {% include 'size-chart' %}

  15. 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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Click Snippets.

  4. Click size-chart.liquid.

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

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

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

  8. Replace Size chart with whatever wording you prefer.

  9. Click Save.

Want to discuss this page?

Visit the Shopify Community