Show Text from Metafield in EComposer
In this guide, we will show you how to create a Shopify metafield, add your content, and then display that text on a page built with EComposer using custom code or the available options.
1. Create Metafields in Shopify
To create one new metafield, please follow the steps below:
Step 1: In the Shopify admin, navigate to Settings -> Metafields and Metaobjects -> Products to create your metafield.
Click Add definition to create a new metafield or metaobject.
Enter the Name, and choose the type for your metafield. With a metafield for text, you can choose Single line text, Multi-line text, or Rich text type.
Step 2: Enter the metafield content. Go to the specific product, collection, page, or other resource where you want to add dynamic content -> Enter the input data for that specific item. This data will be dynamically pulled and displayed on the storefront.
2. Display the Metafield in EComposer
After creating the metafield, you can display its content from Shopify on your EComposer page in two ways: by using custom code or by using the built-in Dynamic Content option.
2.1 Using metafield code
Open your page in EComposer, and you can drag and drop Metafield element to the position you want to show it.
Next step, open your metafield in Shopify admin to copy the metafield key.
Paste your metafield code to replace the red bold text with your metafield in the code below. This is the code for the text type:
{{ product.metafields.custom.delivery_time | metafield_tag }}Result:
Note: You can use the same format code below for all the metafield Text types
2.2 Using the Dynamic content option (No-Code Method)
Dynamic Source allows merchants to connect input settings to data coming from metafield types such as Single line Text/ Multi-line texts/ Rich text type. We don’t support Product list, URL, File type, or Metaobjects… only text types. Dynamic Source updates automatically when metafield configurations change.
Drag and drop a Text/ Heading element from the left sidebar.
Click the dynamic source icon.
This will display a dropdown list of the metafield names associated with the current product. Select the metafield name you defined in Step 1, choose the Type, and then click Select.
Please note that dynamic content does not appear in the Editor view, so you’ll need to publish the page to see the result. You can also refer to the video below for a step-by-step guide on how to insert a dynamic source from a Metafield.
If you’d like to insert the content from MetaObject, you can refer to the video below:
Result: the dynamic data is displayed correctly on the live page. Adding more input data to other products to have different heading text per product.
