Creating a branded theme header

In this post we explore how to update the header of your Zendesk theme so that it aligns with the brand of your company and some important things to consider when doing so.

For the purpose of this post we consider the header to be part of your help center contained in the header.hbs template of your theme, which is present on all pages.

Common elements

The following elements are available in your Zendesk theme header by default:

• Your company logo
• Sign in link
• Submit a Request link
• Community link (if the Community is enabled)
• User avatar and name (if signed in)
• My activities link (if signed in)
• My profile link (if signed in)

Many customers also choose to add a link to their main company website or a site-wide search bar. Additional elements can be carried across from your company website however, as we’ll see, the benefits of such an approach should be weighed against the costs.

Layout

In many instances, the primary purpose of a header is to allow visitors to find their way around the help center. Our Navbars are designed for use in the header and several ready-made layout options and styles exist.

The Headers section of our Pattern Library contains some common header layout options, including headers that stick to the top of the page or float above important content like a hero image.

Key considerations

Depending on the nature of your business, your may be tempted to replicate your main company website header in your Zendesk Help Center. In some instances this may be appropriate, but you should consider the following:

1. Are the elements within my main website header suitable for the help center?

   If you run an online store and have links to product pages and a shopping cart in your page header, is that going to be helpful or distracting to customers looking for answers in your help center?

2. Will copying elements from my main website add to ongoing maintenance?

   If your main website header changes often, is time spent keeping your help center’s header in-sync worthwhile? Elements like shopping carts may require time to set up and maintain and mega-menus with products links can often be replaced with a static link to your store, which is both easy to implement and less confusing for your visitors.

A good compromise is often to simply copy the style of your main website header.

Visitors will know that they’re still browsing a page that belongs to your company and it will be clear that the purpose of the page is for them to get answers to their questions. A link back to the main website in the header will allow visitors to easily find their way back, if required.

You and your team can rest assured that you have a branded, yet independent, website dedicated to serving your valuable customers without having to constantly worry about keeping the pages in-sync.

Updating the header

The header of your theme is contained within the header.hbs page template.

We recommend either starting with a theme that meets your header requirements or copying one directly from another theme or the Pattern Library. Start simple and only add elements when they can be shown to be of value to your visitors.

Published on 12 August 2020