Cambiar el banner de la página de inicio en PrestaShop: el slider, un banner de temporada y volver al anterior
Cambiar un banner en PrestaShop depende de dónde sale. En el tema Classic, el slider de la página de inicio es el módulo Image slider (Carrusel de imágenes), donde cambias la imagen, el título y el enlace de cada diapositiva. Un banner suelto es otro módulo. En temas comprados puede estar en una plantilla o en el maquetador del autor 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 dónde sale el banner de la página de inicio?
De un módulo o de la plantilla del tema, y eso decide dónde lo cambias. Antes de buscar, mira en Diseño > Posiciones. En el hook de la página de inicio (displayHome) verás los módulos que la construyen.
| Origen del banner | Cómo reconocerlo | Dónde cambiarlo |
|---|---|---|
| Módulo Image slider | varias diapositivas que van rotando | Módulos > Gestor de módulos > Image slider > Configurar |
| Módulo Banner | una imagen entre secciones de la página | Módulos > Gestor de módulos > Banner > Configurar |
| Plantilla del tema | un banner sin ajustes en el panel | el archivo de plantilla de la página de inicio en el tema |
| Maquetador del tema | un editor de arrastrar y soltar | el módulo del autor del tema |
Los dueños de tiendas llevan años preguntando por el cambio de banner en el foro de PrestaShop (en polaco). La respuesta casi siempre empieza con una pregunta sobre el tema. El código del slider del tema Classic está en el repositorio del módulo ps_imageslider.
Cómo cambiar una diapositiva del slider paso a paso
En el módulo del slider lo haces sin tocar ningún archivo.
- Ve a Módulos > Gestor de módulos y busca «slider».
- Haz clic en Configurar junto al módulo Image slider.
- Añade una diapositiva nueva o edita una existente.
- Sube una imagen con las mismas medidas que las diapositivas actuales.
- Escribe el título, la URL de destino y el pie de foto. El pie de foto también pasa al texto alt de la imagen.
- Repite para cada idioma de la tienda.
- Marca la diapositiva como activada y arrástrala al principio de la lista.
- Desactiva la diapositiva antigua en lugar de borrarla.
Por último, abre la página de inicio en una ventana privada. Si no ha cambiado nada, lee por qué no se ven los cambios en PrestaShop.
Cómo planificar un banner de temporada
Prepáralo junto con la campaña, no el día del lanzamiento. Miércoles, 20:15, las rebajas de otoño empiezan mañana. La imagen está lista, pero el slider tiene tres idiomas y cada diapositiva necesita su propia imagen y su enlace. Por el camino resulta que el título de la diapositiva es un encabezado de la página y que las imágenes no tienen texto alt.
Ayudan unas cuantas reglas:
- El banner lleva a una categoría concreta o a una página de promoción, no a la página de inicio.
- Cada idioma tiene su propia imagen y su propio texto alt.
- El texto alt dice qué hay en el banner, no «banner1». Google explica las reglas del texto alt en su guía sobre imágenes.
- El banner antiguo se desactiva, no se borra.
- Apuntas en el calendario de la campaña la fecha para quitar el banner.
¿Un slider o un solo banner para una campaña?
Para una campaña suele bastar una diapositiva con un solo mensaje. Un slider va rotando varias imágenes, y no todos los clientes esperan a la tercera. Si las rebajas son lo más importante de esta semana, ponlas en la primera diapositiva o haz que sea la única.
| Situación | Mejor opción | Por qué |
|---|---|---|
| Una campaña, plazo corto | una diapositiva o un banner | un mensaje, un enlace |
| Varias categorías igual de importantes | un slider con 2 o 3 diapositivas | cada categoría tiene su sitio |
| Información sobre envíos o un plazo | una barra de texto encima del banner | se lee también en el móvil |
Revisa también el banner en el móvil. El texto metido dentro de la imagen muchas veces no se lee en una pantalla pequeña. Funciona mejor un pie corto y un botón grande en la imagen que una frase larga. Si el tema lo permite, prepara una versión de la imagen aparte para móviles.
¿Y si el slider hay que cambiarlo en la plantilla?
Cambia la copia de la plantilla en el tema, no el archivo del módulo. PrestaShop te deja copiar la plantilla de un módulo al tema y a partir de ahí usa la copia. Una actualización del módulo no la sobrescribe. Se explica en la documentación sobre la sobrescritura de módulos.
Así se corrigen, por ejemplo, los títulos de diapositiva que el tema muestra como encabezados de la página. La página de inicio debería tener un encabezado principal, y los títulos de las diapositivas pueden ser texto normal.
Cómo cambiar el banner con el chat
Describes la campaña, y tu chat (Claude o ChatGPT) averigua de dónde sale el banner y propone un cambio con vista previa.
Tú: Para las rebajas de otoño quiero un banner que enlace a la categoría Faroles. La imagen otono.jpg ya está subida. Añade texto alt en español y en francés.
Tu chat: El banner de la página de inicio sale de la plantilla del tema, no de un módulo. Propongo un cambio en el archivo, con copia de seguridad:
Después de guardar, vaciaré la caché y revisaré la página de inicio. Tras la campaña puedes restaurar el banner antiguo desde la copia.
Estado de la tarjeta: esperando tu «sí»versión anterior: <img src="verano.jpg" alt="banner1">
versión nueva: <img src="otono.jpg" alt="Rebajas de otoño en faroles">
versión anterior: enlace: /ofertas-verano
versión nueva: enlace: /faroles
Un banner de temporada nuevo es una petición y una vista previa. Cada archivo recibe una copia de seguridad antes de guardar. Después de la campaña restauras la versión anterior desde la copia, también con vista previa.
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. Las imágenes las subes tú, y el contenido de las diapositivas lo cambias en la configuración del módulo del slider. En la versión gratuita TellMyShop Free el chat revisa los encabezados de la página de inicio y te indica qué módulos la construyen.
Las dos tareas más habituales están descritas en los casos de uso un banner de temporada en la página de inicio y encabezados y texto alt de las imágenes del slider. Si junto con el banner cambias el orden de las secciones, lee sobre el diseño de la página de inicio.
Preguntas y respuestas
¿Qué tamaño debe tener una imagen del slider?
El mismo que las diapositivas actuales de tu tema. Cada tema tiene un ancho distinto de página de inicio, y el slider estira o recorta las imágenes con otras proporciones. Mira las medidas de la imagen de la diapositiva actual y prepara la nueva con el mismo tamaño. Guárdala en JPG o WebP para que la página cargue rápido.
¿Por qué no aparece el banner nuevo en la página?
Casi siempre por la caché o por una diapositiva desactivada. Comprueba que la diapositiva está activada y tiene imagen en el idioma que estás viendo. Después vacía la caché en Parámetros avanzados > Rendimiento y recarga la página en una ventana privada. En una tienda con varios idiomas, cada idioma tiene su propia imagen.
¿El banner del slider importa para Google?
Sí, aunque poco. El texto alt de la imagen ayuda a Google y a los lectores de pantalla a entender qué hay en ella. A menudo importa más otra cosa. En algunos temas, los títulos de las diapositivas son encabezados de la página, así que la página de inicio tiene varios. Vale la pena comprobarlo y corregirlo en la plantilla del slider.
¿Cómo vuelvo al banner anterior después de una campaña?
Lo más sencillo es no borrar la diapositiva antigua, sino desactivarla durante la campaña. Después de la promoción activas la antigua y desactivas la de temporada. Si el chat cambió el banner en una plantilla, la versión anterior del archivo está en una copia de seguridad y la restauras con una sola instrucción, con una vista previa de las diferencias.
¿El chat sube la imagen del banner?
No. La imagen la subes tú, en la configuración del módulo del slider o en el gestor de archivos. El chat cambia un banner guardado en la plantilla del tema, los enlaces, el texto alt de las imágenes y el aspecto del slider mediante una copia de la plantilla en el tema. Esto funciona en TellMyShop Pro con el interruptor Tema activado.
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.