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 outputs a dropdown list of the metafield names associated with the current product -> Select the metafield name you defined earlier in step 1 -> Select Type -> click Select

Dynamic content does not show up in Editor view, so let’s publish the page to see the result.

Result: the dynamic data is displaying correctly on the live page. Adding more input data to other products to have different heading text per product.