---
title: Child Themes — herencia de temas en PrestaShop
section: themes
slug: child-themes
description: "Como crear child themes (temas hijo) en PrestaShop para personalizar el tema padre sin modificar sus archivos: theme.yml, extends, herencia de templates y assets."
keywords: prestashop child theme tema hijo herencia template override parent extends assets
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/themes/child-themes"
---

# Child Themes — herencia de temas en PrestaShop

> Como crear child themes (temas hijo) en PrestaShop para personalizar el tema padre sin modificar sus archivos: theme.yml, extends, herencia de templates y assets.

Un child theme hereda todos los templates, CSS y JS de su tema padre, permitiendote personalizar solo lo que necesitas sin tocar los archivos originales. Cuando el tema padre se actualiza, el child theme mantiene tus personalizaciones.

## Que es un child theme

*Estructura de un child theme*

```bash
themes/
├── classic/                  # Tema padre (core de PS)
│   ├── theme.yml
│   ├── assets/
│   └── templates/
└── mytheme/                  # Child theme (tu personalizacion)
    ├── theme.yml             # Con parent: classic
    ├── assets/
    │   └── css/
    │       └── custom.css    # Solo tus estilos extra
    └── templates/
        └── catalog/
            └── product.tpl   # Solo los templates que sobreescribes
```

## Configurar theme.yml

*themes/mytheme/theme.yml — declarar el tema padre*

```yaml
name: mytheme
display_name: Mi Tema Personalizado
version: 1.0.0
author:
  name: gmartos.es
  url: https://gmartos.es

# ── CLAVE: declarar el tema padre ──
parent: classic  # nombre del directorio del tema padre

meta:
  compatibility:
    from: 8.0.0
    to: ~
  available_layouts:
    layout-full-width:
      name: Full width
      description: Full width layout
    layout-left-column:
      name: Left column
      description: Left column layout

global_settings:
  # Solo los assets EXTRA (los del padre se heredan)
  stylesheets:
    - id: mytheme-custom
      path: assets/css/custom.css
      media: all
      priority: 100  # Despues del CSS del padre
```

## Sobreescribir templates

Para sobreescribir un template del padre, crea el mismo archivo en tu child theme. PrestaShop busca los templates primero en el child, luego en el padre.

*Sobreescribir templates especificos del padre*

```bash
# Ejemplo: personalizar la ficha de producto
# Copia el template del padre:
cp themes/classic/templates/catalog/product.tpl themes/mytheme/templates/catalog/product.tpl

# Edita solo lo que necesitas en themes/mytheme/templates/catalog/product.tpl
# El resto se hereda del padre automaticamente

# Jerarquia de busqueda de templates:
# 1. themes/mytheme/modules/mymodule/views/templates/  (override modulo en child)
# 2. themes/classic/modules/mymodule/views/templates/   (override modulo en padre)
# 3. modules/mymodule/views/templates/                  (template original del modulo)
```

## Herencia en Smarty con {extends}

*Heredar un template del padre y sobrescribir solo un bloque*

```smarty
{*
 * themes/mytheme/templates/catalog/product.tpl
 * Extiende el template del padre y sobrescribe solo el bloque de descripcion
 *}
{extends file='parent:catalog/product.tpl'}

{* Solo sobreescribir el bloque de descripcion — el resto se hereda *}
{block name='product_description'}
  <div class="my-custom-description">
    {$product.description nofilter}
    {* Añadir contenido extra *}
    <div class="my-extra-info">
      {l s='Informacion adicional de la tienda' mod='mytheme'}
    </div>
  </div>
{/block}
```

## Assets del child theme

*themes/mytheme/assets/css/custom.css — solo tus estilos*

```css
/* Child theme CSS — se carga DESPUES del CSS del padre */
/* Solo sobrescribe lo que necesitas cambiar */

:root {
  /* Cambiar los colores del tema */
  --ps-brand: #e63946;
  --ps-brand-hover: #c1121f;
}

/* Personalizar la cabecera */
.header-top {
  background-color: #1d3557;
  color: #f1faee;
}

/* Añadir estilos para tu bloque custom */
.my-custom-description {
  padding: 2rem;
  background: #f8f9fa;
  border-left: 4px solid var(--ps-brand);
}
```

> **[TIP] Actualizar el tema padre sin perder cambios**
>
> Al actualizar el tema padre (p.ej. Classic), tu child theme mantiene todos sus templates y assets personalizados. Solo necesitas revisar si algun template que sobreescribes ha cambiado significativamente en el padre.


---

*Fuente: [https://ayudaprestashop.es/themes/child-themes](https://ayudaprestashop.es/themes/child-themes). Version Markdown generada automaticamente para consumo por LLMs.*