# コレクションリストの説明について

**URL:** <https://community.shopify.com/t/topic/107266>\
**Category:** 技術的なQ＆A\
**Created:** [March 17, 2022, 8:18am UTC](https://community.shopify.com/t/topic/107266 "2022-03-17T08:18:07Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

目的: Shopifyテーマ「Debut」で、コレクションページのヒーロー画像内にタイトルだけでなく説明文も重ねて表示したい。現状はタイトルは画像内、説明文は画像下に表示。

提案された解決策:
- テンプレートファイル collection-template.liquid の説明文表示コード（50〜54行目）を、コレクション名を出力する箇所（39〜42行目）の直下へ移動。
- その上でCSSでレイアウト/タイポグラフィを調整し、添付画像2の見た目に寄せる。

動作条件と例外:
- 画像と説明は、それぞれ入力がある場合のみ表示。
- コレクション画像がない場合は、テーマのデフォルト挙動として見出し直下に説明文が表示（{% else %}の分岐）。

補足: 手順を示すコードスクリーンショットが添付されているが、要点は上記のコード移動とCSS調整。

状況: 明確な完了報告はなく、提示手順を実装すれば解決できる見込み。

<div class="post-metadata">

**Author:** ![Fragrance1](https://avatars.discourse-cdn.com/v4/letter/f/53a042/32.png) [@Fragrance1](https://community.shopify.com/u/Fragrance1)\
**Post date:** [March 17, 2022, 8:18am UTC](https://community.shopify.com/t/topic/107266/1 "2022-03-17T08:18:07Z")

</div>

コレクションを作成し、タイトル、説明、コレクション画像を設定しました。

コレクションページにいくと添付画像１のように、コレクション画像内にタイトル、画像下に説明（「あああ…」）が表示されます。

こちらを添付画像２のようにコレクション説明も画像内に表示させたいです。

コードをいろいろと編集してみたのですがうまくいかず困っております。

ご教示ください。

コレクション全てに画像と説明がない場合もあります。

テーマ：Debut

 ![添付画像１.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/0/e0a3480bf2b26466bfb172356c831310d56f211b.png)

 ![添付画像２.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/d/a/0dafdfe6bed666005f535f124dc3faaea3cf8635.png)

---

<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:** [March 25, 2022, 2:22am UTC](https://community.shopify.com/t/topic/107266/2 "2022-03-25T02:22:59Z")

</div>

一例ですが、説明文を表示するコードをコレクション名の下に移動させることで、画像内にコレクションの説明文を表示できます。

具体的には、collection-template.liquid 50~54行目が入力があった場合に説明文を表示させるコードですので、39~42行目にあるコレクション名の下に移動させます。

 ![スクリーンショット 2022-03-25 11.07.37.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/d/9/9d9042780a4ded0c50c7463f16d1f47d7dc03ab7.png)

あとはCSSでいただいている添付画像２のような見た目に調整します。

画像と説明はどちらも入力があった場合のみ表示されます。

なお、コレクション画像がない場合はテーマのデフォルトで見出しのすぐ下に説明文が出るようになっています。({% else %}以降の内容が表示されます)

 ![スクリーンショット 2022-03-25 11.15.05.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/9/298143118393228e20d81fe67460e153bf8c5033.png)

ご参考になれば幸いです。
