The best way to Construct AMP Accordion for Your Emails with Stripo with out Any Coding Abilities  — Stripo.e mail

The best way to Construct AMP Accordion for Your Emails with Stripo with out Any Coding Abilities  — Stripo.e mail

Constructing AMP accordions has by no means been simpler.

I’m proud to announce that on September 18, we launched a model new function: drag-n-drop AMP accordion block. 

No coding expertise required. No want so as to add any scripts to e mail code. Stripo does it for you!!

The best way to construct AMP accordion with Stripo

It’s going to take you just some easy steps:

Building AMP Accordion_AMP Accordion Block

  • the “animated growth” choice is ON by default. It prompts the “transition” property which permits your sections to open and shut slowly. If it doesn’t want it, you at all times can flip it OFF by toggling the button;

AMP Accordion_Toggling Animated Expansion Button

  • now it’s essential work on the accordion design. Set background colour, define width and colour, part textual content colour and the font measurement. Please do not forget that now you’re engaged on the accordion’s sections design. In different phrases, that is what clients see when the accordion is just not expanded;

AMP Accordion_Working on Accordion Design

Adding Sections to Accordion

  • give names to all these sections. It’s possible you’ll enter as much as 200 characters. If you happen to add extra, your e mail will improve in width. However even 200 characters is approach too many because it takes greater than 4 traces; 

  • now toggle the “auto-collapsing accordion” button to activate this feature. It permits displaying one part at a time. If you open every other part, the beforehand open one will get closed;

AMP Accordion_Toggling Auto-Collapsing Function

  • it’s your decision one part to go expanded in your emails to let your clients know there’s some content material hidden in these sections. To take action, please toggle the “expanded part” button for the mandatory part;

AMP Accordion_Expanded Sections

  • now fill these sections in along with your content material. It may be something like photographs, textual content, buttons, banners, social media icons, movies, and so forth.;

  • edit this content material the way in which often do when constructing emails with Stripo.

Strive Stripo out

Necessary to notice:

So long as this accordion will render solely throughout these e mail shoppers that help the AMP know-how, you’ll need to construct a fallback for these whose e mail shoppers don’t see AMP.

The best way to construct fallback with Stripo:

You construct it the way in which you usually construct emails with Stripo. However when you’re completed, it’s essential activate all the Fallback construction, and within the settings panel, click on the “Embrace in HTML” button.


Then, this construction will probably be marked as “HTML” and the construction with AMP accordion will probably be marked as “⚡HTML”:


All different components, to which you haven’t set the “Embrace in…” choice, will probably be displayed in each variations of your emails.

Preview your AMP accordion

Now that your e mail is able to go, it’s essential preview it previous to sending over to recipients.

Previewing AMP Accordions

Please do not forget that your AMP e mail will render in a recipient e mail shopper provided that its code doesn’t comprise any error. On this case, your recipients will see the fallback that you just’ve constructed.

A lacking hyperlink could be thought-about a bug too. 

Stripo helps you right here: on the “preview” stage, our editor reveals in case your AMP e mail has any bug.

Mistakes in AMP Version of Your Emails

If there may be any — or three in our instance — click on the pink button to see what bugs it’s essential repair. I had so as to add hyperlinks to emblem and menu tabs.

If you happen to’ve constructed your AMP e mail through the use of our drag-n-drop AMP Accordion block, didn’t enter any exterior scripts in e mail code and added all mandatory hyperlinks to even social media icons, then your AMP e mail will render nicely throughout all e mail shoppers

Strive Stripo Out

E-mail shoppers that help AMP

Please be suggested that so as to have the ability to ship AMP emails, it’s essential get whitelisted as a trusted sender with Google,

Widespread methods of utilizing AMP accordion in emails and fallback

After all, there’s a variety of methods of utilizing accordion in emails however we are going to enumerate simply the commonest ones right here.


Generally we have to present our clients with both other ways of doing one thing, or present them step-by-step learn how to work with our new software. And AMP accordion will probably be of nice use right here.

By including it to our HTML emails, you allow your recipients to skip the steps they’re aware of and to sooner discover the steps they’ve had some difficulties with.

Building AMP Accordion with Stripo_Step-by-Step Guide

You possibly can add photographs, buttons, video tutorials and even buttons in each part of your accordion in case you like.


As a fallback, you’ll be able to construct a small step-by-step information or e mail the place you present learn how to put on new attire or learn how to mix it with different items of clothes. 

Accordion for Manuals

(e mail instance by Brighton)

E-mail digests

E-mail digests usually comprise lots of info and are lengthy reads. Subscribers have to scroll down to search out any sure information they wish to learn extra about. 

If you happen to share greater than 5 weblog posts in your digest emails, you’ll want to wrap them in accordion.

Additionally, it’s relevant to investor updates to allow them to get on to the mandatory a part of your emails.

Monthly Investor's Update


You possibly can construct an everyday digest e mail. Simply be sure that your weblog put up description is brief.

AMP Accordion_Example of Email Digest by Hubspot

(e mail instance by Hubspot)

Or else, you should utilize anchor hyperlinks in your digest emails.

Please, bear in mind you can add anchor hyperlinks in emails with Stripo.

Classes of merchandise

Most on-line shops want to advertise not one single product however an entire lot of them. But, clients won’t be fascinated about your total assortment — they could wish to look by way of some sure classes.

Appropriate when it’s essential promote greater than 10 gadgets at a time.

AMP Accordion for Categories


Right here, as a fallback, you could wish to add a variety of product playing cards. You should definitely place a number of per row.

Fallback to Accordion with Product Snippets

(e mail instance by GAP)

Or else it may very well be an everyday menu with hyperlinks that take recipients to your web site.

Phrase of recommendation

This is only a pleasant reminder. To have the ability to ship AMP content material, it’s essential:

  • get whitelisted with Google;
  • repair all of the bugs if any happens. You will note them within the Preview mode (in any other case customers will see HTML e mail);
  • add the fallback — HTML model — on this e mail;
  • be sure that your ESP/CRM is able to sending AMP emails;
  • remember that at the moment solely Gmail (each internet and cell apps on all OSs) and are able to rendering AMP emails. Yahoo will be a part of the record quickly;
  • AMP emails lose their AMP parts in case you ahead them.

Last phrases

Through the use of progressive applied sciences in your e mail newsletters, you enhance interplay with clients and depart rivals behind.

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

  1. your AMP e mail code has no bugs – Stripo reveals when you’ve got any in emails and even advocate learn how to repair them;
  2. you’ve got fallbacks for these clients whose e mail shoppers don’t help AMP for emails;
  3. you as a sender is registered with prime e mail shoppers.

For extra info on learn how to construct, check and export AMP emails, please consult with our weblog put up “The best way to Construct AMP Emails with Stripo”.

Supply hyperlink