Cómo Crear un Tema Hijo en PrestaShop | Personalización Fácil

¿Quieres darle un toque único a tu tienda online sin perder las actualizaciones del tema principal? Crear un tema hijo en PrestaShop es la solución perfecta. Es como tener un cuaderno de bocetos donde haces tus propias modificaciones sin tocar el libro original. Así, cuando el tema padre recibe una actualización, tus cambios no se borran.

En esta guía extensa, te voy a explicar paso a paso cómo crear un tema hijo PrestaShop, desde cero y sin necesidad de ser un experto en programación. Además, incluiremos un FAQ con las dudas más comunes. ¡Empecemos!

¿Qué es un Tema Hijo y por qué es Importante?

Un tema hijo (child theme) es una copia modificada de un tema existente (el tema padre). En lugar de editar directamente los archivos del tema que compraste o descargaste, creas un tema separado que hereda toda la funcionalidad y el diseño del padre.

Beneficios clave

Actualizaciones seguras: Cuando el tema padre se actualiza (por seguridad, nuevas funciones o correcciones), tus cambios personalizados no se pierden.
Personalización sin miedo: Puedes modificar CSS, plantillas (tpl), JavaScript, etc., sin riesgo de romper la tienda.
Rendimiento: Los temas hijos son ligeros, ya que solo contienen los archivos que modificas.
Mantenimiento sencillo: Si algo sale mal, desactivas el tema hijo y vuelves al padre.

[INFO] Si usas un tema de pago o gratuito, siempre es recomendable usar un tema hijo. Incluso temas muy populares como "Classic" de PrestaShop se benefician de esta práctica.

Requisitos Previos

Antes de empezar, asegúrate de tener:

Acceso al panel de administración de tu hosting (donde está alojada tu tienda).
Un cliente FTP (como FileZilla) o el administrador de archivos del cPanel / Syspanel.
Carpeta del tema padre dentro de /themes/ en la raíz de tu instalación de PrestaShop.
Conocimientos básicos de estructura de archivos (no te preocupes, lo explicamos todo).

[WARNING] Si tu hosting usa Syspanel (anteriormente HestiaCP), recuerda que el puerto de acceso es el 2106 (por ejemplo, https://tudominio.com:2106). Allí tendrás el administrador de archivos para subir/modificar carpetas.

Paso a Paso: Crear un Tema Hijo en PrestaShop

1. Accede a tu servidor

Conéctate a tu hosting vía FTP o mediante el administrador de archivos de Syspanel (puerto 2106). Navega hasta la carpeta themes/ de tu PrestaShop. Normalmente está en la raíz: /public_html/themes/ o /www/themes/.

2. Crea la carpeta del tema hijo

Dentro de themes/, crea una nueva carpeta con un nombre descriptivo. Por ejemplo, si tu tema padre se llama mi-tema, puedes llamar a tu hijo mi-tema-hijo o mi-tema-child.

Ejemplo de ruta final:
/public_html/themes/mi-tema-hijo/

3. Crea el archivo `theme.yml`

Este archivo es obligatorio en PrestaShop 1.7+ para que el sistema reconozca el tema. Dentro de la carpeta de tu tema hijo, crea un archivo llamado theme.yml (sin espacios, todo en minúsculas).

Contenido mínimo del archivo:

name: mi-tema-hijo
display_name: "Mi Tema Hijo"
version: 1.0.0
author: "Tu Nombre"
parent: mi-tema
meta:
  compatibility:
    from: 1.7.0.0
    to: ~

Explicación de cada línea:

name: identificador interno (sin espacios, usa guiones).
display_name: nombre visible en el back office.
version: número de versión, empieza con 1.0.0.
parent: nombre exacto de la carpeta del tema padre (ej: mi-tema).
meta.compatibility: rango de versiones de PrestaShop compatibles.

[TIP] Si tu tema padre se llama classic, el parent debe ser classic. Revisa el nombre exacto de la carpeta del padre.

4. Crea el archivo `manifest.xml` (opcional pero recomendado)

Aunque no es estrictamente necesario en versiones recientes, algunos módulos lo requieren. Crea un archivo manifest.xml en la misma carpeta con este contenido:

<?xml version="1.0" encoding="UTF-8" ?>
<manifest>
  <name>mi-tema-hijo</name>
  <display_name>Mi Tema Hijo</display_name>
  <version>1.0.0</version>
  <author>Tu Nombre</author>
  <parent>mi-tema</parent>
</manifest>

5. Crea la estructura de carpetas básica

Para que el tema hijo herede correctamente, debes replicar solo las carpetas que vas a modificar. Las más comunes son:

css/ – para hojas de estilo personalizadas.
js/ – para scripts adicionales.
templates/ – para sobrescribir plantillas (por ejemplo, templates/_partials/header.tpl).
modules/ – para personalizar módulos específicos.

No copies archivos completos del padre, solo crea las carpetas vacías. PrestaShop buscará primero en el hijo y, si no encuentra el archivo, usará el del padre.

Ejemplo de estructura mínima:

mi-tema-hijo/
├── theme.yml
├── manifest.xml
├── css/
│   └── custom.css
└── templates/
    └── _partials/
        └── header.tpl

6. Sube los archivos al servidor

Usa FTP o el administrador de archivos de Syspanel (puerto 2106) para subir la carpeta completa del tema hijo a themes/. Asegúrate de que los permisos de archivos sean 644 y de carpetas 755.

7. Instala el tema hijo en el Back Office

Ve a Mejoras → Temas en el menú de PrestaShop.
Haz clic en Añadir nuevo tema y selecciona Subir un tema.
Busca la carpeta de tu tema hijo (no es necesario comprimirla, PrestaShop la detecta automáticamente).
Una vez instalado, actívalo desde la lista de temas.

[WARNING] Si el tema no aparece, verifica que el theme.yml tenga el nombre del parent exacto (mayúsculas, guiones, etc.). También revisa los logs de errores de PrestaShop.

8. Personaliza tu tema hijo

Ahora puedes empezar a modificar. Por ejemplo, para cambiar el color del encabezado, crea un archivo custom.css en la carpeta css/ y escribe:

header#header {
  background-color: #ff6600 !important;
}

Para sobrescribir una plantilla, copia el archivo .tpl correspondiente del tema padre a la misma ruta en el hijo y edítalo. Por ejemplo, para modificar el pie de página, copia themes/mi-tema/templates/_partials/footer.tpl a themes/mi-tema-hijo/templates/_partials/footer.tpl y haz los cambios.

[TIP] Usa siempre !important solo cuando sea necesario. Es mejor ser específico con selectores CSS.

FAQ: Preguntas Frecuentes sobre Tema Hijo en PrestaShop

❓ ¿Puedo usar un tema hijo con cualquier tema de PrestaShop?

Sí, siempre que el tema padre esté correctamente estructurado y sea compatible con PrestaShop 1.7 o superior. Los temas muy antiguos (1.6) no tienen esta funcionalidad.

❓ ¿Qué pasa si actualizo el tema padre?

Tus cambios en el tema hijo se mantienen intactos. PrestaShop solo actualizará los archivos del padre. Es la principal ventaja.

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

Sí, puedes crear varios temas hijos (por ejemplo, uno para pruebas y otro para producción). Solo asegúrate de que tengan nombres diferentes en theme.yml.

❓ ¿Cómo desactivo el tema hijo?

En el Back Office, ve a Mejoras → Temas y activa otro tema (puede ser el padre u otro). El hijo se desactiva automáticamente.

❓ ¿Pierdo datos si cambio de tema hijo?

No, los datos de tu tienda (productos, clientes, pedidos) no se ven afectados. Solo cambia la apariencia y la estructura de plantillas.

❓ ¿Necesito saber programación para usar un tema hijo?

No es obligatorio, pero ayuda tener nociones básicas de HTML, CSS y estructura de archivos. Para cambios simples (colores, fuentes), solo necesitas CSS.

❓ ¿Puedo modificar módulos desde el tema hijo?

Sí. Por ejemplo, para personalizar un módulo de menú, crea la carpeta modules/ dentro del tema hijo y replica la estructura del módulo que quieras modificar. PrestaShop priorizará los archivos del hijo.

❓ ¿El tema hijo afecta el rendimiento?

Mínimamente. Al ser solo una capa adicional, el rendimiento es casi idéntico al del tema padre. Eso sí, evita sobrescribir archivos innecesariamente.

❓ ¿Cómo sé si mi tema padre es compatible con temas hijos?

La mayoría de los temas modernos lo son. Si el tema tiene un archivo theme.yml en su carpeta raíz, es compatible. Si no, puedes crearlo tú mismo siguiendo la guía.

❓ ¿Puedo combinar un tema hijo con un constructor visual (Page Builder)?

Sí, pero ten cuidado. Algunos constructores guardan configuraciones en la base de datos, no en archivos. El tema hijo solo afecta archivos estáticos. Las configuraciones de Page Builder se mantienen aunque cambies de tema.

Consejos Avanzados para Personalizar tu PrestaShop con Tema Hijo

Usa `custom.css` para cambios rápidos

Crea un archivo custom.css en la carpeta css/ del tema hijo. Luego, desde el Back Office, ve a Mejoras → Diseño → Temas → Configuración avanzada y añade la ruta al archivo en el campo "CSS personalizado". Así evitas editar el theme.yml.

Sobrescribe plantillas de módulos

Si un módulo tiene plantillas en /modules/nombre-modulo/views/templates/, puedes copiarlas a tu tema hijo en la misma ruta (ej: themes/mi-tema-hijo/modules/nombre-modulo/views/templates/). PrestaShop usará tu versión.

Añade JavaScript personalizado

Crea un archivo custom.js en la carpeta js/ del tema hijo y luego regístralo en el theme.yml:

assets:
  js:
    custom:
      - js/custom.js

Prueba en un entorno de desarrollo

Antes de aplicar cambios en producción, usa un subdominio o una copia local. Así evitas errores que afecten a clientes reales.

[INFO] Si tienes acceso a Syspanel (puerto 2106), puedes crear fácilmente un subdominio para pruebas desde el panel de administración.

Conclusión

Crear un tema hijo PrestaShop es una de las mejores prácticas para mantener tu tienda actualizada y segura mientras la personalizas a tu gusto. Con solo unos pocos archivos y siguiendo esta guía, podrás hacer cambios sin miedo a perderlos.

Recuerda:

Siempre usa un tema hijo para personalizar.
Mantén el theme.yml correcto.
Prueba todo en un entorno seguro.

Ahora que ya sabes cómo hacerlo, ¡manos a la obra! Dale a tu tienda ese toque único que la hará destacar. Si tienes dudas, revisa el FAQ o consulta la documentación oficial de PrestaShop.

¡Feliz personalización!