Banner Revolution : créer des promotions accrocheuses sans graphiste

Dernière mise à jour : juin 2026.

Vous avez configuré la remise — une règle panier, un prix spécifique, peut-être un code promo prêt à être diffusé. Le plus difficile est fait. Mais une remise que personne ne voit ne vend rien, et la plupart des acheteurs découvrent qu'une promotion est en cours grâce à la bannière en haut de votre page d'accueil. C'est précisément ce que ce guide vous aide à mettre en place : pas la promotion elle-même (cela relève des règles panier et des prix spécifiques), mais la bannière qui l'annonce — avec un design propre, les bonnes dimensions et une intégration dans PrestaShop qui fait pointer l'image, le lien et la remise réelle vers la même offre. Vous n'avez pas besoin d'un graphiste pour cela, ni d'apprendre Photoshop.

Commencez par la remise, pas par le design

Une bannière est la vitrine d'une promotion qui existe déjà dans votre back-office. Avant d'ouvrir un outil de design, l'offre doit être active et testée : une règle panier dans Catalogue → Réductions → Règles panier (le libellé exact peut varier selon la version et le thème), ou un prix spécifique défini sur le produit ou la catégorie. La raison de procéder ainsi est simple — la bannière doit dire la vérité. Si elle annonce « 20 % sur tout » alors que votre règle panier ne s'applique qu'à une catégorie, vous apprenez aux clients à se méfier de votre accroche, et vous passerez la période de promotion à répondre à des e-mails du type « pourquoi mon code ne fonctionne-t-il pas ? ».

Avant de concevoir la bannière, fixez donc trois éléments qu'elle doit refléter exactement :

• Le montant. Est-ce 20 % de remise, 10 € offerts, la livraison gratuite ou une offre « un acheté, un offert » ? Reprenez-le directement depuis l'onglet Actions de la règle panier, afin que le titre et le calcul correspondent.
• Le périmètre. Toute la boutique, une catégorie ou une sélection de produits ? Une règle panier limitée à une catégorie dans Conditions doit produire une bannière qui renvoie vers cette catégorie — pas vers la page d'accueil.
• L'échéance. Si la règle panier possède une date valable jusqu'au, la bannière peut l'indiquer. « Se termine dimanche » fait partie des rares signaux d'urgence honnêtes dont vous disposez, précisément parce que le back-office l'applique. (Pour planifier automatiquement vos promotions, consultez les réductions programmées.)

Si votre offre nécessite un code que les clients saisissent au moment de la commande, générez-le dans la même règle panier — le champ Code de l'onglet Informations — et affichez ce code exact sur la bannière. Nous reviendrons sur l'importance, pour la conversion, de montrer le code sur la bannière plutôt que de le cacher.

Des principes de design qui fonctionnent même sans graphiste

Bonne nouvelle pour les non-graphistes : une bannière promotionnelle efficace repose surtout sur la retenue, pas sur un talent artistique. Quatre règles produisent l'essentiel du résultat.

Un seul message par bannière

L'erreur la plus fréquente est de tout entasser. « 20 % sur la collection d'été + livraison gratuite + nouveautés + rejoignez notre programme de fidélité » sur une seule bannière signifie que le client ne lit rien. Une bannière, une offre, un appel à l'action. Si vous avez réellement deux promotions en cours, utilisez deux bannières distinctes ou un carrousel — mais chaque diapositive doit garder un seul objectif. Une bannière qui correspond exactement à une seule règle panier est facile à rédiger et impossible à mal comprendre.

Lisible en deux secondes

Le texte de la bannière doit être compris d'un coup d'œil, car c'est toute l'attention qu'il recevra :

• Grand titre : au moins 32px sur ordinateur, 24px sur mobile. Le montant de la remise est l'élément principal — faites-en le plus grand élément de la bannière.
• Contraste élevé : texte clair sur fond sombre, ou texte sombre sur fond clair. Un texte posé sur une photo chargée a besoin d'un voile de couleur ou d'un fond assombri derrière lui, sinon il disparaît.
• Peu de mots : 5 à 8 pour le titre, 10 à 15 pour le texte secondaire. « Soldes d'été — 20 % sur tout » plus un code suffit.
• Hiérarchie claire : l'offre d'abord, la raison ensuite, puis le code ou l'échéance.

Un appel à l'action qui ressemble à un élément cliquable

Chaque bannière promotionnelle a besoin d'un bouton ou d'un lien évident qui indique au visiteur quoi faire : « Voir les offres », « Découvrir la collection », « Utiliser le code SUMMER20 ». Il doit se détacher du reste de la bannière et être perçu comme un élément sur lequel on appuie. Le vague fait perdre l'élan — un « En savoir plus » sous un titre annonçant -20 % gaspille l'impulsion créée par le chiffre.

Des images que vous n'avez pas besoin de produire vous-même

Utilisez une vraie photo produit ou une image de mise en situation propre si vous en avez une. Sinon, un fond uni ou un dégradé simple avec un texte fort vaut toujours mieux qu'une photo floue ou pixellisée. Une bannière soignée uniquement typographique paraît intentionnelle ; une image de banque d'images étirée donne l'impression d'une erreur. Ne laissez pas « je n'ai pas de photos » vous bloquer — la plupart des bonnes bannières de promotion sont simplement du texte sur une couleur.

Des outils gratuits qui font le design pour vous

Vous n'avez pas besoin d'un logiciel payant. Trois outils gratuits couvrent quasiment toutes les bannières dont une boutique PrestaShop a besoin.

Pour la plupart des marchands, la réponse est Canva : partez d'un modèle, remplacez le texte par votre offre, ajoutez une photo produit ou choisissez une couleur de fond, puis exportez. La compétence nécessaire consiste surtout à choisir un modèle et à ne pas trop le modifier.

Dimensions de bannières pour PrestaShop

Les dimensions exactes dépendent de votre thème, mais voici les formats les plus courants et ceux qu'attendent la plupart des modules de bannières :

• Bannière principale de page d'accueil : 1920 × 600–800px, pleine largeur, au-dessus de la ligne de flottaison.
• Bannière de catégorie : 1200 × 300–400px.
• Bannière de colonne latérale : 300 × 250px ou 300 × 600px.
• Bannière mobile : 750 × 750px ou 750 × 500px — une version séparée, pensée pour le mobile, pas une bannière pour ordinateur simplement réduite.

Créez toujours une version mobile séparée. Une bannière parfaitement lisible en 1920px devient une tache illisible lorsqu'elle est comprimée sur un écran de téléphone de 375px, et dans une boutique PrestaShop typique, une grande part du trafic — souvent plus de la moitié — vient du mobile. Les bannières mobiles ont besoin d'un texte proportionnellement plus grand, de mises en page plus simples et d'un message plus court.

Pour le fichier lui-même : exportez en WebP ou en JPEG optimisé pour les bannières photo, et essayez de rester sous les 200KB environ. Utilisez PNG uniquement lorsque vous avez réellement besoin de transparence. Les images de bannière trop lourdes sont l'une des causes les plus fréquentes d'une page d'accueil lente — et une page d'accueil lente vous coûte précisément les visiteurs que la bannière est censée convertir. Les Paramètres avancés → Performances de PrestaShop et les réglages d'images de votre thème ne sauveront pas une image principale de 3MB ; dimensionnez-la correctement avant de la téléverser.

Ajouter la bannière dans PrestaShop

PrestaShop ne propose pas une fonctionnalité unique appelée « bannière promotionnelle ». Il existe donc plusieurs approches sérieuses — choisissez selon la fréquence à laquelle vous changez vos bannières et le niveau de contrôle souhaité.

• Le carrousel d'images natif. La plupart des thèmes par défaut sont livrés avec le module ps_imageslider. Allez dans Modules → Gestionnaire de modules, trouvez le carrousel, cliquez sur Configurer, puis vous pouvez téléverser les images des diapositives, définir l'URL du lien et rédiger le titre/la légende. C'est gratuit et intégré — très bien pour une bannière de promotion occasionnelle que vous configurez puis laissez en place.
• Les paramètres du thème. De nombreux thèmes commerciaux disposent de leur propre gestionnaire de bannières dans Apparence → Thème & Logo ou dans un module dédié à la configuration du thème, souvent avec plus de contrôle sur l'emplacement (pages de catégorie, colonnes latérales) que le carrousel standard.
• Un bloc statique / HTML. Pour une bannière placée à un endroit fixe, un bloc HTML de type CMS (via un module « HTML personnalisé » ou les positions de votre thème) vous permet d'insérer une image entourée d'un lien partout où un hook existe.
• Un module de bannières dédié. Si vous lancez souvent des promotions et voulez davantage que ce que propose le carrousel standard — des images mobiles séparées, de véritables superpositions de texte et de boutons d'appel à l'action rendus par-dessus l'image, ainsi que plusieurs groupes de bannières indépendants pour la page d'accueil, les pages CMS et les emplacements de widgets — un module conçu pour cela évite le travail répétitif dans le back-office et permet à une équipe non technique de remplacer une bannière en quelques minutes. Notre module Banner Revolution est précisément conçu pour cet usage : carrousels principaux pleine largeur avec texte superposé à l'image et appels à l'action, image pour ordinateur et image mobile distinctes pour chaque diapositive (afin de ne pas écraser une bannière de 1920px sur un téléphone), et plusieurs groupes de carrousels que vous placez là où vous en avez besoin — le tout géré depuis le back-office, sans toucher à un template.

Quelle que soit l'approche choisie, une seule règle compte vraiment : le lien de la bannière doit pointer vers le bon endroit. Une promotion valable sur toute la boutique renvoie vers la page d'accueil ou une catégorie de promotions ; une promotion de catégorie renvoie vers cette catégorie ; une offre sur un seul produit renvoie vers ce produit. Envoyer une bannière « 20 % sur les robes » vers la page d'accueil oblige le client à chercher les robes — et c'est pendant cette recherche qu'il part.

Faites correspondre la bannière et la remise

C'est la partie que les conseils génériques sur les bannières oublient, et c'est celle qui détermine si la promotion convertit réellement sur une boutique PrestaShop. La bannière est une promesse ; la règle panier, le prix spécifique ou le bon de réduction montrent si vous la tenez.

• Les remises automatiques n'ont pas besoin de code sur la bannière. Si votre règle panier s'applique automatiquement (sans code, option « mettre en avant » désactivée), la bannière annonce simplement l'offre et renvoie vers la page concernée — le prix est déjà réduit lorsque le client arrive. C'est l'expérience la plus fluide : rien à saisir.
• Les offres avec code doivent afficher le code. Si la règle panier exige un code, mettez ce code exact sur la bannière — « Utilisez le code SUMMER20 ». Un champ de coupon sans code visible incite le client à ouvrir Google, à chercher un code qui fonctionne et, parfois, à ne jamais revenir. Affichez le code, et envisagez de l'appliquer automatiquement aux visiteurs arrivant depuis le lien de la bannière (l'option Mettre en avant d'une règle panier aide à le faire remonter ; certains modules ou liens personnalisés peuvent préappliquer un bon de réduction, mais sinon, affichez simplement le code clairement).
• Respectez exactement le périmètre. Si la règle panier est limitée à une catégorie dans Conditions, le texte et le lien de la bannière doivent le refléter. Afficher « Tout » sur la bannière alors que le back-office indique « catégories sélectionnées uniquement » est le moyen le plus rapide de générer des demandes au support pendant votre plus grosse période de ventes.
• Laissez l'échéance venir de la règle. Si vous écrivez « Se termine dimanche » sur la bannière, définissez la date valable jusqu'au de la règle panier en conséquence, afin que la remise s'arrête réellement au moment annoncé. L'urgence honnête ne fonctionne que lorsque le back-office l'applique — voir comment créer de l'urgence sans manipulation.

Pour les promotions portant spécifiquement sur des cartes-cadeaux et bons d'achat — « carte-cadeau de 10 € pour chaque commande » — la bannière l'annonce et la configuration de la carte-cadeau / du bon d'achat la délivre. Gardez en tête un point facile à oublier : certains produits ne devraient jamais porter la remise mise en avant. Si vous excluez certains articles dans les conditions de la règle panier, ne laissez pas une bannière « 20 % sur tout » suggérer le contraire — consultez pourquoi certains produits ne devraient jamais être soldés.

Gardez vos bannières à jour — et n'abusez pas des carrousels

Une bannière restée trois mois sur votre page d'accueil devient invisible pour les visiteurs réguliers ; ils ont cessé de la voir. Faites tourner vos bannières selon un calendrier :

• Bannières promotionnelles : alignez-les exactement sur la durée de la promotion — en ligne lorsque la règle panier démarre, retirées lorsqu'elle expire.
• Bannières saisonnières : remplacez-les à chaque saison ou événement important. Un calendrier des ventes saisonnières vous indique ce qui arrive, afin que la bannière soit prête avant la date, pas après.
• Bannières de marque générales : rafraîchissez-les toutes les quatre à six semaines pour que les habitués ne les ignorent pas.

Utilisez les carrousels avec parcimonie. La plupart des visiteurs ne voient que la première diapositive ; un carrousel de cinq diapositives enterre donc surtout quatre messages. Si vous utilisez un carrousel, placez l'offre la plus importante en premier et limitez-vous à trois ou quatre diapositives. Pour une promotion unique, une bannière statique avec un message clair surpasse généralement un carrousel.

Vérifiez si la bannière a réellement fonctionné

Vous n'avez pas besoin d'outils coûteux pour savoir si une bannière fait son travail. Ajoutez des paramètres UTM au lien de la bannière (par exemple ?utm_source=homepage&utm_campaign=summer-sale) afin que les clics apparaissent comme une source nommée dans vos outils d'analyse, puis surveillez quelques éléments :

• Taux de clic : parmi les visiteurs qui ont vu la bannière, combien ont cliqué ? Un faible nombre de clics signifie que le message ou le design doit être retravaillé.
• Conversion après le clic : les visiteurs qui cliquent sur la bannière achètent-ils réellement ? Des clics sans commandes indiquent un problème sur la page d'arrivée ou un décalage entre la bannière et la remise — pas nécessairement dans le visuel.
• Chiffre d'affaires de la campagne : si vous avez utilisé un code de bon de réduction unique, son utilisation sur l'écran de la règle panier et votre liste de commandes (filtrée ou recherchée par code), ou un module d'analyse/statistiques, vous indiquent exactement combien cette promotion a rapporté.

Ce dernier point est un avantage discret du lien entre la bannière et une règle panier avec code : le code devient son propre pixel de suivi. Chaque commande qui l'utilise correspond à une interaction que vous pouvez compter en chiffre d'affaires réel, directement depuis le back-office.

Les bonnes bannières promotionnelles sont simples, claires et honnêtes. Vous n'avez pas besoin d'un talent de designer — vous avez besoin d'une remise déjà active dans votre back-office, d'un message clair qui lui correspond, d'un titre lisible, d'un bouton qui dit quoi faire et d'un lien qui mène à la bonne page. Les outils de design sont gratuits, les tailles sont connues, et PrestaShop offre déjà des emplacements où placer la bannière. Ce qui fait réellement bouger les résultats, ce n'est pas l'illustration ; c'est le fait que la bannière et la règle panier disent au client exactement la même chose, et que cette chose soit vraie.

Questions fréquentes

Faut-il des compétences en design pour créer une bannière promotionnelle ?

Non. Une bonne bannière de promotion repose surtout sur la retenue — une offre, un grand titre lisible, un contraste élevé et un bouton clair. L'offre gratuite de Canva propose des modèles aux dimensions web dans lesquels vous remplacez simplement le texte ; beaucoup de bannières qui convertissent le mieux ne sont qu'une typographie forte sur une couleur unie, sans aucune photo. La compétence consiste à choisir un modèle et à ne pas trop le modifier.

Quelle taille doit avoir une bannière de page d'accueil dans PrestaShop ?

Cela dépend de votre thème, mais une bannière principale pleine largeur sur la page d'accueil fait couramment environ 1920 × 600–800px, une bannière de catégorie environ 1200 × 300–400px, et une bannière de colonne latérale 300 × 250 ou 300 × 600px. Créez toujours une version mobile séparée (environ 750 × 750 ou 750 × 500px) avec un texte proportionnellement plus grand — une bannière pour ordinateur compressée sur un téléphone devient illisible, et dans la plupart des boutiques plus de la moitié du trafic vient du mobile.

Où placer la bannière — dans le carrousel natif ou dans un module ?

Pour une promotion occasionnelle que vous configurez puis laissez en place, le module intégré ps_imageslider (Modules → Gestionnaire de modules → Configurer) est gratuit et suffisant — téléversez l'image, définissez le lien. Si vous lancez souvent des promotions et souhaitez des images mobiles séparées, des superpositions texte-et-appel à l'action ou plusieurs groupes de bannières sur le site, un module dédié comme Banner Revolution élimine le travail répétitif dans le back-office. Évitez de modifier le template du thème à la main sauf si vous n'avez pas d'autre option, car une mise à jour peut l'écraser.

Dois-je afficher le code de réduction sur la bannière ou le cacher ?

Affichez-le. Si la règle panier nécessite un code, mettez le code exact sur la bannière (« Utilisez le code SUMMER20 »). Un champ de coupon sans code visible envoie les clients chercher un code sur Google — et parfois ils ne reviennent pas. Si la règle panier s'applique automatiquement sans code, la bannière annonce simplement l'offre et renvoie vers la page concernée ; le prix est déjà réduit lorsqu'ils arrivent.

Comment savoir si une bannière a réellement fonctionné ?

Ajoutez des paramètres UTM au lien de la bannière (par exemple ?utm_source=homepage&utm_campaign=summer-sale) afin que les clics apparaissent comme une source nommée dans vos outils d'analyse, puis suivez le taux de clic, la conversion après le clic et le chiffre d'affaires. Si vous avez associé la bannière à un code de bon de réduction unique, l'écran de la règle panier et votre liste de commandes montrent exactement combien de commandes l'ont utilisé — le code sert aussi de pixel de suivi que vous pouvez lire en argent réel.