A size chart provides shoppers with an easy way to compare their measurements against a brand’s sizes to find the best fit. Here are the steps on how to set this up:
Set up your size chart
- Open the theme editor and navigate to a product page that you would like to have a size chart.
- In the theme editor settings side panel, select the main Product section, select + Add block, and select Size chart.
- Configure the contents of your Size Chart with the included page selection setting.
- Reposition the block to the desired order position within the Product section.
When the Size chart block is positioned immediately above the Variant picker block, the size chart link will be displayed inline next to the Size option selector.
Customize your size option trigger
- By default, the Size chart will inline itself with the Size option group.
- If you place the Size chart above the Variant picker and the two blocks don't combine, it might be because your size option has a different label than Size.
- Customize the Size trigger by selecting Edit default theme content inside the '...' dropdown menu in the top right corner.
- In the language editor, search for 'size' and set the Size trigger field to a value that matches your sizes option label.
Adding multiple size charts for different product types
Method 1: Creating an alternate template
- Alternate templates allow you to set different size charts for various types of products.
- Create new alternate product templates by selecting Products in the template select dropdown at the top of the theme editor.
- Select a product template you wish to edit or + Create template if you wish to create a new template for another product type.
- Configure each of your product templates with different size chart pages.
- Return to the main Shopify Admin, select Products, select a product, and set the desired Theme template value from the dropdown.
Method 2: Using metafields to assign size charts
Metafields provide a dynamic way to link size charts to individual products by connecting them to page references.
-
Set Up a Metafield Definition:
- In your Shopify Admin, go to Settings > Metafields and metaobjects.
- Click Products to create a new metafield for your products.
- Click Add definition, then:
- Name the metafield (e.g., "Size Chart").
- Select Page Reference as the content type for the metafield.
- Save the metafield definition.
-
Assign Pages to Products:
- Navigate to the Products section in your Shopify Admin.
- Open a product to which you want to assign a size chart.
- Scroll down to the metafield section.
- Select the appropriate page from the dropdown in the size chart metafield.
- Save your changes.
-
Update the Theme to Display Metafields:
- Go to Online Store > Themes and click Edit theme.
- Edit the product page template to include a dynamic source for the size chart:
- Add a section or block where you want the size chart to appear.
- Set the content to display the metafield you created.
- Save your changes.