Cómo actualizar y personalizar tu tema de Zendesk Guide en 2026

Su centro de ayuda es a menudo el primer lugar al que acuden los clientes cuando necesitan respuestas. Un tema genérico, listo para usar, podría funcionar inicialmente, pero eventualmente querrá algo que coincida con su marca y facilite la búsqueda de información.

¿La buena noticia? Zendesk Guide le brinda muchas opciones para personalizar su tema, desde simples ajustes de configuración hasta control total a nivel de código. El desafío es saber qué enfoque adoptar y cómo administrar las actualizaciones sin dañar su sitio en vivo.

Esta guía lo guía a través de todo lo que necesita saber sobre la actualización y personalización de su tema de Zendesk Guide. Ya sea que esté realizando ajustes menores o construyendo algo completamente personalizado, aprenderá cómo hacerlo de manera segura y eficiente.

Lo que necesitará

Antes de comenzar a personalizar, asegúrese de tener la configuración correcta:

Requerido:

• Zendesk Suite (Team, Growth, Professional, Enterprise o Enterprise Plus) O Guide Professional/Enterprise para la edición de código
• Permisos de administrador de Knowledge en su cuenta de Zendesk

Opcional pero recomendado:

• Un entorno de desarrollo local con un editor de código
• Git para el control de versiones
• Acceso a un entorno de pruebas (sandbox) de Zendesk para pruebas

Aquí está la versión corta: si solo desea cambiar los colores y cargar un logotipo, cualquier plan servirá. Pero si necesita editar HTML, CSS o JavaScript, necesitará Guide Professional o superior.

Paso 1: Acceder al editor de temas

Todo comienza en el editor de temas. Aquí le mostramos cómo llegar allí:

1. En su panel de administración de Zendesk, navegue a Knowledge admin en la barra lateral
2. Haga clic en Customize design (Personalizar diseño)
3. Verá la página Temas con su tema activo actual en la parte superior

La página Temas muestra todos sus temas disponibles. El que está en la parte superior es su tema activo (lo que los clientes ven en este momento). Cualquier tema a continuación son borradores o copias de seguridad a los que puede cambiar o modificar.

Tómese un momento para familiarizarse con la interfaz. Cada tema tiene un menú de opciones (tres puntos) donde puede obtener una vista previa, duplicar, descargar o eliminar. Utilizará estas opciones con frecuencia a medida que administre diferentes versiones.

Paso 2: Personalizar usando el panel de configuración

Para muchos equipos, el panel de configuración proporciona todo lo que necesitan. Es la forma más segura de personalizar porque no puede dañar accidentalmente el código, y sus cambios no impedirán que el tema reciba actualizaciones.

Para acceder a la configuración:

1. En la página Temas, haga clic en Customize (Personalizar) en el tema que desea editar
2. Verá el panel de configuración con opciones para colores, fuentes e imágenes
3. Realice sus cambios y haga clic en Publish (Publicar) cuando esté listo

El panel de configuración normalmente le permite personalizar:

• Colores de la marca color primario, color del texto, color del enlace y color de fondo
• Tipografía fuente del encabezado y fuente del texto del cuerpo
• Imágenes logotipo, favicon, fondo de la página de inicio e imágenes de la comunidad

Estas variables se almacenan en el archivo de manifiesto de su tema y se pueden hacer referencia en su CSS utilizando una sintaxis como $brand_color. Esto significa que si actualiza el color de la marca en la configuración, se actualiza automáticamente en todos los lugares donde se usa esa variable.

¿Cuándo debería usar la configuración en lugar de la edición de código? Si sus necesidades de personalización son puramente cosméticas (colores, fuentes, logotipos), quédese con la configuración. Es más rápido, más seguro y no lo bloqueará de futuras actualizaciones de temas.

Paso 3: Editar el código del tema para una personalización avanzada

A veces, la configuración no es suficiente. Tal vez necesite reestructurar el diseño de la página de inicio, agregar funcionalidad JavaScript personalizada o crear plantillas de página completamente nuevas. Ahí es cuando necesita editar el código directamente.

Para acceder al editor de código:

1. Desde la página Temas, haga clic en Customize (Personalizar) en su tema
2. Haga clic en Edit code (Editar código) en la esquina superior derecha
3. Verá la estructura de archivos con plantillas, CSS, JavaScript y activos

Esto es lo que está viendo:

Plantillas (archivos .hbs): Estos usan la sintaxis de Handlebars (Zendesk lo llama Curlybars) para definir los diseños de página. Las plantillas clave incluyen:

• home_page.hbs la página de inicio de su centro de ayuda
• article_page.hbs páginas de artículos individuales
• category_page.hbs y section_page.hbs páginas de destino de navegación
• header.hbs y footer.hbs elementos que aparecen en cada página
• document_head.hbs donde agrega metaetiquetas personalizadas o scripts externos

CSS (style.css): Controla todo el estilo visual. Puede usar las variables definidas en su configuración (como $brand_color) o escribir CSS personalizado.

JavaScript (script.js): Agrega interactividad y comportamiento dinámico.

Manifiesto (manifest.json): Define las variables de configuración y los metadatos de su tema.

Advertencia importante: Una vez que edita el código de un tema, se convierte en un "tema personalizado". Los temas personalizados no reciben actualizaciones automáticas de Zendesk o de los desarrolladores de temas. Deberá aplicar las actualizaciones manualmente, lo que puede sobrescribir sus personalizaciones si no tiene cuidado.

Si es nuevo en Curlybars, aquí hay algunas expresiones comunes que verá:

• {{breadcrumbs}} muestra la navegación de breadcrumb
• {{search}} renderiza la barra de búsqueda
• {{article.title}} muestra el título del artículo
• {{settings.brand_color}} hace referencia a una variable de configuración

Lo clave para recordar es que Curlybars le da acceso a los datos del centro de ayuda. Puede mostrar contenido dinámico, recorrer artículos en bucle y mostrar elementos condicionalmente según los roles de usuario o los tipos de página.

Paso 4: Administrar versiones y actualizaciones de temas

La administración de temas es donde las cosas se complican. Necesita un sistema para rastrear los cambios, probar las actualizaciones y revertir cuando algo se rompe.

Crear copias de seguridad

Antes de realizar cambios significativos, siempre cree una copia de seguridad:

1. En la página Temas, busque su tema activo
2. Haga clic en el menú de opciones (tres puntos)
3. Seleccione Duplicate (Duplicar)
4. Nómbrelo algo descriptivo como "PROD-BACKUP-2026-02-25"

Ahora tiene una opción de reversión limpia si algo sale mal.

Descargar para el desarrollo local

Para una personalización seria, querrá trabajar localmente:

1. Haga clic en el menú de opciones en su tema
2. Seleccione Download (Descargar)
3. Obtendrá un archivo ZIP que contiene todos los archivos del tema
4. Extráigalo y ábralo en su editor de código

Trabajar localmente le permite usar el control de versiones (Git), su editor preferido y la herramienta Zendesk Theme Preview para probar los cambios antes de cargarlos.

Comprender las versiones de la API de plantillas

Aquí es donde a menudo ocurre la confusión. Hay dos tipos de "versiones" en Zendesk Guide:

Las versiones de la API de plantillas están controladas por Zendesk. Determinan qué características y ayudantes están disponibles. Ha habido cuatro versiones desde 2014:

Fuente: Blog de eesel AI sobre la gestión de versiones de temas

Las versiones de temas son sus temas personalizados reales. Puede tener varios temas en su biblioteca y cambiar entre ellos.

Para verificar su versión de la API de plantillas, mire debajo del nombre de su tema en el editor de código, o verifique el campo api_version en su archivo manifest.json.

La actualización de las versiones de la API de plantillas requiere precaución. Las versiones más nuevas pueden desaprobar los ayudantes que está utilizando, lo que significa que su tema podría romperse después de la actualización. Siempre pruebe primero en un entorno de pruebas (sandbox).

Actualizaciones de temas de Marketplace

Si compró un tema en el Zendesk Marketplace, verá notificaciones de actualización cuando los desarrolladores lancen nuevas versiones.

Nota crítica para las licencias de desarrollador: Si compró una licencia de desarrollador y editó el código, no puede actualizar automáticamente sin perder sus personalizaciones. El flujo de trabajo estándar es duplicar el tema antes de personalizarlo, manteniendo el original limpio para las actualizaciones.

Para actualizar un tema de Marketplace:

1. Vaya a Knowledge admin > Customize design (Administrador de conocimientos > Personalizar diseño)
2. Busque la insignia "Update available" (Actualización disponible) en su tema
3. Haga clic en el menú de opciones y seleccione Update available (Actualización disponible)
4. Revise las notas de la versión
5. Haga clic en Update theme (Actualizar tema)

Si ha personalizado el tema, deberá fusionar manualmente sus cambios con la versión actualizada.

Paso 5: Probar e implementar su tema

Nunca implemente un tema en producción sin probarlo. Aquí está el flujo de trabajo adecuado:

Usar el entorno de pruebas (sandbox) para las pruebas

Zendesk proporciona entornos de pruebas (sandbox) específicamente para este propósito. Construya y pruebe su tema primero en el entorno de pruebas, luego implemente en producción una vez que esté seguro.

Obtener una vista previa antes de ponerlo en marcha

Al editar un tema, haga clic en Preview (Vista previa) para ver sus cambios en un entorno de prueba. Tenga en cuenta que las vistas previas no admiten todas las funciones interactivas, así que use el entorno de pruebas para pruebas completas.

Establecer un tema como activo

Cuando esté listo para implementar:

1. En la página Temas, busque el tema que desea activar
2. Haga clic en el menú de opciones
3. Seleccione Set as live theme (Establecer como tema activo)
4. Confirme el cambio

Su nuevo tema se activa de inmediato. No hay un período de prueba, así que asegúrese de haber probado a fondo.

Pruebas en diferentes dispositivos y navegadores

Antes de la implementación, verifique que su tema funcione en:

• Escritorio (Chrome, Safari, Firefox, Edge)
• Dispositivos móviles (iOS y Android)
• Diferentes tamaños de pantalla

Un tema que se ve genial en su computadora portátil podría estar roto en el móvil. El diseño receptivo es esencial, ya que una parte importante del tráfico del centro de ayuda proviene de dispositivos móviles.

Estrategias de reversión

Siempre tenga un plan de reversión. Mantenga un tema de copia de seguridad que se sepa que funciona listo para activar si surgen problemas. Documente los pasos exactos para revertir para que no lo esté resolviendo durante un incidente.

Escenarios de personalización comunes

Aquí hay ejemplos prácticos de lo que los equipos suelen personalizar:

Agregar CSS personalizado para la marca:

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

Modificar los diseños de los artículos: Edite article_page.hbs para reestructurar cómo se muestra el contenido del artículo. Puede agregar una barra lateral, cambiar la posición de la ruta de navegación o incluir artículos relacionados.

Agregar JavaScript personalizado: Use script.js para elementos interactivos como acordeones, pestañas o carga de contenido dinámico.

Crear páginas personalizadas: En los planes Enterprise, puede crear páginas personalizadas (como una página de contacto o preguntas frecuentes) y vincularlas desde cualquier lugar de su centro de ayuda.

Capacidad de respuesta móvil: Use consultas de medios CSS para asegurarse de que su tema funcione bien en todos los tamaños de pantalla. Pruebe los objetivos táctiles (botones y enlaces) para asegurarse de que sean lo suficientemente grandes para los usuarios móviles.

Mejores prácticas para la gestión de temas

Después de trabajar con docenas de centros de ayuda, estas son las prácticas que previenen los dolores de cabeza:

• Use convenciones de nomenclatura descriptivas. En lugar de "Tema v2", use "Copenhagen-Custom-Q1-2026" o "Tema-Vacaciones-2026". Incluya números de versión y contexto.

• Mantenga un registro de cambios. Documente qué cambia en cada versión, quién los hizo y por qué. Esto es invaluable cuando varias personas trabajan en su centro de ayuda.

• Siempre pruebe primero en el entorno de pruebas (sandbox). La función de vista previa es útil, pero el entorno de pruebas le brinda el entorno completo para las pruebas de extremo a extremo.

• Mantenga una copia de seguridad de producción. Antes de realizar cambios importantes, duplique su tema activo con un nombre con fecha.

• Implemente durante las horas de poco tráfico. Incluso con pruebas exhaustivas, la producción puede comportarse de manera diferente. Implemente cuando menos clientes se vean afectados.

• Documente el código personalizado. Agregue comentarios que expliquen por qué realizó cambios específicos. El futuro usted (o sus compañeros de equipo) se lo agradecerá.

• Use el control de versiones. Si está realizando una personalización a nivel de código, rastree los cambios en Git. Facilita la colaboración y le brinda un historial completo.

Optimice su centro de ayuda con eesel AI

Mientras perfecciona la apariencia de su tema, no se olvide del contenido que contiene. Un hermoso centro de ayuda solo funciona si los clientes pueden encontrar las respuestas que necesitan.

Ahí es donde podemos ayudar. Nuestro chatbot de IA se integra directamente con su centro de ayuda de Zendesk para proporcionar respuestas instantáneas y precisas a las preguntas de los clientes.

Así es como funciona:

• Nos conectamos a su centro de ayuda y aprendemos de sus artículos existentes
• Los clientes obtienen respuestas instantáneas sin esperar a un agente
• La IA cita las fuentes, para que los clientes sepan de dónde proviene la información
• Puede personalizar las respuestas para que coincidan con la voz de su marca
• Funciona con cualquier versión de tema de Zendesk Guide

La combinación es poderosa: un tema hermoso y personalizado que representa su marca, combinado con una IA que ofrece el contenido correcto en el momento correcto. Usted se encarga del diseño, nosotros nos encargamos de la entrega inteligente de contenido.

Si está invirtiendo en la experiencia de su centro de ayuda, considere cómo la IA puede complementar sus esfuerzos de personalización de temas. Un centro de ayuda de gran apariencia es aún mejor cuando los clientes pueden obtener respuestas al instante.