How to Build AMP Carousel with Stripo_Cover Image
timer ~ 8 min read
76864 views
rate it
13 October 2022

How to Build AMP-carousel for Your Emails with Stripo

Stripo / Blog / How to Build AMP-carousel for Your Emails with Stripo

In March 2019, Google released AMP for emails. Since July 2019, it is available for G-Suite users and is “on” by default for all Gmail users.

AMP enables recipients to add necessary items to carts, take surveys, etc. And of course, all these actions can now be taken directly in emails.

Reducing the time that you spend on email production by automating most processes has always been Stripo’s main goal.

This is why we developed our AMP email builder and the “AMP-carousel” drag-and-drop block to speed up the design process.

How to Add Drag-n-Drop AMP Carousel to Email

Prior to getting to the guide, I want to highlight the benefits of building AMP emails with Stripo.

Why build AMP emails with Stripo:

  1. You do not need to add any AMPHTML code elements to the email header.

  2. No coding skills are required — you can benefit from ready-to-use elements.

  3. Time-saving — you simply insert the links to your images into a content module.

  4. You can set links for every single image in your AMP-carousel that you build with Stripo. These links will take recipients to respective pages on your website.

Guide on how to build an AMP-carousel with Stripo:

It takes two steps to build an image AMP-carousel with Stripo:

Step 1. Building the AMP carousel per se

  • drag the AMP carousel block in the HTML email template you are working with;

AMP Carousel Block _ Stripo

You will see this element have the “⚡HTML” icon near it. This means, this element will be shown in AMP emails only and will be hidden in email clients that do not support AMP. We will need to build a fallback for other recipients. We'll talk about it later.

AMPHTML Module in Your Email

  • click on the “⚡ HTML” icon to activate the settings panel;

  • upload image 1 for your slide;

  • now, in the settings panel, you need to toggle the “Display preview” button if you want to show little preview images;

  • set the width for these preview images;

Toggling Preview Button and Setting Preview Width

  • enter ALT text;

  • paste a link to the respective product item;

Adding Images to Slides _ AMP Carousel with Stripo

  • hit the “Add slide” button;

Add Slide Button _ Building AMP Carousel with Stripo

  • do the same to other images;

  • check if the sizes of all images match. If they do not, crop them with our photo editor;

  • toggle the “Autoplay” button if you want your slides to change automatically;

  • toggle the “Loop” button to make your slides display from the beginning when a user clicks on the last image;

Setting Up Your AMP Carousel in Stripo

  • find the “Slide preview” section and choose where it will be displayed;

Slide Preview Section _ Stripo

  • toggle the “Custom preview” button to select your preview type (image or color);

Set Custom Preview in Stripo

  • toggle the “General link” button to add a single link to the entire AMP-carousel;

  • done!

Build AMP-carousel with Stripo now
Get started

Important to note:

I added 16 slides, and they all worked pretty well in Gmail across multiple devices.

Step 2. Building a fallback for other recipients

So, now that all recipients who use Gmail will see this carousel, we need to think about those who prefer other email clients.

The AMP-carousel we've just built works well on desktops in Gmail by default. 

Now it’s time to build a fallback for others. 

In this case, there are two types of fallback:

Type 1. Interactive carousel

Such a carousel is supported by Apple devices only, and by Yahoo! Mail.

  • build a regular content carousel with FreshInbox;

  • copy the embed code;

  • drag the HTML block into your email template;

  • double click it to activate the code editor;

  • in the code editor, paste the code;

  • close the code editor;

Close the Code Editor Button _ Building AMP Emails with Stripo

  • click on this module right in the template to activate the settings panel;

  • in the settings panel, please find the "Include in" line and select the "HTML" option. By doing this, you make sure that this content module will be shown only in those email clients, which do not support AMP for emails.

Include in HTML Button _ Building AMP Email

This means that every email client decides which version of your carousel to show!

Important to note:

If a recipient's email client does not support this kind of interactivity, they will see just the first image.

For more information on how to build an interactive image carousel, please read this blog post.

Type 2. Static product content modules

  • drag a 2-column structure in your email template;

  • drop the image block into the 1st column;

  • upload a necessary image;

  • drop the text block into the 2nd column;

  • wrap this text in a matching font.

  • in the settings panel please find the "Include in" section and select the "HTML" option. Like we said, by doing this, you make sure that this content module will be shown only in those email clients, which do not support AMP for emails.

Product Content Modules _ Building AMP Emails

You may add as many product modules to your email as you need. For more information on how to save time when building similar email elements, please read this blog post, the "Copying and moving elements" section.

Important to note:

Once you hit the "Include in HTML" option, the chosen element will be shown across those email clients, which support only traditional HTML-mime type.

Once you hit the "Include in AMPHTML" option (⚡HTML), the chosen element will be shown across those email clients which support the AMPHTML (text-x-amphtml) MIME-type.

If none is set for a particular email element, this element will be shown across all devices and all email clients.

By taking these simple steps, we built a simple AMP-carousel — we used images with no descriptions on them. It works best when you demonstrate a few items of a kind or the same product from different angles.

But what if you need a complex carousel with more informative pictures and “faux” buttons over them? You can still do it with Stripo as our editor allows adding text over images and applying multiple filters ;).

Building an AMP-carousel with a description and “buttons” over images

So, first of all, you need to build a regular AMP-carousel as described in the paragraph above. Now, let's proceed to the design of the slides:

a) writing copy over images

  • once you uploaded an image, open the photo editor;

Building AMP Email with Stripo _ Editing Images

  • in the settings panel of the photo editor, choose the “Text” option to place copy over your images. The editor offers about 1000 fonts;

Embedded Photo Editor

  • choose the font type and the color;

  • in the right top corner of the editor, click the “Apply” button to save these parameters.

b) placing a CTA “button” over your images

  • first of all, you need to prepare this button — the image format should be SVG or any other with a transparent background;

  • in the left top corner of the settings panel, click the “Open” button;

  • select the “Overlay image” option;

Adding a CTA Button as an Image

  • upload your button image;

  • place it exactly where you want to see it in your slide;

  • set sizes;

Adding a CTA Button to Your Slide

  • click the “Save” button to save the changes you have done to the slide.

The Save Button _ Working with the Editor

So, here is what we’ve just built together:

Word of advice

Here's just a friendly reminder. To be able to send AMP content, you need to:

  • get whitelisted with Google;

  • fix all the bugs if any occur. You will see them in the Preview mode (otherwise users will see an HTML email);

  • add the fallback — HTML version — to this email;

  • make sure that your ESP/CRM is capable of sending AMP emails;

  • keep in mind that currently only Gmail (both web and mobile apps on all OSs) and Yahoo! Mail are capable of rendering AMP emails;

  • AMP emails lose their AMP components if you forward them.

The best email carousel examples for your inspiration

Now that you understand how to build AMP-powered carousels within minutes, let’s take a look at how popular companies benefit from this feature. 

Here are the top 5 carousel examples to fuel your creative ideas:

1. Stripo

We often add carousels to our weekly digest to make it more functional and attention-grabbing. In this example, we enabled subscribers to browse through new email templates to find the most suitable one.

(Source: Email from Stripo)

2. Breguet

In this example, the company used a carousel to showcase to subscribers their products and offer recipients to book an appointment without having to leave their inboxes. 

Email Carousel Example from Breguet

(Source: Email from Breguet)

3. MamaGourmand 

MamaGourmand used the AWeber Image Carousel to share recipe ideas with subscribers. It’s an excellent way to engage recipients and show a variety of your products or services.

(Source: Email from MamaGourmand)

4. Offset

Besides offering subscribers to buy your products, you can use carousels to create entertaining content. In the example below, you can see how a popular imagery resource designed the email with a carousel to show their subscribers a collection of beautiful photos. 

(Source: Email from Offset)

5. HP

HP added a carousel to their email to present a new computer and showcase it from different angles. It’s a fantastic way to provide customers with more details, but it’s vital to make sure that product photos are clear and well-lit. 

In this example, the carousel is made with HTML5, but you can build the same using AMP.

(Source: Email from HP)

Wrapping up

We just built 2 AMP-carousels to enable you to showcase your goods from different angles or demonstrate new products from your collection. Each slide takes recipients to respective pages of your website. This is a good way to enliven your emails, engage the target audience, and make messages more functional.

To find out how to preview and export your AMP emails, please read the respective paragraphs in our blog post.

Building AMP-powered emails can be a piece of cake if you use the Stripo AMP email builder ;).

Start building beautiful AMP-powered emails with Stripo today

Elly Peers 3 years ago

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova commented to Elly Peers 3 years ago

Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.

You might be interested in

previous next
banner9
06 June 2022 · 15 mins read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
best-fonts-for-email-cover-image-stripo
24 May 2022 · 18 mins read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 mins read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they had....

Design Marketing
08 April 2021 · 17 mins read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s