How to customize a Zendesk Help Center theme without code

A Zendesk Help Center theme has two layers. The settings are fields in Guide that anyone with admin access can change. The code is templates, CSS and JavaScript. You can get a long way with the settings alone, and staying out of the code has a real benefit: you do not have to maintain it.

Where the settings are

1. In Guide, click Customize design in the sidebar.
2. Click Customize on the theme you want to change.
3. Open the Settings panel. Colors, fonts, brand and images are grouped there.
4. Change a value and check the preview. Publish when you are done.

Before you start, copy the live theme from its menu and work on the copy. Publish the copy when it is ready. Zendesk advises copying a live theme before editing it, in its theme editing article. The list of Copenhagen settings is in the customization article.

What you can change in Copenhagen

Copenhagen, Zendesk's default theme, exposes these in the Settings panel:

• Colors: brand color, brand text color for hover and active states, text color, link color and background color.
• Fonts: a heading font and a text font.
• Images: logo, favicon, the home page hero image, the community topics hero image and the community section image on the home page.
• Show and hide switches for page elements, covered in Zendesk's hiding and showing elements article.

If you only use these, your theme is still a standard theme. The moment you edit code, it becomes a custom theme and you carry its upgrades. That is the reason to push settings as far as they go.

A sensible order

1. Logo and favicon. Zendesk's branding article has size guidance. A wide logo may need a different file than a square one.
2. Brand color. Text sits on it in the brand text color, so check the two together for contrast.
3. Text, link and background colors. Check contrast: aim for 4.5 to 1 for body text and links.
4. Fonts. Keep to two, one for headings and one for text.
5. Hero image or text on the home page, if the theme has them.
6. Switch off elements you do not use, such as comments or social sharing.
7. Preview the home page, an article, search results and the request form, on desktop and phone width.

An example: a rebrand in under an hour

Say your company has new brand colors and a new logo. In a theme with the settings above, the job is short. Export the logo as a transparent PNG or SVG at about twice its display height. Upload it, then the favicon. Set the brand color and check the brand text color against it. Set the link color to something that reads on your background. Replace the hero image if the theme has one. Then walk through the checks in the next section.

The same job in a theme with no matching setting means finding the color in the CSS, changing it in several places, and testing every page. It is possible. It is also how a Help Center ends up with a custom theme nobody wants to touch.

Check your work

• Open a long article, a short one and a search with no results.
• Use only the keyboard to reach search and a link. Is focus visible?
• Sign in and open the request form.
• View the home page at phone width.
• If you changed the language, check that nothing is cut off by longer words.

Common mistakes

• Editing the live theme. A half-finished change is visible to every visitor. Work on a copy.
• Picking a brand color that is too light. Buttons and the header then fail contrast, and you only notice on a phone in daylight.
• Uploading a very large logo. Use a file close to the size it is shown at, with a transparent background.
• Checking only the home page. Articles, search and the request form have their own layouts.
• Moving to code too early. Each edit makes the theme yours to maintain, including the v4 deadline.

Where settings come from, and where they stop

The Settings panel is not fixed. A theme's manifest.json defines it. Each setting has a type, and Zendesk documents six: text, list, checkbox, color, file and range. A theme author can add as many as the manifest allows. That is why two themes can look the same in code and still feel very different to configure.

These need code, or a theme that already has a setting for them:

• A font that is not in the font list.
• A different header layout, or moving blocks around a page.
• Separate light and dark colors. Copenhagen has one palette.
• New page templates, extra sections or custom scripts.

When to pick a theme with more settings

Choose by what you would otherwise edit by hand. If you will change fonts, layout or dark colors, a theme that has those as settings saves you from owning code. Here is how the three themes we know compare:

ZenTheme Nightfall has 47 settings, including an announcement bar, footer links and home page text, and costs nothing. ZenTheme Pro adds the style system: looks, header layouts, corner and card styles, custom fonts and per-mode palettes. Standard is $299, one-time. Our free themes guide covers what to check in any theme before you install it.

Not affiliated with Zendesk.