# ヘッダーメニューのメガメニューにコレクションの画像を表示させたい

**URL:** <https://community.shopify.com/t/topic/344472>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [August 1, 2024, 5:56am UTC](https://community.shopify.com/t/topic/344472 "2024-08-01T05:56:43Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

クライアントの要望で、ヘッダーのメガドロップメニューにコレクションのサムネイル画像を表示させたいという技術的な質問です。

**現状の問題点：**
- 商品一覧ページのコードを流用して画像表示には成功
- しかし全ての項目に「全商品一覧」の画像が表示されてしまう
- コレクション別に画像を分けることができていない

**検討中のアプローチ：**
- メニューボタンに記載されているタグの値を使って、表示する画像を分岐させる方法を考えている
- 各ボタンには「タグでコレクションを絞り込む（オプション）」という項目が存在

コレクションごとに適切な画像を表示させるための実装方法を模索している段階で、具体的な解決策はまだ見つかっていない状況です。

<div class="post-metadata">

**Author:** ![\_2024](https://avatars.discourse-cdn.com/v4/letter/_/7993a0/32.png) [@\_2024](https://community.shopify.com/u/_2024)\
**Post date:** [August 1, 2024, 5:56am UTC](https://community.shopify.com/t/topic/344472/1 "2024-08-01T05:56:43Z")

</div>

クライアント希望により、メガドロップメニューの項目の隣にサムネ画像を載せたいのですが、

現状では商品一覧ページでコレクションの画像を表示させるためのコードをコピペする形で、

 ![スクリーンショット 2024-08-01 14.54.48.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/e/ae0e713b2663627a9847d7a52f546549aeceb951.png)

全商品一覧の画像を表示させることには成功しました。しかし、コレクション別に分けることができず、

画像が全て全商品一覧の物になってしまいます。

それぞれのメニューボタンには、以下の画像のように「タグでコレクションを絞り込む (オプション)」という項目があるため、

 ![スクリーンショット 2024-08-01 14.55.19.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/e/0/7e07965786fa87dcee5017884581bbca0badf988.png)

ここに記載のタグの値によって表示する画像を分岐できればと考えているのですが、  
突破口が見えずにいます。お手数をおかけしますが、上記の表示について何かヒントをいただければ幸いです。
