Metafield Block
Updated 21 days agoThe Metafield Block lets you display additional product information stored in your Shopify metafields. This is useful when you want to show extra details like materials, care instructions, specifications, or any other custom content in a structured way.
You can use this section to:
-
Display custom product attributes (e.g., material, dimensions, ingredients)
-
Add detailed specifications or technical data
-
Show structured information that changes across products
-
Create a more scalable and automated content system
Under the “Settings” tab,
Display Settings
This controls how the metafield content is shown to users.
Style – Choose between:
-
Accordion – Expands within the page
-
Drawer – Opens as a separate panel or slide-out section
Accordion Open by Default – Turn this on or off depending on whether you want the content expanded automatically
Space Between – Adjust the spacing between metafield items for a cleaner layout
Text Content
This section controls the appearance of the heading and description.
Heading
This is the title users will see before opening the metafield content.
You can customize:
-
Font – Choose a font that matches your brand
-
Size/Weight – Adjust how bold or subtle the text appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Fine tune spacing between characters
-
Text Color – Choose a readable color
-
Capitalization – Set how the text appears
Description
This is the metafield content shown inside the block.
You can customize:
-
Font – Choose the font style
-
Size/Weight – Adjust size and readability
-
Line Height – Control spacing for better readability
-
Letter Spacing – Adjust spacing between characters
-
Text Color – Choose a color that ensures clarity
-
Capitalization – Set how the text appears
Left and Right Icon
You can add icons to make the block more visually clear and interactive.
-
Choose Icon – Select the icon of your choice
-
Icon Color – Choose a color that matches your design
Content Background
This controls the styling of the metafield content container.
-
Color – Set the background color
-
Radius – Adjust corner roundness
-
Padding – Control inner spacing
Content Border
This controls the border around the metafield content.
-
Color – Choose border color
-
Width – Adjust thickness
-
Sides – Select which sides should display the border
Background and Spacing
This controls the layout of the entire metafield block section.
Background:
-
Color – Set the section background color
-
Radius – Adjust corner roundness
-
Padding – Control spacing inside the section
-
Margin – Manage spacing outside the section
Border:
-
Color – Choose border color
-
Width – Adjust thickness
-
Sides – Select which sides should display the border
Under the “ Content” tab,
You can add and manage metafield items that will be displayed in this section.
Add Metafield Item
For each block, you can configure the following:
-
Title – Add a label that will be displayed as the heading (e.g., “Material”, “Care Instructions”)
-
Metafield Key – Enter the specific key of the metafield you want to display
-
Metafield Namespace – Add the namespace associated with that metafield
Add New Block
You can add multiple metafield blocks if you want to display different types of information.
Benefits:
-
Offers advanced product customization
-
Enables dynamic and scalable content management
-
Improves consistency across product pages
-
Improves operational efficiency for merchants
Related Articles
