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

解決済
yokiyoki
観光客
5 0 0

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

•メールのテンプレートには、下記cssファイルが読み込まれているので編集したいのですが方法がわかりません。編集は可能なのでしょうか?
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">

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

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

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

0 件の「いいね!」
Jizo_Inagaki
航海者
392 137 412

成功

下記のヘルプの「インライン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デザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
yokiyoki
観光客
5 0 0

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

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

0 件の「いいね!」