How to Add Carousels to Your Emails
How to Add Carousels to Your Emails
Enhance messages with an image slider
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.
- Review our instructions below for the carousel.
- 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.
Related Articles
How to Add Accordions to Your Emails
How to Add Accordions to Your Emails Inject interactive content Ready to add a new level of interactivity to your email messages? If yes, then add AMP to your design toolkit. AMP (Accelerated Mobile Page) lets you add interactive components to email ...How to Send AMP Emails
How to Send AMP Emails Get started with sending AMP Emails with tinyEmail Are you ready to send emails with interactive AMP (Accelerated Mobile Page) components? Well, hold your horses. Let me explain. Here at tinyEmail, we give you the tools you ...Add an Unsubscribe Link
Add an Unsubscribe Link Avoid spam problems with a custom link Over time, subscribers leave the list. That's just a part of the business we're in. It's also a good thing because we want to focus resources on solid prospects or folks who love what we ...tinyEmail Merge Tags: Personalize Your Emails and Boost Engagement
tinyEmail Merge Tags: Personalize Your Emails and Boost Engagement Want to send emails that truly connect with your subscribers? Say goodbye to generic messages and hello to the power of personalization with tinyEmail's merge tags! Merge tags are ...How to Add Video to an Email Template
How to Add Video to an Email Template Increase reader engament There are so many reasons to inject video into your email marketing campaign. Tell a story. Show your brand. Demonstrate social proof. Get clicks. Yes, research suggests that email ...