Crear tema hijo en PrestaShop y WordPress: tutorial

¿Te ha pasado alguna vez que actualizas PrestaShop y, de repente, tu tienda se ve rara? ¿O peor aún, pierdes todos los cambios que habías hecho con tanto cariño en la plantilla? Tranquilo, esto es más común de lo que parece y tiene una solución sencilla y elegante: crear un tema hijo en PrestaShop.

Aunque PrestaShop y WordPress son sistemas diferentes, la lógica detrás de los temas hijos es similar. Esta guía está diseñada para usuarios de PrestaShop (sí, aunque el título mencione WordPress, la mecánica es la misma: aislar tus modificaciones). Te explicaré paso a paso cómo crear un tema hijo PrestaShop, para que puedas personalizar PrestaShop sin perder cambios cuando lleguen las actualizaciones. Olvídate del miedo a tocar código.

¿Qué es un tema hijo en PrestaShop y por qué es tu salvación?

Imagina que la plantilla que compraste o descargaste (el tema padre) es un libro de recetas de cocina. Tú quieres añadirle tus propios trucos, como un toque de canela o cambiar el orden de los ingredientes. Si escribes directamente en el libro, cuando saquen una nueva edición (actualización), perderás todas tus anotaciones.

Un tema hijo PrestaShop es como un cuaderno aparte donde apuntas solo tus modificaciones. El libro original se queda intacto. Así, cuando actualices el tema padre, tu cuaderno de recetas (el tema hijo) sigue ahí, aplicando todos tus cambios. Es la forma más segura e inteligente de personalizar PrestaShop sin perder cambios.

Beneficios clave de usar un tema hijo

Actualizaciones seguras: Puedes actualizar el tema padre sin miedo a que se borren tus retoques.
Código limpio: Tus modificaciones están separadas, lo que hace más fácil encontrar errores o deshacer cambios.
Rendimiento: Un tema hijo suele ser más ligero porque solo contiene lo que tú has añadido.
Profesionalismo: Es la práctica recomendada por desarrolladores y agencias serias.

Requisitos previos antes de empezar

No necesitas ser un experto en programación, pero sí tener acceso a ciertas herramientas. Asegúrate de tener:

Acceso a tu servidor: Necesitarás un cliente FTP (como FileZilla) o, mejor aún, acceso al panel de control de tu hosting. Si usas Syspanel (accesible por el puerto 2106), podrás gestionar archivos fácilmente desde el administrador de archivos.
Un tema padre instalado: Puede ser el tema por defecto de PrestaShop (clásico) o cualquier otro que hayas comprado. Anota el nombre exacto de la carpeta del tema padre.
Un editor de texto plano: Nada de Word o Pages. Usa Notepad++, Sublime Text, o incluso el bloc de notas de Windows. Necesitas guardar archivos con extensión .php o .tpl.
Paciencia y una copia de seguridad: Antes de cualquier cambio importante, siempre haz una copia de seguridad de tu tienda. Es como ponerse el cinturón de seguridad antes de conducir.

Paso a paso: Cómo crear un tema hijo en PrestaShop

Vamos al lío. Sigue estos pasos al pie de la letra. Te prometo que es más fácil de lo que parece.

Paso 1: Localiza la carpeta de temas

Conéctate a tu servidor mediante FTP o el administrador de archivos de Syspanel (puerto 2106). Navega hasta la siguiente ruta:
/tu-dominio/themes/

Aquí verás una lista de carpetas. Cada una es un tema. Identifica la carpeta de tu tema padre (por ejemplo, clásico o warehouse).

Paso 2: Crea la carpeta del tema hijo

Dentro de la carpeta themes, crea una nueva carpeta. El nombre debe ser descriptivo pero sin espacios. Una convención común es poner el nombre del tema padre seguido de -hijo o -child.

Ejemplo: Si tu tema padre se llama clásico, tu carpeta hija se llamará clasico-hijo.

Paso 3: Crea el archivo de configuración (theme.yml)

Este es el archivo más importante. Le dice a PrestaShop que existe un tema hijo y cuál es su padre.

Dentro de la carpeta de tu tema hijo (clasico-hijo), crea un archivo nuevo llamado theme.yml (sin comillas). Ábrelo con tu editor de texto y pega el siguiente contenido:

name: clasico-hijo
display_name: "Mi Tema Hijo Clásico"
version: 1.0.0
author: "Tu Nombre"
parent: clasico
meta:
  compatibility:
      from: 1.7.0.0
      to: ~

Explicación línea por línea:

name: El nombre técnico de tu tema hijo (debe coincidir con el nombre de la carpeta).
display_name: El nombre bonito que verás en el back office.
version: La versión de tu tema hijo. Empieza con 1.0.0.
author: Pone tu nombre o el de tu empresa.
parent: Este es el paso clave. Escribe aquí el nombre exacto de la carpeta del tema padre (por ejemplo, clásico). PrestaShop lo usará para saber de quién hereda.
meta/compatibility: Indica que es compatible con PrestaShop 1.7 y versiones posteriores.

Guarda el archivo y asegúrate de que la codificación sea UTF-8 (sin BOM, si tu editor te lo permite).

Paso 4: Crea el archivo CSS principal (opcional pero recomendado)

Si quieres modificar estilos, no toques el CSS del tema padre. Crea tu propio archivo.

Dentro de la carpeta del tema hijo, crea una subcarpeta llamada assets, y dentro de esta, otra llamada css. Luego, crea un archivo llamado custom.css (o theme.css, como prefieras).

Ahora, para que PrestaShop cargue este archivo, necesitas un pequeño truco. Crea otro archivo en la raíz de tu tema hijo llamado functions.php (sí, como en WordPress, pero aquí funciona de forma similar). Pega este código:

<?php
/**
 * Cargar CSS personalizado del tema hijo
 */
function loadChildThemeAssets() {
    // Cargar el CSS del tema padre (importante para la herencia)
    $css_parent = _PS_THEME_DIR_.'assets/css/theme.css';
    if (file_exists($css_parent)) {
        $this->registerStylesheet('theme-parent', $css_parent, ['media' => 'all', 'priority' => 50]);
    }

    // Cargar nuestro CSS hijo
    $css_child = _PS_THEME_DIR_.'assets/css/custom.css';
    if (file_exists($css_child)) {
        $this->registerStylesheet('theme-child', $css_child, ['media' => 'all', 'priority' => 100]);
    }
}
?>

[INFO] Este código es un ejemplo avanzado. Si te resulta complejo, no te preocupes. El método más sencillo es copiar el archivo theme.css del padre a tu hijo y modificarlo allí. PrestaShop priorizará el archivo del hijo si existe.

Paso 5: Sobrescribe archivos .tpl (plantillas)

Aquí está la magia real. ¿Quieres modificar cómo se ve el pie de página? ¿O el encabezado?

Ve a la carpeta del tema padre y localiza el archivo .tpl que quieres modificar (por ejemplo, footer.tpl dentro de _partials/).
Copia la misma estructura de carpetas dentro de tu tema hijo. Es decir, si el archivo está en tema-padre/_partials/footer.tpl, crea la carpeta _partials dentro de tu tema hijo y pega allí el archivo footer.tpl.
Ahora, modifica el archivo footer.tpl que está en tu tema hijo. PrestaShop, al encontrar el archivo en el hijo, lo usará en lugar del del padre.

Regla de oro: La estructura de carpetas debe ser idéntica. Si falla la ruta, PrestaShop usará la del padre por defecto.

Paso 6: Instala y activa tu tema hijo

Ve al back office de PrestaShop: Diseño > Temas y logotipos.
Haz clic en "Añadir nuevo tema" y luego en "Subir un tema" (aunque no vas a subir nada, solo para refrescar la lista). O simplemente, si la carpeta está bien creada, PrestaShop la detectará automáticamente.
Busca tu tema hijo en la lista (aparecerá con el display_name que pusiste en theme.yml).
Haz clic en "Usar este tema" para activarlo.

¡Listo! Tu tienda ahora está usando el tema hijo. Visualmente se verá exactamente igual que el padre, pero todas tus modificaciones estarán a salvo.

FAQ: Preguntas frecuentes sobre temas hijo en PrestaShop

¿Puedo tener varios temas hijos?

Sí, puedes crear tantos como quieras, pero solo uno puede estar activo a la vez. Es útil para hacer pruebas o tener versiones diferentes de personalización.

¿Y si mi tema padre se actualiza y cambia archivos que yo había copiado en el hijo?

Tranquilo. Los archivos que tú copiaste al hijo son independientes. Si el padre cambia, tu hijo sigue funcionando con tu versión. Eso sí, revisa manualmente si hay novedades importantes en el padre que quieras incorporar a tu versión. Por ejemplo, si el padre añade una nueva función de seguridad en el footer, tendrías que actualizar tu footer.tpl en el hijo para incluirla.

¿Qué pasa si elimino el tema padre?

Catástrofe. El tema hijo depende completamente del padre. Si borras la carpeta del tema padre, tu tienda se romperá. Nunca lo hagas.

¿Funciona con cualquier tema de PrestaShop?

En teoría sí, mientras el tema padre esté bien codificado y siga las normas de PrestaShop. Si el tema padre tiene una estructura muy extraña, puede dar problemas. En ese caso, contacta con el desarrollador del tema.

¿Necesito saber programación?

Para lo básico (cambiar colores, logos, textos) no. Pero para modificaciones más profundas (añadir nuevas funcionalidades, modificar la lógica de los módulos), sí necesitarás nociones de PHP, Smarty y CSS.

Mi tema hijo no aparece en el back office. ¿Qué hago?

Revisa que el nombre de la carpeta y el name en theme.yml coincidan exactamente.
Asegúrate de que el archivo theme.yml esté bien formado (sin errores de sintaxis YAML). Un solo espacio de más puede romperlo.
Verifica que la carpeta del tema padre exista y que el nombre en parent: sea correcto.
Borra la caché de PrestaShop en Parámetros avanzados > Rendimiento > Forzar compilación.

Consejos finales para dominar tu tema hijo

Empieza poco a poco: No quieras cambiarlo todo el primer día. Haz una modificación pequeña, compruébala y luego pasa a la siguiente.
Documenta tus cambios: Dentro de tu tema hijo, crea un archivo README.txt y explica qué has modificado y por qué. Tu yo del futuro te lo agradecerá.
Usa un sistema de control de versiones (Git): Si te vuelves un experto, Git te permitirá llevar un historial de todos tus cambios.
Prueba en un entorno de desarrollo: Antes de aplicar cambios en tu tienda real, instala PrestaShop en un subdominio o localmente. Así no arriesgas nada.

[WARNING] Nunca, bajo ningún concepto, modifiques archivos directamente en la carpeta del tema padre. Si lo haces, estás firmando una sentencia de muerte para tu personalización. Usa siempre el tema hijo PrestaShop.

Crear un tema hijo PrestaShop es la mejor decisión que puedes tomar para mantener tu tienda actualizada, segura y con tu toque personal. Ahora que sabes cómo hacerlo, no tienes excusa. ¡Manos a la obra! Tu tienda te lo agradecerá.