メール設定

管理画面[ Welcart Shop ] > [ カート離脱通知設定 ]

メール設定

項目説明
メール配信の状態現在メール送信機能が稼働しているかどうかが表示されます（オン・オフの切り替えは「基本設定」タブから）。
配信タイミングカート離脱から何時間後にメールを送るかを選択します（1時間後・6時間後・10時間後・24時間後）。
メール件名送信されるメールの件名を入力します。
メール形式テキスト形式かHTML形式かを選択します。
メール本文メール本文を入力します。

メール形式の選択（テキスト vs HTML）

形式見た目設定の難しさ向いているケース
テキスト文字だけのシンプルなメールかんたんすぐに使い始めたい・シンプルなメールで十分
HTMLボタン・色・表組みなどデザインされたメール少し手間がかかるブランドイメージを統一したい・購買意欲を高めたい

どちらを使えばいいか迷ったら

まずは「テキスト形式」で運用を始めることをお勧めします。HTMLメールは視覚的な訴求力が高い一方、テンプレートの作成に少し手間がかかります。テキスト形式でも十分な効果が期待できます。

テキストメール形式

テキスト形式で使えるプレースホルダー

タグ置き換わる内容
{customer_name}お客様名
{recovery_url}カート復元URL（必須）
{item_name}商品名
{item_quantity}数量
{cart_total}商品代金の小計（送料・税は含まない）。合計行に税・送料の注記を入れる場合は、ショップの税設定に合わせてテンプレート内に固定テキストで追記してください。
{optout_url}配信停止URL

テキストメール 本文サンプル

{customer_name} 様

こんにちは。

カートに商品が残ったままになっていることにお気づきでしょうか。
よろしければ、下記よりお買い物を再開してください。
（リンクをクリックすると、商品がそのままカートに復元されます）

▼ カートを確認して購入を完了する
{recovery_url}

------------------------------
・{item_name}（数量：{item_quantity}）

合計金額：{cart_total}
※ 実際のご請求金額と異なる場合があります。
------------------------------

ご不明な点がございましたら、このメールへご返信いただくか、
ショップページよりお問い合わせください。

またのご利用をお待ちしております。

──────────────────────────────
このメールの配信停止はこちら：
{optout_url}
──────────────────────────────

HTMLメール形式

HTMLメールで使えるプレースホルダー

タグ置き換わる内容
{customer_name}お客様の名前（例：山田 太郎）
{recovery_url}カートを復元するためのURL（必須）
{cart_total}商品代金の小計（送料・税は含まない）
{optout_url}配信停止のためのURL
{item_loop}〜{/item_loop}★商品ごとに繰り返すブロック（HTMLモード専用）
{item_name}商品名（{item_loop}ブロック内でのみ使用可）
{item_quantity}数量（{item_loop}ブロック内でのみ使用可）

{item_loop} タグについて

{item_loop} と {/item_loop} で挟まれた部分が、カート内の商品数だけ繰り返し表示されます。

テンプレートに書く内容：

{item_loop}
<tr>
  <td>{item_name}</td>
  <td>{item_quantity}</td>
</tr>
{/item_loop}

↓ 展開後（商品Aと商品Bがある場合）：

<tr>
  <td>商品A（青・Mサイズ）</td>
  <td>2</td>
</tr>
<tr>
  <td>商品B（赤・Lサイズ）</td>
  <td>1</td>
</tr>

HTMLモードでは改行は自動では反映されません

テキストモードでは Enter キーで改行できますが、HTMLモードでは改行したい場所に <br> タグを書く必要があります。リンクは <a href="{recovery_url}">こちらをクリック</a> のように書いてください。

HTMLテンプレートのサンプル

以下をそのままコピーして「メール本文（HTML）」欄に貼り付けてください。<!-- ★ここを編集 --> と書かれた箇所だけ変更すれば、すぐに使い始められます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カートに商品が残っています</title>
</head>

<!-- 全体の背景色を変えたい場合は bgcolor と background-color の両方を変更 -->
<body style="margin:0; padding:0; background-color:#f5f5f5;" bgcolor="#f5f5f5">

  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td align="center" style="padding:24px 12px;">

      <table width="600" cellpadding="0" cellspacing="0" border="0"
             style="width:100%; max-width:600px; background-color:#fff; border-radius:4px; overflow:hidden;">

        <!-- ▼ ヘッダー ★ここを編集：bgcolor と background-color でヘッダー背景色を変更 -->
        <tr>
          <td align="center" bgcolor="#222222"
              style="background-color:#222222; padding:28px 30px;">
            <!-- ★ここを編集：「ショップ名」をご自身のショップ名に変更 -->
            <p style="margin:0; font-family:sans-serif; font-size:18px;
                        font-weight:bold; color:#fff; letter-spacing:0.05em;">
              ショップ名
            </p>
          </td>
        </tr>

        <!-- ▼ メイン本文 -->
        <tr>
          <td style="padding:36px 36px 24px; font-family:sans-serif; color:#333;">

            <p style="margin:0 0 20px; font-size:16px; line-height:1.7;">
              {customer_name} 様
            </p>

            <!-- ★ここを編集：冒頭の文章を自由に変更できます -->
            <p style="margin:0 0 32px; font-size:15px; line-height:1.8; color:#555;">
              こんにちは。<br>
              カートに商品が残ったままになっていることにお気づきでしょうか。<br>
              よろしければ、下記よりお買い物を再開してください。
            </p>

            <!-- 商品テーブル -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0"
                   style="border-collapse:collapse; margin-bottom:8px;">
              <!-- ヘッダー行 -->
              <tr>
                <td style="padding:8px 4px; font-size:12px; font-weight:bold;
                             color:#999; letter-spacing:0.05em;
                             border-bottom:2px solid #333333;">
                  商品名
                </td>
                <td width="60" align="center"
                    style="padding:8px 4px; font-size:12px; font-weight:bold;
                             color:#999; letter-spacing:0.05em;
                             border-bottom:2px solid #333333;">
                  数量
                </td>
              </tr>
              <!-- 商品行（カート内の商品数だけ繰り返されます） -->
              {item_loop}
              <tr>
                <td style="padding:14px 4px; font-size:14px; color:#333;
                             border-bottom:1px solid #eee;">
                  {item_name}
                </td>
                <td align="center"
                    style="padding:14px 4px; font-size:14px; color:#333;
                             border-bottom:1px solid #eee;">
                  {item_quantity}
                </td>
              </tr>
              {/item_loop}
              <!-- 合計行 -->
              <tr>
                <td colspan="2" align="right"
                    style="padding:14px 4px; font-size:16px; font-weight:bold;
                             color:#333; border-top:2px solid #333333;">
                  合計金額：{cart_total}
                </td>
              </tr>
            </table>

            <p style="margin:0 0 32px; font-size:12px; color:#999;">
              ※ 実際のご請求金額と異なる場合があります。
            </p>

            <!-- CTAボタン ★ここを編集：background-color でボタンの色を変更 -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr><td align="center" style="padding:0 0 36px;">
                <a href="{recovery_url}"
                   style="display:inline-block; background-color:#222222;
                          color:#fff; text-decoration:none; font-family:sans-serif;
                          font-size:16px; font-weight:bold; padding:16px 40px;
                          border-radius:4px;">
                  カートを確認して購入を完了する
                </a>
              </td></tr>
            </table>

            <!-- ★ここを編集：締めの文章を自由に変更できます -->
            <p style="margin:0; font-size:15px; line-height:1.8; color:#555;">
              ご不明な点がございましたら、このメールへご返信いただくか、<br>
              ショップページよりお問い合わせください。<br>
              またのご利用をお待ちしております。
            </p>

          </td>
        </tr>

        <!-- ▼ フッター -->
        <tr>
          <td bgcolor="#f8f8f8" align="center"
              style="background-color:#f8f8f8; padding:20px 36px;
                       border-top:1px solid #eee;">
            <p style="margin:0 0 6px; font-size:12px; color:#aaa;">
              このメールはカートに商品が残っているお客様に自動送信しています。
            </p>
            <p style="margin:0; font-size:12px; color:#aaa;">
              メールの受信を停止したい場合は
              <a href="{optout_url}" style="color:#aaa; text-decoration:underline;">こちら</a>
              よりお手続きください。
            </p>
          </td>
        </tr>

      </table>
    </td></tr>
  </table>
</body>
</html>

カスタマイズのポイント一覧

変更したい箇所変えるプロパティ場所のヒント
ショップ名テキストを直接書き換えショップ名 と書かれた行
ヘッダー背景色bgcolor と background-colorbgcolor="#222222" の行
ボタンの色background-color<a> タグの background-color: #222222
ボタンのテキストテキストを直接書き換え「カートを確認して購入を完了する」
冒頭の文章テキストを直接書き換え「こんにちは。」の段落
締めの文章テキストを直接書き換え「ご不明な点が」の段落
税・送料の注記テキストを直接書き換え合計行内の「※ 実際のご請求金額と異なる場合があります。」

HTMLテンプレートに関する注意事項

テンプレートが空の場合のフォールバック

HTMLモードを選択していても、テンプレートの入力欄が空（または空白のみ）の場合は、自動的にテキストモードのテンプレートでメールが送信されます。誤って本文を全て削除してしまっても、お客様にメールが届かなくなる事態を防げます。

テキスト用・HTML用の本文は独立して保存されます

HTMLモードからテキストモードに切り替えても、HTMLの本文は消えません。後でまたHTMLモードに戻すと、以前書いたHTMLテンプレートがそのまま残っています。

テンプレートの編集権限について

HTMLテンプレートの編集は、WordPress の管理者（Administrator）ロールのみが行えます。編集者（Editor）など管理者以外の権限でログインするとHTML本文の入力欄は読み取り専用となり、「管理者権限が必要です」というメッセージが表示されます。