Help CenterEditor and TemplatesUsing Interactive Widgets in Your EmailsHow to add a carousel to your email template?

How to add a carousel to your email template?

Last updated June 25, 2024

What is a carosuel?

A carousel refers to a user interface element that displays multiple images that can be navigated through by swiping or clicking arrows. It's like a slideshow where users can control the pace at which they view the content.

Using carousels in email marketing offers several benefits to marketers:

  1. Increased Engagement: Showcase multiple items in one email, boosting interaction.
  2. Space Efficiency: Display diverse content without cluttering the layout.
  3. Dynamic Presentation: Captivate recipients with visually appealing, scrollable content.
  4. Drive Conversions: Match recipients with relevant offerings, leading to higher conversion rates.

Step 1: Create a template in the editor. Navigate to widgets>media>carousel

Carousel editor

Step 2: Select the widget and customise the widget as per your use case and requirements. You can customise the block color, image aspect ratio, image size, arrow shape, color and thumbnail position.

How to add a carousel to your email template?

Step 3: Select the image to replace the default image. Link the image to a URL and add alternate image text. You can add more images by clicking on the plus icon below the image.

How to add a carousel to your email template?

Step 4: Once done, thoroughly test your email across devices and email clients. Check both AMP and HTML versions.

How will the email render across email clients?

Email clientWhat the recipient will see
Gmail (AMP approved)AMP carousel
Apple mailHTML carousel
Gmail (AMP not approved)HTML fallback
OutlookHTML fallback
  1. In Gmail, the recipient will see AMP carousel. Clicking on the thumbnail will switch the main image and clicking on the main image will open the associated click url in a new tab. The carousel will render on both desktop and mobile devices.
amp carousel

  1. In Apple mail, carousel will be shown-
Apple mail carousel
  1. If the sender is not approved to send AMP emails or  AMP does not render  for some other reason, then HTML fallback will be shown. Note that on a desktop, hovering over the image will change the main image but when you take your cursor off the thumbnail, the main image will switch the first image. On mobile devices, clicking on the thumbnail will not switch the main image. Clicking on the thumbnail will redirect to the associated image url on both mobile and desktop.
html fallback carousel

  1. In Outlook, HTML fallback will be shown. User won't be able to toggle between images however click action will work for thumbnail images. Note that the thumbnail images will only be shown if it is enabled in the editor.
How to add a carousel to your email template?

Please note - irrespective of whether you had thumbnail enabled or not in the Editor, for HTML fallback, we will always show the Thumbnail in the UI for ease of navigation.

Was this article helpful?