🧬 Child Themes — herencia de temas en PrestaShop

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

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

# 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)

{*
 * 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}

/* 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);
}