# コレクションに説明文を入れたい

**URL:** <https://community.shopify.com/t/topic/93440>\
**Category:** 技術的なQ＆A\
**Created:** [January 23, 2022, 1:42am UTC](https://community.shopify.com/t/topic/93440 "2022-01-23T01:42:00Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

目的：Supplyテーマのトップページのコレクション一覧で、画像付近に商品説明の一部を表示し、文字数を3行程度に調整したい。添付画像で表示位置が示されている。

対応方法：管理画面で「アクション」→「コードの編集」を開く。Snippetsフォルダのproduct-grid-item.liquidで{{ product.title }}を見つけ、その直下に説明文出力コードを追記。

技術要点：Liquidのフィルタを使用。
- strip_html：説明文からHTMLタグを除去。
- truncate: 100：説明文を100文字に切り詰め。数値を変更すれば表示文字数を調整可能。

記述例：{{ product.description | strip_html | truncate: 100 }} を {{ product.title }} の直下に追加。

結果：実装は正常に反映。依頼者が動作確認済みで、文字数調整も把握。議論は解決済み。

<div class="post-metadata">

**Author:** ![pokecam01](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@pokecam01](https://community.shopify.com/u/pokecam01)\
**Post date:** [January 23, 2022, 1:42am UTC](https://community.shopify.com/t/topic/93440/1 "2022-01-23T01:42:00Z")

</div>

Supplyテーマを使ってトップページにコレクションを設定すしています。商品が一覧で並びますが、画像の⇔部分に説明文の一部を表示させたいです。どのようにすればいいでしょうか？

表示する文字数は三行くらいに調整したいです。

方法をご存じの方がいらっしゃれば教えていただきたいです。

よろしくお願いします。

> ![1642901476319.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/0/9007acce2fdaba392c94609c1a53517d701e889b.jpeg)

---

<div class="post-metadata">

**Author:** ![Anonymous\_5168086324d6fa4637c896de39bb248c](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_5168086324d6fa4637c896de39bb248c/32/28647_2.png) [@Anonymous\_5168086324d6fa4637c896de39bb248c](https://community.shopify.com/u/Anonymous_5168086324d6fa4637c896de39bb248c)\
**Post date:** [January 24, 2022, 3:29am UTC](https://community.shopify.com/t/topic/93440/2 "2022-01-24T03:29:12Z")

</div>

管理画面にログインして、「アクション」→「コードの編集」と進み、Snippetsフォルダ内のproduct-grid-item.liquidファイルを選択してください。

{{ product.title }}

というコードを探して、その下に以下のようにコードを追記して保存してください。

```markup

{{ product.title }}

{{ product.description | strip_html | truncate: 100 }}

```

100という数字が表示される文字数を指定しています。ここの数字を変更することで、任意の文字数を表示できます。

---

<div class="post-metadata">

**Author:** ![pokecam01](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@pokecam01](https://community.shopify.com/u/pokecam01)\
**Post date:** [January 24, 2022, 3:50am UTC](https://community.shopify.com/t/topic/93440/3 "2022-01-24T03:50:20Z")

</div>

教えていただいた通り入力してみました。  
うまく反映できました！ありがとうございます!!  
数値の設定方法も教えていただき助かりました！