{"id":4171,"date":"2024-02-07T17:45:00","date_gmt":"2024-02-07T17:45:00","guid":{"rendered":"https:\/\/scriptfeeds.com\/blog\/?p=4171"},"modified":"2025-04-12T19:12:01","modified_gmt":"2025-04-12T19:12:01","slug":"collection-metafields","status":"publish","type":"post","link":"https:\/\/scriptfeeds.com\/blog\/shopify\/collection-metafields\/","title":{"rendered":"Easy guide to show collection metafields in shopify store 2025"},"content":{"rendered":"\n<p>Now it&#8217;s super easy to show collection <a href=\"https:\/\/scriptfeeds.com\/blog\/shopify\/shopify-metafields-guide-2024\/\" data-type=\"post\" data-id=\"4178\">metafields <\/a>on collection and Product pages. Metaobjects has many possibilities and you can use meta objects in shopify to customize Product, Collection, page, location and Blog Pages easily.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block has-small-font-size\" id=\"rank-math-toc\"><h2><strong>Table of Contents<\/strong><\/h2><nav><ul><li class=\"\"><a href=\"#creating-collection-metafields-definition\">Creating Collection metafields Definition<\/a><\/li><li class=\"\"><a href=\"#steps-to-add-values-to-collection-metafields\">Steps to add values to collection metafields<\/a><\/li><li class=\"\"><a href=\"#how-to-show-meta-fields-value-on-collection-page\">How to Show Meta fields value on collection Page?<\/a><ul><li class=\"\"><a href=\"#by-editing-the-liquid-file-of-collection-in-theme\">By editing the liquid file of collection in theme<\/a><\/li><li class=\"\"><a href=\"#using-theme-customizer\">Using theme customizer<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/help.shopify.com\/en\/manual\/custom-data\/metafields\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Shopify 2.0 metafields<\/strong><\/a>&nbsp;lets you create custom fields in the Shopify Collections. Like other metafields, you can store additional information for your product collections in your online store.<\/p>\n\n\n\n<p>This blog will explain how we can customize collection page or how we can add different website elements like Image banner, Text and URL links on collection page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"creating-collection-metafields-definition\"><strong>Creating Collection metafields Definition<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your&nbsp;<strong>Shopify admin<\/strong><\/li>\n\n\n\n<li>Go to&nbsp;<strong>Settings &gt; Custom Data<\/strong>.<\/li>\n\n\n\n<li>Select Collection in the<strong>&nbsp;metafields type<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"858\" height=\"550\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-858x550.png\" alt=\"Select collection option in Merafields\" class=\"wp-image-4175\" style=\"width:1009px;height:auto\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-858x550.png 858w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-251x161.png 251w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-126x81.png 126w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-768x492.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-399x256.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-800x513.png 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-750x481.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-3.png 1137w\" sizes=\"(max-width: 858px) 100vw, 858px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the&nbsp;<strong>Add definition<\/strong>&nbsp;button.<\/li>\n\n\n\n<li>&nbsp;<strong>Give a name<\/strong>&nbsp;to your collection metafield definition. Like we created two<\/li>\n\n\n\n<li>Keep the&nbsp;<strong>Namespace and key<\/strong>&nbsp;as it is. The system will use it to identify the metafield definition.<\/li>\n\n\n\n<li><strong>Add a description<\/strong>&nbsp;to your metafields definition (optional).<\/li>\n\n\n\n<li>Check the&nbsp;<strong>Give access to Storefront API requests<\/strong>&nbsp;option.<\/li>\n\n\n\n<li><strong>Select a content type<\/strong>&nbsp;from the list.<\/li>\n\n\n\n<li>Based on the content type you select, you will get different&nbsp;<strong>Validation options<\/strong>&nbsp;for the metafield values. Set the&nbsp;<strong>validation rules<\/strong>&nbsp;carefully.<\/li>\n\n\n\n<li>Click on&nbsp;<strong>Save<\/strong>&nbsp;button. after saving, collection metafields will look image below<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"806\" height=\"322\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4.png\" alt=\"collection metafields\" class=\"wp-image-4176\" style=\"width:1009px;height:auto\" title=\"creating collection metafields\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4.png 806w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-300x120.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-150x60.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-768x307.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-399x159.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-800x320.png 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-750x300.png 750w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><\/figure>\n\n\n\n<p><strong>here we created a Metafield Banner-url of type URL  and Brand-Banner of type file (Image)<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"steps-to-add-values-to-collection-metafields\"><strong>Steps to add values to collection metafields<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Shopify store admin, go to&nbsp;<strong>Products &gt; Collections<\/strong><\/li>\n\n\n\n<li>Select any Collection.<\/li>\n\n\n\n<li>Scroll down to the&nbsp;<strong>Metafield<\/strong>&nbsp;section on the collection page.<\/li>\n\n\n\n<li>Enter the&nbsp;<strong>value<\/strong>&nbsp;in the metafield as shown below. <strong>Here we added a image and url which opens when customer click on Image<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"797\" height=\"404\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6.png\" alt=\"create custom metafields\" class=\"wp-image-4190\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6.png 797w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-300x152.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-150x76.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-768x389.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-399x202.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-750x380.png 750w\" sizes=\"(max-width: 797px) 100vw, 797px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"how-to-show-meta-fields-value-on-collection-page\"><strong>How to Show Meta fields value on collection Page?<\/strong><\/h2>\n\n\n\n<p><strong>Well there are two ways by which you can do this:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>By editing the liquid file of collection in theme<\/li>\n\n\n\n<li>Using theme customizer.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"by-editing-the-liquid-file-of-collection-in-theme\"><strong>By editing the liquid file of collection in theme<\/strong><\/h3>\n\n\n\n<p>If you want to do it by editing the liquid file, then edit the <strong>collection-default.liquid<\/strong> (or similar file as per your theme). Add the below code to line where you wanna show Metafield value. <strong>Here we also added a Default Image if no image added in collection metafield<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% assign image_metafield = collection.metafields.custom.brand_banner %}\n{% assign url_metafield = collection.metafields.custom.banner_url %}\n{% if image_metafield != blank %}\n  &lt;a href=\"{{ url_metafield }}\"&gt;&lt;img src=\"{{ image_metafield | img_url:'1900x500'}}\" alt=\"Collection Image\" width=\"100%\"&gt;&lt;\/a&gt;\n{% else %}\n  &lt;a href=\"\/\"&gt;&lt;img src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/2381\/9522\/files\/Group_1314.png?v=1658079141\" alt=\"Default Image\" width=\"100%\"&gt;&lt;\/a&gt;\n{% endif %}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1024x402.png\" alt=\"code in collection file\" class=\"wp-image-4192\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1024x402.png 1024w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-300x118.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-150x59.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-768x302.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1536x604.png 1536w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-399x157.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-800x314.png 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-750x295.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1140x448.png 1140w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-7.png 1542w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"using-theme-customizer\"><strong>Using theme customizer<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open customizer in theme option of Shopify store.<\/li>\n\n\n\n<li>Select default collection page in selection dropdown. check image below<\/li>\n\n\n\n<li>On left side, add new section <strong>&#8220;Custom Liquid&#8221;<\/strong> and add the code we used above.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"459\" height=\"537\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-9.png\" alt=\"Select default collection page in selection dropdown\" class=\"wp-image-4196\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-9.png 459w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-9-138x161.png 138w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-9-69x81.png 69w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-9-399x467.png 399w\" sizes=\"(max-width: 459px) 100vw, 459px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"336\" height=\"425\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-10.png\" alt=\"Add new custom liquid section\" class=\"wp-image-4197\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-10.png 336w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-10-127x161.png 127w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/02\/image-10-64x81.png 64w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>So that&#8217;s all you need to show the collection metafields on collection Page. For any support or custom work, you can <strong><a href=\"https:\/\/scriptfeeds.com\/blog\/hire-us\/\" data-type=\"page\" data-id=\"3537\">hire our Shopify expert<\/a><\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now it&#8217;s super easy to show collection metafields on collection and Product pages. Metaobjects has many possibilities and you can use meta objects in shopify to customize Product, Collection, page, location and Blog Pages easily. The&nbsp;Shopify 2.0 metafields&nbsp;lets you create custom fields in the Shopify Collections. Like other metafields, you can store additional information for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3919,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"subtitle":"","format":"standard","video":"","gallery":"","source_name":"","source_url":"","via_name":"","via_url":"","override_template":"0","override":[{"template":"2","single_blog_custom":"","parallax":"1","fullscreen":"1","layout":"right-sidebar-narrow","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"float","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"0","post_reading_time_wpm":"300","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"0","show_popup_post":"0","number_popup_post":"1","show_author_box":"0","show_post_related":"1","show_inline_post_related":"0"}],"override_image_size":"0","image_override":[{"single_post_thumbnail_size":"no-crop","single_post_gallery_size":"crop-500"}],"trending_post":"0","trending_post_position":"meta","trending_post_label":"Trending","sponsored_post":"0","sponsored_post_label":"Sponsored by","sponsored_post_name":"","sponsored_post_url":"","sponsored_post_logo_enable":"0","sponsored_post_logo":"","sponsored_post_desc":"","disable_ad":"0"},"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[278,277],"tags":[],"class_list":["post-4171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-shopify"],"_links":{"self":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/comments?post=4171"}],"version-history":[{"count":0,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media\/3919"}],"wp:attachment":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media?parent=4171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/categories?post=4171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/tags?post=4171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}