Show Text from Metafield in EComposer

Step 1: Define Metafields 

Navigate to Settings > Metafields and Metaobjects in your Shopify admin.

Click Add definition to create a new metafield or metaobject.

Configure the definition, including its name, namespace and key, description, and importantly, the content type (Single line text/ Multi-line text/ Rich text).

Step 2: Fill in 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.

Step 3. Display the Metafield on the frontend

Displaying Shopify metafield content on the storefront can be done in two main ways, depending on whether you’re comfortable editing code or prefer a no-code approach.

3.1 Using metafield code

Go back to the EComposer Editor -> On a Product template, you can drag and drop Metafield element.

Next step, go back to the Shopify backend > Settings > Metafield option > Products metafiled definition > Copy the value below:

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

3.2 Using Dynamic content option (No-Code Method)

Dynamic Source allow 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.