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

Shopify Discussion
, ,

Topic summary

Issue: A blog article metafield meant to list collections was outputting raw collection GIDs (global IDs), not usable details like title/image.

Key guidance:

  • If the metafield is a list of collection references, iterate over article.metafields.custom.collectionforblog.value to get actual Collection objects. From each, output collection.title and collection.image.
  • If only IDs are returned, loop through them and resolve each to a collection, then render its details. One example showed assigning a collection per ID before printing the title.

Notes:

  • “Metafield” = custom field attached to content (here, an article). “Collection” = a product group. GIDs indicate you’re seeing raw references; using .value returns objects you can access (title, image).
  • Code snippets are central to understanding and implementation.

Outcome: The looping solution worked for the requester, confirming collections can be displayed with titles (and images if accessed from collection.image). Status: Resolved; no remaining questions.

Summarized with AI on January 2. AI used: gpt-5.
1

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 %}

Shop Now

{{ 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.

1 Like
2

@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 %}
  ### Shop Now
  {% for collection in article.metafields.custom.collectionforblog.value %}
    {% if collection %}
        Collection Image - 
        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.

3

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 %}
  ### Shop Now
    {% for collection_id in article.metafields.custom.collectionforblog %}
      {% assign collection = collections | find: collection_id %}  {% if collection %}
        - {{ collection.title }}  
        
      {% endif %}
    {% endfor %}
  

{% endif %}

Best regards,
Theodore | PageFly

4

Worked. Thank you so much

1 Like