CH0
Preheader Text Not Working
Hi everyone!
I am running into another strange issue. This is the first time I have ever seen this, but for some reason the preheader text is disappearing and showing the body text instead. I know I don't have the preaheader text in the email code itself, but I do have it in our ESP's text box area. It has been working just fine until now.
I also have a big amount of " "s in my code because we only want the preheader text we wrote to show up, not the body text.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="format-detection" content="date=no" /><meta name="format-detection" content="address=no" /><meta name="format-detection" content="telephone=no" /><meta name="x-apple-disable-message-reformatting" /><!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Roboto:300,300i,400,400i,700,700i" rel="stylesheet" /><!--<![endif]--><!--[if gte mso 9]>
<style type="text/css" media="all">
sup { font-size: 100% !important; }
</style>
<![endif]-->
<style type="text/css" media="screen">body {
padding:0 !important;
margin:0 auto !important;
display:block !important;
min-width:100% !important;
width:100% !important;
background:#efeff1;
-webkit-text-size-adjust:none }
a {
color:#5EB3B7;
text-decoration:none }
p {
padding:0 !important;
margin:0 !important }
img {
-ms-interpolation-mode: bicubic;
}
.mcnPreviewText {
display: none !important;
}
.text-btn-a {
display: block;
}
.link-white a {
color: #ffffff !important;
}
.link-black a {
color: #0b2135 !important;
}
.link-block {
display: block;
}
.text-btn-td
.text-btn-a {
transition: all 150ms ease-in;
color: #efeff1;
}
.text-btn-td:hover
.text-btn-a:hover {
opacity: 0.65 !important;
border-color: #5EB3B7 !important;
color: #ffffff !important;
}
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
u + .body .gwfw {
width: 100% !important;
width: 100vw !important;
}
.td,
.m-shell {
width: 100% !important;
min-width: 100% !important;
}
.m-td,
.m-hide {
display: none !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
min-height: 0 !important;
}
.m-block {
display: block !important;
}
.fluid-img img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.column,
.column-top {
float: left !important;
width: 100% !important;
display: block !important;
}
.content-spacing {
width: 15px !important;
}
.m-bg {
height: auto !important;
background-position: center center !important;
background-size: cover !important;
}
.mt-left {
text-align: left !important;
}
.mt-center {
text-align: center !important;
}
.mt-right {
text-align: right !important;
}
.me-left {
margin-right: auto !important;
}
.me-center {
margin: 0 auto !important;
}
.me-right {
margin-left: auto !important;
}
.h-auto {
height: auto !important;
}
.w-auto {
width: auto !important;
}
.w-full {
width: 100% !important;
}
.w-2 {
width: 2% !important;
}
.w-32 {
width: 32% !important;
}
.w-49 {
width: 49% !important;
}
.p-0 {
padding: 0 !important;
}
.p-15 {
padding: 15px !important;
}
.plr-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.plr-15 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.plr-30 {
padding-left: 30px !important;
padding-right: 30px !important;
}
.ptb-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.ptb-15 {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.ptb-30 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-1 {
padding-bottom: 1px !important;
}
.pb-5 {
padding-bottom: 5px !important;
}
.pb-10 {
padding-bottom: 10px !important;
}
.pb-15 {
padding-bottom: 15px !important;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pb-25 {
padding-bottom: 25px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
}
</style>
</head>
<body class="body" style="padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#efeff1; -webkit-text-size-adjust:none;">
<div style="display: none; max-height: 0px; overflow: hidden;">
</div>
<!--[if !gte mso 9]><!--><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;"> </span> <!--<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efeff1" class="gwfw">
<tbody>
<tr>
<td align="center" valign="top">
<table width="620" border="0" cellspacing="0" cellpadding="0" class="m-shell">
<tbody>
<tr>
<td class="td" style="width:620px; min-width:620px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><!-- Container -->
<tbody>
<tr>
<td bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><!-- Header -->
<tbody>
<tr>
<td class="img-center plr-15" style="padding: 30px; font-size:0pt; line-height:0pt; text-align:center;"><a target="_blank" href="https://eat.chownow.com/"><img class="text" width="150" border="0" alt="Logo" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" src="https://d2axdqolvqmdvx.cloudfront.net/59d9b111-6d03-4bdb-8e96-3d29b241c4ff/Header_Logo.png" /></a>
</td>
</tr>
<!-- END Header --><!-- Main -->
<tr>
<td class="plr-15" style="padding: 20px 30px 50px 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text a-center lts-1" style="padding-bottom: 15px; color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:center; letter-spacing:1px;"><strong>ENDLESS SUMMER SAVINGS</strong>
</td>
</tr>
<tr>
<td class="text-large a-center t-green" style="padding-bottom: 15px; font-family:'Lato', Arial, sans-serif; font-size:66px; line-height:70px; text-align:center; color:#5EB3B7;"><strong>15% off</strong>
</td>
</tr>
<tr>
<td class="text-1 a-center lts-1 t-green" style="padding-bottom: 15px; font-family:'Lato', Arial, sans-serif; font-size:23px; line-height:27px; text-align:center; letter-spacing:1px; color:#5EB3B7;">your next online order
</td>
</tr>
<tr>
<td class="text a-center lts-1" style="padding-bottom: 30px; color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:center; letter-spacing:1px;"><strong>PROMO CODE: SPLASH</strong>
</td>
</tr>
<tr>
<td align="center"><!-- Button -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text-btn-td" style="background-color: #5EB3B7;" bgcolor="#5EB3B7"><a target="_blank" class="text-btn-a" style="color: #ffffff; font-family: 'Lato', Arial, sans-serif; font-size: 14px; line-height: 18px; text-align: center; text-decoration: none; display: block; font-weight: bold; letter-spacing: 1px; padding: 10px; background-color: #5EB3B7; border: 1px solid #5EB3B7; mso-line-height-rule: exactly;" href="https://eat.chownow.com/"> REDEEM </a>
</td>
</tr>
</tbody>
</table>
<!-- END Button --></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- END Main --><!-- Image -->
<tr>
<td class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left;"><a target="_blank" href="https://eat.chownow.com/"><img class="text" width="600" height="325" border="0" alt="Hero Image" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" src="https://d2axdqolvqmdvx.cloudfront.net/e354a70d-fdad-4d3c-94a6-437521dbd78b/emailimage_04.png" /></a>
</td>
</tr>
<!-- END Image -->
</tbody>
</table>
</td>
</tr>
<!-- END Container --><!-- Footer -->
<tr>
<td style="padding: 23px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding-bottom: 30px;"><!-- Download -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:left;">
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left;">
<div class="img-center" style="font-size:0pt; line-height:0pt; text-align:center"><a target="_blank" href="https://eat.chownow.com/"><img class="text" border="0" width="110" height="33" alt="iOS-App" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" src="https://gallery.mailchimp.com/11e239951f421df7d77233e18/images/3f004edb-6ded-4007-82ea-9ecc8b025828.png" /></a>
</div>
</td>
<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:left;">
</td>
<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:left;">
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left;">
<div class="img-center" style="font-size:0pt; line-height:0pt; text-align:center"><a target="_blank" href="https://eat.chownow.com/"><img class="text" border="0" width="110" height="33" alt="Android-App" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" src="https://gallery.mailchimp.com/11e239951f421df7d77233e18/images/26f407b8-e2e1-4c1e-b26a-77c3228c071d.png" /></a>
</div>
</td>
<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:left;">
</td>
</tr>
</tbody>
</table>
<!-- END Download --></td>
</tr>
<tr>
<td class="text-footer" style="padding-bottom: 0px; color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:11px; line-height:15px; text-align:center;">Offer valid on one order through the [ Restaurant Name ] website or mobile app through 8/31.
<br />
© [ Restaurant Name ]. [ LocationAddress ]. All Rights Reserved.
<br />
<br />
Our records indicate we have your permission to send emails to this email address. If you’d rather not receive future marketing emails from us, please <a target="_blank" class="link-u t-black" style="text-decoration:underline; color:#0b2135;" href="{{ unsubscribeUrl }}"><span class="link-u t-black" style="text-decoration:underline; color:#0b2135;">unsubscribe here</span></a>.
<br />
<br />
<br />
<a target="_blank" class="link-u t-black" style="text-decoration:underline; color:#0b2135;" href="{{ viewInBrowserUrl }}"><span class="link-u t-black" style="text-decoration:underline; color:#0b2135;">View in browser</span></a>
<br />
<br />
</td>
</tr>
<tr>
<td class="img-center" style="font-size:0pt; line-height:0pt; text-align:center;"><img class="text" width="170" height="21" border="0" alt="ChowNow" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; " src="https://d2axdqolvqmdvx.cloudfront.net/d0fb51b9-15d7-4ed7-9bbf-5065bc201f18/CN_PoweredBy_Logo2x.png" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- END Footer -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Let me know your thoughts. I know this is a weird issue.
Thanks!
Charlotte
I'm not sure of why it's not working when you have put the preheader text in the ESP - which ESP is it?
Does the preheader text have to be defined in the ESP? If you can get away with it being in the template, this is how I do mine (and I have no issues with this):
I add this code within the <style> tag, at the top of the email, and outside of any media query:
.invisible-preheader{
width:0px!important;
height:0px!important;
font-size:0px!important;
line-height:0px!important;
display:none!important;
color:#e8e8e8!important;
}
I then add the actual markup inside the table when starting to build the email:
<!-- START Invisible Preheader -->
<tr>
<td align="center" class="invisible-preheader" style="font-size:0px; width:0px; height:0px; display:none; color:#e8e8e8; line-height:0px;">
<span class="invisible-preheader" style="font-size:0px; width:0px; height:0px; display:none; color:#e8e8e8; line-height:0px;">
INVISIBLE PREHEADER TO GO HERE
</span>
</td>
</tr>
<!-- END Invisible Preheader -->
I've used this for over 6 years and never had an issue this way :)
Hi Kathleen!
I have heard of doing it this way, and I am glad your method works! In our ESP (Iterable), there's a slot where you can just place the email information like the From Name, Subject Line, and the Preheader text. It has been working just fine until our most recent email send. Where should I place the hidden preheader text in my code? I have a <div> directly under the <body> tag in my code where I only want the preheader text to show and not the body text. Should it be placed before this <div>?
Hi Charlotte,
What does the final code after send from the ESP, look like?
If we can get that view, it'll give us a real representation of the issue and what you could try.
I am not sure how to get that code. Do you have an idea? I sent it out of Iterable.
Hmm good question. Outlook (desktop program) is by far the easiest way to export code from an email. Webmail versions of email clients can work, after some tidying up.
What email providors could you test to? If you can let me know, then I can give you instructions on how to export the code from the respective programs/webmail sites
The Litmus Scope tool (https://litmus.com/scope/) can extract email code from your inbox and allows you to view the design/code sides which is great. Right now it only works in Gmail.
In Iterable, you can also try including a
{{viewInBrowserUrl}}link in your email code. After sending the email, you can view it as a webpage and then view the source code to see what the final code looks like. Hope that helps@Niven - how do you export email code from Outlook?
I'm w/Niven pov...
BTW Nice layout. Never saw a button with so many nbsp left/right. Could you post where you learned that and why you've used?
The designer wanted me to add more spaces in the button, and that is how it was built before me, so I just added more spaces. Seems to work!
I am not sure where the previous person learned it that way.
To get the code just view it online and inspect the page source from the browser menu or if in email, regardless if mail client or web client just view the header info or save down the mail block as an attachment
This is what we use and have had no problems.
Mitch