Tema hijo en PrestaShop: personalizar el diseño sin perder cambios al actualizar

Es la historia de muchas tiendas: alguien cambió el color de los botones, movió un bloque de la ficha de producto y retocó la plantilla del carrito, todo directamente en los ficheros del tema. Funcionó durante años. Hasta que salió una versión nueva del tema con correcciones importantes, se actualizó, y todos esos cambios desaparecieron. O, peor, nadie se atrevió a actualizar y el tema se quedó anclado en una versión que ya no encaja con el núcleo.

El tema hijo existe para evitar exactamente eso.

Qué es un tema hijo

Es un tema que declara a otro como padre y que solo contiene los ficheros que quieres cambiar. Cuando PrestaShop necesita una plantilla, la busca primero en el tema hijo; si no la encuentra, usa la del padre. El resultado es que en el hijo tienes únicamente tus personalizaciones, separadas del código del fabricante del tema.

Desde PrestaShop 1.7 el mecanismo está en el núcleo y se declara en el fichero de configuración del tema, config/theme.yml, indicando el nombre del tema padre. Los temas de serie (Classic y, en PrestaShop 9, Hummingbird) se pueden usar como padre, y también la mayoría de los temas comerciales, aunque conviene confirmarlo con su autor.

Qué va en el tema hijo

Hojas de estilo y scripts propios

Tu CSS y tu JavaScript van en ficheros propios del tema hijo. Puedes elegir si el hijo carga también los ficheros del padre (lo habitual, para heredar todo el diseño y solo añadir encima) o si los sustituye. Escribir tus estilos en un fichero aparte, que se carga después de los del padre, es la forma más limpia de cambiar colores, márgenes o tipografías sin tocar nada del fabricante.

Plantillas que cambias de verdad

Si necesitas modificar la estructura de una página, copias al hijo solo esa plantilla, en la misma ruta relativa que tiene en el padre, y la editas allí. Por ejemplo, la ficha de producto o un bloque concreto del carrito. Todas las demás siguen viniendo del padre.

Mejor aún: muchas plantillas de PrestaShop están organizadas en bloques de Smarty. Una plantilla del hijo puede extender la del padre y redefinir solo un bloque, en lugar de copiarla entera. Así, si el fabricante corrige algo en otra parte de esa plantilla, la corrección te llega.

Plantillas de módulos

Los módulos bien hechos permiten que el tema sobrescriba sus plantillas. Se colocan en la carpeta modules/ del tema, con el nombre del módulo y la misma ruta que la plantilla tiene dentro del módulo. Funciona igual en un tema hijo: personalizas cómo se ve un módulo sin tocar el módulo, y cuando el módulo se actualiza, tu plantilla sigue en su sitio.

Qué no va en el tema hijo

• Cambios de lógica. El tema es presentación. Si necesitas que algo funcione de otra manera, eso es un módulo, no una plantilla con condiciones complicadas.
• Overrides de clases del núcleo. Viven en otra carpeta y tienen sus propios riesgos al actualizar. Que un cambio esté en el tema hijo no lo protege si en realidad depende de un override.
• Copias completas del tema padre. Si copias todas las plantillas al hijo «por si acaso», el padre deja de servir para nada: ninguna corrección te llega y vuelves al problema inicial.

Cómo actualizar el tema padre

Con el tema hijo, actualizar el padre es un procedimiento previsible:

1. En una copia de la tienda, sustituye el tema padre por la versión nueva.
2. Haz la lista de plantillas que tiene el hijo y, para cada una, compara la versión antigua del padre con la nueva. Si el fabricante ha cambiado esa plantilla, tienes que llevar sus cambios a tu copia del hijo o revisar si tu bloque redefinido sigue encajando.
3. Revisa tu CSS: si el padre ha cambiado nombres de clases o la estructura del HTML, algunos de tus estilos dejarán de aplicarse.
4. Vacía la caché de plantillas y de ficheros combinados, y recorre las páginas principales: portada, categoría, ficha, carrito, checkout y cuenta de cliente.
5. Prueba un pedido completo. Las plantillas del checkout son las que más cambian y las que más daño hacen si fallan.

Si llevas un control de versiones de tu tema hijo (aunque sea guardar una copia fechada antes de cada cambio), este proceso es mucho más rápido: sabes qué cambiaste tú y cuándo.

Si ya has editado el tema directamente

Es lo más habitual, y tiene arreglo:

1. Consigue el paquete original de la misma versión del tema que tienes instalada.
2. Compara fichero a fichero tu tema con el original. Las diferencias son tus personalizaciones (y, a veces, cosas que nadie recuerda haber hecho).
3. Crea un tema hijo con el original como padre y lleva allí solo esas diferencias: el CSS a su fichero, las plantillas modificadas a su ruta.
4. Activa el tema hijo en una copia y compara página a página con la tienda actual.

A partir de ahí, ya puedes actualizar el padre con el procedimiento anterior. Es la forma de recuperar la posibilidad de mantener el tema al día, que es parte de mantener al día la tienda entera: un tema anclado acaba impidiendo actualizar el núcleo.

Errores habituales

• Activar el hijo y perder la configuración visual del tema (módulos colgados en hooks, posiciones). Al cambiar de tema, PrestaShop puede aplicar la configuración que declara el tema nuevo; revisa las posiciones de los módulos después de activarlo.
• Olvidar las imágenes y fuentes que el CSS del hijo referencia con rutas relativas al padre.
• Editar el CSS combinado o en caché en lugar del fichero fuente. Se pierde en cuanto se regenera.
• Personalizar desde el back-office del fabricante y desde ficheros a la vez, sin saber cuál gana.

Cómo resolverlo en PrestaShop

RKR Editor CSS/JS de themes te deja editar desde el back-office el CSS y el JS de tu tema, incluidos los temas hijo, sin FTP: abre custom.css y custom.js con un clic (y los crea si tu tema no los tiene), busca en todos los ficheros del tema con su línea, hace una copia antes de cada guardado para volver atrás desde un desplegable y se niega a guardar si alguien ha cambiado el fichero en disco desde que lo abriste. Solo trabaja con CSS, JS, SCSS y LESS dentro de la carpeta del tema, y la edición de plantillas .tpl viene apagada y reservada al SuperAdmin. Si lo que necesitas es crear el tema hijo, separar personalizaciones hechas sobre el tema original o actualizar el padre, con un bono de horas de soporte de Rekire lo hacemos sobre una copia de tu tienda.