• Your Cart is Empty

What can we help with?

Display a Size Chart on the Product Page

Last Updated: Mar 14, 2017 05:33PM EDT

Do some or all of your products come in different sizes?
You can help your shoppers decide which size to order by providing a table or chart with details on your product sizes and any recommended corresponding measurements.


*Note: This article is for themes released before Mobilia 5.0, Retina 4.0, Parallax 3.0, Responsive 6.0 or Turbo 2.0) for newer versions, please see here.
To find out which theme version you are using please see here.

Here are the basic steps:

Create a Size Chart:

For each size chart you want to use in your shop, you’ll need to create a separate page by going to Online Store > Pages > “Add a Page”.
This page can include text and/or images, and commonly uses some kind of grid or table to present sizing information.

OPTION 1: Use a single size chart for ALL products:

If you only have one sizing guide that applies to all your merchandise, and you want that size chart to be accessible from each product page, follow these steps:

  • Go to your theme settings (Online Store > Themes > Customize Theme) and find the Product Page section

  • Scroll to the very bottom and look for the Size chart dropdown list

  • Choose the page you’ve just created for your size chart


Result: This will add a “Size chart” link (to that one size chart you just specified) to every product page in your shop.


OPTION 2 (New in Responsive 5.2): Use different size charts for different products:

If you have different size charts for different items, and/or have some products that don’t need a size chart at all, you can specify which ones to use where, using the following method:

  • Go to your size chart page and make a note of the handle for that page:

  • Next, go to a product where you want that particular size chart to be used, and add a new tag in the Tags section with the following format:


(where “handle-name” = the handle of the page for a particular size chart; in our example the page handle was "gaiam-size-guide"


  • Repeat this step for every size chart and every product you have, that you want to use a specific size chart with

  • Finally, go to theme settings > Product Page > “Size chart” and choose “None” from the dropdown list:

Result: This will add a custom “Size chart” link ONLY to the product pages in your shop that have a ‘meta-size-chart’ tag applied to them; products without this meta tag will not display a size chart link at all.

FINAL NOTE: To change the name of the size chart link:

  • Go to the theme’s language settings (Online Store > “...” > Edit Language) and under the “Product” tab, scroll down until you see the text field for “Size chart” then enter your preferred text there + click save

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found