Interactive email template
Product carousel showcase
Display multiple products in a swipeable module while keeping the email compact.
Carousel layouts help catalog emails stay scannable, especially on mobile screens.
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)
Product carousel showcase
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-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.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>Product carousel showcase</title>
</head>
<body>
<section class="card">
<h1>Featured picks for you</h1>
<p class="muted">Swipe to explore this week's best sellers.</p>
<amp-carousel width="540" height="260" layout="fixed" type="slides" controls>
<div class="item">
<p style="margin:0;font-weight:700;">Trail running shoes</p>
<p class="muted" style="margin:6px 0;">$94.00</p>
<a class="btn" href="https://www.mailneo.co/swipe-file">View item</a>
</div>
<div class="item">
<p style="margin:0;font-weight:700;">Hydration backpack</p>
<p class="muted" style="margin:6px 0;">$68.00</p>
<a class="btn" href="https://www.mailneo.co/swipe-file">View item</a>
</div>
<div class="item">
<p style="margin:0;font-weight:700;">Merino base layer</p>
<p class="muted" style="margin:6px 0;">$42.00</p>
<a class="btn" href="https://www.mailneo.co/swipe-file">View item</a>
</div>
</amp-carousel>
</section>
</body>
</html>AMP components used
use cases
Weekly merch drop
Highlight top SKUs without extending email length.
Industry: Retail
Category spotlight
Rotate product sets by segment and purchase history.
gotchas
Image compression
Compress product images so carousel slides load quickly on mobile data.
Slide count
Keep slide count moderate to avoid interaction fatigue.
conversion uplift data
No conversion benchmark was attached to this template yet.