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
If you place the Size chart block above the Variant picker and the two blocks don't combine, it might be because your size option is labeled differently than Size. You can update this in the language editor.
- Click the ••• button beside your theme and select Edit theme content.
- In the language editor, go to the Products tab.
- Under General, look for Size trigger.
- Change the word to the term you use for your size options.
- Save your changes.
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 Product metafields 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:
- Under the Product section in the left sidebar, click on Add Block. If you don't see this option, you may need to hover your mouse pointer between existing blocks. A blue plus (+) button should appear, allowing you to add a new block.
- Select the Size chart block and position it as desired within your product template.
- Use the Connect dynamic source (database icon) to connect the metafield.
- Save your changes.