How to Add Carousels to Your Emails

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. 


Add carousels to emails


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.


Add carousels to emails edit image


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 


Add carousels to emails display preview


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. 


Add carousels preview images


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. 


Add carousels structure settings


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.


add link to slides


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. 


add backup image


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 ...

    • 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 Custom Fonts to Your tinyEmail Templates

      Custom Fonts in tinyEmail Templates Introduction Are you tired of being limited to the standard fonts available in your email template editor? With tinyEmail's new Custom Fonts feature, you can now add any font you desire to your templates, giving ...

    • 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 ...