Product Showcases in Kinetic Email

By Sean · February 16, 2026 · 5 min read

Static product grids are fine. But what if your subscribers could browse a curated collection right inside the email, flipping through products like they would on your website?

That's what a kinetic product showcase does. It's a carousel-style component built entirely with radio buttons and CSS — no JavaScript, no AMP, no external dependencies. The subscriber clicks navigation dots or arrows to cycle through products, each with its own image, description, and CTA.

Why It Works

Product emails have a real estate problem. You want to feature multiple items, but stacking them vertically means most products end up below the fold. A carousel solves this by layering all products in the same space, letting the subscriber choose what to explore.

The result: higher engagement with individual products, more clicks to your site, and an email that feels like an experience rather than a catalog dump.

The Pattern

Like the tabbed interface, this pattern uses radio buttons for state management. Each product is a "slide" controlled by a radio button. Navigation dots (labels) let the user switch between slides:

<input type="radio" id="product1" name="showcase" checked>
<input type="radio" id="product2" name="showcase">
<input type="radio" id="product3" name="showcase">

<div class="carousel">
  <div class="slide slide-1">
    <img src="product-1.jpg" alt="Spring Jacket">
    <h3>Spring Jacket</h3>
    <p>$89.00</p>
    <a href="https://example.com/jacket">Shop Now</a>
  </div>
  <div class="slide slide-2">...</div>
  <div class="slide slide-3">...</div>
</div>

<div class="nav-dots">
  <label for="product1" class="dot"></label>
  <label for="product2" class="dot"></label>
  <label for="product3" class="dot"></label>
</div>

The CSS

The slides are stacked using absolute positioning. Only the active slide is visible:

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#product1:checked ~ .carousel .slide-1,
#product2:checked ~ .carousel .slide-2,
#product3:checked ~ .carousel .slide-3 {
  opacity: 1;
  position: relative;
}

The opacity transition gives you a smooth crossfade between products. You can also use transform: translateX() for a sliding animation if you prefer horizontal movement.

Live Example

Here's a working product showcase. Click the navigation to browse between products:

Design Tips

• Lead with your strongest product. The first slide is what everyone sees — make it count.
• Keep copy short. Product name, price, one line of description, and a CTA. That's it. The image does the heavy lifting.
• Use consistent image dimensions. Mixed aspect ratios will cause the carousel height to jump between slides.
• Add navigation indicators. Dots, arrows, or numbered indicators help users understand there's more to see.
• Don't forget the fallback. In clients that don't support :checked, all products should stack vertically as a standard product grid.

Product showcases pair beautifully with the tracking pixel pattern. Add a unique tracking pixel to each slide to measure which products get the most views directly inside the email.

When to Use This

Product showcases work best for:

• New collection launches — let subscribers browse the highlights
• Curated recommendations — "Picked for you" carousels based on purchase history
• Sale events — feature top deals without overwhelming the layout
• Seasonal campaigns — rotate through themed product sets

The pattern is surprisingly versatile. Once you've built one, you can adapt it for testimonials, team member spotlights, portfolio pieces — anything where you want to present multiple items in a compact, browsable format.