How to use a header bar block in an email

You will learn 

Learn about header bar blocks, which are used to add a logo, key links, and other information to the top of your emails.

About header bar blocks 

Header bar blocks can contain a logo and any links you want to highlight. Consider including some of the following links in your header bar: 

• Home
• About us
• Shop now 
• New 
• Best sellers 
• Sale 
• FAQ
• Returns & exchanges (in order follow-up emails) 

Be judicious when adding links; including too many can make your email look crowded and hard to navigate. 

Header bar block format options 

You can choose different arrangements of the buttons and logo for desktop and mobile: 

• Desktop layout options
  • Logo stacked 
  • Logo inline 
  • Logo centered 
  • Links and buttons only
    
• Mobile layout options 
  • Stack all 
  • Logo stacked
  • Logo inline
  • Links and buttons only 
  • Stacked links and buttons only
    

Using a stacked format on mobile can make your buttons easier to read and click, as mobile screens are much smaller. 

Add a header bar block to an email

1. Within an email template, drag a Header bar block into the canvas.
   
2. The logo is pre-filled if you have already added your logo to your Klaviyo account under Content > Images & brand > Brand. Otherwise, add a logo. 
3. Use the dropdown arrow  icon to see each link’s details and edit its link text and URL.
   
   1. To save space on mobile, consider selecting Desktop only for any non-essential links.
      
4. Use the Add link or Add image buttons to add additional links or content.
   
5. Use the settings below the Content section to style the link text, including fonts, colors, and padding. 

Save a header bar for use in future emails 

Most emails you send should include a header bar. To save a header bar block as universal content for reuse in future emails, click the star icon next to the block and follow the prompts that appear. 

Learn more about universal and saved content.

Header bar block inbox considerations 

Depending on the recipient’s inbox, the header bar (or email as a whole) may appear with slight differences. To see how your email will appear in different inboxes, consider using a tool like Email on Acid. 

Header bar blocks and Gmail clipping 

Header bar blocks are code-heavy, which means they increase the overall code weight of your email. In messages that contain a large amount of other content, this could lead to Gmail clipping. 

If your message is at risk of clipping, consider using an image block for your logo, followed by a table block with your links. 

Header bar blocks and Microsoft Outlook

Due to Outlook’s unique HTML rendering engines, a border may be added to your header bar elements for recipients using Outlook. 

To avoid this, create a header using an image block for your logo and a table for your links.

Additional resources

• How to use a text block in an email
• How to update your brand styles in Klaviyo