Notification Templates

Customize the emails your store sends to customers for order events. Templates support Thymeleaf variables like {{customer.name}} and {{order.total}}.


Managing Notification Templates

  1. Go to Admin → Settings → Notifications
  2. Click an event type to edit its template
  3. Customize the subject, HTML body, and plain text fallback
  4. Toggle Active to enable or disable a notification

Available Events

Event Description
Order Confirmation Sent after successful checkout
Payment Failed Sent when payment is declined
Shipped Sent when order is shipped
Delivered Sent when order is delivered
Ready for Pickup Sent when order is ready for pickup

Template Fields

Field Description
Email Subject Subject line. Supports template variables like {{customer.name}}
HTML Body Full HTML content with styling and template variables
Plain Text Body Plain text fallback. Auto-generated from HTML if not provided
Active Toggle the notification on or off

Sample Templates

Order Confirmation (Full HTML)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; color: #333; line-height: 1.6; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: #4f46e5; color: white; padding: 20px; text-align: center; border-radius: 8px 8px 0 0; }
    .content { padding: 20px; background: #f9fafb; border: 1px solid #e5e7eb; }
    .footer { text-align: center; padding: 15px; color: #6b7280; font-size: 12px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
    .total { font-weight: bold; font-size: 18px; color: #4f46e5; }
    .cta { display: inline-block; background: #4f46e5; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; margin: 20px 0; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Order Confirmed!</h1>
      <p th:text="|Order #${order.orderNumber}|">Order #12345</p>
    </div>
    <div class="content">
      <p>Hi <strong th:text="${customer.name}">Customer</strong>,</p>
      <p>Thank you for your order! We're processing it and will notify you when it ships.</p>

      <h3>Order Summary</h3>
      <table>
        <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
        <tr th:each="item : ${items}">
          <td th:text="${item.productName}">Product Name</td>
          <td th:text="${item.quantity}">1</td>
          <td th:text="${item.price}">$0.00</td>
        </tr>
      </table>

      <p class="total" th:text="|Total: ${order.total}|">Total: $0.00</p>

      <a th:href="${order.trackingUrl}" class="cta" th:if="${order.trackingUrl != null}">
        Track Your Order
      </a>
    </div>
    <div class="footer">
      <p th:text="|${store.name} - ${store.email}|">Store Name</p>
    </div>
  </div>
</body>
</html>

Cart Abandoned (Recovery Email)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; color: #333; line-height: 1.6; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: #f59e0b; color: white; padding: 20px; text-align: center; border-radius: 8px 8px 0 0; }
    .content { padding: 20px; background: #f9fafb; border: 1px solid #e5e7eb; }
    .footer { text-align: center; padding: 15px; color: #6b7280; font-size: 12px; }
    .item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
    .item img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
    .cta { display: inline-block; background: #f59e0b; color: white; padding: 14px 32px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 16px; margin: 20px 0; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>You left something behind!</h1>
    </div>
    <div class="content">
      <p>Hi <strong th:text="${customer.name}">Customer</strong>,</p>
      <p>Your cart at <strong th:text="${store.name}">Store</strong> is waiting for you. Complete your purchase before these items sell out!</p>

      <div th:each="item : ${cart.items}">
        <div class="item">
          <img th:src="${item.image}" th:if="${item.image != null}" alt="Product" />
          <div>
            <strong th:text="${item.productName}">Product</strong><br/>
            <span th:text="${item.quantity}">1</span>x <span th:text="${item.price}">$0.00</span>
          </div>
        </div>
      </div>

      <p class="total" th:text="|Total (${cart.itemCount} items): ${cart.total}|">Total: $0.00</p>

      <a th:href="${cart.recoveryUrl}" class="cta">Return to Cart</a>
    </div>
    <div class="footer">
      <p th:text="|${store.name}|">Store</p>
    </div>
  </div>
</body>
</html>

Available Events

Event Description
Order Confirmation Sent after successful checkout
Payment Failed Sent when payment is declined
Shipped Sent when order is shipped
Delivered Sent when order is delivered
Ready for Pickup Sent when order is ready for pickup
Cart Abandoned Sent when items are left in cart without checkout

Template Variables

Order Events (order_confirmation, payment_failed, shipped, delivered, ready_for_pickup)

  • {{customer.name}} — Customer's full name
  • {{customer.email}} — Customer's email address
  • {{order.orderNumber}} — Order number
  • {{order.total}} — Total order amount
  • {{order.subtotal}} — Subtotal before discounts
  • {{order.currency}} — Order currency (e.g., USD)
  • {{order.status}} — Current order status
  • {{order.trackingNumber}} — Shipping tracking number (if available)
  • {{store.name}} — Your store's name
  • {{items}} — List of order items (productName, quantity, price)

Cart Abandoned (cart_abandoned)

  • {{customer.name}} — Customer's full name
  • {{customer.email}} — Customer's email address
  • {{cart.total}} — Cart total
  • {{cart.itemCount}} — Number of items in cart
  • {{cart.recoveryUrl}} — Link back to the customer's cart
  • {{cart.items}} — List of cart items (productName, image, price, quantity)
  • {{store.name}} — Your store's name