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
- Go to Admin → Settings → Notifications
- Click an event type to edit its template
- Customize the subject, HTML body, and plain text fallback
- 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