通知メールのデザイン変更方法が話題。主な論点は、既存の/assets/notifications/styles.cssを編集できるか、または新規CSSファイルを読み込めるか、という点です。
代替案として、shop.metafieldsにCSS文字列を保存し、テンプレートのhead内で<style>{{ shop.metafields... }}</style>のように差し込む方法が紹介されました。プレビュー上では動作したものの、運用面や適切性には不確実さが残るとの補足があります。
最終的に、質問者は今回は推奨どおりインラインCSSで編集する方針を選択。CSSファイルの追加・読込については明確な実現方法は示されず、将来的な対応に期待する形で締めくくられています。
通知メールにオリジナルのスタイルを追加したいです。
•メールのテンプレートには、下記cssファイルが読み込まれているので編集したいのですが方法がわかりません。編集は可能なのでしょうか？
•またそれが無理な場合、新規でCSSファイルを作りそれをテンプレートに読み込ませたいのですがそれは可能でしょうか？
可能な場合、どこにファイルを作れば良いか、読み込ませるコード教えていただけないでしょうか？
•また上記の方法がどちらも無理な場合、インラインスタイルを利用する以外の方法はあるでしょうか？
ご回答のほどよろしくお願いいたします。
下記のヘルプの「インラインCSSを使用したスタイルメールテンプレート」に情報があります。
https://help.shopify.com/ja/manual/orders/notifications/edit-template
インラインCSSを使用して、標準スタイルシートを上書きし、メールテンプレートのスタイルを設定することができます。標準スタイルシートはです。テンプレートエディタのテンプレートには自動的にスタイルタグがインライン展開されます。ここにメディアクエリを保存し、迅速かつ簡単にメールを作成することができます。外部のスタイルシートやテーマアセットの組み込まれたアップロード済みのスタイルシートはインライン展開されません。そのためCSSをデザインする際は、テンプレートの部分に
linkタグで外部スタイルシートを読み込めそうではありますが推奨されておらず、head内へのインラインCSSが推奨されています。
なお、試しましたら一応以下のようなことはできました。
上記状態でプレビューすると背景が赤になっていると思います。
この方法であればCSSはメタフィールドで一括管理できますが、やって良いことなのか、運用しやすいのかに関してはあまり自信はありません。
jizo様
早速のご回答と、新しい方法についてありがとうございました！
Metafieldsについては全く想定してなかったので勉強になりました。
今回は念のため推奨方法で編集して、そのうちCSSファイルを追加できるようになるのを期待しておきます。