General information
What is Zendesk Themes?
How to Customize Your Zendesk Theme
Customizing your Zendesk theme allows you to align your Help Center’s appearance and functionality with your brand identity and specific requirements. Whether you’re looking to tweak colors, add custom components, or integrate unique workflows, this guide will walk you through the essential steps to customize your Zendesk theme effectively.
Step 1: Prepare Your Customization Plan
Before diving into theme customization, outline your objectives:
- Define what changes you need (e.g., design, functionality, or layout).
- Decide whether you’ll start with a pre-built theme or Zendesk’s default Copenhagen theme.
- List your branding elements, such as logo, fonts, and color codes.
Step 2: Access the Theme Editor
- Log in to your Zendesk account.
- Navigate to Guide Admin from the Zendesk dashboard.
- Click on Customize design under the Guide settings.
- Select the theme you wish to customize and click Edit code to open the theme editor.
Step 3: Edit HTML, CSS, and JavaScript
Zendesk themes are built using a combination of HTML, CSS, JavaScript, and Zendesk’s templating language, Curlybars. You can:
- Modify HTML: Structure your page layouts by editing templates like
header.hbs
,footer.hbs
, orarticle_page.hbs
. - Update CSS: Change colors, fonts, and styles by editing the
style.css
file. - Enhance Functionality: Add interactivity using custom JavaScript in the
script.js
file.
Example: Change the Help Center Background Color
body {
background-color: #f4f4f4; /* Replace with your desired color */
}
Step 4: Utilize Theme Settings
Zendesk allows you to create configurable settings that can be adjusted without editing code. To add new settings:
- Open the
manifest.json
file. - Add your custom settings under the
settings
object. For example:{ "settings": { "brand_color": { "type": "color", "default": "#1e73be", "label": "Brand Primary Color" } } }
- Save your changes and access these settings from the theme customization panel.
Step 5: Preview and Test Your Changes
- Use the Preview feature in the theme editor to check your changes in real time.
- Test the Help Center on various devices (desktop, tablet, mobile) to ensure responsiveness.
- Verify that interactive elements (e.g., search bar, navigation links) work correctly.
Step 6: Publish Your Theme
Once you’re satisfied with your customizations:
- Click Save to ensure all changes are applied.
- Hit Publish to make the customized theme live for your customers.
Pro Tips for Advanced Customization
- Use Custom Apps: Integrate Zendesk apps to enhance your Help Center’s capabilities.
- Leverage APIs: Use the Zendesk API to fetch and display dynamic content.
- Multibrand Support: If you manage multiple brands, customize themes for each brand separately.
- Version Control: Keep a backup of your theme files to revert changes if needed.