{"id":23829,"date":"2025-10-25T11:00:00","date_gmt":"2025-10-25T05:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23829"},"modified":"2026-01-21T11:14:53","modified_gmt":"2026-01-21T05:44:53","slug":"add-size-chart-to-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-size-chart-to-shopify\/","title":{"rendered":"How to Add Size Chart to Shopify Using Metafields"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A Shopify size chart popup is a must for retail store owners.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is a simple yet powerful guide to help you add a size chart to Shopify using the in-built metafield functionality, skipping the use of any code or third-party app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Metafields are custom fields that let you add extra information about your product, collections, and more, going beyond the standard fields present in Shopify \u2014 in this case a size chart.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is how to add different size guides with metafields in Shopify.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Shopify Size Chart Pop-up (Using Metafields)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create the Size Chart Page<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First create a size chart page with all the correct information about the product size.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Online Store > Pages<\/strong>.<\/li>\n\n\n\n<li>Click on Add page and add a page title (e.g, Size Chart).<\/li>\n\n\n\n<li>Create a size chart inside the content box or upload an image.<\/li>\n\n\n\n<li>Click Save.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"380\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_details_to_the_size_chart_page_on_Shopify-1024x380.png\" alt=\"Add details to the size chart page on Shopify\" class=\"wp-image-23845\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_details_to_the_size_chart_page_on_Shopify-1024x380.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_details_to_the_size_chart_page_on_Shopify-300x111.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_details_to_the_size_chart_page_on_Shopify-768x285.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_details_to_the_size_chart_page_on_Shopify-1536x569.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_details_to_the_size_chart_page_on_Shopify.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create a Product Metafield for the Size Chart<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Metafields will help to link the product to the size chart page you created in Step 1.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Settings > Metafields > Products<\/strong> (under Metafield definitions)\u00a0<\/li>\n\n\n\n<li>Click Add definition and give it a name (e.g., Size Chart Page).<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"191\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_a_product_metafield_definition_-1024x191.png\" alt=\"Create a product metafield for size chart\" class=\"wp-image-23844\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_a_product_metafield_definition_-1024x191.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_a_product_metafield_definition_-300x56.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_a_product_metafield_definition_-768x143.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_a_product_metafield_definition_-1536x287.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Add_a_product_metafield_definition_.png 1596w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>Select type and choose Page<\/strong>.<\/li>\n\n\n\n<li>Click Save.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Create_a_size_chart_page_on_Shopify-1024x561.png\" alt=\"Create_a_size_chart_page_on_Shopify\" class=\"wp-image-23846\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Create_a_size_chart_page_on_Shopify-1024x561.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Create_a_size_chart_page_on_Shopify-300x164.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Create_a_size_chart_page_on_Shopify-768x421.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Create_a_size_chart_page_on_Shopify-1536x841.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Create_a_size_chart_page_on_Shopify.png 1596w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Assign the Size Chart to a Product<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, it\u2019s time to add the size cart to the product where you want to display it.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the product you want to add the size chart to.<\/li>\n\n\n\n<li>Scroll down to the <strong>Metafields section<\/strong>.<\/li>\n\n\n\n<li>Find the metafield you just created (e.g., &#8220;Size Chart Page&#8221;) and click Select page.<\/li>\n\n\n\n<li>Choose the size chart page you created in Step 1.<\/li>\n\n\n\n<li>Click Save on the product page.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_size_chart_as_the_metafield_-1024x444.png\" alt=\"Select_size_chart_as_the_metafield_\" class=\"wp-image-23848\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_size_chart_as_the_metafield_-1024x444.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_size_chart_as_the_metafield_-300x130.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_size_chart_as_the_metafield_-768x333.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_size_chart_as_the_metafield_.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 4: Add the Size Chart Block to your Product Page Template<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The last step here is to make the size chart visible on the desired product page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Go to Online Store > Themes > Customize.<\/strong><\/li>\n\n\n\n<li>In the theme editor, navigate to a product page.&nbsp;<\/li>\n\n\n\n<li>In the left sidebar, under Product information, click Add block.<\/li>\n\n\n\n<li>Choose between Pop-up or Collapsible row. (we will choose pop-up)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"694\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_pop-up_as_style-1024x694.png\" alt=\"Select_pop-up_as_style\" class=\"wp-image-23847\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_pop-up_as_style-1024x694.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_pop-up_as_style-300x203.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_pop-up_as_style-768x520.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Select_pop-up_as_style.png 1210w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Cick on the new block to edit its settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change the Link label and look for Connect dynamic source (\u26c1 an icon like this).<\/li>\n\n\n\n<li>Select the Size Chart Page metafield you created.<\/li>\n\n\n\n<li>Click Save.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: View the Size Chart in The Frontend&nbsp;&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, take a store preview and head to the product where you added the size chart. Check if it is showing as expected.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"641\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Size_chart_on_the_frontend_-1024x641.png\" alt=\"Size_chart_on_the_frontend_\" class=\"wp-image-23850\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Size_chart_on_the_frontend_-1024x641.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Size_chart_on_the_frontend_-300x188.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Size_chart_on_the_frontend_-768x481.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Size_chart_on_the_frontend_-1536x962.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Size_chart_on_the_frontend_.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, if you want to add the same product size to multiple Shopify product pages, just repeat step number 3.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, you can repeat the same steps to add different size guides with metafields in Shopify.\u200b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This wraps up the steps to add size chart to Shopify for free.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Benefits of Adding Size Chat to Shopify<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a size chart is not only helpful for your shoppers but also for you. With a chart placed correctly on you, enjoy:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reduces return rates due to incorrect sizing.<\/li>\n\n\n\n<li>Lower return costs due to fewer returns.<\/li>\n\n\n\n<li>Minimum customer support on sizing queries.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A small addition has customer support benefits and directly impacts your revenue positively.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a size chart or a <a href=\"https:\/\/meetanshi.com\/blog\/add-shopify-product-description-read-more-tag\/\">Shopify product description &#8220;read more&#8221;<\/a> button tailors to the store for convenience and removes the frustration a shopper can feel due to lack of information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try out the steps mentioned above to give your shoppers an uninterrupted shopping experience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. How to add a different size chart for each product in Shopify?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create unique size chart metafields for different products and add them accordingly in your product pages.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Which Shopify size chart app can I use?&nbsp;&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can use the Kiwi Size Chart &amp; Recommender or BF Size Chart &amp; Size Guide from the Shopify App Store.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Where is the best place to display a size chart on a product page?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Directly above the &#8220;Add to Cart&#8221; button is the best place to add your product size chart.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Shopify size chart popup is a must for retail store owners. This is a simple yet powerful guide to help you add a size&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-23829","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=23829"}],"version-history":[{"count":7,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23829\/revisions"}],"predecessor-version":[{"id":25484,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23829\/revisions\/25484"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}