📁 Estructura del tema PrestaShop
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.
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
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.
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 |
#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.
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.
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: ~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.