{"id":6742,"date":"2024-11-12T13:56:01","date_gmt":"2024-11-12T08:26:01","guid":{"rendered":"https:\/\/simplileap.com\/blog\/?p=6742"},"modified":"2024-11-13T12:09:49","modified_gmt":"2024-11-13T06:39:49","slug":"step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields","status":"publish","type":"post","link":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/","title":{"rendered":"Step-by-Step: Create a Custom Section on Shopify Product Page using Metafields"},"content":{"rendered":"<figure id=\"attachment_6763\" aria-describedby=\"caption-attachment-6763\" style=\"width: 3420px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-6763 size-full\" src=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png\" alt=\"\" width=\"3420\" height=\"1780\" srcset=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png 3420w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-300x156.png 300w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-1024x533.png 1024w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-768x400.png 768w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-1536x799.png 1536w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-2048x1066.png 2048w\" sizes=\"(max-width: 3420px) 100vw, 3420px\" \/><figcaption id=\"caption-attachment-6763\" class=\"wp-caption-text\">Creating custom section on Shopify Product Page using Metafields.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Customizing your Shopify product pages with metafields can significantly enhance the information you provide to customers and improve their shopping experience. Metafields allow you to add additional content to your products, such as specifications, special features, or any other custom information you want to showcase.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By using schema Liquid, you can make these fields editable in the Shopify theme file, which makes it really easy to update the content being displayed on the product page. This flexibility gives you the ability to easily modify the product page to focus on product design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to create a custom section on your Shopify product page using Metafields with schema liquid code.<\/span><\/p>\n<h2><b>Step 1: Create a Metafield for products<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Login to Shopify Admin panel <\/span><b>\u2013<\/b><span style=\"font-weight: 400;\"> Navigate to <\/span><b>Settings \u2013 <\/b><span style=\"font-weight: 400;\">click on<\/span><b> Custom data \u2013 <\/b><span style=\"font-weight: 400;\">click on<\/span><b> Products \u2013 <\/b><span style=\"font-weight: 400;\">click on<\/span><b> Add definition<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Fill all the fields given below.\u00a0<\/span><\/p>\n<p><b>Name<\/b><span style=\"font-weight: 400;\">: Add a custom title name in this field.<\/span><\/p>\n<p><b>Namespace and Key<\/b><span style=\"font-weight: 400;\">: you can leave this field as it is.<\/span><\/p>\n<p><b>Select type<\/b><span style=\"font-weight: 400;\">: select the Multi-line text and click on <\/span><b>Save<\/b><span style=\"font-weight: 400;\"> below.<\/span><\/p>\n<p><span style=\"font-weight: 400; color: #ff0000;\">Example:<\/span><span style=\"font-weight: 400;\"> I gave a title name product-section<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6745 size-full\" src=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step1.png\" alt=\"\" width=\"1200\" height=\"626\" srcset=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step1.png 1200w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step1-300x157.png 300w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step1-1024x534.png 1024w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step1-768x401.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Step 2: Add Metafield Data to Products<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Click on the <\/span><b>Products<\/b><span style=\"font-weight: 400;\"> in the admin panel <\/span><b>\u2013 <\/b><span style=\"font-weight: 400;\">Select a <\/span><b>Product<\/b><span style=\"font-weight: 400;\"> you want to add the content <\/span><b>\u2013 <\/b><span style=\"font-weight: 400;\">Scroll down to <\/span><b>Product Metafields<\/b><span style=\"font-weight: 400;\"> Section <\/span><b>\u2013<\/b><span style=\"font-weight: 400;\"> add your content data or code in the metafield you created. and click on Save.<\/span><\/p>\n<p><span style=\"font-weight: 400; color: #ff0000;\">Example:<\/span><span style=\"font-weight: 400;\"> Here i am adding a two column section html code. On the left column image will be displayed on the right column Title, description and button will be displayed.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6747 size-full\" src=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step2.png\" alt=\"\" width=\"1200\" height=\"310\" srcset=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step2.png 1200w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step2-300x78.png 300w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step2-1024x265.png 1024w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step2-768x198.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Step 3: Create a new section in theme file to display the Metafield<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">On your Shopify Admin panel <\/span><b>\u2013<\/b><span style=\"font-weight: 400;\">\u00a0 click on <\/span><b>Online Store<\/b> <b>\u2013 <\/b><span style=\"font-weight: 400;\">\u00a0click on <\/span><b>Themes \u2013 <\/b><span style=\"font-weight: 400;\">click on the three dots before Customize button on the live theme and click on <\/span><b>Edit code <\/b><\/p>\n<p><span style=\"font-weight: 400;\">On the left panel click on <\/span><b>sections \u2013 <\/b><span style=\"font-weight: 400;\">click on<\/span><b> +Add a new section \u2013 <\/b><span style=\"font-weight: 400;\">on the popup enter any name and click on <\/span><b>Save. <\/b><span style=\"font-weight: 400;\">Note:<\/span> <span style=\"font-weight: 400;\">it should be in<\/span><b> liquid file format<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Follow the below procedure and add the below code in the file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{% if product.metafields.custom.product_section %}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;product-metafield&#8221;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;Product Section&lt;\/h3&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p&gt;{{ product.metafields.custom.product_section }}&lt;\/p&gt; <\/span><span style=\"font-weight: 400;\">\u00a0&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{% endif %}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{% schema %}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0&#8220;name&#8221;: &#8220;Product Section&#8221;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0&#8220;settings&#8221;: [],<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0&#8220;presets&#8221;: [<\/span><span style=\"font-weight: 400;\">\u00a0{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#8220;name&#8221;: &#8220;product-sect&#8221;,<\/span><span style=\"font-weight: 400;\">\u00a0&#8220;category&#8221;: &#8220;Custom&#8221;<\/span><span style=\"font-weight: 400;\">\u00a0} ] <\/span><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{% endschema %}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><span style=\"color: #ff0000;\">Note:<\/span> Here we are linking the metafield that created for the product { product.metafields.custom.product_section }<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once updated click on <\/span><b>Save<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6751 size-full\" src=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step3.png\" alt=\"\" width=\"1200\" height=\"626\" srcset=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step3.png 1200w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step3-300x157.png 300w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step3-1024x534.png 1024w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step3-768x401.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Step 4: Drag and drop the Metafield section in the product page<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">To display the Metafield section in the product page you can drag and drop in the <\/span><b>Template<\/b><span style=\"font-weight: 400;\"> field wherever you can. to achieve this follow the below procedure.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">click on <\/span><b>Online Store \u2013 <\/b><span style=\"font-weight: 400;\">click on <\/span><b>Customize <\/b><span style=\"font-weight: 400;\">on your active theme <\/span><b>\u2013 <\/b><span style=\"font-weight: 400;\">in the top navbar click on <\/span><b>Home page \u2013 <\/b><span style=\"font-weight: 400;\">click on<\/span><b> Products <\/b><span style=\"font-weight: 400;\">in the dropdown and select and click on the <\/span><b>Default product<\/b><\/p>\n<p><span style=\"font-weight: 400; color: #ff0000;\">Note:<\/span><span style=\"font-weight: 400;\"> Select the template if you&#8217;re using any other custom product template for your product page other than Default product template.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">on the <\/span><b>Default product \u2013 <\/b><span style=\"font-weight: 400;\">Navigate to<\/span><b> Template <\/b><span style=\"font-weight: 400;\">field on the left side bar click on <\/span><b>Add section \u2013 <\/b><span style=\"font-weight: 400;\">search the metafield section that you created and click on that and <\/span><b>Save<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6752 size-full\" src=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step4.png\" alt=\"\" width=\"1200\" height=\"626\" srcset=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step4.png 1200w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step4-300x157.png 300w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step4-1024x534.png 1024w, https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/step4-768x401.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Step 5: Publish and Preview<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Click on Save and test your changes on the website, once the custom section has appeared on the product page. For other products you can add the custom content in related product metafields and check in the frontend of the website.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>For any further queries regarding Metafields , feel free to reach out to us at <a href=\"mailto:info@simplileap.com\">info@simplileap.com<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Customizing your Shopify product pages with metafields can significantly enhance the information you provide to customers and improve their shopping experience. Metafields allow you to add additional content to your products, such as specifications, special features, or any other custom information you want to showcase. By using schema Liquid, you can make these fields [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":6763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,33],"tags":[],"class_list":["post-6742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-technical"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide to Creating a Custom Section on Your Shopify Product Page<\/title>\n<meta name=\"description\" content=\"Enhance Shopify product pages with metafields to add product details, specifications, features, and more for a better shopping experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide to Creating a Custom Section on Your Shopify Product Page\" \/>\n<meta property=\"og:description\" content=\"Enhance Shopify product pages with metafields to add product details, specifications, features, and more for a better shopping experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\" \/>\n<meta property=\"og:site_name\" content=\"Simplileap\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/simplileap\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-12T08:26:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-13T06:39:49+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-1024x533.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"533\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Goutham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@simplileap\" \/>\n<meta name=\"twitter:site\" content=\"@simplileap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Goutham\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\"},\"author\":{\"name\":\"Goutham\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/person\/3708244ec033062bf5a221e1e5ac512e\"},\"headline\":\"Step-by-Step: Create a Custom Section on Shopify Product Page using Metafields\",\"datePublished\":\"2024-11-12T08:26:01+00:00\",\"dateModified\":\"2024-11-13T06:39:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\"},\"wordCount\":627,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png\",\"articleSection\":[\"Design\",\"Technical\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\",\"url\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\",\"name\":\"Guide to Creating a Custom Section on Your Shopify Product Page\",\"isPartOf\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png\",\"datePublished\":\"2024-11-12T08:26:01+00:00\",\"dateModified\":\"2024-11-13T06:39:49+00:00\",\"description\":\"Enhance Shopify product pages with metafields to add product details, specifications, features, and more for a better shopping experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage\",\"url\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png\",\"contentUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png\",\"width\":3420,\"height\":1780},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/simplileap.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Step-by-Step: Create a Custom Section on Shopify Product Page using Metafields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/simplileap.com\/blog\/#website\",\"url\":\"https:\/\/simplileap.com\/blog\/\",\"name\":\"Simplileap\",\"description\":\"Building Digital Future\",\"publisher\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/simplileap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/simplileap.com\/blog\/#organization\",\"name\":\"Simplileap\",\"url\":\"https:\/\/simplileap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png\",\"contentUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Simplileap\"},\"image\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/simplileap\",\"https:\/\/x.com\/simplileap\",\"https:\/\/www.instagram.com\/simplileap\/\",\"https:\/\/www.linkedin.com\/company\/simplileap\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/person\/3708244ec033062bf5a221e1e5ac512e\",\"name\":\"Goutham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/378daa461563543a979311537642ccd598ea083282dd79f7cc2875e396e3b1c3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/378daa461563543a979311537642ccd598ea083282dd79f7cc2875e396e3b1c3?s=96&d=mm&r=g\",\"caption\":\"Goutham\"},\"description\":\"I am a proficient Full Stack Designer and Developer with extensive experience in creating visually stunning and highly functional websites. My expertise spans across front-end design, as well as back-end development.\",\"url\":\"https:\/\/simplileap.com\/blog\/author\/goutham\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide to Creating a Custom Section on Your Shopify Product Page","description":"Enhance Shopify product pages with metafields to add product details, specifications, features, and more for a better shopping experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/","og_locale":"en_US","og_type":"article","og_title":"Guide to Creating a Custom Section on Your Shopify Product Page","og_description":"Enhance Shopify product pages with metafields to add product details, specifications, features, and more for a better shopping experience.","og_url":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/","og_site_name":"Simplileap","article_publisher":"https:\/\/www.facebook.com\/simplileap","article_published_time":"2024-11-12T08:26:01+00:00","article_modified_time":"2024-11-13T06:39:49+00:00","og_image":[{"width":1024,"height":533,"url":"http:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1-1024x533.png","type":"image\/png"}],"author":"Goutham","twitter_card":"summary_large_image","twitter_creator":"@simplileap","twitter_site":"@simplileap","twitter_misc":{"Written by":"Goutham","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#article","isPartOf":{"@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/"},"author":{"name":"Goutham","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/person\/3708244ec033062bf5a221e1e5ac512e"},"headline":"Step-by-Step: Create a Custom Section on Shopify Product Page using Metafields","datePublished":"2024-11-12T08:26:01+00:00","dateModified":"2024-11-13T06:39:49+00:00","mainEntityOfPage":{"@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/"},"wordCount":627,"commentCount":0,"publisher":{"@id":"https:\/\/simplileap.com\/blog\/#organization"},"image":{"@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage"},"thumbnailUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png","articleSection":["Design","Technical"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/","url":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/","name":"Guide to Creating a Custom Section on Your Shopify Product Page","isPartOf":{"@id":"https:\/\/simplileap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage"},"image":{"@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage"},"thumbnailUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png","datePublished":"2024-11-12T08:26:01+00:00","dateModified":"2024-11-13T06:39:49+00:00","description":"Enhance Shopify product pages with metafields to add product details, specifications, features, and more for a better shopping experience.","breadcrumb":{"@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#primaryimage","url":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png","contentUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2024\/10\/Shopify_metafields_1.png","width":3420,"height":1780},{"@type":"BreadcrumbList","@id":"https:\/\/simplileap.com\/blog\/technical\/step-by-step-create-a-custom-section-on-shopify-product-page-using-metafields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/simplileap.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Step-by-Step: Create a Custom Section on Shopify Product Page using Metafields"}]},{"@type":"WebSite","@id":"https:\/\/simplileap.com\/blog\/#website","url":"https:\/\/simplileap.com\/blog\/","name":"Simplileap","description":"Building Digital Future","publisher":{"@id":"https:\/\/simplileap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/simplileap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/simplileap.com\/blog\/#organization","name":"Simplileap","url":"https:\/\/simplileap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png","contentUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png","width":512,"height":512,"caption":"Simplileap"},"image":{"@id":"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/simplileap","https:\/\/x.com\/simplileap","https:\/\/www.instagram.com\/simplileap\/","https:\/\/www.linkedin.com\/company\/simplileap\/"]},{"@type":"Person","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/person\/3708244ec033062bf5a221e1e5ac512e","name":"Goutham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/378daa461563543a979311537642ccd598ea083282dd79f7cc2875e396e3b1c3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/378daa461563543a979311537642ccd598ea083282dd79f7cc2875e396e3b1c3?s=96&d=mm&r=g","caption":"Goutham"},"description":"I am a proficient Full Stack Designer and Developer with extensive experience in creating visually stunning and highly functional websites. My expertise spans across front-end design, as well as back-end development.","url":"https:\/\/simplileap.com\/blog\/author\/goutham\/"}]}},"_links":{"self":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts\/6742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/comments?post=6742"}],"version-history":[{"count":17,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts\/6742\/revisions"}],"predecessor-version":[{"id":7292,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts\/6742\/revisions\/7292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/media\/6763"}],"wp:attachment":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/media?parent=6742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/categories?post=6742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/tags?post=6742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}