This article shows you how to configure an AMP Carousel block for an email template.

Unlike most image sliders, this one works inside an email message and can be displayed by email clients that are AMP-friendly.

AMP content (in its current state of development) has a few limitations. We covered some pros and cons in a different article. That article showed you how to configure an accordion for email templates. We also showed you how to test email templates with AMP content.

I won't repeat all that here. So, I'll assume you've read the background material and want to place this fascinating carousel block into a template. Here's how.

  1. Review our instructions below for the carousel.

  2. Consider adding backup content for readers with devices that can't display AMP content. We show you one way.

Get whitelisted

Dynamic content in an email template sounds great, but there's a challenge. Email templates with AMP content don't display properly in all email clients.

Based on our research, only four email clients (Gmail, Yahoo, Mail.ru, and FairEmail) support AMP messages. Plus, these clients must whitelist your TinyEmail sending address. Once whitelisted, readers with these email clients can properly experience AMP content in your messages.

If the sending address is not whitelisted, AMP components in your emails won't display.

  • Click here to learn how to get a sending email address whitelisted by these email clients.

Adding a carousel

Still want to build an email template with a carousel? Here's how.

Open a template and place a Carousel block in a structure. Click the structure to make it the active layer. Go to the side panel and add images. Customize the slide image with alt text and links (see below). That's optional.

Configure carousel action

These options let you control the movement of images inside the carousel.

Click the Carousel block one time to make it the active layer. Go to the side panel and customize the Autoplay and Loop options (off by default). If you enable Autoplay, set the start delay (in seconds). The default is a two-second delay.

Display preview

This option displays thumbnails on the carousel. The preview is on by default, which you can disable by switching off the toggle.

There are several customization options in the side panel, including:

  • location of the preview (on top or below slider images)

  • thumbnail width (switch on the Custom preview toggle)

  • outline style of active and inactive slides

Instead of thumbnails, you could display color patches to indicate image movement. Scroll down the panel to the Preview type heading and select Color. Then go to each slide and set the Preview color.

Structure settings

You can also customize the appearance of the structure that holds the Carousel.

Click the structure one time to make it the active layer. Go to the side panel and click the Appearance tab. Configure settings like background colors, padding, and round corners.

  • Make sure the HTML (middle) tab is not selected. With AMP content, you can select the first or last tab.

Image links

You can add a link to each image in the carousel. If you're using one link for all slides, save time and switch on the General Link toggle. Paste a URL into the field. TinyEmail attaches the same link to every slide image in the Carousel.

Backup

Here's an alternate display option for readers with email clients that can't display AMP content. Place a structure with multiple cells in the template. Load each cell with an image and tag the structure with Both or HTML. Email clients (without AMP capabilities) on mobile devices will display these images vertically.

Test AMP emails

It's not possible to check out your AMP content in the standard Preview window. To inspect your design work, create a campaign with the template that has AMP components and send a test email to your account.

Wrap up

The Carousel might not be for everyone, but it deserves consideration if high-impact images can increase open rates and conversions.

Did this answer your question?