Crear tema hijo en PrestaShop: Guía segura

¿Por qué necesitas un tema hijo en PrestaShop?

Si alguna vez has modificado los archivos de tu tema de PrestaShop directamente y, tras una actualización, has visto tu tienda hecha un desastre, este artículo es para ti. Crear un tema hijo PrestaShop (o child theme) es la solución definitiva para personalizar PrestaShop sin romper tu diseño.

Un tema hijo es una copia "limpia" que hereda todas las funciones y estilos de tu tema principal, pero te permite hacer cambios sin tocar el original. Cuando actualizas PrestaShop o el tema padre, tus personalizaciones se mantienen intactas. Es como tener un cuaderno de notas aparte: el libro original no se ensucia, pero tú puedes escribir todas tus ideas sin miedo.

En esta guía, te explicaré paso a paso cómo hacerlo, incluso si nunca has tocado una línea de código. Vamos a ello.

¿Qué es exactamente un child theme PrestaShop?

Un child theme PrestaShop es un tema secundario que depende de otro tema (llamado "tema padre"). Su función es sobrescribir archivos o añadir nuevas funcionalidades sin modificar el tema original.

Imagina que tu tema padre es como una casa ya construida. El tema hijo es una ampliación que construyes al lado: puedes cambiar la distribución, añadir habitaciones o redecorar, pero la estructura original sigue intacta. Si algo sale mal, solo tiras la ampliación y la casa sigue en pie.

Beneficios de usar un tema hijo

Actualizaciones seguras: Puedes actualizar PrestaShop y tu tema sin perder tus cambios.
Revertir cambios fácilmente: Si algo se rompe, desactivas el tema hijo y todo vuelve a la normalidad.
Código más limpio: Mantienes el tema original intacto, lo que facilita el mantenimiento.
Mayor velocidad: Al tener menos archivos que cargar, la tienda puede ir más rápida.

Requisitos previos antes de empezar

Antes de crear tu tema hijo PrestaShop, asegúrate de tener:

Acceso al panel de administración de tu tienda PrestaShop.
Acceso FTP o al administrador de archivos de tu hosting. Si usas Syspanel (recuerda, el puerto de acceso es el 2106), puedes gestionar tus archivos desde su panel.
Un editor de texto como Notepad++, Sublime Text o incluso el Bloc de notas.
Copia de seguridad de tu tienda. Esto es imprescindible. Nunca trabajes sin una copia de seguridad.

[WARNING] No hagas cambios en producción sin antes hacer una copia de seguridad completa de tu base de datos y archivos. Un error puede dejar tu tienda inaccesible.

Paso 1: Estructura de carpetas del tema hijo

Lo primero es crear la estructura de directorios. Tu tema hijo debe tener un nombre único y descriptivo. Por ejemplo, si tu tema padre se llama classic, puedes llamar al hijo classic-child.

Sigue estos pasos:

Conéctate a tu hosting mediante FTP o al administrador de archivos de Syspanel (puerto 2106).
Navega a la carpeta /themes/ de tu instalación de PrestaShop.
Crea una nueva carpeta con el nombre de tu tema hijo. Por ejemplo: /themes/classic-child/.

Dentro de esta carpeta, deberás crear como mínimo los siguientes archivos:

theme.yml (obligatorio para que PrestaShop lo reconozca).
prestashop (carpeta que contiene la configuración).
config (carpeta para la configuración del tema).

[INFO] No te preocupes si no entiendes todos los archivos aún. Vamos a crearlos paso a paso.

Paso 2: Crear el archivo theme.yml

El archivo theme.yml es el corazón de tu tema hijo PrestaShop. Le dice a PrestaShop cómo debe comportarse el tema y qué tema padre debe usar.

Crea un archivo llamado theme.yml dentro de tu carpeta /themes/classic-child/ y añade el siguiente contenido:

name: classic-child
display_name: "Classic Child"
version: 1.0.0
author: "Tu Nombre"
parent: classic
meta:
  compatibility:
    from: 1.7.0.0
    to: ~

Asegúrate de que el campo parent coincida exactamente con el nombre de tu tema padre. En este caso, classic es el tema predeterminado de PrestaShop 1.7 y 8.x.

[TIP] Si tu tema padre tiene otro nombre, cámbialo en el campo parent. Puedes verificar el nombre exacto mirando la carpeta del tema en /themes/.

Paso 3: Configurar la carpeta de configuración

Ahora necesitas crear la carpeta config dentro de tu tema hijo. Dentro de ella, crea un archivo llamado themes.ini.php.

Este archivo le indica a PrestaShop los parámetros de configuración del tema. El contenido básico es:

<?php
return [
    'name' => 'classic-child',
    'parent' => 'classic',
    'version' => '1.0.0',
    'author' => 'Tu Nombre',
];

Guarda el archivo y súbelo a la carpeta /themes/classic-child/config/.

Paso 4: Instalar y activar el tema hijo

Una vez que tienes la estructura básica, es hora de activar tu child theme PrestaShop en el panel de administración.

Ve a tu panel de administración de PrestaShop.
En el menú lateral, busca Diseño y luego Temas y logotipos.
Haz clic en Añadir nuevo tema y selecciona tu tema hijo desde el explorador de archivos, o si ya aparece en la lista, simplemente actívalo.
Una vez activado, PrestaShop te preguntará si quieres resetear los módulos. Elige Sí para asegurarte de que todo funcione correctamente.

[WARNING] Al activar un tema nuevo, algunos módulos pueden desconfigurarse. Revisa siempre la posición de los módulos en Diseño > Posiciones después de activar el tema hijo.

Paso 5: Personalizar tu tema hijo sin romper nada

Ahora viene la parte divertida: modificar tema PrestaShop sin miedo. Aquí te muestro cómo hacer cambios comunes.

Modificar los estilos CSS

Para cambiar los colores, fuentes o cualquier estilo visual:

Crea una carpeta llamada assets dentro de tu tema hijo.
Dentro, crea otra carpeta llamada css.
Crea un archivo custom.css y añade tus estilos personalizados.

Por ejemplo, para cambiar el color de los botones:

.btn-primary {
    background-color: #ff6600;
    border-color: #ff6600;
}

Luego, debes enlazar este archivo en tu tema. Abre el archivo theme.yml y añade:

assets:
  css:
    custom:
      path: assets/css/custom.css

[TIP] También puedes usar el módulo "Posiciones" para insertar código CSS directamente en el encabezado de tu tienda, sin necesidad de crear archivos.

Modificar archivos de plantilla (TPL)

Si necesitas cambiar la estructura HTML de alguna página, puedes sobrescribir los archivos .tpl del tema padre.

Copia el archivo que quieres modificar desde /themes/classic/templates/ a tu carpeta de tema hijo, manteniendo la misma estructura de carpetas.
Por ejemplo, para modificar la cabecera, copia /themes/classic/templates/_partials/header.tpl a /themes/classic-child/templates/_partials/header.tpl.
Edita el archivo copiado con tu editor de texto favorito.

[INFO] PrestaShop primero busca los archivos en el tema hijo. Si no los encuentra, usa los del tema padre. Por eso puedes sobrescribir solo los archivos que necesites.

Añadir funciones personalizadas

Si necesitas añadir código PHP personalizado, crea un archivo llamado functions.php en la raíz de tu tema hijo y añade tus funciones.

<?php
// Añadir una función personalizada
function mi_funcion_personalizada() {
    // Tu código aquí
}

Paso 6: Probar tu tienda

Después de hacer cambios, es crucial que pruebes tu tienda a fondo.

Revisa la página principal: Asegúrate de que todo se vea bien.
Navega por las categorías y productos: Comprueba que las páginas internas funcionan.
Haz una compra de prueba: Verifica que el carrito y el proceso de pago funcionan.
Revisa en móvil y tablet: El diseño debe ser responsive.

[WARNING] Si tienes una caché activa, es posible que no veas los cambios inmediatamente. Ve a Parámetros Avanzados > Rendimiento y limpia la caché después de hacer cambios.

Errores comunes y cómo solucionarlos

El tema hijo no aparece en el panel

Causa probable: El archivo theme.yml tiene un error de sintaxis.
Solución: Verifica que el archivo esté bien formado y que el nombre del tema padre sea correcto.

La tienda se ve sin estilos

Causa probable: No has copiado los archivos CSS del tema padre.
Solución: Algunos temas requieren que copies la carpeta assets completa del tema padre a tu tema hijo. Si no lo haces, la tienda se verá "pelada".

Los módulos no aparecen en la posición correcta

Causa probable: Los módulos están configurados para el tema padre.
Solución: Ve a Diseño > Posiciones y reorganiza los módulos para tu tema hijo.

Error de compatibilidad de versiones

Causa probable: El tema hijo no es compatible con tu versión de PrestaShop.
Solución: Revisa el campo compatibility en tu theme.yml y asegúrate de que la versión sea correcta.

Preguntas frecuentes (FAQ)

¿Puedo crear un tema hijo de cualquier tema de PrestaShop?

Sí, siempre que el tema padre sea compatible con la versión de PrestaShop que uses. Los temas de PrestaShop 1.7 y 8.x son compatibles con el sistema de temas hijos.

¿Perderé mis cambios si actualizo el tema padre?

No, esa es la ventaja principal. Tus cambios viven en el tema hijo, así que las actualizaciones del tema padre no los afectan.

¿Necesito conocimientos avanzados de programación?

No necesariamente. Con saber copiar y pegar archivos y editar texto, puedes crear y personalizar tu tema hijo PrestaShop. A medida que ganes experiencia, podrás hacer cambios más complejos.

¿Puedo desactivar el tema hijo si algo sale mal?

Sí, simplemente ve a Diseño > Temas y logotipos y activa el tema padre de nuevo. Tu tienda volverá a la normalidad al instante.

¿El tema hijo afecta al rendimiento de mi tienda?

No, el impacto es mínimo. De hecho, al tener menos archivos que cargar, tu tienda puede ser incluso más rápida.

¿Dónde puedo gestionar los archivos de mi hosting?

Si usas Syspanel, puedes acceder al administrador de archivos desde el panel de control. Recuerda que el puerto de acceso es el 2106. Desde allí podrás subir, editar y gestionar todos los archivos de tu tienda.

Consejos finales para personalizar PrestaShop sin romper

Siempre haz copias de seguridad: Antes de cualquier cambio, por pequeño que sea, guarda una copia de tus archivos y base de datos.
Usa un entorno de pruebas: Si es posible, crea una copia de tu tienda en un subdominio para probar los cambios antes de aplicarlos en producción.
Documenta tus cambios: Lleva un registro de qué archivos modificas y por qué. Esto te ahorrará tiempo en el futuro.
Mantén tu tema hijo actualizado: Aunque no se actualice como un tema normal, revisa periódicamente que la configuración sigue siendo válida después de actualizar PrestaShop.
No abuses de los archivos sobrescritos: Solo sobrescribe los archivos que realmente necesitas cambiar. Cuantos menos archivos dupliques, más fácil será el mantenimiento.

Conclusión

Crear un tema hijo PrestaShop es una de las mejores decisiones que puedes tomar para personalizar PrestaShop sin romper tu diseño. Te da la libertad de experimentar, modificar y mejorar tu tienda sin miedo a perder todo tu trabajo en una actualización.

Recuerda que la clave está en la estructura: un theme.yml bien configurado, una carpeta de archivos limpia y un poco de paciencia. Con esta guía, ya tienes todo lo necesario para empezar.

Si en algún momento te sientes perdido, vuelve a leer los pasos. Y si usas Syspanel para tu hosting, recuerda que el puerto de acceso es el 2106 y que desde su panel puedes gestionar todos tus archivos de forma segura.

Ahora, ¡manos a la obra! Tu tienda está a punto de volverse más flexible y segura que nunca.