下記のヘルプの「インラインCSSを使用したスタイルメールテンプレート」に情報があります。
https://help.shopify.com/ja/manual/orders/notifications/edit-template
インラインCSSを使用して、標準スタイルシートを上書きし、メールテンプレートのスタイルを設定することができます。標準スタイルシートは<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">です。テンプレートエディタのテンプレートには自動的にスタイルタグがインライン展開されます。ここにメディアクエリを保存し、迅速かつ簡単にメールを作成することができます。外部のスタイルシートやテーマアセットの組み込まれたアップロード済みのスタイルシートはインライン展開されません。そのためCSSをデザインする際は、テンプレートの<head>部分に<style>タグを含めることをおすすめします。
linkタグで外部スタイルシートを読み込めそうではありますが推奨されておらず、head内へのインラインCSSが推奨されています。
なお、試しましたら一応以下のようなことはできました。
- shop.metafieldsにCSSの記述を作成(例えばshop.metafields.hoge.fugaに「*{background:red;}」と入力)
- メールテンプレート内のheadに<style>{{ shop.metafields.hoge.fuga }}</style>のように記載
上記状態でプレビューすると背景が赤になっていると思います。
この方法であればCSSはメタフィールドで一括管理できますが、やって良いことなのか、運用しやすいのかに関してはあまり自信はありません。
Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
