Customize the Email Preview Text in an HTML Email (Preheader)

Prev Next

Goal

Define custom preview text that appears below the subject line in an HTML email.


Background Information

The preheader is the preview text displayed after the subject line in most email clients.

By default, the preheader is generated from the first visible text in the email body. If this content is not suitable for preview (for example, navigation links or legal text), you can override it by inserting hidden HTML text at the beginning of the <body> section.


Procedure

  1. Follow the email creation process until you reach Content.

  2. In the Email (HTML) Switch to the HTML CODE view.

  3. Insert the following code directly below the opening <body> tag:

    <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>
  4. Replace the placeholder text with your custom preheader text.

  5. Use a text color that matches your email background (for example #FFFFFF for white) to prevent the text from becoming visible in email clients that partially ignore hidden styles.

  6. Click Preview to verify that the preheader appears below the subject line and remains hidden in the email body.


Result

The custom preheader appears below the subject line in supported email clients and does not display in the visible email content.


Best Practices

  • Keep the preheader between 85–100 characters to ensure consistent display.

  • Do not repeat the subject line.

  • Match the hidden text color to the email background.

  • Use Preview to verify correct rendering.

  • Test across major email clients.