Suggested readings: AMP for Emails, AMP Sender Registration Form, AMP Carousel for Emails, AMP Form for Emails
Accordion allows your users to have an idea about the content at a glance and expand any part of it to see the full content. This feature saves space in your emails by allowing your users, especially mobile users, to easily see your content without scrolling much.
You can build AMP-accordions without opening the HTML code editor. You do not need coding skills or add scripts to the email code. You can build these emails with the Drag and Drop editor.
This guide answers the following questions with detailed instructions:
- How can I build the AMP accordion?
- How can I build a fallback for other recipients?
- How can I preview the accordion?
- What are the common ways of using the AMP accordion and fallback in emails?
Build AMP accordion
To create an email with the AMP accordion as above, follow these steps:
1. Drag the AMP accordion block into your email template.
2. 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.
3. 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.
4. Add as many sections as you need.
5. 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.
6. 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.
7. 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, toggle the “expanded section” button for the necessary section;
8. 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.
Build a fallback for other recipients
You build it the way you normally build your emails. 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 the accordion
To preview your AMP email, you should get your sender whitelisted with Google. Once you complete designing your email, you can send a test message to your email address with the Test Message button on the Design or Launch step.
Common ways of using the AMP accordion and fallback in emails
Of course, there’s a number of ways of using accordion in emails but we will enumerate just the most common ones here.
Manual
Sometimes you need to provide your 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 the 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.
You can add images, buttons, video tutorials and even buttons in every section of your accordion if you like.
Fallback
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.
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.
Fallback
You can build a regular digest email. Just make sure your blog post description is short.
Or else, you can use anchor links in your digest emails. Please remember that you can add anchor links in emails with the editor.
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.
Displaying categories is suitable when you need to promote more than 10 items at a time..png)
Fallback
Here, as a fallback, you may want to add a number of product cards. Be sure to place a few per row.
Or else it could be a regular menu with links that take recipients to your website.
Keep in mind
To make sure that your recipients see your AMP emails, you need to:
- Get whitelisted with Google.
- Fix all the bugs if any occurs. The editor shows if you have any in emails and even recommend how to fix them.
- You have fallbacks for those customers whose email clients do not support AMP for emails.
- 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 Mail.ru are capable of rendering AMP emails. Yahoo will join the list soon.
- AMP emails lose their AMP components if you forward them.