Changer la bannière de la page d’accueil PrestaShop : le carrousel, une bannière saisonnière et le retour en arrière
Pour changer une bannière dans PrestaShop, tout dépend d’où elle vient. Dans le thème Classic, le carrousel d’accueil est le module Carrousel d’images (Image slider), où vous remplacez l’image, le titre et le lien d’une diapositive. Une bannière unique est un module séparé. Dans un thème acheté, elle peut être dans un modèle ou dans le constructeur de pages du thème.
Auteur: L’équipe TellMyShop. Un guide pour les propriétaires de boutiques PrestaShop : la cause, la correction manuelle et le même travail dans une conversation avec le chat.
Dernière mise à jour: · 6 min de lecture
D’où vient la bannière de la page d’accueil ?
D’un module ou du modèle du thème, et c’est ce qui décide où vous la changez. Avant de chercher, regardez dans Apparence > Positions. Sous le point d’accroche de la page d’accueil (displayHome), vous voyez les modules qui la construisent.
| Source de la bannière | Comment la reconnaître | Où la changer |
|---|---|---|
| Module Carrousel d’images | plusieurs diapositives qui défilent | Modules > Gestionnaire de modules > Carrousel d’images > Configurer |
| Module Bannière | une seule image entre deux sections de la page | Modules > Gestionnaire de modules > Bannière > Configurer |
| Modèle du thème | une bannière sans aucun réglage dans le back office | le fichier du modèle de la page d’accueil dans le thème |
| Constructeur de pages du thème | un éditeur par glisser-déposer | le module de l’auteur du thème |
Les propriétaires de boutiques posent la question du changement de bannière sur le forum PrestaShop (en polonais) depuis des années. La réponse commence presque toujours par une question sur le thème. Vous trouverez le code du carrousel du thème Classic dans le dépôt du module ps_imageslider.
Comment remplacer une diapositive du carrousel pas à pas
Dans le module de carrousel, vous le faites sans toucher à aucun fichier.
- Allez dans Modules > Gestionnaire de modules et cherchez « carrousel » ou « slider ».
- Cliquez sur Configurer à côté du module Carrousel d’images.
- Ajoutez une nouvelle diapositive ou modifiez une diapositive existante.
- Téléversez une image aux mêmes dimensions que les diapositives actuelles.
- Saisissez le titre, l’URL cible et la légende. La légende est aussi reprise dans le texte alternatif de l’image.
- Répétez pour chaque langue de la boutique.
- Activez la diapositive et faites-la glisser en haut de la liste.
- Désactivez l’ancienne diapositive au lieu de la supprimer.
Pour finir, ouvrez la page d’accueil dans une fenêtre de navigation privée. Si rien n’a changé, lisez pourquoi les modifications ne s’affichent pas dans PrestaShop.
Comment préparer une bannière saisonnière
Préparez-la en même temps que la campagne, pas le jour du lancement. Mercredi, 20 h 15, les soldes d’automne commencent demain. L’image est prête, mais le carrousel a trois langues, et chaque diapositive a besoin de sa propre image et de son propre lien. En chemin, vous découvrez que le titre de la diapositive est un titre de page et que les images n’ont pas de texte alternatif.
Quelques règles aident :
- La bannière mène à une catégorie précise ou à une page de promotion, pas à la page d’accueil.
- Chaque langue a sa propre image et son propre texte alternatif.
- Le texte alternatif dit ce qu’il y a sur la bannière, pas « banner1 ». Google présente les règles du texte alternatif dans son guide sur les images.
- L’ancienne bannière est désactivée, pas supprimée.
- Vous notez la date de retrait de la bannière dans le calendrier de la campagne.
Un carrousel ou une bannière unique pour une campagne ?
Pour une campagne, une seule diapositive avec un seul message suffit en général. Un carrousel fait défiler plusieurs images, et tous les clients n’attendent pas la troisième. Si les soldes sont ce qui compte le plus cette semaine, mettez-les sur la première diapositive, ou faites-en la seule.
| Situation | Meilleur choix | Pourquoi |
|---|---|---|
| Une seule campagne, un délai court | une diapositive ou une bannière | un message, un lien |
| Plusieurs catégories de même importance | un carrousel de 2 ou 3 diapositives | chaque catégorie a sa place |
| Une information sur la livraison ou une date limite | une barre de texte au-dessus de la bannière | lisible aussi sur un téléphone |
Vérifiez aussi la bannière sur un téléphone. Un texte intégré à l’image est souvent illisible sur un petit écran. Une légende courte et un gros bouton dans l’image fonctionnent mieux qu’une longue phrase. Si le thème le permet, préparez une version séparée de l’image pour les téléphones.
Et si le carrousel doit être modifié dans le modèle ?
Modifiez la copie du modèle dans le thème, pas le fichier du module. PrestaShop vous permet de copier le modèle d’un module dans le thème, puis utilise cette copie. Une mise à jour du module ne l’écrasera pas. C’est décrit dans la documentation sur la surcharge des modules.
C’est ainsi que vous corrigez, par exemple, les titres de diapositives que le thème affiche comme titres de page. La page d’accueil doit avoir un seul titre principal, et les titres des diapositives peuvent être du texte simple.
Comment changer la bannière avec le chat
Vous décrivez la campagne, et votre chat (Claude ou ChatGPT) détermine d’où vient la bannière et propose une modification avec un aperçu.
Vous: Pour les soldes d’automne, je veux une bannière qui mène à la catégorie Lanternes. L’image automne.jpg est déjà téléversée. Ajoute un texte alternatif en français et en allemand.
Votre chat: La bannière de la page d’accueil vient du modèle du thème, pas d’un module. Je propose une modification dans le fichier, avec une sauvegarde :
Après l’enregistrement, je viderai le cache et vérifierai la page d’accueil. Vous pourrez restaurer l’ancienne bannière depuis la sauvegarde après la campagne.
Statut de la carte : attend votre « oui »ancienne version : <img src="ete.jpg" alt="banner1">
nouvelle version : <img src="automne.jpg" alt="Soldes d’automne sur les lanternes">
ancienne version : lien : /offres-ete
nouvelle version : lien : /lanternes
Une nouvelle bannière saisonnière, c’est une demande et un aperçu. Chaque fichier est sauvegardé avant l’enregistrement. Après la campagne, vous restaurez la version précédente depuis la sauvegarde, là aussi avec un aperçu.
Les modifications d’apparence fonctionnent dans TellMyShop Pro, une fois l’interrupteur Thème activé. L’interrupteur reste actif 24 heures et exige une sauvegarde de la base de données faite le même jour. Vous téléversez les images vous-même, et vous modifiez le contenu des diapositives dans la configuration du module de carrousel. Dans la version gratuite TellMyShop Free, le chat vérifie les titres de la page d’accueil et indique les modules qui la construisent.
Les deux tâches les plus courantes sont décrites dans les cas d’usage une bannière saisonnière sur la page d’accueil et les titres et le texte alternatif des images dans le carrousel. Si vous changez l’ordre des sections en même temps que la bannière, lisez l’article sur la mise en page de la page d’accueil.
Questions et réponses
Quelle taille doit avoir une image du carrousel ?
La même que les diapositives actuelles de votre thème. Chaque thème a une largeur de page d’accueil différente, et le carrousel étire ou rogne les images aux autres proportions. Vérifiez les dimensions de l’image de la diapositive actuelle et préparez la nouvelle à la même taille. Enregistrez-la en JPG ou en WebP pour que la page se charge vite.
Pourquoi la nouvelle bannière n’apparaît-elle pas sur la page ?
Le plus souvent à cause du cache ou d’une diapositive désactivée. Vérifiez que la diapositive est activée et qu’elle a une image dans la langue que vous consultez. Videz ensuite le cache dans Paramètres avancés > Performances et rafraîchissez la page dans une fenêtre de navigation privée. Dans une boutique en plusieurs langues, chaque langue a sa propre image.
La bannière du carrousel compte-t-elle pour Google ?
Oui, mais peu. Le texte alternatif de l’image aide Google et les lecteurs d’écran à comprendre ce qu’elle montre. Autre chose compte souvent davantage. Dans certains thèmes, les titres des diapositives sont des titres de page, et la page d’accueil en a donc plusieurs. Cela vaut la peine de le vérifier et de le corriger dans le modèle du carrousel.
Comment revenir à l’ancienne bannière après une campagne ?
Le plus simple est de ne pas supprimer l’ancienne diapositive, mais de la désactiver pendant la campagne. Après la promotion, vous réactivez l’ancienne et désactivez la saisonnière. Si le chat a changé la bannière dans un modèle, la version précédente du fichier se trouve dans une sauvegarde, et vous la restaurez par une seule demande, avec un aperçu des différences.
Le chat va-t-il téléverser l’image de la bannière ?
Non. Vous téléversez l’image vous-même, dans la configuration du module de carrousel ou dans le gestionnaire de fichiers. Le chat modifie une bannière enregistrée dans le modèle du thème, les liens, le texte alternatif des images et l’apparence du carrousel via une copie du modèle dans le thème. Cela fonctionne dans TellMyShop Pro, avec l’interrupteur Thème activé.
PrestaShop est une marque déposée de PrestaShop SA. Claude est une marque d’Anthropic PBC. ChatGPT et OpenAI sont des marques d’OpenAI. TellMyShop n’est pas affilié à ces entreprises.