[P] Size chart

A size chart is a feature that allows you to show your buyers extra information about your product's dimensions and sizes to help them to choose the appropriate variant:

A size chart is essential for clothing but can also be used for other use cases, such as furniture dimensions.

Our theme Prestige supports setting a global size chart for each product and a different size chart per product for ultimate flexibility. Size charts are tied to the product selectors.

To display a size chart on your store, follow the steps:

1. Ensure you are fulfilling the requirements.
2. Create a page for the size chart.
3. Showing the same size chart for every product or showing a different size chart for each product.

Conditions

You must have a variant option called Size to use a size chart. Products without variants can't currently use size charts this way (see the FAQ for some alternatives). The option name must be called precisely Size (for instance, if it is named Sizes, it won't work).

Creating a page holding the size chart

The first step is to create a page containing the information about your size chart:

1/ Open Shopify admin, and click on "Pages" in the "Online Store" section:

2/ Create a new page and fill it with your information:

3/ Repeat the process if your use case involves multiple size charts by creating one different page for each unique size chart.

Showing the same size chart for every product

If your use case is simple and you want to display the same size chart for each product, follow the steps below. If you instead need to display a different size chart for each product, jump to this section.

1/ Open the theme editor, and navigate to the product section:

2/ In the sidebar, for the product template, click on "Variant picker":

3/ Select the size chart page you have created in the step before, in the Size chart setting:

4/ Save.

Showing a different size chart for each product

Showing a different size chart for each product is a bit more complex and requires using metafields. If your use case is simpler and you just want the same size chart for every product, follow those instructions instead.

1/ In your Shopify admin, click on Settings and select Custom data to create a new metafield:

2/ Click on "Products" (as we want to create a product metafield):

3/ At the top, click on Add definition. For the name, write something meaningful such as Size chart. Select the Page reference metafield type, and make sure that "One page" is checked:

Once everything is set up, your metafield should look like this:

4/ Click on Save to create the metafield.

5/ Once you have created the metafield, we must connect it to the theme editor. To do that, open the theme editor, and navigate to the product section:

6/ In the sidebar, for the product template, click on "Variant picker":

7/ Click the small database icon next to the "Size chart" setting.

8/ In the list, select the metafield we created earlier to connect it:

9/ Save your changes.

10/ At this stage, nothing will appear on your product page, which is normal. We have just connected the metafield but have not yet configured any size chart for our products. To do that, open the Shopify admin and navigate to a product you want to set up a size chart for. Scroll down until you see the Metafields box:

11/ Click on the Size chart metafield, and select the page you want to show for this product:

12/ Save the product, and repeat the other products' process. With this approach, you can select a unique size chart for each product (or a group of products, as the same page can be assigned to more than one product).

You can use the bulk editor to assign the same page to multiple products in bulk. Learn more about bulk editing.

Changing the trigger word

When the theme displays each product selector, it must know which one should be considered as a size option. By default, the theme uses sane defaults and considers the option name Size to be a size option.

However, your option might be called Dimensions or Bottom size for marketing reasons. You can add extra trigger words to indicate the theme and consider those options as size so that the size chart can also be displayed.

To do that, follow the steps below:

1/ In the theme list in Shopify admin, click on the "Edit default theme content" button:

2/ Filter the sentences with Size to show the sentence to edit:

3/ The Size label sentence holds which option name must be considered a color swatch. You can enter a list of comma-separated option names. For instance, by entering Size,Dimensions then the size chart will be displayed for any option called either Size or Dimensions:

FAQ

• Can I set up a size chart if my product does not have variants? As of today, the size chart feature displays next to the variant selector. If your product does not have any variant (for instance, for a unique-size product), you can add a "content" block instead on your product page and connect the content to the page.
• Can I have one size chart per product? Yes, this is possible by using metafields. Please refer to this document for more information.
• Can I have one size chart for each main category of products? If you have a lot of products, manually specifying a size chart metafield can be time-consuming. Let's say you have two categories of products: skirts and shirts. Skirts and shirts must have different size charts, but all skirts have the same size chart, and all shirts have the same size. You have two options to solve this issue:
  • Option 1: you can use bulk editing to assign the same metafield to multiple products. Learn more about bulk editing.
  • Option 2: create two product templates: one for skirts and one for shirts. Then, statically assign the skirt size chart to the skirt template and the shirt size chart to the shirt template. Learn more about templates.