How to customize help center theme on Zendesk

intermediate 8 min read Updated 2026-03-18

Quick Answer

Customize your Zendesk help center theme by navigating to Guide > Customize design, selecting your theme, and modifying the template code, colors, fonts, and layout. You can use the live preview feature to see changes in real-time before publishing.

Try Zendesk Full Zendesk Review

Prerequisites

Administrator access to Zendesk instance
Basic understanding of HTML and CSS
Zendesk Guide subscription plan
Brand assets and design guidelines ready

Step-by-Step Instructions

Access the theme customization interface

Log into your Zendesk admin panel and navigate to Guide in the left sidebar. Click on Customize design to enter the theme editor. Select your help center brand if you have multiple brands configured.

Make sure you're working on the correct brand if you manage multiple help centers

Choose your base theme

In the theme editor, click Add theme or select an existing theme from the themes list. Choose from Zendesk's default themes like Copenhagen, New York, or Dublin. You can also import a custom theme by clicking Import theme and uploading a ZIP file.

Start with Copenhagen theme as it offers the most customization options and responsive design

Customize colors and branding

Click on Settings in the theme editor sidebar. Update the Brand color, Text color, and Link color fields with your brand's hex codes. Upload your logo by clicking Choose file under the Logo section. Set your favicon and adjust the logo height as needed.

Use high-resolution PNG logos with transparent backgrounds for best results

Modify fonts and typography

In the Settings panel, scroll to the Fonts section. Select your preferred Heading font and Body font from the dropdown menus. You can choose from web-safe fonts or add custom Google Fonts by entering the font name. Adjust font sizes and line heights in the typography settings.

Limit yourself to 2-3 font families to maintain clean design and fast loading times

Edit template code and layout

Click on Edit code to access the theme's HTML templates and CSS files. Navigate through folders like templates, styles, and scripts. Modify files such as home_page.hbs, article_page.hbs, or style.css to customize layout, add custom elements, or adjust styling.

Always backup your theme before making major code changes by clicking the download button

Configure page layout and navigation

In the theme settings, customize the Home page layout by selecting featured content, category display options, and search bar placement. Configure the Navigation menu by adding or removing links, setting dropdown menus, and organizing categories. Enable or disable features like Community, Request form, and Search suggestions.

Keep navigation simple and limit main menu items to 5-7 for optimal user experience

Preview and test your changes

Use the Preview button to see your changes in real-time without affecting the live site. Test your theme on different screen sizes using the responsive preview options. Navigate through various pages like articles, categories, and search results to ensure consistent styling and functionality.

Test your help center on mobile devices and different browsers to ensure compatibility

Publish your customized theme

Once satisfied with your customizations, click Publish in the theme editor to make your changes live. You can also schedule the publication for a specific date and time by clicking Schedule publish. Monitor your help center after publishing to ensure everything displays correctly.

Publish changes during low-traffic hours to minimize impact on users if issues arise

Common Issues & Troubleshooting

Theme changes not appearing on live site

Clear your browser cache and hard refresh the page with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac). Ensure you clicked Publish and not just Save in the theme editor.

Custom CSS not working or being overridden

Check CSS specificity and add !important declarations if needed. Ensure your custom CSS is placed after default styles in the style.css file. Validate your CSS syntax for errors.

Logo appearing pixelated or incorrectly sized

Upload a high-resolution image (at least 200px height) in PNG or SVG format. Adjust the Logo height setting in theme settings, or add custom CSS like img.logo { max-height: 60px; width: auto; }.

Mobile responsiveness issues after customization

Test your changes using browser developer tools mobile simulation. Add responsive CSS using media queries like @media (max-width: 768px) to fix mobile-specific layout issues. Check that custom elements have proper responsive design.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Zendesk website before purchasing.

Visit Zendesk View Zendesk Pricing