Barra de anuncios en PrestaShop: un aviso arriba de todas las páginas de la tienda

¿Para qué sirve una barra de mensajes arriba de la página?

Para una sola información que cambia la decisión de un cliente antes de que empiece a buscar un producto. El cliente ve la barra en la página de inicio, en una categoría, en la página de producto y en el carrito, así que no tiene que llegar a una página concreta para enterarse de algo.

Mensajes típicos de la barra:

• el umbral de envío gratis («Envío gratis en pedidos de más de 49 €»),
• la hora límite de envío («Los pedidos hechos antes de las 14:00 salen el mismo día»),
• una pausa en los envíos («Los pedidos del puente salen el martes»),
• el último día para pedir antes de las fiestas.

Los importes y las horas de estos ejemplos son ilustrativos. Pon en la barra solo lo que de verdad está configurado en la tienda. Cuando la barra promete envío gratis a partir de 49 € y el transportista del carrito solo lo da a partir de 60 €, el cliente se siente engañado en el último paso. Cómo configurar el umbral en sí lo describimos en nuestro artículo sobre el envío gratis a partir de un importe.

Tres formas de añadir una barra de anuncios en PrestaShop

Elige el método según la frecuencia con la que cambias el texto y el tema que tienes.

PrestaShop tiene un sitio en la parte superior de la página pensado para banners. La documentación para desarrolladores lo describe en el hook displayBanner como «la parte más alta de cada página». Los módulos de barra suelen engancharse ahí. Qué módulos están en ese sitio en tu tienda lo ves en Diseño → Posiciones, como explica la guía sobre las posiciones de los módulos.

Una entrada en la plantilla va en un tema hijo, no en el tema principal. Si añades la barra a los archivos del tema principal, la siguiente actualización del tema la quitará. La documentación de PrestaShop sobre temas hijo describe cómo se construye un tema hijo. Qué pasa con los cambios después de una actualización lo explicamos en nuestro artículo sobre cuando una actualización del tema borró mis cambios.

Cómo añadir la barra en la plantilla paso a paso

Esta vía necesita acceso a los archivos del tema. Si no trabajas con archivos a diario, hazlo con alguien que sí, o con el chat.

1. Comprueba si la tienda tiene un tema hijo. Si no, crea uno antes de cambiar el primer archivo.
2. Haz una copia del archivo de cabecera del tema (en Classic, la plantilla de la cabecera de la página).
3. Añade un bloque sobre la cabecera con el texto del mensaje y una clase propia, por ejemplo top-info-bar.
4. En el archivo custom.css del tema hijo, define el color de fondo, el color del texto, un tamaño de letra pequeño y el centrado.
5. Añade una regla para pantallas estrechas para que el texto salte de línea en vez de salirse de la pantalla.
6. Vacía la caché en Parámetros avanzados → Rendimiento.
7. Abre la tienda en una ventana privada y en el móvil. Revisa la página de inicio, una categoría, una página de producto y el carrito.

En una tienda con varios idiomas, un texto escrito a mano en la plantilla se muestra a todos en un solo idioma. En ese caso es más cómodo un módulo con un campo para cada idioma, o el texto a través de las traducciones del tema.

¿Cómo debe verse la barra en el móvil?

En el móvil la barra ocupa un espacio valioso sobre el producto, así que tiene que ser baja. Dos líneas es el límite. Tres líneas empujan el nombre y el precio del producto hacia abajo en la pantalla.

En qué fijarse:

• Contraste. El texto blanco sobre un fondo claro, como el amarillo, se lee mal a la luz del sol. Elige un fondo oscuro con texto claro, o al revés.
• Tamaño de letra. Los clientes amplían con los dedos el texto demasiado pequeño. Pequeño, pero no más que el resto de la letra pequeña de la tienda.
• Nada de texto en movimiento. El texto que se mueve cuesta de leer y cansa la vista.
• Un botón de cerrar solo con memoria. Si la barra se puede cerrar, debe seguir cerrada en las páginas siguientes. Si no, el cliente vuelve a cerrarla en cada página.
• Una regla aparte para pantallas estrechas. En el móvil, reduce los márgenes y deja que el texto salte de línea. Esa regla va en un bloque que solo se aplica por debajo de un ancho de pantalla elegido, como describe la guía de MDN sobre media queries.

Cómo cuidar la barra una vez añadida

Una barra que nadie vigila pronto empieza a mentir. La promoción ha terminado, el umbral de envío ha cambiado, y el texto antiguo sigue colgado arriba de la tienda. Los clientes lo leen como una promesa.

Tres reglas sencillas:

• cada vez que cambies los precios de envío o los plazos, revisa también la barra,
• quita o sustituye un mensaje de temporada el día que termina la campaña, no una semana después,
• cuando no hay mensaje, no dejes una franja de color vacía; oculta la barra por completo.

Si la barra se ve mal en el móvil, explicamos cómo arreglarlo en nuestro artículo sobre la vista móvil de PrestaShop. Puedes cambiar los colores de los botones y de otros elementos siguiendo nuestro artículo sobre cómo cambiar el color de un botón.

Cómo añadir una barra de anuncios con el chat

Escribes qué mensaje quieres y cómo debe verse. Tu chat (Claude o ChatGPT) revisa el tema, averigua si hay un tema hijo y si ya funciona un módulo con una barra parecida en la parte superior de la página. Luego muestra el cambio en los archivos antes de guardar.