Diseño de la página de inicio en PrestaShop: cómo reordenar los bloques sin tocar código
El diseño de la página de inicio de PrestaShop se cambia en Diseño > Posiciones. La página de inicio es el hook «displayHome» y sus bloques son módulos en orden fijo. Arrastras un módulo arriba o abajo, desenganchas los que no necesitas y vacías la caché. Si un bloque no está en la lista, sale de la plantilla o del maquetador del tema.
Autor: El equipo de TellMyShop. Una guía para dueños de tiendas PrestaShop: la causa, el arreglo manual y el mismo trabajo en una conversación con el chat.
Última actualización: · 5 min de lectura
¿De qué está hecha la página de inicio de PrestaShop?
De módulos que se muestran en un mismo sitio de la página, en el orden de la lista de posiciones. El slider, los productos destacados, un banner, el texto sobre la tienda, las novedades y los más vendidos son módulos distintos. Cada uno puede aparecer también en otros sitios.
El mecanismo de sitios y orden se describe en la documentación de hooks de PrestaShop. En polaco, icomSEO repasa las formas de cambiar el diseño, y la ayuda de dhosting tiene una guía más corta.
¿Cómo queda un cambio de orden antes y después?
Una petición típica de un dueño de tienda es subir los más vendidos y bajar la newsletter y los logotipos de marcas. En la lista de posiciones queda así:
| Posición | Antes | Después |
|---|---|---|
| 1 | Slider | Slider |
| 2 | Texto sobre la tienda | Más vendidos |
| 3 | Productos destacados | Productos destacados |
| 4 | Banner | Banner |
| 5 | Newsletter | Texto sobre la tienda |
| 6 | Logotipos de marcas | Newsletter |
| 7 | Más vendidos | Logotipos de marcas |
Ha cambiado el orden de tres bloques. No se ha editado ningún archivo del tema, y cada módulo funciona igual que antes.
¿Cómo se mueve un módulo en el panel paso a paso?
Lo haces en una sola pantalla del panel.
- Ve a Diseño > Posiciones.
- Escribe «displayHome» en el buscador de hooks o baja hasta la página de inicio.
- Coge el módulo por su asa y arrástralo al sitio nuevo.
- Si el bloque debe desaparecer de la página de inicio, haz clic en la flecha junto al módulo y elige desengancharlo.
- Vacía la caché en Parámetros avanzados > Rendimiento.
- Revisa la página de inicio en una ventana privada del navegador y en el móvil.
Si el cambio no aparece en la página, lee por qué no se ven los cambios en PrestaShop.
¿Por qué algunos bloques no se pueden mover?
Porque no salen de módulos del hook de la página de inicio. Hay tres motivos habituales.
- Una sección en la plantilla. El autor del tema la escribió directamente en el archivo de la página de inicio. Cambiarla significa editar la plantilla, mejor en un child theme (tema hijo).
- Un maquetador del tema. Los temas comprados suelen tener su propio editor de la página de inicio. El orden lo cambias ahí, y la lista de posiciones muestra un solo módulo del maquetador.
- Un módulo en otro sitio. El bloque parece parte de la página de inicio, pero está enganchado, por ejemplo, al sitio de encima del pie de página.
Al cambiar de tema, recuerda que un tema fija su propia lista de módulos y sus sitios al activarse. La guarda en un archivo de configuración descrito en la documentación de theme.yml. Después de activar el tema, tu diseño puede volver a los ajustes del autor.
¿Cómo planificar el diseño de la página de inicio?
Ordena los bloques según lo que buscan los clientes, no según el orden en que se instalaron los módulos. Sábado, 19:40, estás delante de la lista de posiciones arrastrando bloques para probar. Después de cada movimiento vacías la caché y recargas la página. Es mejor empezar con una hoja de papel.
- Arriba, lo que vende: la campaña, los más vendidos, las categorías principales.
- En medio, lo que da confianza: el texto sobre la tienda, las opiniones, la información de envío.
- Abajo, lo complementario: newsletter, logotipos de marcas, artículos del blog.
Si tienes datos de ventas, mira qué categorías y productos se venden más. Deberían estar más arriba que un bloque que alguien añadió al instalar la tienda y que nadie ha tocado desde entonces. Al cabo de un mes, compara las ventas de los productos de la página de inicio con el mes anterior.
¿Qué revisar después de cambiar el diseño?
Después de cada cambio, mira la página de inicio como la verá un cliente. Reordenar rara vez rompe algo, pero un bloque puede verse distinto junto a vecinos nuevos.
| Qué revisar | En qué fijarse |
|---|---|
| Ordenador | espacios iguales entre bloques, nada superpuesto |
| Móvil | los bloques importantes no han caído al final de una página larga |
| Encabezados | la página tiene un encabezado principal y los bloques tienen sus propios títulos |
| Velocidad | un slider o un vídeo pesados no han ido a parar al sitio que carga primero |
| Enlaces | los botones de los bloques movidos llevan adonde deben |
Apunta también el orden actual antes de empezar. Basta con una captura de la lista de posiciones. Con ella puedes volver al diseño antiguo si el nuevo no funciona o si una actualización del tema lo cambia.
¿Cómo se cambia el diseño de la página de inicio con el chat?
Pides ver el orden actual y después describes el nuevo. Tu chat (Claude o ChatGPT) te enseña el orden antiguo y el nuevo antes de guardar nada.
Tú: Enséñame el orden de los bloques de la página de inicio y sube los más vendidos justo debajo del slider.
Tu chat: La página de inicio tiene 7 módulos. Cambio propuesto:
Los demás módulos bajarán un puesto. Después de guardar vaciaré la caché y revisaré la página de inicio.
Tú: Aprobado.
Tu chat: Guardado. Puedes restaurar el orden antiguo desde el historial de cambios.
Estado de la tarjeta: esperando tu «sí»versión anterior: 1. Slider, 2. Texto sobre la tienda, 3. Productos destacados, 7. Más vendidos
versión nueva: 1. Slider, 2. Más vendidos, 3. Productos destacados, 5. Texto sobre la tienda
En la versión gratuita TellMyShop Free el chat te enseña el orden actual de los módulos de la página de inicio. Mover módulos necesita TellMyShop Pro y el interruptor Tema, que activas en el panel del módulo durante 24 horas.
Una petición de ejemplo: reordenar los bloques de la página de inicio. Si a la vez cambias el banner, lee sobre cambiar el banner de la página de inicio.
Preguntas y respuestas
¿Qué es una posición de módulo en PrestaShop?
Es el sitio de la página donde se muestra un módulo, como la página de inicio, el pie de página o la columna lateral. La documentación los llama hooks. Cada sitio tiene una lista de módulos en un orden fijo. Cambiando el orden de esa lista, cambias el orden de los bloques en la página, sin editar archivos del tema.
¿Qué diferencia hay entre desenganchar un módulo y desactivarlo?
Un módulo desenganchado solo desaparece de un sitio de la página y sigue funcionando en los demás. Un módulo desactivado deja de funcionar en todas partes. Si quieres quitar el bloque de novedades de la página de inicio pero mantenerlo en la columna, desengánchalo de la página de inicio. Deja la desactivación para cuando no necesitas el módulo en absoluto.
¿Por qué cambió el diseño de la página de inicio después de cambiar de tema?
Porque un tema fija su propia lista de módulos y sus sitios al activarse. El autor del tema la guarda en un archivo de configuración. Después de cambiar o volver a activar el tema, revisa Diseño > Posiciones y vuelve a mover los bloques. Por eso conviene apuntar el orden actual antes de empezar a cambiar de tema.
¿Puedo mover un bloque que no está en la lista de posiciones?
Ahí no. Algunos temas construyen la página de inicio en su propio maquetador o meten secciones directamente en la plantilla. Entonces cambias el orden en el maquetador del tema o en el archivo de plantilla. El chat te enseñará los módulos enganchados a la página de inicio. Un bloque que no esté ahí, búscalo en la plantilla o en el maquetador del tema.
¿Se puede deshacer un cambio de orden hecho a través del chat?
Sí. Un cambio de posición de módulo queda en el historial de cambios, y lo deshaces con una instrucción, con una vista previa del orden antiguo y el nuevo. Deshacer también muestra una vista previa antes de guardar. Los cambios de aspecto funcionan en TellMyShop Pro cuando activas el interruptor Tema. El interruptor dura 24 horas y necesita una copia de seguridad de la base de datos hecha el mismo día.
PrestaShop es una marca registrada de PrestaShop SA. Claude es una marca de Anthropic PBC. ChatGPT y OpenAI son marcas de OpenAI. TellMyShop no está afiliado a estas empresas.