Diseño de la página de inicio para PrestaShop: primeras impresiones que convierten

Tu página de inicio rara vez es tu página más importante: en la mayoría de tiendas PrestaShop, las páginas que realmente cierran ventas son las fichas de producto, y una gran parte del tráfico desde Google llega directamente a categorías y productos, saltándose por completo la página de inicio. Pero la página de inicio sí es tu página más visible: ahí aterrizan las búsquedas por marca, ahí apuntan los anuncios, ahí llegan los visitantes por recomendación y ahí empiezan los clientes que vuelven. Su trabajo es concreto y limitado: responder a “qué es esta tienda y adónde voy ahora” lo bastante rápido como para que el visitante siga avanzando en lugar de marcharse. Esta guía trata sobre cómo construir esa página de inicio específicamente en PrestaShop: qué módulos y hooks te da realmente la plataforma, dónde configurarlos en el back office y qué comportamientos por defecto te cuestan conversiones sin hacer ruido.

Última actualización: junio de 2026.

Esta es la pieza específica sobre la página de inicio dentro de nuestro grupo de guías sobre navegación. La estructura que hay detrás de la página de inicio — cómo se anidan las categorías, cómo navegan y buscan los clientes — tiene sus propias guías dedicadas, y las enlazamos en cada punto en lugar de tratarlas aquí a medias.

Cómo se construye realmente una página de inicio en PrestaShop

Esto suele confundir a los comerciantes que vienen de WordPress o de un constructor de páginas: en PrestaShop, la página de inicio no es una página que editas en un único lugar. El controlador frontal es el controlador index (IndexController), y lo que se renderiza dentro del cuerpo de la página es lo que aportan los módulos enganchados a displayHome: el hook principal de contenido de la página de inicio en configuraciones Classic/por defecto. A su alrededor están los hooks de maquetación global que comparten todas las páginas, principalmente displayTop (la cabecera) y los hooks del pie de página. Cada bloque de la página de inicio es la salida de un módulo distinto, apilada según el orden del hook displayHome.

En el tema Classic por defecto, una instalación limpia de PrestaShop engancha estos módulos a displayHome desde el primer momento:

• ps_imageslider — el carrusel de imágenes rotatorio de la parte superior.
• ps_banner — una única imagen de banner estática.
• ps_featuredproducts — la cuadrícula de “Productos populares” que toma productos de tu categoría “Inicio”.
• ps_customtext — un bloque HTML/texto editable (es el “bloque de texto personalizado” que ves al final de una instalación nueva).

Controlas el orden y la presencia de cada uno de estos elementos en Diseño → Posiciones dentro del back office: busca el hook displayHome y arrastra los bloques de módulos en la secuencia que quieras, o desengancha los que no necesites. Esto es lo más útil que debes entender sobre una página de inicio PrestaShop: no hay un “editor de página de inicio”, hay una pila de módulos enganchados, y reordenar esa pila es la forma de rediseñarla sin tocar un archivo del tema.

Primer pantallazo: qué deben decir esos primeros píxeles

El primer pantallazo es todo lo que aparece en pantalla antes de que el visitante haga scroll: aproximadamente los primeros 600–700px en escritorio, menos en un teléfono. En ese espacio, tu página de inicio tiene que comunicar tres cosas, y la poesía de marca vaga no comunica ninguna:

• Qué vendes. “Sistemas de ducha a ras de suelo de lujo” o “Bolsos de cuero hechos a mano en Florencia”, no “productos de calidad para la vida moderna”, que no le dice al visitante si está en la tienda adecuada. Esto debe ir en un H1 real y visible, no enterrado dentro de una imagen. En PrestaShop, el H1 de la página de inicio suele definirse en la plantilla home del tema o en el bloque de contenido superior, y con frecuencia falta o está vacío en instalaciones por defecto: merece la pena comprobarlo.
• Por qué eres diferente. Envío gratuito a partir de cierto importe, garantía, fabricación bajo pedido, envío al día siguiente: tu razón real para comprar aquí en lugar de en Amazon.
• Qué hacer después. Una llamada a la acción clara que supere a “navegar”: “Comprar la colección”, “Ver novedades”, “Encuentra tu talla”.

Una prueba barata: enseña la página de inicio durante tres segundos a alguien que nunca la haya visto, ciérrala y pregunta: “¿qué vende esta tienda?”. Si no puede responder, el contenido del primer pantallazo está fallando; y ningún pulido visual más abajo arregla una primera pantalla confusa.

La cuestión del carrusel: ps_imageslider y por qué el valor por defecto te perjudica

PrestaShop trae ps_imageslider enganchado a la página de inicio por defecto, así que la propia plataforma te empuja hacia un carrusel rotatorio. La investigación de usabilidad lleva años apuntando en la dirección contraria: los estudios de Nielsen Norman Group encontraron que muy pocos usuarios interactúan con las diapositivas de un carrusel y que, entre quienes lo hacen, la enorme mayoría solo interactúa con la primera; además, los banners autorrotativos provocan “ceguera de banner”, por la que los visitantes ignoran cualquier cosa que parezca un anuncio. Toma esos datos como una orientación, no como garantías para tu tienda concreta; pero el mecanismo tiene sentido y los costes son tangibles:

• Los mensajes compitiendo entre sí se diluyen. Cinco diapositivas con cinco ofertas significan que el visitante no procesa ninguna.
• Rendimiento. ps_imageslider carga varias imágenes a ancho completo más el JavaScript del carrusel en tu página más visitada: justo la página donde Core Web Vitals (LCP en particular) más importan, porque la imagen de la primera diapositiva suele ser el elemento de contenido más grande renderizado.
• Conflicto de gestos en móvil. Un carrusel deslizable compite con el desplazamiento vertical natural y provoca deslizamientos accidentales.

La decisión práctica en PrestaShop: reduce ps_imageslider a una sola diapositiva, o desengánchalo en Diseño → Posiciones y sustitúyelo por un banner principal estático y potente: una sola imagen, un titular, un botón. Si de verdad gestionas varias campañas, usa una cuadrícula estática de dos o tres tarjetas de banner debajo del bloque principal para que los visitantes vean todas las opciones de un vistazo en lugar de esperar a una rotación. Construir banners principales responsive y cuadrículas promocionales sin editar archivos del tema es exactamente para lo que sirve nuestro módulo de banners: un editor visual de banners con texto superpuesto, temporizadores de cuenta atrás y diseños específicos para móvil, configurado desde el back office. ¿Qué consigues con eso? Sustituyes el carrusel por defecto por un bloque principal enfocado y rápido, sin desarrollador y sin bifurcar tu tema, de modo que seguirá funcionando tras la siguiente actualización de PrestaShop.

Guiar a los visitantes: destacados de categoría

Una vez que el bloque principal ha explicado qué eres, el siguiente bloque responde “¿adónde voy ahora?”; y en una página de inicio eso significa puntos de entrada a categorías, no tu menú completo. Muestra las 4–8 categorías de primer nivel que concentran la mayor parte de tus ventas, cada una como una tarjeta de imagen pulsable con una etiqueta humana clara (“Duchas a ras de suelo”, no “Categoría 1”; “Botas de mujer”, no “Calzado O/I”). Una cuadrícula visual suele recibir más clics que una lista de texto.

Cómo se estructuran esas categorías por debajo — cuánta profundidad tienen, cómo se nombran tanto para los clientes como para Google — es una disciplina aparte, y si está mal en la página de inicio normalmente está mal en todas partes. Cubrimos la estructura en sí en estructura de categorías PrestaShop para una navegación optimizada para SEO, y el punto relacionado de que el encabezado visible de una categoría no debería repetir a ciegas su nombre en por qué el H1 de tu categoría no debería ser el nombre de la categoría.

La cuadrícula de la página de inicio tampoco es tu navegación principal. El menú persistente — el mega menú que la mayoría de tiendas quieren para un catálogo profundo — es una decisión separada con sus propios compromisos; la tratamos a fondo en cómo crear un mega menú PrestaShop que convierte y, desde el ángulo de la experiencia de navegación, en cómo hacer que tus categorías sean fáciles de explorar.

Productos destacados: selecciona, no vuelques

Por defecto, ps_featuredproducts muestra productos de tu categoría “Inicio”, y la cantidad es configurable: ve a Módulos → Gestor de módulos, busca “Productos destacados en la página de inicio” y define el número que quieres mostrar (8–12 es el punto óptimo para una o dos filas limpias). Más que eso y la página de inicio se convierte en una página de categoría, lo que anula el propósito de una entrada curada.

Qué destacar: los más vendidos (productos que ya convierten y tranquilizan a los visitantes nuevos), novedades con una etiqueta “Nuevo” para dar a los clientes recurrentes un motivo para volver, y una variedad de precios para que la página comunique tu rango. Evita destacar productos agotados, descatalogados o en liquidación: la página de inicio debe mostrar la tienda en su mejor versión. Ten en cuenta un detalle mecánico: ps_featuredproducts extrae los productos por asignación de categoría (“Inicio”), así que “destacar” un producto significa asignarlo a esa categoría, no marcarlo individualmente.

Una fila en la página de inicio es un atajo curado, no una herramienta de descubrimiento. Cuando un visitante sabe más o menos lo que quiere, pero no exactamente, el trabajo ocurre en los filtros de categoría y en la búsqueda, ambos más profundos de lo que puede cubrir una página de inicio. En catálogos grandes, el filtrado por capas marca la diferencia entre encontrar un producto y rendirse: consulta ayudar a los clientes a encontrar productos en catálogos grandes y, para la página donde viven esos filtros, páginas de categoría que convierten. Cuando los visitantes escriben en lugar de navegar, la búsqueda por defecto de PrestaShop suele ser el punto débil; explicamos cómo solucionarlo en búsqueda inteligente para PrestaShop.

Prueba social: confianza sin decir “confía en nosotros”

La prueba social es cualquier evidencia de que otras personas te han comprado y han quedado satisfechas. Las formas que se ganan su sitio en el primer pantallazo o cerca de él:

• Valoraciones agregadas — una puntuación con estrellas y el número de reseñas establecen credibilidad al instante. Si usas Trustpilot, Google Reviews o un módulo de reseñas de productos para PrestaShop, muestra el widget en lugar de esconderlo en el pie de página.
• Cifras concretas — “más de 50.000 pedidos enviados” funciona mejor que “muchos clientes confían en nosotros”. Usa solo números que puedas respaldar de verdad.
• Logotipos de “visto en” — menciones en prensa o marketplaces, especialmente valiosas para tiendas nuevas.
• Sellos de confianza — logotipos de métodos de pago aceptados, indicadores SSL/pago seguro, iconos de garantía, en una franja horizontal ordenada.

En PrestaShop, estos elementos suelen vivir en un bloque ps_customtext o en un bloque HTML personalizado enganchado a displayHome, de modo que puedes colocar la franja exactamente donde quieras respecto al bloque principal y la cuadrícula de productos.

Bloques de contenido: historia, diferenciadores y SEO de la página de inicio

Debajo de las secciones de producto, unos cuantos bloques de contenido cumplen una doble función: cuentan a los visitantes quién eres (conversión) y aportan texto real indexable a la página de inicio (SEO). Mantenlos breves y fáciles de escanear: una historia de marca de dos o tres frases (no toda tu página “Quiénes somos”), una fila de icono más texto con diferenciadores (“Envío gratuito a partir de €50”, “Garantía de 5 años”, “Envío antes de las 14:00”) y, opcionalmente, una vista previa de tus dos o tres últimos artículos para transmitir frescura.

Ese último punto conecta con una carencia habitual de PrestaShop: la plataforma no incluye un blog integrado, así que un bloque de “últimos artículos” en la página de inicio necesita un módulo de contenido detrás. Si todavía no publicas contenido en tu propia tienda, lo cubrimos en un blog integrado para PrestaShop sin WordPress.

En la parte de SEO, la etiqueta title y la metadescripción de la página de inicio se configuran en el back office bajo Parámetros de la tienda → Tráfico & SEO → SEO & URL (edita la entrada de página tipo “Index” / “pagenotfound” llamada index), no en un archivo del tema. Apunta a un título que combine tu marca con tu categoría principal (“NombreMarca — Sistemas de ducha a ras de suelo”), una metadescripción que abra con la propuesta de valor, un H1 visible con palabra clave y unas 200–400 palabras de texto natural en la página de inicio (tu historia de marca y tus bloques de diferenciadores suelen aportarlas). Para organizar todo esto — contenido HTML flexible colocado por hook, con visibilidad separada para escritorio y móvil — nuestro módulo de bloques HTML te permite crear y colocar bloques personalizados en páginas PrestaShop desde el back office, por dispositivo. El beneficio: compones las secciones de contenido de la página de inicio sin editar archivos .tpl, y puedes mostrar un conjunto de bloques más ligero en teléfonos.

La página de inicio móvil es una página distinta

Más de la mitad de las sesiones en tiendas online ya ocurren en un teléfono, y una pantalla de 375px no es un monitor de 1920px estrechado: es un diseño distinto. El modelo de hooks y módulos de PrestaShop ayuda aquí, porque nuestros módulos de bloques HTML y banners admiten visibilidad por dispositivo, de modo que puedes ocultar o sustituir bloques en móvil en lugar de comprimir la pila de escritorio dentro de un teléfono; aunque, para los módulos nativos de la página de inicio, las variantes móviles suelen requerir soporte del tema o del módulo:

• Banner principal: el texto superpuesto debe ser lo bastante grande para leerse en pequeño; si tu banner principal de escritorio usa texto fino sobre una imagen cargada, publica una versión móvil separada y más simple.
• Cuadrícula de categorías: dos columnas como máximo, con áreas táctiles grandes.
• Productos destacados: una fila desplazable horizontalmente, con el siguiente elemento asomando desde el borde, suele funcionar mejor que una cuadrícula apretada.
• Prueba social: consolida reseñas, cifras y sellos en una única franja compacta en lugar de varias secciones apiladas.

El móvil es un tema lo bastante amplio como para merecer un tratamiento propio más allá de la página de inicio: el panorama completo está en comercio móvil: tu tienda en un teléfono.

Qué no poner en tu página de inicio PrestaShop

• Tu catálogo completo. La página de inicio es una puerta de entrada, no un almacén: selecciona.
• Vídeo con reproducción automática. Ralentiza la página, consume datos móviles y la mayoría de visitantes nunca lo ve.
• Un pop-up nada más entrar. Un modal de suscripción al boletín que aparece antes de que el visitante haya visto un solo producto transmite desesperación y dispara la tasa de rebote. Los pop-ups pueden funcionar, pero por momento e intención, no al cargar la página. La estrategia (y cómo configurarla bien en PrestaShop) está en pop-ups para PrestaShop que convierten, y el caso específico de bienvenida en pop-ups de bienvenida bien hechos.
• Muros de texto. Nadie lee párrafos en una página de inicio: breve, escaneable y guiado por encabezados.
• Feeds sociales incrustados. Cargan JavaScript de terceros que arrastra la velocidad de la página y distrae de tus productos. Enlaza a tus perfiles desde el pie de página.

Medir si tu página de inicio funciona

La página de inicio tiene un trabajo principal: dirigir a los visitantes hacia delante, así que mide eso antes que nada. No juzgues con tres días de datos; observa la tendencia durante una ventana significativa. Los números que merece la pena seguir:

Preguntas frecuentes

¿Dónde se edita realmente la página de inicio de PrestaShop?

No hay un único “editor de página de inicio”. El controlador frontal es el controlador index, y el cuerpo de la página es lo que aportan los módulos enganchados a displayHome. Reordenas, añades o eliminas esos bloques en Diseño → Posiciones, buscando el hook displayHome y arrastrando los bloques de módulos al orden que quieras. El texto y el SEO viven en otro sitio: la etiqueta title y la metadescripción de la página de inicio están en Parámetros de la tienda → Tráfico & SEO → SEO & URL (la entrada de página index).

¿Debería conservar el carrusel ps_imageslider por defecto?

Normalmente, conviene reducirlo o sustituirlo. La investigación de usabilidad (Nielsen Norman Group, entre otros) encuentra de forma consistente que muy pocos usuarios interactúan con las diapositivas de carrusel; la mayoría de quienes sí interactúan lo hacen solo con la primera, y los banners autorrotativos activan la ceguera de banner. El carrusel también carga varias imágenes a ancho completo más JavaScript en tu página más visitada, perjudicando el LCP. Redúcelo a una sola diapositiva o desengánchalo en Diseño → Posiciones y sustitúyelo por un banner principal estático y enfocado.

¿Cómo cambio cuántos productos destacados se muestran en la página de inicio?

Ve a Módulos → Gestor de módulos, busca “Productos destacados en la página de inicio” (ps_featuredproducts) y define el número que quieres mostrar: 8–12 es el punto óptimo para una o dos filas limpias. Ten en cuenta el mecanismo: el bloque extrae productos por asignación a la categoría “Inicio”, así que “destacar” un producto significa asignarlo a esa categoría, no marcarlo individualmente.

¿Por qué falta o está vacío el H1 de mi página de inicio?

En instalaciones por defecto, el H1 de la página de inicio lo define la plantilla home del tema o el bloque de contenido superior, y con frecuencia está vacío o ausente. Es una carencia real de SEO: tu página más visible debería llevar un H1 claro, con palabra clave, que diga qué vendes. Compruébalo después de cualquier cambio de tema y configúralo desde tu bloque de contenido o desde la plantilla home del tema en lugar de dejarlo en blanco.

¿Puedo mostrar un diseño distinto de la página de inicio en móvil?

Para los módulos nativos de la página de inicio, las variantes móviles suelen necesitar soporte del tema o del módulo: PrestaShop no cambia bloques por dispositivo por sí solo. Nuestros módulos HTML blocks y banner añaden visibilidad por dispositivo, de modo que puedes ocultar o sustituir bloques en teléfonos (un banner principal más simple, una cuadrícula de categorías a dos columnas, una única franja de confianza consolidada) en lugar de comprimir la pila de escritorio dentro de una pantalla de 375px.

La idea central para una página de inicio PrestaShop: es un dispositivo de encaminamiento, ensamblado con módulos enganchados a displayHome y ordenados en Diseño → Posiciones, no una página que escribes una vez y olvidas. Di qué vendes en la primera pantalla, cambia el carrusel por defecto por un banner principal enfocado, envía a los visitantes a categorías bien estructuradas y a una búsqueda que funcione de verdad, demuestra que eres fiable y elimina todo lo que estorbe; después, mira tus clics, no tu intuición, para saber si está funcionando.