Design Structure Templates How-to AMP
~ 11 min read
rate it
23 July 2019

How to Build AMP Emails with Stripo

Stripo / Blog / How to Build AMP Emails with Stripo

Wanna keep up with the times and send AMP-powered emails over to your recipients?

Stripo How to Build AMP Emails with Stripo_Example of AMP Email

Gmail in its AMP emails guidelines specified that when building such emails with an email playground, you will need to add some code elements to the email header and to its doctype! Stripo does it all for you — no coding skills needed at all.

Google also offers its Gmail AMP for Email Playground where you can code AMP emails from header to footer. But the emails you build with it, render in the Gmail and only. Eventually, Yahoo will also support AMP for emails. But what about the rest of your customers?

Today, we’re gonna show you how to build AMP emails with Stripo that render correctly in all email clients.

Let us remind you that in order to be allowed to send out AMP emails, you need to get registered with Google. In the previous post, we shared our personal experience on how we got whitelisted with Google.

How to build AMP-powered email with Stripo

Currently, there are three ways of building AMP emails with Stripo:

Way 1. Using the Stripo's AMP blocks

Today, we offer image AMP-carousel block. This means that you do not need to make any changes to codes. No HTML skills required. 

You just drag and drop this block into your HTML email template.

So, to build AMP carousel, you need to:

  • drag the AMP-carousel block into your HTML email template;
  • then set the "preview" image width. Preview images are the small images under your carousel. They annotate how many slides there are in the carousel and what they are;

Preview Images in Carousel

  • add as many slides in your carousel as you need;
  • remember to add links to all slides. By clicking them, your users will be directed to respective pages on your website.


Important to note:

This element by default will be shown only to those recipients whose email clients do support AMP for emails. For other users, you need to build a fallback: this could be a banner and a bunch of product cards aka product content modules.

Remember to enable them for the HTML version of your email only.


Please, find the full manual in this dedicated blog post.

All other elements of your emails should be enabled for both versions of your email.

This summer, we'll release two more AMP-blocks.

Way 2. Using the code from Gmail Playground.

This way requires just a few steps:

Step 1. Building a traditional HTML email template.

To do so, you may either build one from scratch by dragging blocks, or you may use any of our 300 ready-to-use email templates

Step 2. Building AMP element with Gmail AMP for Email Playground.

Google offers a wide variety of prepared AMP elements.

We’re going to use the AMP-carousel element.

  • in the Gmail playground, click the dropdown menu to choose AMP-carousel;

  • once you’ve clicked it, to the left in the code editor, you will see the AMP-carousel code. Find the following line in the code:

<amp-img src="" width="800" height="600" layout="responsive"></amp-img>” line and remove it, as it just specifies the source of the images used below
  • now, in this code sample, please edit the image width, that was set by default, from 800 to 600 pixels as this is the most common width size;

  • change the height from 600 to 480 pixels to save the image ratio;

Stripo How to Build AMP-emails with Stripo Setting the AMP Carousel Image Size

  • now, replace all the links wrapped in the <href> attributes with the links to the necessary images you host on your website or any other image hosting site;

Stripo How to Build AMP-Emails with Stripo_Replacing the Links to Images with Proper Ones

  • highlight and copy the embed code with 4 images in AMP-image carousel;

<div class="images">

    <amp-carousel width="600" height="480" layout="responsive" type="slides">

       <amp-img src="" width="600" height="480" alt="a sample image"></amp-img>

       <amp-img src="" width="600" height="480" alt="another sample image"></amp-img>

       <amp-img src="" width="600" height="480" alt="and another sample image"></amp-img>

       <amp-img src="" width="600" height="480" alt="and another sample image"></amp-img>



Step 3. Pasting the embed code in Stripo

In Stripo, drag the 1-column structure in your prepared template;

  • in the setting panel, in the “include in” section, set “⚡HTML”;

Stripo How to Build AMP-Emails with Stripo_Hiding AMP Elements for Other Recipients

This means that AMP image carousel will be shown only in those email clients that support AMP;

  • drop the HTML block in it;

  • double click it to open the “HTML code editor”;

  • replace the “Insert your HTML code” with the embed code;

  • in Google Gmail Playground, copy the script that specifies what AMP element you’re about to use. It’s located in email head below the <style> attributes before the closing</head> tag;

Stripo Building AMP Emails with Google Playground_Script

  • if you, like us, are going to use AMP-carousel, here’s the script to embed:

<script async custom-element="amp-carousel" src=""></script>
  • open HTML code editor of entire email template by clicking the “Code Editor” button above the template;

  • insert the embed script right above the closing </head> attribute;

Stripo How to Build AMP-Emails with Stripo_Inserting the Embed Script

  • close the code editor. Done!

Those recipients whose email clients support AMP, will see this AMP image carousel, while others — will not. Hence, we need to create a perfect banner for them, too, as a fallback.

To do so, you need to:

  • drag the one-column structure into your template;

  • in the settings panel in the “Include in” section, choose the “HTML” version of your email — by doing this, your banner will be enabled only to those recipients, whose email clients do not support AMP;

Stripo How to Build AMP-Emails with Stripo Enabling Banners to Those Users Who Can See Only HTML Emails

In the Stripo editor, you can easily see what elements are enabled for the traditional HTML version of your email, what elements are enabled for the AMP HTML version of your email, and which will be shown in both versions.

Stripo How to Build AMP-Emails with StripoShowing andHiding Elements for Emails

The containers/elements marked with “HTML” will be shown only to those recipients whose email clients do not support AMP for Emails. While the ⚡HTML elements will be shown only to those recipients whose email clients do support AMP.

Elements/containers that have no marks, will work for both versions of the email.

Way 3. Using Stripo's prepared AMP templates

Stripo offers a number of ready-to-use AMP email templates. They contain modules with AMP-carousel, with AMP-lightbox, with AMP-accordion. Image AMP-carousel is meant to display a few images/banners in one screen without the necessity to scroll down. The lightbox effect is meant to zoom in a certain image after clicking on it; is used in promo emails for product cards mostly. And AMP-accordion is meant to structurize email copy by tabs or other logical groups. Once you click any tab, its content drops down becomes visible. 

So, to build AMP emails by using our prepared templates, you need to:

  • pick the one that meets your current campaign's needs best;
  • sign in to save and to work with it;

Building AMP Emails with Stripo_Using Stripo's Templates

  • find this template by the creation date;

Building AMP Emails with Stripo_Searching for Templates in the Editor

  • edit emails content, such as logo, footer, etc.;

Important to note:

Please remember that you can drag the aforementioned modules into templates from your personal content library/storage to build emails easier and faster (if you've previously saved them).

  • click the AMPHMTL element in the template to edit the former;

AMP Elements in Emails_Editing

  • if you work with imagery, then in the settings panel, you will be asked to replace images and include proper links to them the way you normally work with images,

Working with Images_AMP Emails

  • if you need to work with AMP-accordion, then by clicking it,  you will have to make some changes directly in the code, where all textual component is written in white, and styles like fonts, paddings, etc. are wrapped in the "style" attribute.

Editing Copy_AMP Email Templates

Important to note:

Not only do all the aforementioned email templates contain AMP elements, but also fallbacks to them. Which is why you may rest assured: those recipients whose email clients do not support Gmail AMP for emails, will see the full traditional HTML version of your emails. 

Now that your AMP email is built, you need to preview it.

How to preview AMP emails with Stripo

This is a very essential step at building any kind of emails: AMP HTML or traditional HTML emails.

  • to preview AMP HTML email with Stripo, click the preview button above the template;

Stripo How to Build AMP Emails with Stripo_Previewing Emails

  • in the settings panel in the preview email mode, click the necessary version of your email;

Stripo How to Build AMP Emails with Stripo_Previewing AMP Emails

  • to check out the other version of your email, just switch the button

Important to note:

AMP elements now render on some mobile devices. As of November 21, Gmail on Android and iOS does support AMP; also supports AMP on mobile devices.

For more details on how AMP emails work on mobile devices, please refer to this blog post.

How to test AMP emails with Stripo

To be able to send test emails from Stripo, you need to enable us to send test emails to your account.

If this is your personal account, you need to:

  • in Gmail, go to the settings panel - click the "Settings" icon;
  • in the dropdown menu, click the "Settings" section;

Building AMP Emails with Stripo_Settings in Gmail

  • in the new window, in the "General" section, find the "Dynamic content" and open the "Developer settings";

Building AMP Emails_Enabling Dynamic Content for Gmail

  • paste this email address;

Adding Stripo As Trusted Sender

  • click save.

If this is your corporate account with G-suite, you need to:

As of July 2, all the G-suite users are also able to receive AMP emails.

Ask your manager to enable "Dynamic emails" for you. And then you will only need to add our address to receive test AMP-powered emails from Stripo.

Please, be advised: changes come into effect within 24 hours.

How to export AMP email to your ESP

Stripo allows exporting emails directly to certain ESPs. You just export them as regular emails.

If your ESP does support AMP, but we have not enabled direct export of AMP emails, you just may download your email as AMP HTML file. And open it in your ESP.

Stripo_How to Build AMP Emails with Stripo_The Export OptionsStripo_How to Build AMP Emails with Stripo_Downloading as HTML-file

Those recipients' whose email clients do no support AMP, will see the traditional HTML email; while those whose email clients do support AMP, will see your sophisticated emails. Remember, we learned to hide AMP-elements in regular emails.

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.

More information on how to craft featured emails, please find on our AMP email builder page.

Bart Tutaj 9 months ago

This is awesome, just like everything I've seen so far from Stripo. One _small_ detail, though, after spending years in front of Photoshop resizing images for large corporates: the proportional resize from 800x600 is 640x480. That correctly maintains the aspect ratio. :)

Bart Tutaj commented to Bart Tutaj 9 months ago

If you _do_ need 600 pixels in width, the proportional height to go for would be 450px. :)

Hanna Kuznietsova commented to Bart Tutaj 9 months ago

Bart, thank you so much for your feedback — we are glad you like our tool. And thank you for this valuable comment on the ratio :) It’s highly appreciated. You are right: it should be 600x450 )))

You might be interested in

← previous next →
ai cover image
4 days ago · 13 min read
Improve Your Email Marketing with AI

Email marketing can be an effective tool for increasing revenue and building relationships with customers. However, this is only possible if it matches the priorities of your target audience. That is interests, preferences, and so on. It used to be a difficult task. But today user research and customer segmentation can be done without human intervention. Artificial intelligence does an excellent job with such tasks. Moreover, it is many times more effective than a person. Through data collection, observation, and...

Marketing How-to
9 days ago · 15 min read
15 Best Ideas for St Valentine’s Email Newsletters

Searching for fresh St Valentine’s Day newsletter ideas to win new customers? Search no more! See how the world’s top brands nail the holiday campaigns.  Get inspired by the ideas listed below, and implement them in our holiday email templates in no time. Designing romantic newsletters with Stripo is a piece of cake Use this template Valentine’s Day email marketing ideas Don’t focus on design only. These ideas implemented by famous brands will spice up your St Valentine's email campaigns. 1. Focus...

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