How do I set up a product size chart?

Edited

1. Setup your size chart block

  • 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. If the Size Chart block is placed immediately above the Variant Picker block, the size chart trigger will be inlined next to the Size option selection

2. 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 Languages 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

3. Adding multiple unique size charts for different product types

Method 1: Creating an Alternate Template

  • Alternate templates allow you to set different size charts for different 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.

  1. Set Up a Metafield Definition:

    • In your Shopify Admin, go to Settings > Custom data.

    • 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.

  2. 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.

  3. Update the Theme to Display Metafields:

    • Go to Online Store > Themes and click Customize.

    • 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.

Was this article helpful?

Sorry about that! Care to tell us more?

Thanks for the feedback!

There was an issue submitting your feedback
Please check your connection and try again.