Shoupapp
Cherchez les tailles de bannières e-commerce et vous tomberez sur de longues listes de dimensions en pixels qui se contredisent. La raison est simple : la taille en pixels dépend du thème de votre boutique et de l'écran, alors que ce qui décide vraiment de l'efficacité d'une bannière, c'est sa forme. Ce guide part des cinq ratios qui couvrent presque toutes les bannières e-commerce, puis montre comment convertir un ratio en pixels, quelle quantité de texte chaque forme peut porter et comment décliner une seule campagne sur toutes.
| Forme | Ratio | Où elle s'affiche |
|---|---|---|
| Héros de site | 16:9 | En haut de votre page d'accueil ou d'une landing page |
| Large | 2:1 | En-têtes de catégorie et en-têtes d'e-mail |
| Fine | 3:1 | Bandeaux promotionnels et en-têtes étroits |
| Carrée | 1:1 | Publications dans le fil et vignettes promo sur les marketplaces |
| Story | 9:16 | Stories Instagram et Facebook, publicités verticales |
Pourquoi les listes de pixels se contredisent
Chaque thème affiche ses sections de bannière à sa propre largeur, et chaque écran les restitue à une taille différente. C'est pour cela qu'un guide recommande une certaine taille en pixels pour une bannière héros et qu'un autre en conseille une tout autre. Certaines listes associent même une taille au mauvais ratio : 2 048 × 1 024 pixels est souvent présenté comme du 16:9, alors qu'il s'agit de 2:1. Une bannière conçue pour une forme puis importée dans une autre se retrouve recadrée.
Procédez donc dans cet ordre : trouvez le ratio utilisé par la section de votre thème, concevez à ce ratio, puis exportez à la largeur recommandée par le thème.
Convertir un ratio en pixels
Une fois le ratio et la largeur connus, la hauteur en découle. Divisez la largeur par le premier chiffre du ratio et multipliez par le second.
| Ratio | Largeur d'exemple | Hauteur |
|---|---|---|
| 16:9 | 1 920 px | 1 080 px |
| 2:1 | 2 048 px | 1 024 px |
| 3:1 | 1 800 px | 600 px |
| 1:1 | 1 080 px | 1 080 px |
| 9:16 | 1 080 px | 1 920 px |
La documentation de votre thème indique la largeur recommandée pour chaque section. Les recommandations de Shopify, par exemple, précisent que les images peuvent aller jusqu'à 5 000 × 5 000 px et doivent rester sous 20 Mo, ce qui laisse largement de quoi produire des bannières nettes.
Concevoir à la forme, pas recadrer dedans
Un héros 16:9 et une story 9:16, c'est la même campagne dans deux cadres totalement différents. Créer l'un puis le recadrer dans l'autre coupe presque toujours le titre, le produit ou le bouton. Une taille en pixels peut se redimensionner ; un ratio ne peut pas changer sans perdre quelque chose. Composez chaque forme séparément, en plaçant le produit et le texte pour ce cadre précis.
Un budget de texte pour chaque bannière
Les bannières échouent plus souvent par excès de texte que par manque. Un budget utile :
| Élément | À limiter à environ |
|---|---|
| Titre | 60 caractères |
| Sous-titre | 100 caractères |
| Texte d'accompagnement | 180 caractères |
| Libellé du bouton | 30 caractères |
Sur les formes courtes, allez encore plus court. Un bandeau 3:1 a généralement la place pour un titre et un bouton, rien de plus. Un titre qui passe bien dans un héros sur ordinateur peut devenir illisible dans une bannière fine sur mobile.
Zones de sécurité selon la forme
- Héros 16:9 : éloignez le texte des bords, là où beaucoup de thèmes placent la navigation, des flèches ou des calques, et vérifiez comment la section se recadre sur mobile.
- 2:1 et 3:1 : gardez le produit et le texte dans la bande centrale ; ces bannières sont souvent affichées à de très faibles hauteurs.
- 1:1 : les compositions centrées sont les plus sûres, car les fils d'actualité et les vignettes peuvent afficher un aperçu arrondi ou recadré.
- Story 9:16 : laissez le haut et le bas libres pour le nom du profil, les boutons et la barre de réponse de la plateforme, et placez le produit dans le tiers central.
Le style selon l'objectif
| Objectif | Style adapté | Accent du texte |
|---|---|---|
| Lancer un produit | Épuré ou premium | Le nom du produit et un bénéfice |
| Promouvoir une offre | Impactant | L'offre dans le titre |
| Mettre en avant un bénéfice | Lifestyle | Le bénéfice, montré en situation |
| Travailler la notoriété | Premium | Peu de texte, souvent sans bouton |
Pourquoi le texte des bannières générées par IA dérape
Les bannières générées intégralement sous forme d'image pèchent souvent sur le texte : des lettres qui forment presque un mot, un nom de marque avec un caractère erroné. L'approche fiable consiste à générer l'image sans aucun texte, puis à poser le titre, le sous-titre et le bouton par-dessus en vrai texte. Ce que vous saisissez est alors exactement ce qui s'affiche, dans toutes les formes.
Une campagne déclinée en cinq formes
Un lancement de produit se couvre généralement à partir d'une seule photo produit :
- Rédigez le titre une seule fois, en respectant le budget ci-dessus.
- Créez le héros 16:9 pour la page d'accueil.
- Créez l'en-tête 2:1 pour l'e-mail de lancement.
- Créez la publication 1:1 et la story 9:16 pour les réseaux sociaux.
- Utilisez le bandeau 3:1 pour la page catégorie ou une barre promo sur tout le site.
Gardez partout le même titre et la même couleur de bouton, pour que les internautes reconnaissent la campagne où qu'ils la croisent.
Créer la série à partir d'une seule photo produit
Le générateur de bannières produit de Shoupapp part d'une photo déjà présente dans votre bibliothèque. Vous choisissez l'objectif (lancer un produit, promouvoir une offre, mettre en avant un bénéfice, travailler la notoriété), le format et le style (épuré, lifestyle, premium ou impactant, ou laissez-le choisir). Saisissez votre propre titre, ou laissez le champ vide et il sera rédigé pour vous en anglais, espagnol, allemand, français, italien, portugais, néerlandais, turc ou polonais.
Chaque format est composé à sa propre forme, et le texte est posé sur l'image en vrai texte : l'orthographe est donc toujours correcte. Le bouton est facultatif et reprend la couleur de votre marque ; la couleur du libellé est choisie automatiquement pour rester lisible. Relancez la même photo une fois par forme dont vous avez besoin. Chaque bannière est enregistrée comme un nouveau fichier à côté de l'original, prête à télécharger ou à finaliser dans l'éditeur de photos. Les bannières peuvent aussi devenir une étape d'une automatisation, pour que chaque nouveau produit en reçoive une dès l'arrivée de sa photo.
Les types de bannières dans une boutique
| Bannière | Forme habituelle | Ce qu'il lui faut |
|---|---|---|
| Héros de page d'accueil | 16:9 sur ordinateur, souvent plus haute sur mobile | Produit, titre, bouton |
| En-tête de collection ou de catégorie | 2:1 ou 3:1 | Nom de la collection, un produit ou une matière |
| En-tête d'e-mail | 2:1 | L'offre et un produit ; doit se lire dans le volet d'aperçu |
| Vignette promotionnelle | 1:1 | L'offre, en grand |
| Story ou publicité verticale | 9:16 | Produit au centre, texte dans la zone de sécurité |
Héros sur ordinateur et sur mobile
Beaucoup de thèmes affichent le héros de la page d'accueil dans une autre forme sur mobile, souvent plus haute que le 16:9, et recadrent l'image prévue pour l'ordinateur. Vérifiez si votre thème permet d'importer une image mobile distincte. Si oui, créez-la : le même message, composé pour un cadre vertical. Sinon, gardez le produit et le titre au centre de la bannière 16:9, là où ils survivent au recadrage.
Format et poids des fichiers
Les bannières sont généralement les images les plus lourdes d'une page : ce sont donc elles qui pèsent le plus sur le temps de chargement. Les bannières photographiques doivent être enregistrées en JPG ou WebP ; les fichiers PNG de la même bannière sont bien plus lourds. Exportez à la largeur réellement affichée par votre thème, pas plus. Puis testez la page sur une connexion mobile : si le héros apparaît nettement après le reste de la page, le fichier est trop lourd.
Questions sur les bannières
Quelle est la meilleure taille de bannière pour une boutique Shopify ?
Cela dépend du thème et de la section. Consultez la documentation du thème pour la largeur, et concevez au ratio utilisé par la section.
Faut-il utiliser du JPG, du PNG ou du WebP ?
Pour les bannières photographiques, le JPG ou le WebP garde des fichiers légers. Réservez le PNG aux cas où vous avez besoin de transparence.
Puis-je réutiliser la même bannière dans toutes les tailles ?
Réutilisez le message, pas le fichier. Composez chaque forme séparément.