How to Build AMP-carousel for Your Emails with Stripo

This March, Google released its AMP for emails. And as of July 2, it will be available even for the G-Suite users and will be “on” by default for all Gmail’s users.

We know this will enable recipients to add necessary items to carts, to apply the lightbox effect to images and so forth and so on. And of course, all these actions can now be taken right in emails.

This is the new era in email marketing that, in fact, leads to big changes: ESPs now need to modify their protocol types, recipients need to learn that emails are now small versions of websites and are almost as functional as the latter, and we as email marketers need to acquire new coding skills. All these changes are so time-consuming.

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

Which is why we developed our builder AMP for email to significantly save your time on crafting AMP emails. On June 18, we released our drag-and-drop block “AMP-carousel”.

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 email header;

2. No coding skills required — you use an already prepared element;

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

4. For every single image in your AMP-carousel, that you build with us, you can set links that will take readers to respective pages on your website.

Guide on how to build AMP-carousel with the Stripo editor:

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;

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

• double click it to activate it in the settings panel;

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

• set the width for these preview images;

• upload image 1 for your slide;

• enter ALT text;

• paste a link to respective product item;

• hit the “Add slide” button;

• do the same to other images;

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

• done!

Build AMP-carousel with Stripo Now

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

We need to build a fallback for others. 

In this case, there are two types of fallback:

Type 1: Interactive carousel

Is supported by the 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 code editor;
• in the code editor, paste the code;
• close the code editor;

• double click this module right in the template to activate the settings panel;
• in the settings panel, in the "Include in" line, please, 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.

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, he or she 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, in the "Include in" section, please, 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.

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 — you 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 us as our editor allows adding text over images and applying multiple filters ;)

Building AMP-carousel with 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;

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

• choose the font type, the color;

• in the right top corner of the editor, click the “apply” button for saving 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 in the settings panel, click the “Open” button;

• select the “overlay image” option;

• upload your button image;

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

• set sizes;

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

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

What email clients do support AMP today:

• Gmail desktop — already does;
• Mail.ru — already does.

Yahoo, AOL, and Outlook will do, soon.

Final thoughts

We just built 2 AMP-carousels without opening HTML code editor. Any slide of each shows recipients your products from different angles or the newest items from your collection. And each, slide once clicked, takes recipients to respective pages of your website. This is a good way to enliven your emails, to better interact with your audience and to make emails more functional.

To know 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 ;)

Please be advised that you need to get whitelisted with Google to be allowed to send AMP emails.

Try Stripo Out