Lead Gen & CRM
How can we help you?
Search our help articles, video tutorials, and quickstart guides

You've got this. You've got us. Search our Knowledge Base to quickly find answers to your questions.

Adding Preheaders to Emails

Article: 000050405
Updated: October 4, 2023

Preheader text is a great way to drive open rates by displaying content that captures the reader's attention. Preheader text can be seen by email recipients, directly underneath the subject line, even before they open the email.

In this article, you'll learn how to add preheader text to simple and designer emails.

Article Contents

 
Users:
Administrators✓ 
Company Managers✓ 
Marketing Managers✓ 
Sales Managers  
Salespersons  
Jr. Salespersons  
Light Bulb IconTip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article.

  

Adding Preheader Layout Blocks

Layout blocks are the foundation of emails created in the Lead Gen & CRM platform. Elements can be added into layout blocks.

The Email Designer allows you to drag, drop, and reorder layout blocks into your email to further customize it. 

One of the many premade layout blocks available is the preheader layout block. To add preheader layout blocks create or edit an email from the Email page in the left toolbar. 

  1. Click  grid.png  Content and Layout in the Email Designer toolbar.
  2. Click the Simple tab. 
  3. Drag and drop the Preheader layout block into your email.
  4. Click Save.

    Drag preheader element into email

     

Refer to Using Layout and Element Blocks in Emails for more information on layout blocks.
 


Editing Preheader Layout Blocks

You can edit preheader content from the Email Designer toolbar.

Note: The character limit for preheader text in an email depends on what email client your lead is using to open the email. If most of your leads open their emails in Outlook, then limit your preheader text to 35 characters or less. For other clients, it's best to keep your text to 90 characters or less. 

First, you must create or edit an email with a preheader layout block. Begin from the Email page, in the left toolbar. 

  1. Click the Preheader layout block.

    Select the preheader

     

  2. Use the Email Content Editor's word processing features to modify text as desired.
  3. Click Save.

    Edit the preheader

     


Hiding Preheader Content in Microsoft Outlook

You can hide preheader content in emails that are viewed in Microsoft Outlook. 

Important: Legacy emails cannot use preheader text.

To hide preheader text in simple and designer emails, create or edit an email from the Email page in the left toolbar. 

  1. Click  grid.png  Content and Layout in the Email Designer toolbar.
  2. Click the Simple tab.
  3. Drag and drop the Preheader layout block into your email.

    Drag and drop preheader into email

     

  4. Modify the preheader's text as desired using the Email Content Editor. 

    Edit preheader text as desired

     

  5. Click  more.png  More Options > View Code.

    Click view code

     

  6. In the Email's HTML, at the bottom of the <head> tag, add the following code before the closing </head> tag:
      
    <style> .shsp-wireframe-layout-preheader { display: none; } </style>
     
    Note: To quickly jump to the section you need to update, use your keyboard's search shortcuts (CTRL+F or Command+F) to search for the closing </head> tag. Lead Gen & CRM offers Professional Services to assist with custom coding.


    Add code above closing header

    Add the following as a style attribute in the innermost <table> or <td> element that contains the preheader text:

    style="mso-hide: all;"

  7. Click Done Editing.
     
    Note: To quickly jump to the section you need to update, use your keyboard's search shortcuts (CTRL+F or Command+F) to search for the text that is in your preheader. Lead Gen & CRM offers Professional Services to assist with custom coding.


    Include style text

     

  8. Click Save.

    Save changes to the email

     

Before sending the email to your real contact or lead list, it's a good idea to send the email to a test list to be sure your code is working as expected. 


Using Merge Variables in Preheader Text

You can add merge variables to preheader text, to personalize it. Here is an example of how your merge variables can look in a preheader.


Merge variables in preheader

 

Defaults are handled slightly differently as well. Your merge variable will fill in personalized lead information, like the lead's first name or company name. In the event personalized information isn't available, default text can help to avoid a blank space in the email.

If you are using the same merge variable elsewhere in your email, and a different default is used, that is what will populate the default area of the merge variable in the preheader text.

The .HTML document is parsed top-to-bottom, and when the second use of the same merge variable is noticed, the default value for that merge variable will overwrite what was previously set in the first use of that merge variable.

The following is an example of code without defaults:

<p >{$firstName} check out these awesome deals</p>
 

or

{$firstName} check out these awesome deals

 

 

The following is an example of code with defaults:

<p >{$firstName!"You should"} check out these awesome deals</p>

or

{$firstName!"You should"} check out these awesome deals
 
 

Did this article answer your question?

Yes
Partially
No

Related Answers

Constant Contact Logo

Copyright © 2025 · All Rights Reserved · Constant Contact · Privacy Center