商品管理で商品のタイトルを入力する際には、1行で入力するだけですが、コレクションページでその商品を見るときれいな形で改行が出来ていません。どの様にすれば、上手く改行が出来ますでしょうか？
例：タイトル入力画面 → 〇〇〇〇 ◆◆◆◆ ▲▲▲▲
希望コレクションページ表示画面 ↓
〇〇〇〇
◆◆◆◆
▲▲▲▲
AI-generated summary
商品管理のタイトル欄では1行入力しかできず、コレクションページで商品名を任意の位置で改行して整えて表示したい、という相談。添付画像は管理画面と希望する表示例の比較に使われている。
提案された方法は主に2つ。
- 商品名に
<BR>を直接入れる方法：一覧上では改行できるが、カート追加時の通知で<BR>がそのまま文字として表示される問題が出た。 - テーマの Liquid テンプレートで
{{ product.title }}にreplaceフィルターを追加し、半角スペースを改行タグに置換する方法：商品詳細ページでは改善し、カート通知の<BR>表示問題も解消した。
その後、商品一覧では改行されないことが判明。原因は、修正が適用されたのが一部テンプレートのみだったためで、商品一覧を表示している別テンプレート側の {{ product.title }} にも同様の変更を入れる必要があると案内された。
結論として、完全解決はテーマ側の複数箇所修正が前提で、議論は実質的に「該当テンプレートを個別に修正する」方向でまとまっている。
こちら試してみたのですが、カートに入った際の通知上で
が表示されたままになります。
カート内では表示されないのですが、解決方法はありますか？
横から失礼します。
あまりお勧めできる方法ではないように思いますが、試したらできたので一応記載してみたいと思います。
{{ product.title }}
product-template.liquidなどで商品名を出力している場所に上記の記述があると思います。
それを以下のように変更します。
{{ product.title | replace: ' ' ,'
'}}
上記は「商品名に含まれる半角スペースを改行タグに置換する」という意味になります。
つまり改行したい箇所に半角スペースを入れることで改行が可能になります。
問題点としては、このコードでは半角スペースが全て改行タグに置換されてしまうという点です。
役に立たない情報でしたら申し訳ありません。
お忙しいところご丁寧に回答頂きありがとうございます。
カート通知での表記は無くなりました。
しかし商品一覧時の改行は改善出来ませんでした。
→商品単体のページでは改行されています。
確認いただきありがとうございます。
前述のコードは記載した箇所にしか効果がないものです。
そのため、商品一覧を表示しているテンプレートを探していただき、{{ product.title }}を探して同様にフィルターを追加していただければご要望の形になるかと思います。
ご丁寧にありがとうございます。