Cómo crear un tema hijo en PrestaShop con DirectAdmin

¿Por qué necesitas un tema hijo en PrestaShop?

Imagina que personalizas tu tienda PrestaShop con un tema de pago o gratuito. Le cambias colores, fuentes, posiciones de módulos y hasta tocas archivos PHP directamente. Todo funciona perfecto hasta que el desarrollador del tema lanza una actualización. Si actualizas, pierdes todos tus cambios. Si no actualizas, te quedas sin parches de seguridad y mejoras. Un tema hijo PrestaShop resuelve este problema: es una capa separada que hereda todo del tema padre, pero donde puedes hacer modificaciones sin miedo a sobrescribirlas.

En esta guía te enseñaré paso a paso cómo crear tema PrestaShop desde el panel de control DirectAdmin. No necesitas ser un experto en programación, solo seguir las instrucciones al pie de la letra. Al final, tendrás un tema hijo funcional que te permitirá personalizar PrestaShop DirectAdmin de forma segura.

Requisitos previos

Antes de empezar, asegúrate de tener lo siguiente:

Acceso a DirectAdmin (usuario, contraseña y puerto, normalmente el 2222).
Una instalación de PrestaShop funcionando (versión 1.7 o superior recomendada).
Un tema padre instalado (puede ser el predeterminado "Classic" o cualquier otro).
Conocimientos básicos de navegación por archivos (no te preocupes, lo guiaremos).
Opcional: un cliente FTP como FileZilla, aunque usaremos DirectAdmin.

[INFO] Si usas Syspanel (antes conocido como HestiaCP), el acceso es similar pero el puerto del panel es el 2106. Los pasos dentro del gestor de archivos son equivalentes.

Paso 1: Acceder al gestor de archivos de DirectAdmin

Abre tu navegador y escribe https://tudominio.com:2222 (o la IP de tu servidor).
Inicia sesión con tus credenciales de DirectAdmin.
Busca el icono "File Manager" o "Gestor de Archivos". Si no lo ves, puede estar dentro de la sección "Advanced Features".
Una vez dentro, navega hasta la carpeta public_html (o el directorio donde tengas instalado PrestaShop). Normalmente es la raíz de tu dominio.

[WARNING] No modifiques archivos del tema padre directamente. Siempre trabaja dentro del tema hijo. Si no tienes un tema hijo, este es el momento de crearlo.

Paso 2: Localizar la carpeta del tema padre

Dentro de tu instalación de PrestaShop, la estructura de temas está en:

/themes/

Dentro de esta carpeta verás subcarpetas como:

classic (tema por defecto)
tu-tema-personalizado (si compraste uno)

Anota el nombre exacto del tema que estás usando como padre. Por ejemplo, si usas el tema Classic, el nombre es classic.

Paso 3: Crear la carpeta del tema hijo

En el gestor de archivos, ve a la carpeta /themes/.
Haz clic en "Create Folder" o "Nueva Carpeta".
Ponle un nombre descriptivo. La convención es usar el nombre del tema padre seguido de -child. Por ejemplo:
- Si tu tema padre es classic, llama a la carpeta classic-child.
- Si tu tema padre es mytheme, llama a la carpeta mytheme-child.
Haz clic en "Create".

Paso 4: Crear el archivo `theme.yml`

Este archivo le dice a PrestaShop que existe un tema hijo y cuál es su padre.

Dentro de la carpeta del tema hijo que acabas de crear, haz clic en "Create File".
Nombra el archivo exactamente como: theme.yml (sin espacios, todo en minúsculas).
Haz clic en "Edit" o "Code Editor" para abrir el editor de texto.
Pega el siguiente contenido, ajustando el nombre del tema padre:

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

Explicación de cada línea:

name: Identificador único del tema hijo (sin espacios, usa guiones).
display_name: Nombre visible en el back office.
version: Versión de tu tema hijo.
author: Tu nombre o el de tu empresa.
parent: Nombre exacto de la carpeta del tema padre (ej. classic).
meta/compatibility: Rango de versiones de PrestaShop compatibles. El ~ significa "hasta la última versión".

Guarda los cambios (Ctrl+S o botón "Save").

Paso 5: Crear el archivo `prestashop.yml` (solo para PrestaShop 8+)

Si tu PrestaShop es versión 8 o superior, necesitas un archivo adicional:

Crea otro archivo llamado prestashop.yml.
Pega este contenido:

name: classic-child
parent: classic

Guarda el archivo.

Paso 6: Crear la carpeta `assets` y archivos de estilo

Para que el tema hijo herede los estilos del padre pero permita sobrescribirlos, debes crear la estructura básica:

Dentro de tu carpeta de tema hijo, crea una subcarpeta llamada assets.
Dentro de assets, crea otra subcarpeta llamada css.
Dentro de css, crea un archivo vacío llamado custom.css (puedes crearlo con el editor de texto y dejarlo vacío).
Opcionalmente, crea también assets/js/custom.js si necesitas JavaScript personalizado.

[TIP] No copies todos los archivos del tema padre. El tema hijo hereda automáticamente todo lo que no esté sobrescrito. Solo crea los archivos que vayas a modificar.

Paso 7: Instalar el tema hijo en PrestaShop

Ve al Back Office de tu PrestaShop (normalmente tudominio.com/adminXXXXX).
Ve a "Diseño" > "Temas y logotipo".
En la sección "Temas", deberías ver tu nuevo tema hijo listado (por ejemplo, "Classic Child Theme").
Haz clic en "Usar este tema" o el botón de activar.

Si no aparece, verifica:

Que el archivo theme.yml esté correctamente formateado.
Que el nombre del parent coincida exactamente con la carpeta del tema padre.
Que hayas refrescado la página del back office.

Paso 8: Verificar que el tema hijo funciona

Ve a la página principal de tu tienda.
Haz clic derecho y selecciona "Inspeccionar" o "Ver código fuente".

Busca en el HTML la mención de tu tema hijo. Deberías ver algo como:

<link rel="stylesheet" href="/themes/classic-child/assets/css/custom.css">

Si ves esto, ¡felicidades! El tema hijo está funcionando.

Paso 9: Personalizar el tema hijo (ejemplo práctico)

Ahora que tienes el tema hijo activo, puedes empezar a personalizar. Te muestro un ejemplo sencillo:

Cambiar el color del botón de compra

Edita el archivo custom.css que creaste en assets/css/.
Añade este código CSS:

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

Guarda el archivo.
Refresca tu tienda (puede que necesites limpiar la caché de PrestaShop en "Parámetros avanzados" > "Rendimiento").

Verás que el botón ha cambiado de color sin haber tocado el tema padre.

Paso 10: Sobrescribir archivos PHP del tema padre

Si necesitas modificar un archivo PHP (por ejemplo, header.tpl o product.tpl):

Copia el archivo exacto desde la carpeta del tema padre a la misma ruta dentro del tema hijo.
- Ejemplo: si quieres modificar themes/classic/templates/checkout/checkout.tpl, cópialo a themes/classic-child/templates/checkout/checkout.tpl.
Edita la copia en el tema hijo con tus cambios.
PrestaShop usará automáticamente el archivo del hijo en lugar del del padre.

[WARNING] No copies toda la carpeta templates del padre. Solo los archivos que vayas a modificar. Copiar todo puede causar conflictos y hace más difícil la actualización.

Preguntas frecuentes (FAQ)

¿Puedo tener varios temas hijos para un mismo tema padre?

Sí, puedes crear tantos temas hijos como necesites, cada uno con un nombre único. Solo activa el que quieras usar.

¿Qué pasa si actualizo el tema padre?

Tus cambios en el tema hijo se conservan intactos, porque están en una carpeta separada. Solo asegúrate de que la estructura del tema padre no cambie drásticamente (por ejemplo, que eliminen un archivo que sobrescribiste).

¿Cómo elimino un tema hijo?

Desactívalo desde el Back Office (usa otro tema).
Elimina la carpeta del tema hijo desde DirectAdmin.
No afecta al tema padre.

¿El tema hijo afecta al rendimiento?

Mínimamente. PrestaShop debe verificar si existe el archivo en el hijo antes de usar el del padre, pero la diferencia es imperceptible.

¿Puedo usar un tema hijo con un tema comprado?

Sí, siempre que el tema comprado permita temas hijos (la mayoría lo hacen). Consulta la documentación del tema.

¿Necesito conocimientos de programación?

Para cambios básicos como CSS, no. Para modificar archivos PHP necesitas nociones de programación, pero siempre puedes copiar archivos y hacer cambios pequeños.

Conclusión

Crear un tema hijo PrestaShop desde DirectAdmin es un proceso sencillo que te ahorrará muchos dolores de cabeza a largo plazo. Con solo unos pocos archivos, puedes personalizar PrestaShop DirectAdmin sin miedo a perder tus modificaciones cuando actualices el tema padre.

Recuerda:

Siempre trabaja en el tema hijo, nunca modifiques el padre.
Usa nombres descriptivos para tus carpetas.
Prueba los cambios en un entorno de desarrollo si es posible.
Limpia la caché de PrestaShop después de hacer cambios.

Ahora que sabes crear tema PrestaShop correctamente, anímate a experimentar. Cambia colores, fuentes, posiciones de módulos y hasta la estructura de las páginas. La flexibilidad que te da un tema hijo es enorme. Si tienes dudas, revisa la documentación oficial de PrestaShop o consulta con tu proveedor de hosting.

[TIP] Si usas Syspanel (HestiaCP), el proceso es idéntico, solo cambia el puerto de acceso (2106). El gestor de archivos funciona de manera similar.

¡Manos a la obra y a personalizar tu tienda con total seguridad!