通知メールにスタイルをcssファイルから追加したい

通知メールにオリジナルのスタイルを追加したいです。

•メールのテンプレートには、下記cssファイルが読み込まれているので編集したいのですが方法がわかりません。編集は可能なのでしょうか?

•またそれが無理な場合、新規でCSSファイルを作りそれをテンプレートに読み込ませたいのですがそれは可能でしょうか?
可能な場合、どこにファイルを作れば良いか、読み込ませるコード教えていただけないでしょうか?

•また上記の方法がどちらも無理な場合、インラインスタイルを利用する以外の方法はあるでしょうか?

ご回答のほどよろしくお願いいたします。

下記のヘルプの「インラインCSSを使用したスタイルメールテンプレート」に情報があります。

https://help.shopify.com/ja/manual/orders/notifications/edit-template

インラインCSSを使用して、標準スタイルシートを上書きし、メールテンプレートのスタイルを設定することができます。標準スタイルシートはです。テンプレートエディタのテンプレートには自動的にスタイルタグがインライン展開されます。ここにメディアクエリを保存し、迅速かつ簡単にメールを作成することができます。外部のスタイルシートやテーマアセットの組み込まれたアップロード済みのスタイルシートはインライン展開されません。そのためCSSをデザインする際は、テンプレートの部分に

linkタグで外部スタイルシートを読み込めそうではありますが推奨されておらず、head内へのインラインCSSが推奨されています。

なお、試しましたら一応以下のようなことはできました。

  • shop.metafieldsにCSSの記述を作成(例えばshop.metafields.hoge.fugaに「*{background:red;}」と入力)
  • メールテンプレート内のheadに{{ shop.metafields.hoge.fuga }}のように記載

上記状態でプレビューすると背景が赤になっていると思います。

この方法であればCSSはメタフィールドで一括管理できますが、やって良いことなのか、運用しやすいのかに関してはあまり自信はありません。

2 Likes

jizo様
早速のご回答と、新しい方法についてありがとうございました!
Metafieldsについては全く想定してなかったので勉強になりました。

今回は念のため推奨方法で編集して、そのうちCSSファイルを追加できるようになるのを期待しておきます。