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

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 }} の直下に追加。

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

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

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

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

よろしくお願いします。

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

{{ product.title }}

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

{{ product.title }}

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

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

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