Articles in this section

See more

Adding Preheaders to Emails

Avatar
Leya Wood
  • Updated
Follow
Preheader text is a short text summary directly below the subject line in an email to give readers a better idea of what the email is about.

Preheader text is a great way to drive opens by displaying content that captures the recipient’s attention.

This article will detail how to add preheader text to simple and designer emails.


Article Contents

     Available with:    
  Marketing Automation ✓  
  CRM Ultimate ✓  
  CRM PRO ✓  
  CRM Free ✓  
        
  Toolbar:    
01NavMarketing.png
       
  Users:    
  Administrators ✓  
  Company Managers ✓  
  Marketing Managers ✓  
  Sales Managers    
  Salespersons    
  Jr. Salespersons    
 


Adding Preheader Layout Blocks

Layout blocks are the foundation of emails created in SharpSpring. 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, do the following: 

  1. Click Email in SharpSpring's left toolbar. 
  2. Create or edit an email.
  3. Click  grid.png  Content and Layout in the Email Designer toolbar.
  4. Click the Simple tab.
  5. Drag-and-drop the Preheader layout block into your email.
  6. Click Save.
  

Click to enlarge.
   
 
Note: Themed blocks are available only in emails created from designer templates.
   

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.

To edit preheader content, do the following:

  1. Click Email in SharpSpring's left toolbar. 
  2. Create or edit an email with a layout block containing a preheader layout block.
  3. Click the text added Preheader layout block.
  4. Enter text as desired.
  5. Utilize the Email Content Editor's word processing features to modify text as desired.
  6. Click Done.
  7. Click Save.
  

Click to enlarge.


Hiding Preheader Content in Microsoft Outlook

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

To hide preheader text in simple and designer emails, do the following:

  1. Click Email in SharpSpring's left toolbar. 
  2. Create or edit an email with a layout block containing a preheader layout block.
  3. Click  grid.png  Content and Layout in the Email Designer toolbar.
  4. Click the Simple tab.
  5. Drag-and-drop the Preheader layout block into your email.
  6. Modify the preheader's text.
  7. Click  more.png  More Options > View Code.
  8. Add the following at the bottom of the <head> of the email's HTML, before the closing </head> tag:

    <style> .shsp-wireframe-layout-preheader { display: none; } </style>
  9. Add the following as a style attribute in the innermost <table> or <td> element containing the preheader text:

    style="mso-hide: all;"
  10. Click Done Editing.
  11. Click Save.
  12. Send the email to a test list.
  


Click to enlarge.
 
Important: Legacy emails cannot use preheader text.
 
Note: SharpSpring offers Professional Services to assist with custom coding.
 
Note: Certain emails may already have a preheader block.
 
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.



Using Merge Variables in Preheader Text

You can add merge variables to preheader text, but the syntax is slightly different. Instead of wrapping the merge variables in brackets, you simply use the merge variable outside of the brackets.

Defaults are handled slightly different as well. If you are using the 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 class="preheader">{$firstName} check out these awesome deals</p>


The following is an example of code with defaults:

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

Related articles

×

Why was this help article not helpful?

Still didn't find what you are looking for?