How can I display collection images using metafields in Shopify blog posts?

[Cherub_Tandon]

Hi all,

I hope everyone doing good.

Today, I would like to ask about metafield.

In Shopify blog posts (articles),  I want to show some list of collections.

How can I show this image on frontend?

To do this, I defined custom metafiled named collectionforblog.

{% if article.metafields.custom.collectionforblog != blank %} <h3>Shop Now</h3>{{ article.metafields.custom.collectionforblog }} {% endif %}

This results to me : 

["gid://shopify/Collection/60037693482","gid://shopify/Collection/265154920509","gid://shopify/Collection/60037627946","gid://shopify/Collection/273550835773","gid://shopify/Collection/60037595178","gid://shopify/Collection/267436458045","gid://shopify/Collection/65935736874"]

How to I fetch the image and title of collection?

Thank you in advance.

[Vinsinfo · Accepted solution]

@Cherub_Tandon Please use the below shopify variables to fetch the image and title of collection. Let me know whether it is helpful for you.

{% if article.metafields.custom.collectionforblog != blank %}
  <h3>Shop Now</h3>
  {% for collection in article.metafields.custom.collectionforblog.value %}
    {% if collection %}
        Collection Image - <img src="{{ collection.image | image_url: width: 750 }} width="{{ collection.image.width }}" height="{{ collection.image.height }}"" alt="{{ collection.title }}">
        Collection Title - {{ collection.title }}
    {% endif %}
  {% endfor %}
{% endif %}

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[PageFly-Theodor]

Hi @Cherub_Tandon ,
This is Theodore from PageFly - Shopify Page Builder App.

Instead of directly displaying the list of collection IDs, you need to loop through them to access each collection's details.

{% if article.metafields.custom.collectionforblog != blank %}
  <h3>Shop Now</h3>
  <ul>  {% for collection_id in article.metafields.custom.collectionforblog %}
      {% assign collection = collections | find: collection_id %}  {% if collection %}
        <li>
          <a href="{{ collection.url }}">  <img src="{{ collection.image | image_url: width=250 }}" alt="{{ collection.title }}">  {{ collection.title }}  </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}

Best regards,
Theodore | PageFly

[Cherub_Tandon]

Worked. Thank you so much