Menu

Usually, around 3 lines of preheader text are displayed after the subject line — this is almost always the first piece of written text after the body tag (i.e. not code).

The preheader is displayed in Apple Mail, Outlook 2013+, iOS mail, Android mail, Gmail, Outlook.com and Yahoo. Users can sometimes control how much preheader text is displayed, for example on the iPhone users can set none, one, three or five lines.

In this example we will add an editable preheader to a Taxi Design System.

First we need some standard preheader code: 

<div style="display: none; max-height: 0px; overflow: hidden;">
Preheader text goes here
</div>

The preheader is wrapped in a hidden div, so that the text is not shown then the user views the email.

We will also add the Litmus Preheader Space Hack, so that empty space is added to the end of the preheader. This avoids other text, such as the navigation or logo alt-text, from being displayed.

Now we can add an editable tag:

<editable name="preheader">Preheader text goes here</editable>

Note that we should avoid using rich text for the preheader, as any formatting or links that are added will not be show in the email inbox. 

You may also wish to set a sensible default for your preheader text, so that if the editor does not change it, the message sill makes sense for the user. 

Complete Snippet

HTML

<module name="preheader" label="Preheader">
<div style="display: none; max-height: 0px; overflow: hidden;">
<editable name="preheader">Preheader text goes here</editable>
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>
</module>

← Back to /Code