Como atualizar e personalizar o tema do seu Zendesk Guide em 2026

Sua central de ajuda é frequentemente o primeiro lugar que os clientes procuram quando precisam de respostas. Um tema genérico, pronto para uso, pode funcionar inicialmente, mas eventualmente você vai querer algo que corresponda à sua marca e torne as informações mais fáceis de encontrar.

A boa notícia? O Zendesk Guide oferece muitas opções para personalizar seu tema, desde ajustes simples de configurações até controle total no nível do código. O desafio é saber qual abordagem adotar e como gerenciar as atualizações sem quebrar seu site ao vivo.

Este guia explica tudo o que você precisa saber sobre como atualizar e personalizar o tema do seu Zendesk Guide. Seja fazendo pequenos ajustes ou construindo algo completamente personalizado, você aprenderá como fazer isso de forma segura e eficiente.

O que você vai precisar

Antes de começar a personalizar, certifique-se de ter a configuração correta:

Requerido:

• Zendesk Suite (Team, Growth, Professional, Enterprise ou Enterprise Plus) OU Guide Professional/Enterprise para edição de código
• Permissões de administrador de conhecimento (Knowledge admin) em sua conta Zendesk

Opcional, mas recomendado:

• Um ambiente de desenvolvimento local com um editor de código
• Git para controle de versão
• Acesso a um ambiente de sandbox do Zendesk para testes

Resumindo: se você só quer mudar cores e enviar um logotipo, qualquer plano serve. Mas se você precisar editar HTML, CSS ou JavaScript, precisará do Guide Professional ou superior.

Passo 1: Acesse o editor de temas

Tudo começa no editor de temas. Veja como chegar lá:

1. No painel de administração do Zendesk, navegue até Knowledge admin na barra lateral
2. Clique em Customize design (Personalizar design)
3. Você verá a página Temas com seu tema ativo atual na parte superior

A página Temas mostra todos os seus temas disponíveis. O que está no topo é o seu tema ativo (o que os clientes veem agora). Quaisquer temas abaixo são rascunhos ou backups que você pode alternar ou modificar.

Reserve um momento para se familiarizar com a interface. Cada tema tem um menu de opções (três pontos) onde você pode visualizar, duplicar, baixar ou excluir. Você usará essas opções frequentemente ao gerenciar diferentes versões.

Passo 2: Personalize usando o painel de configurações

Para muitas equipes, o painel de configurações fornece tudo o que elas precisam. É a maneira mais segura de personalizar porque você não pode quebrar o código acidentalmente, e suas alterações não impedirão que o tema receba atualizações.

Para acessar as configurações:

1. Na página Temas, clique em Customize (Personalizar) no tema que você deseja editar
2. Você verá o painel de configurações com opções para cores, fontes e imagens
3. Faça suas alterações e clique em Publish (Publicar) quando estiver pronto

O painel de configurações normalmente permite que você personalize:

• Cores da marca (Brand colors) cor primária, cor do texto, cor do link e cor de fundo
• Tipografia (Typography) fonte do título e fonte do texto do corpo
• Imagens (Images) logotipo, favicon, fundo da página inicial e imagens da comunidade

Essas variáveis são armazenadas no arquivo manifest do seu tema e podem ser referenciadas no seu CSS usando sintaxes como $brand_color. Isso significa que, se você atualizar a cor da marca nas configurações, ela será atualizada automaticamente em todos os lugares onde essa variável é usada.

Quando você deve usar as configurações em vez da edição de código? Se suas necessidades de personalização são puramente cosméticas (cores, fontes, logotipos), use as configurações. É mais rápido, mais seguro e não o impedirá de receber futuras atualizações do tema.

Passo 3: Edite o código do tema para personalização avançada

Às vezes, as configurações não são suficientes. Talvez você precise reestruturar o layout da página inicial, adicionar funcionalidade JavaScript personalizada ou criar modelos de página totalmente novos. É quando você precisa editar o código diretamente.

Para acessar o editor de código:

1. Na página Temas, clique em Customize (Personalizar) no seu tema
2. Clique em Edit code (Editar código) no canto superior direito
3. Você verá a estrutura de arquivos com modelos, CSS, JavaScript e ativos

Aqui está o que você está vendo:

Modelos (Templates) (arquivos .hbs): Eles usam a sintaxe Handlebars (o Zendesk chama de Curlybars) para definir layouts de página. Os principais modelos incluem:

• home_page.hbs sua página inicial da central de ajuda
• article_page.hbs páginas de artigos individuais
• category_page.hbs e section_page.hbs páginas de destino de navegação
• header.hbs e footer.hbs elementos que aparecem em todas as páginas
• document_head.hbs onde você adiciona meta tags personalizadas ou scripts externos

CSS (style.css): Controla todo o estilo visual. Você pode usar as variáveis definidas em suas configurações (como $brand_color) ou escrever CSS personalizado.

JavaScript (script.js): Adiciona interatividade e comportamento dinâmico.

Manifest (manifest.json): Define as variáveis de configurações e metadados do seu tema.

Aviso importante: Depois de editar o código de um tema, ele se torna um "tema personalizado". Temas personalizados não recebem atualizações automáticas do Zendesk ou de desenvolvedores de temas. Você precisará aplicar as atualizações manualmente, o que pode sobrescrever suas personalizações se você não tiver cuidado.

Se você é novo no Curlybars, aqui estão algumas expressões comuns que você verá:

• {{breadcrumbs}} exibe a navegação de breadcrumb
• {{search}} renderiza a barra de pesquisa
• {{article.title}} exibe o título do artigo
• {{settings.brand_color}} referencia uma variável de configurações

O principal a lembrar é que o Curlybars dá acesso aos dados da central de ajuda. Você pode exibir conteúdo dinâmico, percorrer artigos e mostrar elementos condicionalmente com base em funções de usuário ou tipos de página.

Passo 4: Gerencie versões e atualizações de temas

O gerenciamento de temas é onde as coisas ficam complicadas. Você precisa de um sistema para rastrear alterações, testar atualizações e reverter quando algo quebra.

Criando cópias de backup

Antes de fazer alterações significativas, sempre crie um backup:

1. Na página Temas, encontre seu tema ativo
2. Clique no menu de opções (três pontos)
3. Selecione Duplicate (Duplicar)
4. Nomeie-o com algo descritivo como "PROD-BACKUP-2026-02-25"

Agora você tem uma opção de reversão limpa se algo der errado.

Baixando para desenvolvimento local

Para personalização séria, você vai querer trabalhar localmente:

1. Clique no menu de opções no seu tema
2. Selecione Download (Baixar)
3. Você receberá um arquivo ZIP contendo todos os arquivos do tema
4. Extraia-o e abra-o no seu editor de código

Trabalhar localmente permite que você use controle de versão (Git), seu editor preferido e a ferramenta Zendesk Theme Preview para testar as alterações antes de enviar.

Entendendo as versões da API de Templating

É aqui que a confusão geralmente acontece. Existem dois tipos de "versões" no Zendesk Guide:

Versões da API de Templating são controladas pelo Zendesk. Elas determinam quais recursos e helpers estão disponíveis. Houve quatro versões desde 2014:

Fonte: Blog da eesel AI sobre gerenciamento de versão de tema

Versões do tema são seus temas personalizados reais. Você pode ter vários temas em sua biblioteca e alternar entre eles.

Para verificar sua versão da API de Templating, procure abaixo do nome do seu tema no editor de código ou verifique o campo api_version no seu arquivo manifest.json.

A atualização das versões da API de Templating requer cautela. Versões mais recentes podem descontinuar helpers que você está usando, o que significa que seu tema pode quebrar após a atualização. Sempre teste em um sandbox primeiro.

Atualizações de temas do Marketplace

Se você comprou um tema no Zendesk Marketplace, você verá notificações de atualização quando os desenvolvedores lançarem novas versões.

Nota crítica para licenças de desenvolvedor: Se você comprou uma licença de desenvolvedor e editou o código, você não pode atualizar automaticamente sem perder suas personalizações. O fluxo de trabalho padrão é duplicar o tema antes de personalizar, mantendo o original limpo para atualizações.

Para atualizar um tema do Marketplace:

1. Vá para Knowledge admin > Customize design (Administrador de conhecimento > Personalizar design)
2. Procure pelo selo "Update available" (Atualização disponível) no seu tema
3. Clique no menu de opções e selecione Update available (Atualização disponível)
4. Revise as notas de lançamento
5. Clique em Update theme (Atualizar tema)

Se você personalizou o tema, precisará mesclar manualmente suas alterações com a versão atualizada.

Passo 5: Teste e implante seu tema

Nunca implante um tema em produção sem testar. Aqui está o fluxo de trabalho adequado:

Usando o sandbox para testes

O Zendesk fornece ambientes de sandbox especificamente para esse fim. Construa e teste seu tema no sandbox primeiro, depois implante na produção quando estiver confiante.

Visualizando antes de entrar ao vivo

Ao editar um tema, clique em Preview (Visualizar) para ver suas alterações em um ambiente de teste. Observe que as visualizações não suportam todos os recursos interativos, então use o sandbox para testes completos.

Definindo um tema como ativo

Quando você estiver pronto para implantar:

1. Na página Temas, encontre o tema que você deseja ativar
2. Clique no menu de opções
3. Selecione Set as live theme (Definir como tema ativo)
4. Confirme a alteração

Seu novo tema entra em vigor imediatamente. Não há período de preparação, então certifique-se de que você testou completamente.

Testando em diferentes dispositivos e navegadores

Antes de implantar, verifique se seu tema funciona em:

• Desktop (Chrome, Safari, Firefox, Edge)
• Dispositivos móveis (iOS e Android)
• Diferentes tamanhos de tela

Um tema que parece ótimo no seu laptop pode estar quebrado no celular. O design responsivo é essencial, já que uma parte significativa do tráfego da central de ajuda vem de dispositivos móveis.

Estratégias de reversão

Sempre tenha um plano de reversão. Mantenha um tema de backup conhecido e bom pronto para ativar se surgirem problemas. Documente as etapas exatas para reverter para que você não esteja descobrindo isso durante um incidente.

Cenários comuns de personalização

Aqui estão exemplos práticos do que as equipes normalmente personalizam:

Adicionando CSS personalizado para branding:

/* Estilo de botão personalizado */
.btn-custom {
  background-color: $brand_color;
  border-radius: 4px;
  padding: 12px 24px;
}

Modificando layouts de artigos: Edite article_page.hbs para reestruturar como o conteúdo do artigo é exibido. Você pode adicionar uma barra lateral, alterar a posição do breadcrumb ou incluir artigos relacionados.

Adicionando JavaScript personalizado: Use script.js para elementos interativos como acordeões, abas ou carregamento de conteúdo dinâmico.

Criando páginas personalizadas: Em planos Enterprise, você pode criar páginas personalizadas (como uma página de contato ou FAQ) e vinculá-las de qualquer lugar em sua central de ajuda.

Responsividade móvel: Use consultas de mídia CSS para garantir que seu tema funcione bem em todos os tamanhos de tela. Teste os alvos de toque (botões e links) para garantir que eles sejam grandes o suficiente para usuários móveis.

Melhores práticas para gerenciamento de temas

Depois de trabalhar com dezenas de centrais de ajuda, aqui estão as práticas que evitam dores de cabeça:

• Use convenções de nomenclatura descritivas. Em vez de "Tema v2", use "Copenhagen-Custom-Q1-2026" ou "Tema-Feriado-2026". Inclua números de versão e contexto.

• Mantenha um changelog. Documente o que muda em cada versão, quem as fez e por quê. Isso é inestimável quando várias pessoas trabalham em sua central de ajuda.

• Sempre teste no sandbox primeiro. A função de visualização é útil, mas o sandbox oferece o ambiente completo para testes de ponta a ponta.

• Mantenha um backup de produção. Antes de grandes alterações, duplique seu tema ativo com um nome com data.

• Implante durante horários de baixo tráfego. Mesmo com testes completos, a produção pode se comportar de forma diferente. Implante quando menos clientes serão afetados.

• Documente o código personalizado. Adicione comentários explicando por que você fez alterações específicas. Você do futuro (ou seus colegas de equipe) agradecerão.

• Use controle de versão. Se você estiver fazendo personalização no nível do código, rastreie as alterações no Git. Isso facilita a colaboração e oferece um histórico completo.

Simplifique sua central de ajuda com eesel AI

Enquanto você está aperfeiçoando a aparência do seu tema, não se esqueça do conteúdo dentro dele. Uma bela central de ajuda só funciona se os clientes conseguirem encontrar as respostas de que precisam.

É aí que podemos ajudar. Nosso chatbot de IA se integra diretamente com sua central de ajuda do Zendesk para fornecer respostas instantâneas e precisas às perguntas dos clientes.

Veja como funciona:

• Nós nos conectamos à sua central de ajuda e aprendemos com seus artigos existentes
• Os clientes obtêm respostas instantâneas sem esperar por um agente
• A IA cita fontes, para que os clientes saibam de onde vêm as informações
• Você pode personalizar as respostas para corresponder à voz da sua marca
• Funciona com qualquer versão do tema Zendesk Guide

A combinação é poderosa: um tema bonito e personalizado que representa sua marca, combinado com IA que entrega o conteúdo certo na hora certa. Você cuida do design, nós cuidamos da entrega inteligente de conteúdo.

Se você está investindo na experiência da sua central de ajuda, considere como a IA pode complementar seus esforços de personalização de tema. Uma central de ajuda com ótima aparência é ainda melhor quando os clientes podem obter respostas instantaneamente.