How to insert preview text into an email

You will learn

Learn what preview text is, where it appears in your emails by default, and how to insert it into the body of your emails. 

About preview text

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 2 main ways you can use preview text to enhance your emails:

1. Use preview text to summarize the email.
2. Use preview text to complement your subject line.

If you do not specifically insert preview 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 preview text, so it's best to specify what exactly you want your preview text to display. To learn more about how to strategically use preview text, head to the Klaviyo Blog.

Add preview text to a flow email 

To insert preview text for a flow email on the email preview screen:

1. Open the flow containing the email you'd like to edit
2. Click the flow message to open the Content sidebar
3. Click Edit from the content sidebar
4. In the Preview Text field, add your desired preview text
   

Add preview text to a campaign email

To insert preview text for a campaign on the email preview screen:

1. Open the campaign you'd like to edit
2. Click Continue to Content
3. In the Preview Text field, add your desired preview text
   

Preview text in the inbox

The Preview Text input automatically adds spacers, so only the preview text you enter displays in your customer's inboxes. 

Different devices and email clients have different limits on the amount of preview text characters displayed, with smaller screens displaying fewer preview characters. Keep this in mind, and keep preview text concise. Here are the character limits broken down by email client: 

Image via Email on Acid 

Display preview text inside your emails

In some cases, you may want to display your preview text inside the body of your template. You can reference any preview text you set on the email preview screen using following tag:

{% render_variable preview_text %}

Paste the tag into any text block in your template. 

Hide preview text

If you want to completely hide any preview text and have only your subject line appear in your customer's inboxes, add the code snippet below to the very top of your email. This code pushes your email content past the preview text viewing area, so it will appear blank. 

1. Add an HTML block to the very top of your email, above all other content. 
2. Add the following code snippet: 
   

   <div style="display: none; max-height: 0px; overflow: hidden;">͏ &zwnj;
       &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
       ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
       &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
       &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
       ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
       &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
       &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy;
       ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
       &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
       &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
       ͏&zwnj; &nbsp; &shy;
   </div>

3. Save the HTML block. 

When your emails hit the inbox, customers will only see your subject line.

Additional resources

• Message personalization reference
• Templates and design glossary