# コレクションページのサムネイルの下にメタフィールド

**URL:** <https://community.shopify.com/t/topic/370615>\
**Category:** 技術的なQ＆A\
**Created:** [November 1, 2024, 8:16am UTC](https://community.shopify.com/t/topic/370615 "2024-11-01T08:16:09Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawn15テーマを使用しているユーザーが、コレクションページの商品サムネイル下（商品名の上）に、商品メタフィールドで選択したバッジ画像を表示させたい質問を投稿。

**技術的な要件:**
- `div class="card__information"` の直下に画像を挿入
- メタフィールド名は `product.metafields.custom._baro_collection`
- HTML/CSSの編集は可能だが、Liquidは不慣れ

**提案された解決策:**
回答者が以下のLiquidコードを提示:
```
{% if product.metafields.custom._baro_collection %}
    <p class="baro"><商品メタフィールドの画像></p>
{% endif %}
```

画像サイズは400×40ピクセルを想定。質問者は追加の確認（どのテンプレートに追加すべきか）を行っており、**議論は継続中**。

<div class="post-metadata">

**Author:** ![muu5235](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/muu5235/32/406756_2.png) [@muu5235](https://community.shopify.com/u/muu5235)\
**Post date:** [November 1, 2024, 8:16am UTC](https://community.shopify.com/t/topic/370615/1 "2024-11-01T08:16:09Z")

</div>

Dawn15を利用しています。  
コレクションページに表示される各商品のサムネイルの下に（＝商品名の上に）、商品メタフィールドで選択した画像を表示させたいと思っています。バッジのような横長の画像です。

コレクションページのHTMLソースを確認したところ、div class=“card\_\_information” の直下に

下記の太字の部分が表示されるのが理想です。

```auto
<div class="card__information">
　<p class="baro">商品メタフィールドの画像</p>
<h3 class="card__heading">

```

メタフィールドの名前は、product.metafields.custom.\_baro\_collection です。  
当方、HTMLとCSSは編集可能ですが、liquidはほとんどわかりません。

どのテンプレートにどんなソースを加えれば良いか、ご教示いただけますと幸いです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [November 1, 2024, 8:48am UTC](https://community.shopify.com/t/topic/370615/2 "2024-11-01T08:48:40Z")

</div>

ご質問拝見しました。

以下コードで実装が可能かと思います！

```markup
{% if product.metafields.custom._baro_collection %}
    
        
    

{% endif %}

```

400\*400の部分のサイズを適宜調子絵していただければと思います！

ご参考にしていただけますと幸いです！

なにかご質問があれば、お気軽にご相談ください。  
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![muu5235](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/muu5235/32/406756_2.png) [@muu5235](https://community.shopify.com/u/muu5235)\
**Post date:** [November 1, 2024, 9:01am UTC](https://community.shopify.com/t/topic/370615/3 "2024-11-01T09:01:17Z")

</div>

ご返答ありがとうございます。

ご提示いただきましたソースは、どのテンプレートに追加すれば良いのでしょうか？