Show Image metafield in EComposer

After following this article to learn what is metafield and how to create it first, then follow the below steps:

Step 1: For example, I created a metafield with the “File” type to be able to upload the image.

Step 2: Open your Product in the Shopify admin to add the image to the metafield.

Step 3: Open the EComposer page editor to add a Metafield element to your page and use the code below (replace the orange code with your metafield)

This code is for the “One file” metafield type:

{{ product.metafields.custom.ecomposer_image.value  | img_url: '500x' | img_tag }}

Please use the code below for the List of files type:

{% assign datas = product.metafields.custom.ecomposer_image.value %}
{% for data in datas %}
{{data | image_url: width: '500x' | image_tag}}
{% endfor %}