How to access image metafield in product.liquid

[madan_a]

I have added a few metafields to the image and I am trying to access it on product.liquid. Currently, I am just logging it. I wanted to know if there is a way to access it on the liquid page. What is the syntax?

[FrankMoore]

You can refer this article from Shopify https://help.shopify.com/en/manual/products/metafields#show-metafields-in-the-storefront

[madan_a]

Hi Frank,

I can access product metafields in the liquid but not the image metafields.

https://help.shopify.com/en/api/reference/products/product-image#metafield

[FrankMoore]

Can you give me a sample product URL (has metafields)?

[Rarify]

Did you ever resolve this?

I am also trying to assign and access image metafields for use in my storefront/theme code.

If I understand correctly, you are not trying to access product metafields. Rather, you are trying to access metafields associated with individual images. Those images may be associated with products.

[genevievem]

Metafield referencing a single image

You can access a metafield of type image using the following syntax :

product.metafields.my_metafield_of_type_image

It returns a media object which has properties such as id, media_type, alt...

Other image properties are available under : 

product.metafields.my_metafield_of_type_image.preview_image​

You'll get an image object which has properties such as src.

Metafield with multiple images

If your metafield accepts multiple images, use the value property to fetch them all:

{% assign medias = product.metafields.my_metafield_with_multiple_images.value %}
{% assign mediaCount = medias.count %}
{% for media in medias %}
     {{ media.id }}
{% endfor %}

Related:

If you're accessing product.images, omit the value property :

{% assign medias = product.images %}
{% assign mediaCount = medias.count %}
{% for media in medias %}
     {{ media.id }}
{% endfor %}