Show Image metafield in EComposer

Please follow this article to learn what is metafield and how to create it first, then follow the steps below to display the Image from metafield to your page in EComposer:

Step 1: For example, I created a metafield with the “Image (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.

On the Content tab -> Metafield Source, choose Select from list, then scroll down to find and select the metafield you just created:

The image metafield will be shown directly in the EComposer’s editor to let you view and edit the style of it.

Or choose Custom Liquid in the Metafield Source, and use the code below (replace the orange code with your metafield) for further customization.

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

{{ product.metafields.custom.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 %}