Elegir un tema de PrestaShop parece engañosamente sencillo — explorar un marketplace, elegir algo que tenga buen aspecto, instalarlo. Dos semanas después estás lidiando con layouts de módulos rotos, un score de PageSpeed en los 30 y un ticket de soporte que nadie responde. Así es como evitarlo.
Conoce el punto de partida
PrestaShop 8 y 9 incluyen dos temas de serie: Hummingbird y Classic.
Classic es el antiguo tema por defecto — Bootstrap 3, muy dependiente de jQuery, existe desde PS 1.7. Funciona, es estable, y prácticamente todos los módulos del mundo han sido probados con él. La mayoría de los temas de pago en los marketplaces son forks de Classic. Vale la pena tenerlo en cuenta.
Hummingbird es el moderno — Bootstrap 5, markup más limpio, rendimiento notablemente mejor desde el primer momento. Es el que PrestaShop está desarrollando activamente. Si hoy estás montando una tienda nueva, Hummingbird es la base correcta.
El problema es que la mayoría de los temas comerciales que encontrarás en ThemeForest, PrestaShop Addons u otros marketplaces siguen estando construidos sobre Classic. Se ven pulidos en las capturas de pantalla, pero arrastran años de deuda técnica por debajo.
Verifica la compatibilidad antes de comprar nada
Este es el primer paso, no el tercero. Antes de gastar un euro en un tema, verifica:
- Qué versión de PrestaShop soporta — concretamente la tuya
- Cuándo fue la última actualización — más de 6 meses es una señal de alerta, más de un año es una señal roja
- Si el desarrollador responde a las solicitudes de soporte (revisa los comentarios, no solo la puntuación con estrellas)
- Si ha sido probado con PHP 8.1+ (obligatorio para PS 8/9)
Un tema que dice «compatible con PrestaShop 1.7» puede instalarse técnicamente en PS 8, pero es probable que encuentres advertencias de funciones obsoletas, hooks rotos o problemas de layout con los módulos core más recientes. «Compatible» es un término ambiguo — profundiza en el changelog.
El rendimiento importa más que el aspecto
Tu tema es el factor más determinante en el score PageSpeed de tu tienda — más que el hosting, más que las imágenes, más que casi cualquier otra cosa. Un tema sobrecargado no solo se siente lento. Te cuesta directamente posiciones en buscadores y conversiones.
Lo que destruye el rendimiento en los temas:
- Cargar 400 KB+ de CSS con conflictos de especificidad y reglas duplicadas
- Incluir 15 archivos JavaScript que se ejecutan en cada página
- Incluir una fuente de iconos completa (FontAwesome 6 ≈ 400 KB) cuando usas 12 iconos
- Hacer lazy-loading de imágenes con una librería JS en lugar del nativo
loading="lazy" - Sliders hero masivos que cargan 5 imágenes en resolución completa en la portada
Antes de comprar un tema, pasa la URL de demo por PageSpeed Insights. No la página de inicio — la página de categoría. Si el score móvil está por debajo de 60, aléjate. Si está por debajo de 40, sal corriendo.
Si necesitas ganancias de velocidad serias independientemente del tema, Performance Revolution gestiona caché, optimización de recursos y Core Web Vitals a nivel de módulo — pero un tema sobrecargado limitará hasta dónde puedes llegar.
Temas hijo — innegociable
Si hay una regla que distingue a los desarrolladores que saben lo que hacen de los que no, es esta: nunca edites el tema padre directamente.
Cuando el autor del tema publique una actualización — y lo hará, tarde o temprano — tus cambios desaparecerán. Tus overrides de CSS, tus ajustes de plantillas, tus modificaciones de layout personalizadas: borradas. Y si no actualizas, acumulas deuda de seguridad y compatibilidad.
Crea siempre un tema hijo. Un tema hijo hereda todo del tema padre y solo sobrescribe lo que cambias explícitamente. Las actualizaciones del padre fluyen sin tocar tus personalizaciones.
Antes de comprometerte con un tema, verifica que soporte correctamente los temas hijo. Hummingbird lo hace bien. Algunos temas comerciales técnicamente lo permiten pero lo hacen innecesariamente complicado — su estructura de plantillas no sigue las convenciones de PrestaShop, por lo que los overrides en cascada del tema hijo no funcionan limpiamente.
Para personalizaciones de contenido que no requieren tocar plantillas en absoluto — bloques HTML personalizados, secciones promocionales, zonas informativas — HTML Blocks te permite inyectar contenido personalizado en hooks sin editar un solo archivo del tema.
La compatibilidad de módulos está infravalorada
Temas y módulos interactúan constantemente. Un tema puede sobrescribir plantillas de módulos, cambiar la salida de hooks o inyectar CSS que entra en conflicto con los estilos de los módulos. La mayoría de los compradores no piensan en esto hasta que algo se rompe.
Hazte estas preguntas antes de elegir un tema:
- ¿Sobrescribe plantillas de módulos por defecto? (Revisa la carpeta
/modules/en el tema — si está llena de archivos, ten cuidado) - ¿Viene con sus propias versiones de módulos comunes como sliders, mega menús o carruseles de productos?
- ¿Reemplaza funcionalidades nativas de PrestaShop con características propias del tema que te atrapan en él?
Los temas que incluyen su propio mega menú, su propio sistema de pestañas de producto, su propia navegación por facetas — son trampas. Te vuelves dependiente del autor del tema para funcionalidades que deberían ser manejadas por módulos dedicados y mantenibles. Cuando el tema quede obsoleto, tu navegación también lo hará.
Si necesitas un mega menú en condiciones, usa un módulo Mega Menu independiente que funcione al margen del tema. La misma lógica aplica a los banners — Banner Revolution gestiona banners promocionales desde el back office sin tocar ninguna plantilla del tema.
Prueba en dispositivos reales, no redimensionando el navegador
Todos los temas dicen ser responsive. Todos los temas se ven bien cuando arrastras la ventana del navegador para hacerla más estrecha. Eso no te dice casi nada.
Prueba en un teléfono Android real y en un iPhone real. Concretamente:
- Páginas de listado de productos — ¿los filtros se colapsan correctamente? ¿Es legible la cuadrícula?
- Páginas de detalle de producto — ¿las imágenes se pueden deslizar? ¿Está el botón añadir al carrito visible sin hacer scroll?
- Checkout — ¿el formulario funciona con teclados móviles? ¿Son los campos lo suficientemente grandes para pulsar?
- Navegación — ¿el menú móvil se abre y cierra sin desplazamientos de layout?
Zonas táctiles, tamaños de fuente, precisión al tocar — esto solo se revela en hardware real. Un checkout incómodo en móvil te cuesta ventas. Así de directo.
Editores de tema: prácticos, pero ojo con el peso
Muchos temas comerciales incluyen un editor visual de tema — iqitthemeeditor (Flavor) es el más habitual. Estas herramientas permiten a los comerciantes cambiar colores, fuentes y ajustes de layout desde el back office sin tocar código.
Son genuinamente útiles. También son un riesgo de rendimiento.
Los editores de tema funcionan compilando tus ajustes en CSS en tiempo de ejecución. Los archivos CSS generados tienden a ser grandes, redundantes y difíciles de optimizar porque son generados automáticamente. Cada vez que un comerciante cambia un color, se compila un nuevo archivo. El peso se acumula.
Si usas un editor de tema, audita el CSS generado periódicamente. Busca declaraciones de propiedades duplicadas, conjuntos de reglas sin usar para características que no has habilitado, y variables que se definen pero nunca se usan en tu configuración real. Se acumula más rápido de lo que esperarías.
Fuentes personalizadas: elige tus batallas
Las fuentes personalizadas mejoran la identidad de marca. También añaden peso a cada carga de página.
Una sola familia de Google Fonts cargada con 4 pesos (regular, medium, semibold, bold) puede añadir 80–200 KB de recursos bloqueantes, dependiendo de la cobertura del conjunto de caracteres. Eso retrasa directamente tu Largest Contentful Paint.
Las reglas prácticas:
- Máximo 2 familias de fuentes — una para títulos, una para el cuerpo del texto
- Máximo 2–3 pesos por familia — regular y bold cubre el 90 % de los casos
- Usa
font-display: swappara que el texto se renderice inmediatamente con una fuente alternativa - Precarga las fuentes usadas above the fold
- Considera las fuentes variables — un solo archivo, toda la gama de pesos
La pila de fuentes del sistema es excelente y carga instantáneamente. Si tu marca no exige un tipo de letra específico, considéralo seriamente.
Cómo luce una buena estructura de tema
Más allá del aspecto visual, la calidad HTML subyacente determina cómo rinde tu tienda en búsqueda y qué tan accesible es para todos los usuarios. Busca:
- Jerarquía semántica de encabezados — un solo H1 por página, anidamiento lógico de H2/H3, sin encabezados usados solo para estilos
- Datos estructurados correctos — schema de producto, schema de breadcrumb, schema de reseñas integrado o añadible via hook
- Markup de imágenes limpio — atributos
widthyheightdefinidos para evitar desplazamientos de layout, atributosaltcorrectos - Recursos que bloquean el renderizado al mínimo — CSS crítico inline o inlineable, scripts diferidos
Puedes comprobar la estructura de encabezados en 30 segundos con las DevTools del navegador. Comprueba los datos estructurados con el test de Resultados Enriquecidos de Google en la URL de demo. No son detalles opcionales — son señales sobre las que Google actúa.
Señales de alerta para alejarse
- El tema requiere instalar 10+ módulos complementarios para funcionar correctamente
- La última actualización fue hace más de un año
- Sin soporte para temas hijo ni documentación para crear uno
- El sitio de demo carga lento (pruébalo tú, no te fíes de las capturas)
- El foro de soporte está lleno de preguntas sin respuesta
- El tema «incluye» un page builder que almacena contenido en un formato propietario
La recomendación práctica
Empieza con Hummingbird. Lo mantiene activamente el equipo de PrestaShop, es rápido, es Bootstrap 5 y es hacia donde va el ecosistema. Crea un tema hijo inmediatamente — antes de escribir una sola línea de CSS personalizado. Usa el tema hijo para todas tus personalizaciones.
Añade funcionalidades a través de módulos, no de características del tema. ¿Necesitas banners personalizados? Un módulo. ¿Un mega menú? Un módulo. ¿Zonas de contenido personalizadas? Un módulo. Esto mantiene tu tema ligero y tu tienda mantenible cuando temas y módulos se actualizan en ciclos distintos.
Un tema hijo de Hummingbird bien configurado con los módulos adecuados superará a casi cualquier tema comercial pesado tanto en scores de PageSpeed como en mantenibilidad a largo plazo. Es menos emocionante que explorar un marketplace, pero es la decisión de la que te alegrarás seis meses después.
Artículos Relacionados
- Temas Hijo en PrestaShop: Por Qué Nunca Deberías Editar el Tema Padre
- CSS y JavaScript personalizados en PrestaShop sin romper las actualizaciones
- Qué hace realmente lento a PrestaShop: base de datos, módulos y hosting
Comentarios
Aún no hay comentarios. ¡Sé el primero!
Sé el primero en hacer una pregunta o compartir una opinión útil.
Dejar un comentario
Comparte una pregunta, un detalle de instalación o una opinión que pueda ayudar a otro lector.