How to Build AMP Accordion_Cover Image_Stripo
timer ~ 7 min read
rate it
21 September 2019

How to Build AMP Accordion for Your Emails with Stripo without Any Coding Skills 

Stripo / Blog / How to Build AMP Accordion for Your Emails with Stripo without Any Coding Skills 

Building AMP accordions has never been easier.

I am proud to announce that on September 18, we released a brand new feature: drag-n-drop AMP accordion block. 

No coding skills required. No need to add any scripts to email code. Stripo does it for you!!

How to build AMP accordion with Stripo

It will take you just a few simple steps:

  • drag the AMP accordion block into your email template;

Building AMP Accordion_AMP Accordion Block

  • the “animated expansion” option is ON by default. It activates the “transition” property which allows your sections to open and close slowly. If it does not need it, you always can turn it OFF by toggling the button;

AMP Accordion_Toggling Animated Expansion Button

  • now you need to work on the accordion design. Set background color, outline width and color, section text color and the font size. Please remember that now you are working on the accordion’s sections design. In other words, this is what customers see when the accordion is not expanded;

AMP Accordion_Working on Accordion Design

  • add as many sections as you need;

Adding Sections to Accordion

  • give names to all these sections. You may enter up to 200 characters. If you add more, your email will increase in width. But even 200 characters is way too many as it takes more than 4 lines; 

  • now toggle the “auto-collapsing accordion” button to activate this option. It allows showing one section at a time. When you open any other section, the previously open one gets closed;

AMP Accordion_Toggling Auto-Collapsing Function

  • you may want one section to go expanded in your emails to let your customers know there’s some content hidden in these sections. To do so, please toggle the “expanded section” button for the necessary section;

AMP Accordion_Expanded Sections

  • now fill those sections in with your content. It can be anything like images, text, buttons, banners, social media icons, videos, etc.;

  • edit this content the way usually do when building emails with Stripo.

Try Stripo out

Important to note:

As long as this accordion will render only across those email clients that support the AMP technology, you will need to build a fallback for those whose email clients do not see AMP.

How to build fallback with Stripo:

You build it the way you normally build emails with Stripo. But once you’re done, you need to activate the entire Fallback structure, and in the settings panel, click the “Include in HTML” button.


Then, this structure will be marked as "HTML" and the structure with AMP accordion will be marked as "⚡HTML":


All other elements, to which you have not set the “Include in..." option, will be displayed in both versions of your emails.

Preview your AMP accordion

Now that your email is ready to go, you need to preview it prior to sending over to recipients.

  • click the “Preview” button above the template;

Previewing AMP Accordions

  • pick the “AMP HTML” version;

  • interact with your AMP accordion.

Please remember that your AMP email will render in a recipient email client only if its code does not contain any error. In this case, your recipients will see the fallback that you’ve built.

A missing link can be considered a bug too. 

Stripo helps you here: at the “preview” stage, our editor shows if your AMP email has any bug.

Mistakes in AMP Version of Your Emails

If there is any — or three in our example — click the red button to see what bugs you need to fix. I had to add links to logo and menu tabs.

If you’ve built your AMP email by using our drag-n-drop AMP Accordion block, did not enter any external scripts in email code and added all necessary links to even social media icons, then your AMP email will render well across all email clients

Try Stripo Out

Email clients that support AMP

  • Gmail desktop — yes;

  • desktop — yes;

  • Yahoo and AOL — to be supported soon;

  • Gmail on Android and iOS — to be supported this Fall.

Please be advised that in order to be able to send AMP emails, you need to get whitelisted as a trusted sender with Google,

Common ways of using AMP accordion in emails and fallback

Of course, there’s a number of ways of using accordion in emails but we will enumerate just the most common ones here.


Sometimes we need to provide our customers with either different ways of doing something, or show them step-by-step how to work with our new tool. And AMP accordion will be of great use here.

By adding it to our HTML emails, you enable your recipients to skip the steps they are familiar with and to sooner find the steps they have had some difficulties with.

Building AMP Accordion with Stripo_Step-by-Step Guide

You can add images, buttons, video tutorials and even buttons in every section of your accordion if you like.


As a fallback, you can build a small step-by-step guide or email where you show how to wear new apparel or how to combine it with other pieces of clothing. 

Accordion for Manuals

(email example by Brighton)

Email digests

Email digests normally contain a lot of information and are long reads. Subscribers need to scroll down to find any certain news they want to read more about. 

If you share more than 5 blog posts in your digest emails, be sure to wrap them in accordion.

Also, it is applicable to investor updates to let them get directly to the necessary part of your emails.

Monthly Investor's Update


You can build a regular digest email. Just make sure your blog post description is short.

AMP Accordion_Example of Email Digest by Hubspot

(email example by Hubspot)

Or else, you can use anchor links in your digest emails.

Please, remember that you can add anchor links in emails with Stripo.

Categories of products

Most online stores need to promote not one single product but a whole lot of them. Yet, customers might not be interested in your entire assortment — they may want to look through some certain categories.

Suitable when you need to promote more than 10 items at a time.

AMP Accordion for Categories


Here, as a fallback, you may want to add a number of product cards. Be sure to place a few per row.

Fallback to Accordion with Product Snippets

(email example by GAP)

Or else it could be a regular menu with links that take recipients to your website.

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 words

By using innovative technologies in your email newsletters, you improve interaction with customers and leave competitors behind.

To make sure that your recipients see your AMP emails, make sure that:

  1. your AMP email code has no bugs - Stripo shows if you have any in emails and even recommend how to fix them;
  2. you have fallbacks for those customers whose email clients do not support AMP for emails;
  3. you as a sender is registered with top email clients.

For more information on how to build, test and export AMP emails, please refer to our blog post “How to Build AMP Emails with Stripo”.

You might be interested in

previous next
06 June 2022 · 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 2022 · 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 Marketing
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 had....

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