{"id":753,"date":"2023-05-19T16:05:00","date_gmt":"2023-05-19T16:05:00","guid":{"rendered":"http:\/\/localhost\/wordpress_ragnokdocs\/?p=753"},"modified":"2025-03-20T15:36:01","modified_gmt":"2025-03-20T15:36:01","slug":"sections-and-metafields","status":"publish","type":"post","link":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/sections-and-metafields\/","title":{"rendered":"Sections and Metafields"},"content":{"rendered":"\n<p>Some sections of our theme require&nbsp;<a href=\"https:\/\/help.shopify.com\/en\/manual\/custom-data\/metafields\">metafields<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/help.shopify.com\/en\/manual\/custom-data\/metaobjects\">metaobjects<\/a> to be setup in order to display specialized information, such as product <strong>file types<\/strong>, <strong>specifications<\/strong>,&nbsp;<strong>quick description<\/strong>, etc.<\/p>\n\n\n\n<p>Below you will find a guide on how to setup these <strong>metafields&nbsp;<\/strong>and&nbsp;<strong>metaobjects<\/strong> using a section of the theme as an example. <strong>Once you complete the setup for one section, all other sections that make use of the same features will also be able to display the same specialized information.<\/strong> <\/p>\n\n\n\n<p>This means that, for example, once you complete the setup for the <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/featured-spotlight\/\">Featured spotlight<\/a> section to be able to show the product file list, the <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/product-slideshow\/\">Product slideshow<\/a> section will also be able to show the product file list.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Products<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Featured spotlight<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#show-product-file-list\">Show product file list<\/a><\/li>\n\n\n\n<li><a href=\"#show-product-specifications\">Show product specifications<\/a><\/li>\n\n\n\n<li><a href=\"#show-product-quick-description\">Show product quick description<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Collections<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Collection banner<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#show-banner-image\">Show banner image<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"show-product-file-list\">Show product file list<\/h2>\n\n\n\n<p>By default the <strong>Featured spotlight<\/strong> section will display like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"859\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section.png\" alt=\"\" class=\"wp-image-936\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-1024x458.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-1536x687.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>In order to add <strong>product file<\/strong> information you have to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create the <strong>Product File<\/strong>&nbsp;metaobject by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/files\/#create-files-metaobject\">this guide<\/a>. This will allow you to create entries with the <strong>file name<\/strong>, <strong>extension <\/strong>and <strong>amount of files included<\/strong> (different sections of the theme allow the display of different information, for example the <strong>Featured spotlight<\/strong> will show the file extension associated image, while the <strong>Product information<\/strong> section also displays the amount o files included).<\/li>\n\n\n\n<li>Create the <strong>Files<\/strong>&nbsp;metafield by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/files\/#create-files-metafield\">this guide<\/a>. This is what will allow you to associate the <strong>Product File<\/strong> metaobjects you create to any of your products.<\/li>\n\n\n\n<li>Add <strong>files <\/strong>to your products by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/files\/#add-files-to-product\">this guide<\/a>, so that they are displayed on the <strong>Featured spotlight<\/strong> section (<strong>or any other sections that allow the display of product files<\/strong>).<\/li>\n<\/ol>\n\n\n\n<p>By enabling the <strong>Show file list<\/strong> option in the <strong>Featured spotlight<\/strong> section, files will now automatically display on each product (if you have added them to that product):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"859\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files.png\" alt=\"\" class=\"wp-image-937\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files-1024x458.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files-1536x687.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-files-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"show-product-specifications\">Show product specifications<\/h2>\n\n\n\n<p>By default the <strong>Featured spotlight<\/strong> section will display like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"859\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section.png\" alt=\"\" class=\"wp-image-936\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-1024x458.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-1536x687.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>In order to add <strong>product specification<\/strong> information you have to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create the&nbsp;<strong>Product Specification<\/strong>&nbsp;metaobject by following&nbsp;<a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/specifications\/#create-specifications-metaobject\">this guide<\/a>. This will allow you to create entries with the&nbsp;<strong>specification name<\/strong>,&nbsp;<strong>value <\/strong>and&nbsp;<strong>icon<\/strong>.<\/li>\n\n\n\n<li>Create the&nbsp;<strong>Specifications<\/strong> metafield by following&nbsp;<a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/specifications\/#create-specifications-metafield\">this guide<\/a>. This is what will allow you to associate the&nbsp;<strong>Product Specification<\/strong>&nbsp;metaobjects you create to any of your products.<\/li>\n\n\n\n<li>Add&nbsp;<strong>specifications&nbsp;<\/strong>to your products by following&nbsp;<a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/specifications\/#add-specifications-to-product\">this guide<\/a>, so that they are displayed on the&nbsp;<strong>Featured spotlight<\/strong>&nbsp;section (<strong>or any other sections that allow the display of product specifications<\/strong>).<\/li>\n<\/ol>\n\n\n\n<p>By enabling the <strong>Show specifications<\/strong> option in the <strong>Featured spotlight<\/strong> section, specifications will now automatically display on each product (if you have added them to that product):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"858\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications.png\" alt=\"\" class=\"wp-image-938\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications-1024x458.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications-768x343.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications-1536x686.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-specifications-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"show-product-quick-description\">Show product quick description<\/h2>\n\n\n\n<p>By default the <strong>Featured spotlight<\/strong> section will display like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"859\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section.png\" alt=\"\" class=\"wp-image-936\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-1024x458.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-1536x687.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-section-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>In order to add <strong>product quick description<\/strong> information you have to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create the <strong>Quick Description<\/strong>&nbsp;metafield by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/quick-description\/#create-quick-description-metafield\">this guide<\/a>.<\/li>\n\n\n\n<li>Add a <strong>quick description <\/strong>to your products by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/quick-description\/#add-quick-description-to-product\">this guide<\/a>, so that they are displayed on the <strong>Featured spotlight<\/strong> section (<strong>or any other sections that allow the display of product quick description<\/strong>).<\/li>\n<\/ol>\n\n\n\n<p>By enabling the <strong>Show short description<\/strong> option in the <strong>Featured spotlight<\/strong> section, the quick description will now automatically display on each product (if you have added them to that product):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"860\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description.png\" alt=\"\" class=\"wp-image-940\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description-1024x459.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description-1536x688.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/featured-spotlight-quick-description-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"show-banner-image\">Show banner image<\/h2>\n\n\n\n<p>By default the <strong>Collection<\/strong> <strong>banner <\/strong>will display like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"859\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section.png\" alt=\"\" class=\"wp-image-941\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-300x134.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-1024x458.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-1536x687.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>In order to add a <strong>collection banner image<\/strong> you have to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create the <strong>Banner Image<\/strong>&nbsp;metafield by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/banner-image\/#create-banner-image-metafield\">this guide<\/a>.<\/li>\n\n\n\n<li>Add a <strong>banner image <\/strong>to your collections by following <a href=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/banner-image\/#add-banner-image-to-collection\">this guide<\/a>, so that they can be displayed on the <strong>Collection banner<\/strong> section.<\/li>\n<\/ol>\n\n\n\n<p>By enabling the <strong>Show collection image<\/strong> option in the <strong>Collection banner<\/strong> section, the respective collection image will display (if you have added one to that collection by following the instrucions above):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"861\" src=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image.png\" alt=\"\" class=\"wp-image-942\" srcset=\"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image.png 1920w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image-300x135.png 300w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image-1024x459.png 1024w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image-768x344.png 768w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image-1536x689.png 1536w, https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-content\/uploads\/2023\/05\/collection-banner-section-image-80x36.png 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-0dfbf163 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><\/div><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some sections of our theme require&nbsp;metafields&nbsp;and&nbsp;metaobjects to be setup in order to display specialized information, such as product file types, specifications,&nbsp;quick description, etc. Below you will find a guide on how to setup these metafields&nbsp;and&nbsp;metaobjects using a section of the theme as an example. Once you complete the setup for one section, all other sections [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,26],"tags":[],"class_list":["post-753","post","type-post","status-publish","format-standard","hentry","category-install-setup","category-theme"],"_links":{"self":[{"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/posts\/753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/comments?post=753"}],"version-history":[{"count":1,"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/posts\/753\/revisions"}],"predecessor-version":[{"id":943,"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/posts\/753\/revisions\/943"}],"wp:attachment":[{"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/media?parent=753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/categories?post=753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/odindesignthemes.com\/ragnokthemedocs\/wp-json\/wp\/v2\/tags?post=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}