Bandeau d’annonce PrestaShop : un message en haut de chaque page de la boutique

À quoi sert une barre de message en haut de la page ?

À une information qui change la décision d’un client avant qu’il commence à chercher un produit. Le client voit le bandeau sur la page d’accueil, dans une catégorie, sur la fiche produit et dans le panier : il n’a donc pas besoin d’arriver sur une page précise pour apprendre quelque chose.

Messages typiques d’un bandeau :

• le seuil de livraison gratuite (« Livraison gratuite dès 49 € d’achat »),
• l’heure limite d’expédition (« Commandes passées avant 14 h expédiées le jour même »),
• une pause des expéditions (« Les commandes du long week-end partent mardi »),
• le dernier jour pour commander avant les fêtes.

Les montants et les heures de ces exemples sont fictifs. Ne mettez dans le bandeau que ce qui est réellement configuré dans la boutique. Quand le bandeau promet la livraison gratuite dès 49 € et que le transporteur du panier ne l’accorde qu’à partir de 60 €, le client se sent trompé à la dernière étape. Nous décrivons comment définir le seuil lui-même dans notre article sur la livraison gratuite à partir d’un montant.

Trois façons d’ajouter un bandeau d’annonce dans PrestaShop

Choisissez une méthode selon la fréquence à laquelle vous changez le texte et le thème que vous avez.

PrestaShop a un emplacement en haut de la page prévu pour les bannières. La documentation développeur le décrit sous le hook displayBanner comme « tout en haut de chaque page ». Les modules de bandeau s’y accrochent généralement. Vous pouvez voir quels modules occupent cet emplacement dans votre boutique dans Apparence → Positions, expliqué dans le guide des positions des modules.

Une entrée dans un gabarit se fait dans un thème enfant, pas dans le thème principal. Si vous ajoutez le bandeau aux fichiers du thème principal, la prochaine mise à jour du thème le supprimera. La documentation PrestaShop sur les thèmes enfants décrit comment un thème enfant est construit. Nous expliquons ce qui arrive aux modifications après une mise à jour dans notre article une mise à jour du thème a effacé mes modifications.

Comment ajouter le bandeau dans le gabarit étape par étape

Cette voie nécessite un accès aux fichiers du thème. Si vous ne travaillez pas avec des fichiers au quotidien, faites-le avec quelqu’un qui en a l’habitude, ou avec le chat.

1. Vérifiez si la boutique a un thème enfant. Sinon, créez-en un avant de modifier le premier fichier.
2. Faites une copie du fichier d’en-tête du thème (dans Classic, le gabarit d’en-tête de page).
3. Ajoutez un bloc au-dessus de l’en-tête avec le texte du message et votre propre classe, par exemple top-info-bar.
4. Dans le fichier custom.css du thème enfant, définissez la couleur de fond, la couleur du texte, une petite taille de police et le centrage.
5. Ajoutez une règle pour les écrans étroits afin que le texte passe à la ligne au lieu de déborder de l’écran.
6. Videz le cache dans Paramètres avancés → Performances.
7. Ouvrez la boutique dans une fenêtre privée et sur un téléphone. Vérifiez la page d’accueil, une catégorie, une fiche produit et le panier.

Dans une boutique en plusieurs langues, un texte écrit en dur dans le gabarit s’affiche dans une seule langue pour tout le monde. Dans ce cas, un module avec un champ pour chaque langue, ou un texte passant par les traductions du thème, est plus pratique.

À quoi doit ressembler le bandeau sur un téléphone ?

Sur un téléphone, le bandeau prend une place précieuse au-dessus du produit, il doit donc être bas. Deux lignes, c’est la limite. Trois lignes repoussent le nom du produit et le prix plus bas sur l’écran.

À quoi faire attention :

• Le contraste. Un texte blanc sur un fond clair, comme le jaune, est difficile à lire au soleil. Choisissez un fond sombre avec un texte clair, ou l’inverse.
• La taille de la police. Les clients zooment avec deux doigts sur un texte trop petit. Petit, mais pas plus petit que le reste des mentions de la boutique.
• Pas de texte défilant. Un texte qui bouge est difficile à lire et fatigue les yeux.
• Un bouton de fermeture seulement avec mémoire. Si le bandeau peut être fermé, il doit rester fermé sur les pages suivantes. Sinon, le client le referme sur chaque page.
• Une règle distincte pour les écrans étroits. Sur un téléphone, réduisez les marges et laissez le texte passer à la ligne. Vous mettez cette règle dans un bloc qui ne s’applique qu’en dessous d’une largeur d’écran choisie, décrit dans le guide de MDN sur les media queries.

Comment entretenir le bandeau une fois ajouté

Un bandeau que personne ne surveille se met vite à dire des choses fausses. La promotion est terminée, le seuil de livraison a changé, et l’ancien texte est toujours affiché en haut de la boutique. Les clients le lisent comme une promesse.

Trois règles simples :

• chaque fois que vous changez les prix de livraison ou les délais d’expédition, vérifiez aussi le bandeau,
• retirez ou remplacez un message saisonnier le jour de la fin de la campagne, pas une semaine plus tard,
• quand il n’y a pas de message, ne laissez pas une bande colorée vide ; masquez complètement le bandeau.

Si le bandeau s’affiche mal sur un téléphone, nous traitons la correction à part dans notre article sur l’affichage mobile de PrestaShop. Vous pouvez changer les couleurs des boutons et d’autres éléments en suivant notre article sur le changement de couleur d’un bouton.

Comment ajouter un bandeau d’annonce avec le chat

Vous écrivez quel message vous voulez et à quoi il doit ressembler. Votre chat (Claude ou ChatGPT) vérifie le thème, regarde s’il y a un thème enfant et si un module avec un bandeau similaire tourne déjà dans l’emplacement du haut de la page. Ensuite, il montre la modification des fichiers avant l’enregistrement.