Dawn 商品名の改行方法について

[YMD002]

Dawn テーマ（バージョン10.0.0）でショップを作成しております。

商品名の改行方法についてお伺いしたいです。

問題点：

商品名が長い場合は、改行を入れたいと思います。

商品名中に＜br＞も挿入してみましたが、＜br＞はそのまま商品名として表示されました。

ご存知の方教えていただけますか？

宜しくお願い致します。

[WEBUILD]

{{ product.title | escape }}

商品タイトルの出力部分が エスケープされていますので、このエスケープフィルターを外せばそのまま出力されそうです。

[YMD002]

WEBUILDさま

改行方法をご教示いただき誠にありがとうございます。

{{ product.title }}にしてみましたが、＜br＞が消えませんでした。

こちらのやり方が悪かったかもしれません、こちらでもう少し試してみます。

貴重なお時間をいただきありがとうございました。

[WEBUILD]

あとは登録する際にすでに変換されていないか確認ですね。
商品編集から <br>を入力して escapeを外したら、当方の環境では無事<br>が出力されました。

{%- when 'title' -%}
    <div class="product__title" {{ block.shopify_attributes }}>
        <h1>{{ product.title }}</h1>
        <a href="{{ product.url }}" class="product__title">
            <h2 class="h1">
                {{ product.title | escape }}
            </h2>
        </a>
     </div>

h2の方はdisplay:noneなので実際の表示には関係ありません。

[YMD002]

WEBUILDさま

ご丁寧に説明して頂きありがとうございます。

他の記事も参考にし、なんとか改行できるようになりました。

本当にありがとうございます！

[Jizo_Inagaki · Accepted solution]

https://community.shopify.com/c/shopify-%E3%82%A2%E3%83%97%E3%83%AA/%E5%95%86%E5%93%81%E7%AE%A1%E7%9...

上記のように過去に同種の質問が複数ありますので、コミュニティ内を探されることをお勧めします。

[YMD002]

Jizo_Inagakiさま

送って頂いた記事内容を参考にさせて頂き、ページ内の商品名とカート内の一覧の改行は全て実現ましたが、チェックアウト（カード情報入力）画面では＜br＞タグはそのまま表示されていて改行できませんでした。

修正対象ファイル名はCheckout、Shipping、Payment、Order summaryのどちらかになるかと思いますが、コード編集画面にて探してみましたが、ありませんでした。大変申し訳ございませんが、チェックアウト（カード情報入力）画面とお客さん宛の注文確認メール中の商品名の改行はどのファイルを修正するでしょうか？

よろしくお願い致します。

[Jizo_Inagaki]

該当ページ内の私の返答は半角スペースをbrタグに置換する方法であり、試されている方法とは違いますので返答しかねますが、方法としては該当の返答内に書いたことと同様です。

各メールテンプレート内の商品名を出力している部分を探して対応ください。

チェックアウトに関しては知見がないので実現可能性含めて把握していません。

以下などを参照してご自身で試すか、パートナーやエキスパートにご相談ください。

https://shopify.dev/docs/apps/checkout/build-options

以上ですが、個人的には以下のような理由からShopifyに限らず商品名やタイトルにHTMLタグを入れることは推奨しません。

• Shopify以外を含めたいろいろな場所で出力される可能性が高い
• 出力時にHTMLタグがエスケープされる可能性が高い

実際にチェックアウトで意図しない形になっているのであれば、問題が起きやすいことをお分かりいただけるかと思います。

[YMD002]

Jizo_Inagaki　さま

ご返信いただきありがとうございます。

全て完璧に改行させるのはやはり難しく、自分の力でできそうでもないので、今回は諦めます。貴重なお時間を頂き、本当にありがとうございました！