Dawn テーマ（バージョン10.0.0）でショップを作成しております。
商品名の改行方法についてお伺いしたいです。
問題点：
商品名が長い場合は、改行を入れたいと思います。
商品名中に＜br＞も挿入してみましたが、＜br＞はそのまま商品名として表示されました。
ご存知の方教えていただけますか？
宜しくお願い致します。
Topic summary
Dawn テーマ（バージョン10.0.0）で商品名に改行を入れる方法についての質問です。
問題点：
- 商品名に
<br>タグを挿入しても、そのまま表示されてしまい改行されない
提案された解決策：
{{ product.title | escape }}から escape フィルターを外して{{ product.title }}にする方法が提案されました- 商品編集画面で
<br>を入力し、テンプレートで escape を外すことで改行が実現できることが確認されました
残された課題：
- ページ内やカート内の商品名は改行できたが、チェックアウト画面（カード情報入力画面）では
<br>タグがそのまま表示されてしまう - 注文確認メール内の商品名改行についても対応方法が不明
最終的な結論：
- チェックアウト画面での完全な改行実現は難しく、質問者は今回は諦めることにしました
- HTML タグを商品名に入れることは、Shopify 外でも出力される可能性やエスケープされる可能性があるため、個人的には推奨されないとの意見も示されました
{{ product.title | escape }}
商品タイトルの出力部分が エスケープされていますので、このエスケープフィルターを外せばそのまま出力されそうです。
1 Like
WEBUILDさま
改行方法をご教示いただき誠にありがとうございます。
{{ product.title }}にしてみましたが、＜br＞が消えませんでした。
こちらのやり方が悪かったかもしれません、こちらでもう少し試してみます。
貴重なお時間をいただきありがとうございました。
https://community.shopify.com/post/713284
上記のように過去に同種の質問が複数ありますので、コミュニティ内を探されることをお勧めします。
あとは登録する際にすでに変換されていないか確認ですね。
商品編集から
を入力して escapeを外したら、当方の環境では無事
が出力されました。
{%- when 'title' -%}
# {{ product.title }}
##
{{ product.title | escape }}
h2の方はdisplay:noneなので実際の表示には関係ありません。
1 Like
WEBUILDさま
ご丁寧に説明して頂きありがとうございます。
他の記事も参考にし、なんとか改行できるようになりました。
本当にありがとうございます！
送って頂いた記事内容を参考にさせて頂き、ページ内の商品名とカート内の一覧の改行は全て実現ましたが、チェックアウト（カード情報入力）画面では＜br＞タグはそのまま表示されていて改行できませんでした。
修正対象ファイル名はCheckout、Shipping、Payment、Order summaryのどちらかになるかと思いますが、コード編集画面にて探してみましたが、ありませんでした。大変申し訳ございませんが、チェックアウト（カード情報入力）画面とお客さん宛の注文確認メール中の商品名の改行はどのファイルを修正するでしょうか？
よろしくお願い致します。
該当ページ内の私の返答は半角スペースをbrタグに置換する方法であり、試されている方法とは違いますので返答しかねますが、方法としては該当の返答内に書いたことと同様です。
各メールテンプレート内の商品名を出力している部分を探して対応ください。
チェックアウトに関しては知見がないので実現可能性含めて把握していません。
以下などを参照してご自身で試すか、パートナーやエキスパートにご相談ください。
https://shopify.dev/docs/apps/checkout/build-options
以上ですが、個人的には以下のような理由からShopifyに限らず商品名やタイトルにHTMLタグを入れることは推奨しません。
- Shopify以外を含めたいろいろな場所で出力される可能性が高い
- 出力時にHTMLタグがエスケープされる可能性が高い
実際にチェックアウトで意図しない形になっているのであれば、問題が起きやすいことをお分かりいただけるかと思います。
1 Like
Jizo_Inagaki さま
ご返信いただきありがとうございます。
全て完璧に改行させるのはやはり難しく、自分の力でできそうでもないので、今回は諦めます。貴重なお時間を頂き、本当にありがとうございました！