---
title: Estructura del tema PrestaShop
section: themes
slug: structure
description: Guia completa sobre la estructura de archivos y directorios de un tema PrestaShop. theme.yml, config/, assets/, templates/ y todos los archivos necesarios.
keywords: prestashop tema estructura theme.yml templates smarty assets
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/themes/structure"
---

# Estructura del tema PrestaShop

> Guia completa sobre la estructura de archivos y directorios de un tema PrestaShop. theme.yml, config/, assets/, templates/ y todos los archivos necesarios.

Un tema de PrestaShop es una coleccion de **plantillas Smarty (.tpl)**, archivos CSS/JS, imagenes y un archivo de configuracion `theme.yml` que define los metadatos del tema y su estructura. Los temas viven en `/themes/nombre-del-tema/` dentro de la instalacion de PrestaShop.

> **[TIP] Tema de referencia**
>
> El tema oficial **Classic** (PS 1.7/8.x) y **Hummingbird** (PS 9.x) son el punto de partida recomendado para crear temas propios. Siempre parte de un child theme del tema oficial en lugar de modificar el tema padre directamente.

## Estructura de directorios

*Estructura completa de un tema PrestaShop*

```bash
themes/
└── mytheme/
    ├── theme.yml                    # Manifesto del tema (REQUERIDO)
    ├── preview.png                  # Captura de pantalla (800x600px)
    │
    ├── config/                      # Configuracion del tema
    │   └── theme.yml                # Configuracion extendida (hooks, columnas)
    │
    ├── assets/
    │   ├── css/
    │   │   ├── theme.css            # Estilos compilados del tema
    │   │   └── custom.css           # Personalizaciones adicionales
    │   ├── js/
    │   │   ├── theme.js             # JavaScript del tema
    │   │   └── custom.js
    │   └── img/
    │       └── logo.png
    │
    ├── templates/                   # Plantillas Smarty (.tpl)
    │   ├── catalog/
    │   │   ├── listing/
    │   │   │   ├── product-list.tpl
    │   │   │   └── products.tpl
    │   │   ├── product.tpl          # Pagina de producto
    │   │   ├── category.tpl         # Pagina de categoria
    │   │   └── search.tpl
    │   ├── checkout/
    │   │   ├── cart.tpl
    │   │   ├── checkout.tpl
    │   │   └── order-confirmation.tpl
    │   ├── customer/
    │   │   ├── my-account.tpl
    │   │   ├── authentication.tpl
    │   │   └── address.tpl
    │   ├── cms/
    │   │   └── page.tpl
    │   ├── errors/
    │   │   ├── 404.tpl
    │   │   └── 500.tpl
    │   ├── _partials/               # Bloques reutilizables
    │   │   ├── head.tpl
    │   │   ├── header.tpl
    │   │   ├── footer.tpl
    │   │   ├── breadcrumb.tpl
    │   │   └── notifications.tpl
    │   ├── layouts/
    │   │   ├── layout-full-width.tpl
    │   │   ├── layout-left-column.tpl
    │   │   └── layout-right-column.tpl
    │   ├── index.tpl                # Homepage
    │   └── page.tpl                 # Template base de paginas
    │
    └── modules/                     # Overrides de templates de modulos
        ├── ps_imageslider/
        │   └── views/templates/hook/
        │       └── slider.tpl
        └── ps_shoppingcart/
            └── modal.tpl
```

## theme.yml — el manifesto

El archivo `theme.yml` en la raiz del tema es **obligatorio** y define todos los metadatos del tema, la version de PrestaShop compatible y las opciones de configuracion.

*theme.yml — estructura completa*

```yaml
name: mytheme
display_name: "Mi Tema Custom"
version: "1.0.0"
author:
  name: "Tu Nombre"
  email: "tu@email.com"
  url: "https://tudominio.com"

meta:
  compatibility:
    from: "1.7.0.0"
    to: ~               # null = sin limite superior
  available_layouts:
    layout-full-width:
      name: "Full width"
      description: "Layout sin columnas laterales"
    layout-left-column:
      name: "Left column"
      description: "Layout con columna izquierda"
    layout-right-column:
      name: "Right column"
      description: "Layout con columna derecha"
  default_layout: layout-full-width

global_settings:
  configuration:
    PS_QUICK_VIEW: 0
    NEW_PRODUCTS_NBR: 8
    PS_PRODUCTS_PER_PAGE: 12
  hooks:
    custom_hook: []
  image_types:
    cart_default:
      width: 125
      height: 125
    small_default:
      width: 98
      height: 98
    medium_default:
      width: 452
      height: 452
    large_default:
      width: 800
      height: 800
    home_default:
      width: 250
      height: 250
    category_default:
      width: 960
      height: 350
    product_listing:
      width: 220
      height: 220

page_layouts:
  index: layout-full-width
  product: layout-right-column
  category: layout-left-column
  cms: layout-full-width
```

## Directorio templates/

Las plantillas Smarty (.tpl) replican la estructura de URLs del front office. Cada pagina tiene su template correspondiente. PrestaShop busca primero en el tema activo antes de usar el template por defecto.

| URL / Pagina | Template | Descripcion |
| --- | --- | --- |
| / (inicio) | templates/index.tpl | Homepage de la tienda |
| /producto | templates/catalog/product.tpl | Ficha de producto |
| /categoria | templates/catalog/category.tpl | Listado de categoria |
| /busqueda | templates/catalog/search.tpl | Resultados de busqueda |
| /carrito | templates/checkout/cart.tpl | Pagina del carrito |
| /pago | templates/checkout/checkout.tpl | Flujo de pago (Symfony) |
| /confirmacion | templates/checkout/order-confirmation.tpl | Confirmacion de pedido |
| /mi-cuenta | templates/customer/my-account.tpl | Panel de cliente |
| /cms | templates/cms/page.tpl | Paginas CMS estaticas |
| Cabecera global | templates/_partials/header.tpl | Header comun a todas las paginas |
| Pie de pagina | templates/_partials/footer.tpl | Footer comun |
| Head HTML | templates/_partials/head.tpl | Etiquetas <head> |

## Directorio assets/

Los assets del tema (CSS, JS, imagenes) se gestionan a traves de `theme.yml` y del hook `actionFrontControllerSetMedia`. PrestaShop puede concatenar y comprimir (CCC) los archivos automaticamente si esta activado en el BO.

*Registro de assets en theme.yml (config/theme.yml)*

```yaml
assets:
  css:
    all:
      - id: theme-main
        path: assets/css/theme.css
        media: all
        priority: 50
  js:
    all:
      - id: theme-main
        path: assets/js/theme.js
        position: bottom
        priority: 50
```

## Herencia y child themes

PrestaShop soporta herencia de temas. Un child theme solo necesita incluir los archivos que difieren del tema padre — el resto se hereda automaticamente. Esto evita duplicar cientos de templates.

*theme.yml de un child theme*

```yaml
name: mytheme-child
display_name: "Mi Tema Child"
version: "1.0.0"

parent: classic    # Nombre del directorio del tema padre

meta:
  compatibility:
    from: "1.7.8.0"
    to: ~
```

> **[!] Limitaciones de child themes**
>
> Los child themes de PrestaShop solo heredan **templates** (.tpl). Los assets CSS/JS del padre NO se heredan automaticamente — debes copiarlos o enlazarlos explicitamente en tu `theme.yml`.


---

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