Interactive email template
Abandoned-cart recovery with live items
Fetch cart lines in AMP and let customers return to checkout without leaving context.
Live cart content inside email can reduce friction between reminder and purchase.
Inbox preview
Static HTML rendering of the email body. Use it to check the layout before sending the live AMP version to a test inbox.
Mailneo demo <hello@mailneo.co>
10:42 AM (2 min ago)
Abandoned-cart recovery with live items
to me · interactive email
code snippets
<!doctype html>
<html amp4email>
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body { margin: 0; padding: 16px; font-family: Arial, Helvetica, sans-serif; background: #fff7ed; color: #1f2937; }
.card { max-width: 560px; margin: 0 auto; padding: 16px; border: 1px solid #fed7aa; border-radius: 12px; background: #ffffff; }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 30px; }
.muted { color: #6b7280; font-size: 13px; line-height: 18px; }
.btn { display: inline-block; margin-top: 10px; padding: 10px 14px; border: 0; border-radius: 8px; background: #f97316; color: #ffffff; text-decoration: none; font-weight: 700; cursor: pointer; }
.pill { display: inline-block; margin-right: 8px; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; border: 1px solid #fdba74; background: #fff7ed; font-size: 12px; }
.item { padding: 10px; border: 1px solid #fed7aa; border-radius: 10px; margin-top: 8px; }
</style>
<title>Abandoned-cart recovery with live items</title>
</head>
<body>
<section class="card">
<h1>Your cart is ready</h1>
<p class="muted">Review your saved items before stock runs out.</p>
<amp-list width="auto" height="220" layout="fixed-height" src="https://amp.mailneo.co/demo/cart-items">
<template type="amp-mustache">
<div class="item" style="display:flex;gap:10px;align-items:center;">
<img src="{{image}}" width="56" height="56" alt="{{name}}" style="border-radius:8px;" />
<div>
<p style="margin:0;font-weight:700;">{{name}}</p>
<p class="muted" style="margin:4px 0 0;">{{price}}</p>
</div>
</div>
</template>
<div placeholder class="muted">Loading your items...</div>
</amp-list>
<a class="btn" href="https://www.mailneo.co/tools/roi-calculator">Return to checkout</a>
</section>
</body>
</html>AMP components used
use cases
Cart recovery flow
Send one-hour and one-day reminders with updated item data.
Industry: Ecommerce
Price-drop nudge
Reinforce urgency by showing current discounted values.
gotchas
Image hosting
Serve product images over HTTPS with stable dimensions for faster render.
Totals accuracy
Keep taxes and shipping text synced with checkout calculations.
conversion uplift data
No conversion benchmark was attached to this template yet.