What is Preheader (Preview) Text?
Preheader text, sometimes called preview text, is one of the first things recipients see when an email reaches their inbox. It is displayed in the inbox after the subject line of an email, and is usually pulled from the first line of text within the body of an email
There are two main ways you can use preheader text to enhance your emails:
- Use preheader text to summarize the email
- Use preheader text to complement your subject line
If you do not specifically insert preheader text, inboxes will automatically pull it from the first line of text within an email -- this means that ALT text, your navigation bar, etc. could be pulled as the preheader text, so it's best to specify what exactly you want your preheader text to display. To learn more about how to strategically use preview text, head to the Klaviyo Blog.
How to Insert Preheader Text
You can insert preheader text into an email by adding a text block to the top of your template. If you're using one of our default templates, there will be a spot for this already. Make sure to add the text block above your main header logo, or any other header text. If you're custom coding an HTML template, preheader text is the first line of text after the opening <body> tag.
To ensure your preheader text is not too obtrusive after the email is opened, you can adjust the text size and color -- the size of the preheader text in your email will not impact how it appears in the inbox.
How to Hide Preheader Text
Please note that while you cannot hide preheader text in the inbox preview, you can hide preheader text within the template itself. There are two ways you can do this:
- Non-technical: The easiest way to hide preheader text in a template is to simply change the font size to 8px and change the text color to the same color as the background color. For example, if you have white preheader text against a white email background, the text won't be visible.
- Technical: Insert a line of code at the beginning of the email by editing the Source area of a text box. Below is an example of some preheader text that will be hidden in an email template:
Be sure to change "This is preheader text," otherwise this will be displayed.
<div> <td style="display:none !important; visibility:hidden; mso-hide:all; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;"> This is preheader text. </td> </div>
How many characters of preheader text are displayed varies by device and email client, with smaller screens displaying fewer preheader characters. Here are the character limits broken down by email client:
Image via Email on Acid
It is possible to limit the number of characters that are displayed using a chain of zero-width non-joiners (‌) and non-breaking spaces ( ) after your desired text. This will prevent email clients from pulling additional text after your desired preheader text (i.e. text from your navigation bar, etc.).
Simply edit the Source area of the text box and add a string of
‌ ‌ ‌ after your desired text. To do this, add the following div (hidden characters of just spaces) to the source of the text block, following the preview header text </p> tags.
This process is outlined further in this post by Litmus.