Goal​

To customize the preheader of your email.


Background Information​

Preheaders are an increasingly important part of email marketing. A preheader is a text that displays after the subject line of your email, in the email client of a recipient. It is also referred to as preview text or snippet text since it typically shows the first sentence or two of your email. The number of characters that an email client displays as preheader text can vary from 50 to 140 characters. We recommend preheaders that are 85–100 characters long. The ​Message Preview​ window now displays the first 130 characters of the preheader of your email to help you design your preheaders.


Prerequisites​

Create an email.


Procedure​

By default, the preheader that displays in the ​Message Preview​ window is the first 130 characters of the non-code portion of the email. The code portion often begins with a <body> tag. However, you can change the default preheader. For example, if the preheader contains an unsubscribe link, you can hide it from the customer. With a simple workaround, you can override the default preheader. The workaround lets you hide the preheader so it does not show up in the email itself.

You use the <div> tag in HTML to hide a preheader. The display parameter within the <div> tag hides the preheader text from most email clients, but not all of them. So you also set the font size to 1px (pixel) and the color to be the same as the background. These settings and a few others effectively hide the text. In the example below, the color #FFFFFF is used which is white. Match whatever the background color of your email is.

  1. In the ​Main Navigation​, click ​Create​ New > ​Message 
    ⇒ Step ​1. Type​ opens.
  2. Enter message information and select ​Email​ from the ​Type​ drop-down list.
  3. Click ​Create​.
    ⇒ Step ​2. Content​ opens.
  4. To view the HTML code of your email, click ​HTML Code​.
  5. After the <body> tag of your email, add the following line of code: <div style="display:none;font-size:1px;color:#FFFFFF;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">.
  6. Enter your preheader text after the >.
  7. At the end of your preheader text, type </div>.
    ⇒ The </div> closes the <div> tag and marks the end of your hidden preheader text.
  8. To see your email in the visual editor, click ​HTML Editor​
    ⇒ The text that you enter between the ​<div>​ tags does not display in the body of the email.
  9. Click ​Preview​ to open the ​Message Preview​ window where you can see the ​Preheader​ below the ​Email Subject Line​.
    ⇒ The text that you enter between the ​<div>​ tags displays after the ​Preheader​ heading, but not in the email itself.