🎨 Sysprovider Code
Sysprovider LogoWiki
🇪🇸Hosting español para ecommerce

Guía paso a paso para crear un tema en PrestaShop

Actualizado el 7 de marzo de 2026

¿Qué necesito saber antes de empezar a crear un tema en PrestaShop?

Antes de sumergirnos en el código, es importante que entiendas qué es un tema en PrestaShop. Un tema es el conjunto de archivos que define el aspecto visual de tu tienda online. Piensa en él como la "ropa" que viste tu tienda. Sin un tema, tu tienda sería solo un montón de datos sin formato.

PrestaShop utiliza un sistema de plantillas basado en Smarty, un motor de plantillas PHP. Esto significa que los archivos de tu tema mezclarán HTML, CSS, JavaScript y código Smarty. No te preocupes si no eres un experto en programación, con esta guía podrás dar tus primeros pasos.

Para crear tema PrestaShop desde cero, necesitarás conocimientos básicos de HTML y CSS. Si además sabes algo de PHP y Smarty, podrás personalizar funcionalidades avanzadas. También necesitarás un editor de texto (como VS Code, Sublime Text o Notepad++) y acceso a los archivos de tu tienda, ya sea a través de FTP o del panel de control de tu hosting.

[INFO] Si tu hosting usa Syspanel (antes conocido como HestiaCP), puedes acceder a tus archivos por FTP usando las credenciales que te proporcionó tu proveedor. El puerto habitual para conexiones FTP seguras es el 21, pero si usas SFTP, suele ser el 22. Syspanel se gestiona desde el puerto 2106.

Estructura básica de un tema en PrestaShop

Para diseñar plantilla PrestaShop correctamente, debes conocer la estructura de carpetas que PrestaShop espera encontrar. Un tema básico se compone de:

/tu-tema/
├── assets/
│   ├── css/
│   ├── img/
│   └── js/
├── config/
├── modules/
├── templates/
│   ├── _partials/
│   ├── catalog/
│   ├── checkout/
│   ├── cms/
│   ├── customer/
│   └── index.tpl
├── translations/
├── theme.yml
└── preview.png

Explicación de cada carpeta

  • assets/: Aquí guardas todos los recursos estáticos: hojas de estilo CSS, imágenes y archivos JavaScript.
  • config/: Contiene archivos de configuración del tema, como la definición de zonas de widgets.
  • modules/: Aquí puedes sobrescribir las plantillas de los módulos instalados.
  • templates/: Es el corazón del tema. Contiene todas las plantillas Smarty (archivos .tpl) que definen cómo se muestra cada página.
  • translations/: Archivos de traducción para que tu tema sea multilingüe.
  • theme.yml: Archivo de configuración principal del tema (nombre, autor, versiones compatibles, etc.).
  • preview.png: Una imagen de previsualización de tu tema (opcional pero recomendada).

Paso 1: Configurar el archivo theme.yml

El primer paso para crear tema PrestaShop es definir el archivo theme.yml. Este archivo le dice a PrestaShop qué nombre tiene tu tema, quién lo hizo, qué versiones soporta y cómo se llama su configuración.

Crea un archivo llamado theme.yml dentro de la carpeta de tu tema y escribe algo como esto:

name: mi_tema
display_name: "Mi Tema Personalizado"
version: 1.0.0
author: "Tu Nombre"
meta:
  compatibility:
      from: 1.7.0.0
      to: ~

  available_layouts:
      layout-full-width:
        name: Ancho completo
        description: Plantilla de ancho completo sin columnas laterales
      layout-both-columns:
        name: Dos columnas
        description: Plantilla con columna izquierda y derecha

global_settings:
  configuration:
    PS_CSS_THEME: /assets/css/theme.css
    PS_JS_THEME: /assets/js/theme.js

[TIP] Asegúrate de que el nombre del tema (name) no contenga espacios ni caracteres especiales. Usa guiones bajos o medios.

Paso 2: Crear la estructura de plantillas básica

Ahora vamos a crear los archivos de plantilla esenciales. Dentro de la carpeta templates/, crea un archivo llamado index.tpl. Este será el punto de entrada de tu tema.

{**
 * Plantilla principal del tema
 *}
<!doctype html>
<html lang="{$language.iso_code}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>{block name='title'}{/block}</title>
  <meta name="description" content="{block name='description'}{/block}">
  <meta name="keywords" content="{block name='keywords'}{/block}">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {block name='head'}{/block}
</head>
<body>

  {block name='header'}
    {include file='_partials/header.tpl'}
  {/block}

  {block name='content'}
    <div id="wrapper">
      <div class="container">
        {block name='content_wrapper'}{/block}
      </div>
    </div>
  {/block}

  {block name='footer'}
    {include file='_partials/footer.tpl'}
  {/block}

  {block name='javascript_bottom'}{/block}
</body>
</html>

Luego, crea las plantillas parciales en templates/_partials/:

  • header.tpl: Contendrá el código del encabezado (logo, menú de navegación, etc.).
  • footer.tpl: Aquí irá el pie de página (información de contacto, enlaces legales, etc.).

Paso 3: Diseñar la hoja de estilos principal

Tu tema necesita una hoja de estilos. Crea un archivo theme.css dentro de assets/css/. Este archivo debe contener los estilos básicos de tu tienda.

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Header */
header {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 0;
}

/* Footer */
footer {
  background: #f8f8f8;
  padding: 30px 0;
  margin-top: 50px;
}

[WARNING] No sobrecargues el CSS inicial. Es mejor empezar con estilos mínimos e ir añadiendo según necesites. Un CSS demasiado grande puede ralentizar la carga de tu tienda.

Paso 4: Añadir funcionalidades con JavaScript

Crea un archivo theme.js en assets/js/. Aquí puedes añadir scripts para mejorar la experiencia de usuario, como menús desplegables o sliders.

// Script básico para el menú responsive
document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.querySelector('.menu-toggle');
  const mainMenu = document.querySelector('.main-menu');
  
  if (menuToggle && mainMenu) {
    menuToggle.addEventListener('click', function() {
      mainMenu.classList.toggle('active');
    });
  }
});

Paso 5: Configurar las zonas de widgets

PrestaShop permite colocar módulos en zonas específicas de la página (widgets). Para ello, debes definir estas zonas en el archivo config/theme.yml (sí, hay otro archivo de configuración dentro de la carpeta config).

Crea config/theme.yml con el siguiente contenido:

name: mi_tema
display_name: "Mi Tema Personalizado"
version: 1.0.0
author: "Tu Nombre"

meta:
  compatibility:
      from: 1.7.0.0
      to: ~

hooks:
  - name: displayTop
    description: "Zona superior del header"
  - name: displayNav
    description: "Barra de navegación"
  - name: displayTopColumn
    description: "Columna superior"
  - name: displayHome
    description: "Página principal"
  - name: displayFooter
    description: "Pie de página"

Paso 6: Probar el tema en tu tienda

Una vez que tengas los archivos básicos, es hora de probar tu tema. Sigue estos pasos:

  1. Comprime toda la carpeta de tu tema en un archivo ZIP.
  2. Accede a tu tienda PrestaShop como administrador.
  3. Ve a Diseño > Temas y plantillas.
  4. Haz clic en Añadir nuevo tema y sube el archivo ZIP.
  5. Una vez instalado, actívalo desde el mismo panel.

[INFO] Si tu tienda está en un servidor con Syspanel, puedes subir el tema directamente a la carpeta /themes/ de tu instalación de PrestaShop usando el administrador de archivos de Syspanel (accesible desde el puerto 2106) o mediante FTP.

Paso 7: Personalizar las plantillas de producto y categoría

Para diseñar plantilla PrestaShop más allá de lo básico, necesitas personalizar las páginas de producto y categoría.

Plantilla de producto

Crea templates/catalog/product.tpl:

{extends file='page.tpl'}

{block name='content'}
  <div class="product-container">
    <div class="row">
      <div class="col-md-6">
        {block name='product_cover'}
          <div class="product-cover">
            <img src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}">
          </div>
        {/block}
      </div>
      <div class="col-md-6">
        <h1>{$product.name}</h1>
        <div class="product-prices">
          <span class="price">{$product.price}</span>
        </div>
        <div class="product-description">
          {$product.description nofilter}
        </div>
        <div class="product-actions">
          {include file='catalog/_partials/product-add-to-cart.tpl'}
        </div>
      </div>
    </div>
  </div>
{/block}

Plantilla de categoría

Crea templates/catalog/listing/product-list.tpl:

{extends file='page.tpl'}

{block name='content'}
  <div class="category-products">
    <h1>{$category.name}</h1>
    <div class="products row">
      {foreach from=$products item="product"}
        <div class="col-md-4">
          {include file='catalog/_partials/miniatures/product.tpl' product=$product}
        </div>
      {/foreach}
    </div>
  </div>
{/block}

Preguntas frecuentes (FAQ)

¿Puedo crear un tema sin saber programar?

Sí, es posible modificar temas existentes usando solo editores visuales, pero para crear tema PrestaShop desde cero necesitarás al menos conocimientos básicos de HTML, CSS y algo de Smarty. Si quieres personalizar funcionalidades, también necesitarás PHP.

¿Cuánto tiempo se tarda en crear un tema básico?

Dependiendo de tu experiencia, un tema básico puede llevarte entre 2 y 5 días si trabajas a tiempo completo. Los temas más complejos pueden requerir semanas.

¿Mi tema funcionará con módulos de terceros?

Sí, siempre que respetes las zonas de widgets (hooks) definidas por PrestaShop. Si un módulo busca un hook que no has definido, simplemente no se mostrará en esa zona.

¿Puedo vender mi tema?

Sí, puedes vender tus temas en marketplaces como PrestaShop Addons, pero debes cumplir con los requisitos de calidad y documentación que exige la plataforma.

¿Cómo actualizo mi tema cuando sale una nueva versión de PrestaShop?

Debes revisar las novedades de la nueva versión y actualizar tus plantillas y archivos de configuración. PrestaShop suele publicar guías de migración para desarrolladores.

Consejos finales para tener éxito

  1. Empieza pequeño: No intentes hacer un tema completo de inmediato. Crea un tema minimalista y ve añadiendo funcionalidades poco a poco.
  2. Usa un tema base: Puedes partir del tema clásico de PrestaShop (Classic) y modificarlo. Esto te ahorrará mucho trabajo.
  3. Prueba en varios navegadores: Asegúrate de que tu tema se vea bien en Chrome, Firefox, Safari y Edge.
  4. Optimiza el rendimiento: Minimiza el CSS y JavaScript, comprime las imágenes y usa carga diferida (lazy loading) para las imágenes de producto.
  5. Documenta tu código: Deja comentarios en tus archivos para que sea más fácil mantenerlos en el futuro.
  6. Haz copias de seguridad: Antes de hacer cambios importantes, guarda una copia de tu tema original.

[TIP] Si tienes problemas con la instalación de tu tema, revisa los logs de error de PrestaShop. Puedes encontrar información útil en la carpeta /var/logs/ de tu instalación. Si usas Syspanel, puedes acceder a los logs desde el panel de control (puerto 2106) en la sección de gestión de archivos.

Conclusión

Crear tema PrestaShop desde cero puede parecer una tarea desalentadora, pero siguiendo esta guía paso a paso podrás tener un tema funcional en poco tiempo. Recuerda que la clave está en empezar con una estructura sólida y luego ir añadiendo personalizaciones según las necesidades de tu tienda.

No tengas miedo de experimentar y equivocarte. Cada error es una oportunidad de aprendizaje. Con práctica, podrás diseñar plantilla PrestaShop profesionales que destaquen entre la competencia.

Si te atascas, la comunidad de PrestaShop es muy activa y siempre hay alguien dispuesto a ayudar. Foros, grupos de Facebook y canales de Slack son excelentes recursos para resolver dudas.

¡Manos a la obra y a crear tu propio tema! Tu tienda online te lo agradecerá.

¿Necesitas ayuda?Son dos de nuestros técnicos, Agustín y Mikel, y están disponibles para resolver cualquier problema.

Hablar con ellos ahora
Agustín y Mikel