How to Build AMP Carousel with Stripo_Cover Image
timer ~ 8 min read
rate it
23 June 2019

How to Build AMP-carousel for Your Emails with Stripo

Stripo / Blog / 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;

AMP Carousel Block

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.

AMPHTML odule in Email

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

Toggling Preview Button and Setting Preview Width

  • upload image 1 for your slide;

  • enter ALT text;

  • paste a link to 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;

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

The Close the Code Editor Button_Building AMP Emails with Stripo

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

The Include in HTML Button_Building AMP 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.

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 — 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;

Buildng AMP Emails with Stripo Editing Images

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

Embedded Photo Editor_Stripo

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

Adding CTA Button as an Image_Stripo

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

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 occurs. You will see them in the Preview mode (otherwise users will see HTML email);
  • add the fallback — HTML version — in 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 are capable of rendering AMP emails. Yahoo will join the list soon;
  • AMP emails lose their AMP components if you forward them.

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

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; 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
06 June · 15 min 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
24 May · 18 min 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 Templates
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min 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 have....

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

Good email signatures help us build our business, and make a good lasting impression on clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine the best email signature examples 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. Use this email signature template to design your own email signature faster Use...

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