How to show image saved in collection's metafield?

Shopify Discussion
1

Hi all,

I loves this community very much.

Today, I would like to ask about metafield.

In Shopify collection, we can save only one image.

But I would like to save an additional image for this collection.

How can I show this image on frontend?

To do this, I defined custom metafiled named HeroImage.

{{ collection.metafields.custom.heroimage }}

This shows on frontend as following type:

gid://shopify/MediaImage/35257413206299

In general, we show collection image using following script:

{{ collection.image }}

This shows on frontend as following type:

collections/8ec61ed10d3f45349fbfcf854cc195dc-Max.jpg

Thank you in advance.

2

Hi @Nazar8

you can add following code
<img src=“{{ collection.metafields.custom.image | img_url:“master” }}” alt=“{{ collection.metafields.custom.image.alt }}”/>

Thanks

3

Hi @Nazar8

This is David at SalesHunterThemes.
Follow your code above, I see you set metafield for collection with key is: heroimage
In this case you can use this code to generate the image from metafield
I also test this code on my store and it shows normal

{{ collection.metafields.custom.heroimage | image_url: width: collection.metafields.custom.heroimage.width | image_tag: widths: '165, 360, 535, 750, 1070, 1500' }}
4

Thank you for your reply.

I already solved that.

The main thing I didn’t know is the term of Liquid Filter.

{% assign heroimage = collection.metafields.custom.heroimage %}
{% assign cimage = collection.image %}
{% if collection.metafields.custom.heroimage %}
  {% assign cimage = heroimage %}
{%- endif -%}
5

Thank you for your reply.

I would like to introduce this code.

I can read this from this post: https://www.identixweb.com/how-to-display-images-using-shopify-metafields-in-your-store

{{ collection.metafields.custom.heroimage | img_tag }}

Thank you again.