Personalizar el tema Hummingbird de PrestaShop 9: colores, fuentes y anchos

Con VEO Hummingbird Customizer puedes personalizar el tema Hummingbird, el de serie en PrestaShop 9, sin editar CSS ni plantillas. Hummingbird no trae panel de opciones: para cambiar el color de los botones o la fuente de los títulos había que crear un tema hijo y escribir el CSS a mano. Este módulo añade ese panel en Diseño > Hummingbird Customizer.

Instalarlo no cambia nada: los valores de fábrica son los de Hummingbird y, mientras no los tocas, el módulo no añade nada a la página. La tienda cambia cuando guardas el primer ajuste.

veomod.com funciona con Hummingbird y este módulo.

Colores: una paleta y cada zona por separado

Defines nueve colores de marca (principal, al pasar el ratón, títulos, texto, fondo, fondo alternativo, bordes, fondo suave y uno libre) con un selector de color. Botones, enlaces y títulos los toman de ahí.

Después eliges el fondo, el texto y el color al pasar el ratón de seis zonas: la banda superior, la barra de idioma y carrito, la cabecera, el menú del móvil, la franja de encima del pie y el pie. Cada zona apunta a un color de la paleta por su nombre, así que si cambias el color principal cambia en todas las zonas que lo usan. Si una zona necesita un color que no está en la paleta, le pones uno propio.

Fuentes de Google, propias o del sistema

Una fuente para el texto y otra para los títulos. Cada una puede venir de Google Fonts, de ficheros woff2 que subes desde la propia pestaña, del tema o del sistema, y eliges qué pesos se cargan para no descargar los que no usas.

Las fuentes subidas se guardan en img/veohummingbirdcustomizer/fonts/, fuera de la carpeta del módulo, para que una actualización no las borre.

Anchos, cabecera y otras opciones

• Ancho máximo del contenedor y margen lateral en escritorio.
• Cabecera, contenido y pie a todo el ancho de la pantalla, cada uno por separado.
• Cabecera de cristal: opacidad del fondo y desenfoque de lo que pasa por detrás.
• Carrito lateral: la ventana de «Producto añadido» se abre como un panel desde el lateral.
• Buscador deslizante: solo se ve la lupa y el campo se abre al pasar el ratón.
• Tarjetas de subcategorías con solo el nombre o solo la imagen.

Importar y exportar la configuración

Todo lo anterior es un único documento JSON. Lo descargas como veo-theme.json para guardarlo o llevarlo a otra tienda. Al importarlo, el módulo te enseña una tabla con cada ajuste, su valor actual y el nuevo, y no escribe nada hasta que pulsas «Aplicar estos cambios». El fichero puede llevar solo una parte, por ejemplo solo la paleta.

Si tu tema hijo trae su paleta en config/veo-theme.json, la pestaña la detecta y la importas con un botón. Con «Restablecer valores de fábrica» la tienda vuelve a verse como Hummingbird sin el módulo.

Cómo funciona por dentro

El módulo escribe un bloque <style> con variables CSS en la cabecera de la página y carga una hoja que las aplica a Hummingbird. No genera ficheros CSS, no usa overrides ni sobrescribe plantillas del tema. El custom.css de un tema hijo se carga después, así que tu CSS propio siempre manda.

Para desarrolladores: el formato del JSON está publicado como JSON Schema dentro del módulo (schema/veo-theme.schema.json), con título y descripción de cada campo, y cada vez que se guarda se lanza el hook actionVeoHbThemeSettingsUpdated con la configuración completa.

Compatibilidad

Solo PrestaShop 9 con el tema Hummingbird o un tema hijo suyo. Probado en PrestaShop 9.2.0 con Hummingbird 2.1.2 y PHP 8.4, y en PrestaShop 9.1.4 con un tema hijo de Hummingbird. Necesita PHP 8.1 o superior. No sirve para PrestaShop 1.7 ni 8, donde Hummingbird no existe, y con cualquier otro tema el módulo no hace nada.

Si buscas un menú para Hummingbird, mira el megamenú para PrestaShop, también probado con este tema.

Instalación

Sube el ZIP desde Módulos > Gestor de módulos y entra en Diseño > Hummingbird Customizer. Los pasos, con capturas, están en el manual en PDF.

Preguntas frecuentes

¿Cambia algo nada más instalarlo?

No. Los valores de fábrica son los de Hummingbird 2.1: su azul (#0b69f6), la fuente Inter del tema, el contenedor de 1320 px y sin carrito lateral. Mientras no cambias nada, el módulo no añade CSS ni clases a la página, así que puedes instalarlo en una tienda abierta y ir probando.

¿Pierdo los cambios si actualizo Hummingbird?

No. Los ajustes se guardan en la base de datos de la tienda y las fuentes en img/, no en la carpeta del tema.

¿Tengo que vaciar la caché después de guardar?

La de PrestaShop no: los estilos se calculan en cada visita y no hay ficheros CSS que regenerar. Si el servidor tiene una caché de página completa, esa sí hay que vaciarla.

¿Qué pasa si lo desinstalo?

Se borran sus ajustes y la tienda vuelve al aspecto de Hummingbird. Las fuentes subidas se quedan en img/. Si vas a reinstalarlo, exporta antes el veo-theme.json.

¿Funciona con un tema que no es Hummingbird?

No. Comprueba que el tema activo sea Hummingbird o un hijo suyo y, si no lo es, no añade nada a la página.