Design Templates How-to
~ 8 min read
rate it
23 June

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;

Building AMP-carousel_Dragging AMP-carousel into template_Stripo

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!

Dragging Image AMP-carousel

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:

Building AMP-carousel with Stripo-Images with Button

What email clients do support AMP today:

  • Gmail desktop — already does;
  •  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

Elly Peers 2 months 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 2 months 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 →
Stripo_Follow-Up Series_Featured Image
How to Increase Conversion Rate with Follow-up Series

There are many cases when deals are closed precisely due to follow-ups. The project may not be the only thing in the life of a potential customer. And he or she can put it off, shift it down according to priorities. And your follow-up has a chance to become a good incentive. Therefore, after 2-3 weeks, a person can "wake up". In this article, we will discuss how follow-up emails can increase conversion rate, and generate more sales. What is...

Marketing Templates How-to
Featured Image_Dynamic Emails
3 days ago
Creating Dynamic Emails in Under 10 Minutes

Today, dynamic content is the most effective tool any email marketer can use.  Dynamic emails allow us to: deliver real-time content to keep our recipients updated. We use it in email digests to send only fresh blog posts; we use it in promo emails to notify every recipient how soon the offer expires, etc.; personalize content to make newsletters even more relevant.  We use it in promo emails to craft offers based on individual preferences, on previous purchases, on geolocation,...

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