Solved

Collection image through metafield

Cherub_Tandon
Visitor
2 0 2

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.

Accepted Solution (1)

Vinsinfo
Shopify Partner
181 61 55

This is an 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.

View solution in original post

Replies 3 (3)

Vinsinfo
Shopify Partner
181 61 55

This is an 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
Globetrotter
512 69 76

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Cherub_Tandon
Visitor
2 0 2

Worked. Thank you so much