Set up a unique size chart for each product

Your store sells many products and each of them may have unique size charts with different measurements. Instead of showing a static size chart for all products, the relevant size chart should be displayed when customers click to learn more about their interested items. In this article, we will guide you on how to do this setting.

On this page

Size chart eligibility

The product must have the Size option to enable the size chart.

In order to add the product's size option for customers to select, you set up as follows:

  1. On your Shopify Admin dashboard, click Products > select the product to display the size chart.
  2. Click on that product to open the edit window. Next, you scroll down to the field Option and add the attribute Size with different options to select such as S, M, L. Then, click Save.
    Note: The size option is used as the default validation to enable the size chart. In cases where you want to change the option label from "Size" to another text, you can do it with the following steps:
    • On your Shopify Admin dashboard, click Online Store > Themes
    • On the Themes page, choose Be Yours theme and click on the theme's button Actions > Edit Languages.
    • Under the Products tab, navigate to the Size chart trigger and change it to the name you want for the option label.
    • Click Save to confirm your change.

Add a size chart to a product page or section

  1. Firstly, you need to create pages for different size charts by going to Online Store > Pages on your Shopify Admin dashboard, then clicking Add page. For example, the size chart content is added to the new page "Plant Shelf Size".
  2. Secondly, you create a new metafield definition for the size chart. You can read the detailed instructions on adding a new metafield definition in the article Leverage your customization by using dynamic sources and metafields.
    • Name: provide the metafield name. In our example, it is "Size chart".
    • Namespace and key: you can remain the default namespace and key or you can change it as per your preference.
    • Choose Page as the content type for this metafield.
  3. Thirdly, after choosing a specific product from the tab Products on your Shopify Admin dashboard, you add the unique size chart which is the created page in this new metafield. For example, we will choose the product named "Pomo Recycled Planter", click to open its edit window and scroll down to Metafield part to add the page "Plant Shelf Size" in its size chart metafield. Then, click Save to confirm your setting.
  4. Next, you navigate to the product page or section where you want to enable the size chart in the Be Yours theme editor such as the product page, featured product section, or product modal. After that, you add the Variant picker block.
  5. You select the added Variant picker block and click on the Connect dynamic source icon.
  6. You choose the Size chart metafield which is created earlier and click the button Connect.
  7. The metafield value configured in step 3 will be displayed for the product.
  8. You perform the same process to connect another unique size chart for a different product.

We hope that you find this article helpful! If you have any concerns about this feature, do not hesitate to contact our team for further support.