Crear tema PrestaShop personalizado - Tutorial paso a paso

¿Sueñas con tener una tienda online que refleje exactamente la personalidad de tu marca, sin limitarte a plantillas prefabricadas? Crear un tema personalizado en PrestaShop desde cero es la mejor manera de lograrlo. Aunque pueda sonar a tarea de desarrolladores expertos, con esta guía paso a paso, incluso si tienes poca experiencia técnica, podrás construir los cimientos de tu propio diseño. Olvídate de los temas genéricos y prepárate para darle a tu ecommerce una identidad única.

En este artículo, recorreremos juntos el proceso completo: desde preparar tu entorno de desarrollo hasta activar tu nuevo tema. Aprenderás a manejar la estructura de archivos, a personalizar Smarty PrestaShop (el motor de plantillas que da vida a tu tienda) y a aplicar estilos CSS. Al final, tendrás un tema personalizado PrestaShop funcional y listo para que sigas añadiendo tu toque mágico.

¿Qué necesitas antes de empezar?

Antes de lanzarnos a escribir código, asegurémonos de que tienes todo lo necesario. No te preocupes, no necesitas ser un genio de la programación, solo un poco de paciencia y seguir estos pasos.

Requisitos técnicos básicos

Un servidor local o de pruebas: Puedes usar herramientas como XAMPP, WAMP o MAMP para montar PrestaShop en tu computadora. También puedes trabajar directamente en tu hosting, pero es más seguro hacerlo en un entorno de desarrollo.
PrestaShop instalado: Necesitas una instalación limpia de PrestaShop (versión 1.7 o superior, que son las más modernas). Si usas un panel como Syspanel (accesible por el puerto 2106), puedes instalar PrestaShop fácilmente desde el instalador de aplicaciones.
Editor de código: Usa algo simple como Sublime Text, Visual Studio Code o Notepad++. Son gratuitos y te ayudarán a escribir código limpio.
Conocimientos mínimos de HTML, CSS y algo de PHP: No te asustes, solo lo básico. Saber qué es un div, una clase CSS y cómo funciona un archivo .tpl será suficiente.

[INFO] Si estás en un hosting compartido con Syspanel, recuerda que el acceso a tu panel de control es mediante tudominio.com:2106. Allí podrás gestionar archivos, bases de datos y hasta instalar PrestaShop con un clic.

Estructura de un tema en PrestaShop

PrestaShop organiza sus temas en una carpeta específica dentro de la instalación. Imagínalo como una casa: cada habitación tiene un propósito. Para diseñar un tema PrestaShop, debes respetar esta estructura.

La carpeta `themes`

Dentro de la raíz de tu PrestaShop (normalmente tu-sitio.com/), encontrarás la carpeta themes. Allí es donde viven todos los temas instalados. Por defecto, verás uno llamado classic (el tema por defecto). Nosotros crearemos el nuestro.

Archivos y carpetas esenciales de un tema

Un tema básico necesita al menos estos elementos:

config/theme.yml: El archivo de configuración principal. Aquí le dices a PrestaShop cómo se llama tu tema, qué versión usa y qué dependencias tiene.
templates/: Carpeta donde van las plantillas Smarty PrestaShop (archivos .tpl). Aquí se define la estructura HTML de cada página.
assets/: Aquí guardas CSS, JavaScript e imágenes. Por ejemplo, assets/css/theme.css para tus estilos personalizados.
preview.png: Una imagen de 250x200 píxeles que se muestra en el panel de administración al seleccionar el tema. No es obligatoria, pero queda profesional.

[WARNING] No modifiques nunca el tema classic directamente. Si algo sale mal, perderás la tienda original. Siempre crea una copia o un tema nuevo.

Paso a paso: Crea tu primer tema personalizado

Vamos a poner manos a la obra. Te guiaré para que crees un tema desde cero, paso a paso. Al final, tendrás un tema básico pero funcional que podrás ir mejorando.

Paso 1: Crear la carpeta del tema

Dentro de themes/, crea una nueva carpeta con el nombre de tu tema. Por ejemplo, miprimertema. Usa minúsculas y sin espacios para evitar problemas.

Paso 2: El archivo `theme.yml`

Este es el corazón de tu tema. Crea un archivo llamado theme.yml dentro de themes/miprimertema/ y pega este contenido:

name: Mi Primer Tema  
display_name: "Mi Primer 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: Diseño de ancho completo sin columnas laterales  

global_settings:  
  configuration:  
    PS_IMAGE_QUALITY: png  
  modules:  
    to_enable:  
      - ps_mainmenu  
      - ps_searchbar

Este archivo le dice a PrestaShop: "Hola, soy un tema llamado Mi Primer Tema, compatible con versiones 1.7, y quiero usar un diseño de ancho completo".

Paso 3: Estructura básica de plantillas

Dentro de themes/miprimertema/, crea la carpeta templates/. Allí iremos añadiendo las plantillas.

`templates/_partials/head.tpl`

Crea esta carpeta y dentro el archivo head.tpl. Este archivo controla el <head> de tu HTML. Pon esto:

<!DOCTYPE html>
<html lang="{$language.iso_code}">
<head>
  <meta charset="utf-8">
  <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='stylesheets'}
    <link rel="stylesheet" href="{$urls.theme_assets}css/theme.css" type="text/css" media="all">
  {/block}
</head>

`templates/layouts/layout-full-width.tpl`

Crea la carpeta layouts dentro de templates y añade este archivo:

{extends file='../_partials/head.tpl'}

{block name='content'}
  <div id="wrapper">
    <div id="content-wrapper" class="container">
      {block name='content'}
        <p>¡Bienvenido a mi tienda personalizada!</p>
      {/block}
    </div>
  </div>
{/block}

[TIP] Los bloques {block name='...'} son como huecos que luego se rellenan con contenido específico de cada página. Es la magia de Smarty PrestaShop.

Paso 4: Añadir estilos CSS

Crea la carpeta assets/css/ dentro de tu tema y dentro un archivo theme.css. Pon algunos estilos básicos para que se vea diferente:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 20px;
}

Paso 5: Activar el tema desde el back office

Accede a tu panel de administración de PrestaShop (normalmente tudominio.com/admin1234).
Ve a Diseño > Tema y logo.
En la sección "Seleccionar un tema", deberías ver "Mi Primer Tema". Haz clic en "Usar este tema".
¡Listo! Tu tienda ahora usa tu tema personalizado.

[INFO] Si no ves tu tema, revisa que el archivo theme.yml esté bien escrito y que la carpeta esté en themes/. A veces un simple error de sintaxis (como una falta de espacio) hace que no se detecte.

Personalización avanzada con Smarty PrestaShop

Ahora que tienes un tema base, es hora de darle vida. Smarty PrestaShop es el motor de plantillas que te permite insertar variables, bucles y condicionales en tus archivos .tpl.

Variables globales útiles

{$shop.name}: Muestra el nombre de tu tienda.
{$urls.current_url}: La URL actual.
{$cart.products}: Lista de productos en el carrito.

Por ejemplo, para mostrar el nombre de la tienda en el header, edita head.tpl y añade:

<h1>{$shop.name}</h1>

Incluir módulos en tus plantillas

Los módulos como el menú principal se cargan con {hook h='displayTop'}. Por ejemplo, en layout-full-width.tpl, dentro del div#wrapper, añade:

{hook h='displayTop'}

Esto mostrará el menú de navegación y la barra de búsqueda (si activaste los módulos en theme.yml).

[WARNING] Si un hook no muestra nada, asegúrate de que el módulo correspondiente esté instalado y activo en el back office.

FAQ: Preguntas frecuentes sobre temas personalizados

Aquí resuelvo las dudas más comunes que suelen tener los principiantes.

¿Puedo usar mi tema en producción sin experiencia?

Sí, pero siempre pruébalo primero en un entorno de pruebas. Un error en el tema puede romper tu tienda. Usa un subdominio o un servidor local.

¿Cómo añado un slider o un banner en la home?

Deberías crear una plantilla específica para la página de inicio. En templates/, crea index.tpl y usa hooks como displayHome. Luego, desde el back office, asigna módulos a ese hook.

¿Qué hago si mi tema no se ve bien en móviles?

Asegúrate de incluir etiquetas meta viewport en head.tpl (ya lo hicimos). Luego, usa CSS responsive (media queries) para adaptar los elementos.

¿Puedo vender mi tema personalizado?

Sí, pero asegúrate de cumplir con la licencia de PrestaShop (OSL) y de no incluir código de otros temas sin permiso. Además, el mercado de temas es competitivo, así que ofrece algo único.

¿Necesito saber PHP para personalizar funcionalidades?

No para el diseño básico. Pero si quieres modificar cómo funciona el carrito o los filtros, sí necesitarás PHP. Para empezar, con HTML, CSS y Smarty PrestaShop es suficiente.

Conclusión: Tu tienda, tu estilo

Crear un tema personalizado en PrestaShop desde cero es una experiencia gratificante que te da control total sobre la apariencia de tu tienda. Hemos visto desde la estructura de carpetas hasta cómo usar Smarty PrestaShop para darle dinamismo. Recuerda que este es solo el comienzo: puedes añadir animaciones, tipografías personalizadas, y hasta integrar redes sociales.

No tengas miedo de experimentar. Cada error es una oportunidad para aprender. Si te atascas, la comunidad de PrestaShop es enorme y siempre hay alguien dispuesto a ayudar. Y si usas Syspanel, recuerda que tienes herramientas de gestión de archivos y bases de datos a tu alcance para facilitar el proceso.

Ahora, ve y crea ese tema que hará que tus clientes digan: "¡Qué tienda tan bonita!". ¡Manos a la obra!