[shopify]messagingのHTMLメールのカスタムLiquidでレスポンシブ自作

簡単な話である。

やりたいこと

テーマにもよるのかもしれないけど。

Shopify messagingでHTMLメールを作成する。
「テキスト付き画像」を使う。

左右の幅を調整したかったり、ボタンが邪魔だったりした。
でもどっちもいじれない。

「カスタムLiquid」だとソースコードベタ打ちができる。
これで何とかしようという話。

<style>でやっていく

例えばこんな感じ。

入力エリアにcssとhtmlを突っ込む。

<style>
    table.custom202607 tr{
      background: blue;
    }
  @media screen and (max-width:480px) {
    table.custom202607{
      display: block;
      background: red;
    }
    table.custom202607 tr{
      display: block;
    }
    table.custom202607 th{
      background: red;
    }
  }
</style>
<table class="custom202607">
  <tr>
    <th>aaaaaaa</th>
    <td>eeeeeeeeee</td>
  </tr>
</table>

なんか、messagingの仕様なのか<style>で書いた内容はインラインとして移してくれてるっぽい。それでいて@mediaの内容もちゃんと効いてる。

既存のセクションでレスポンシブのものがあるけど、これがそうなっていた。
だからこっちでもと思って入れてみたらちゃんと動作した。

既存セクションの条件分岐は480pxなので、これを守っておけば大丈夫っぽい。

編集画面だと表示がおかしい感じになりがち。
プレビューだとちゃんと見えるけど、テスト送信するのが確実。

プレビューで動作が確認できない場合は、一旦編集を終了して再度編集画面にアクセスしてみる。