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 recipient's email client. It is also referred to as preview or snippet text since it typically shows your email's first sentence or two.

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.

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 appear in the email.


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, we use #FFFFFF (white). Match whatever the background color of your email is.


  1. In the ​main navigation, click ​Create​ New > Message > ​Email Message.

  2. Enter the <body> tag of your email. 

  3. Below the <body> tag, add the following line of code using the HTML CODE view:

    <div style="display:none;font-size:1px;color:#FFFFFF;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Your preheader text goes here </div>
    XML


    When you switch to the HTML EDITOR view, the text that you enter between the ​<div>​ tags is not displayed in the body of the email.

  4. Click ​Preview to open the ​Message Preview​ window. The ​Preheader​ is visible 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.