Points clés
- Changez la bannière de votre page d’accueil dans l’éditeur de thème : Boutique en ligne → Thèmes → Personnaliser → Page d’accueil → cliquez sur la section de la bannière.
- Vous pouvez mettre à jour l’image, le texte superposé, le texte du bouton, le lien du bouton et la palette de couleurs sans aucun code.
- Pour les bannières diaporama (slideshow), chaque diapositive est un bloc séparé - modifiez-les individuellement.
- Les bannières vidéo en arrière-plan nécessitent un thème qui les prend en charge, une application ou du code personnalisé.
Pour changer la bannière de la page d’accueil dans Shopify, allez dans Boutique en ligne → Thèmes → Personnaliser, cliquez sur la section Bannière d’image ou Diaporama, puis remplacez l’image, le texte et le bouton et enregistrez.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en développement et a aidé de nombreuses marques Shopify avec leurs boutiques. Nous avons créé Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store.
Comment modifier la bannière de la page d’accueil sur Shopify
Étape 1. Allez dans l’interface d’administration Shopify → Boutique en ligne → Thèmes → Personnaliser.
Étape 2. L’éditeur de thème s’ouvre par défaut sur votre page d’accueil. S’il s’ouvre sur une autre page, utilisez le menu déroulant du sélecteur de page en haut au centre de l’éditeur pour naviguer vers la page d’accueil.
Étape 3. Dans la barre latérale gauche, trouvez la section de la bannière. Elle peut s’appeler Bannière d’image, Hero, Diaporama (Slideshow) ou Image en pleine largeur. Le nom exact dépend de votre thème.
Étape 4. Cliquez sur le nom de la section pour ouvrir ses paramètres.
Étape 5. Mettez à jour les éléments dont vous avez besoin :
- Image - cliquez sur la miniature de l’image pour la remplacer depuis votre bibliothèque multimédia ou uploadez un nouveau fichier
- Superposition (Overlay) - ajustez la couleur et l’opacité de la superposition pour que le texte reste lisible sur l’image
- Blocs de texte - cliquez sur les blocs Titre ou Sous-titre pour modifier le texte
- Bouton - cliquez sur le bloc Bouton pour mettre à jour le libellé et la destination du lien
- Palette de couleurs - si votre thème utilise des palettes de couleurs, sélectionnez-en une qui convient à la nouvelle bannière
Étape 6. Enregistrez.
Si vous avez seulement besoin de changer l’image, consultez comment changer l’image hero dans Shopify.
Comment personnaliser la bannière de la page d’accueil
Les personnalisations les plus courantes au-delà du simple changement de l’image :
Changer la couleur du texte. Cliquez sur le bloc Titre ou Texte → cherchez un paramètre de couleur de texte, ou utilisez l’option Jeu de couleurs de la section pour passer à un jeu plus clair ou plus foncé.
Ajuster la superposition. La plupart des sections de bannière ont un curseur Opacité de la superposition. Augmentez-le pour rendre le texte plus lisible sur des images chargées ; diminuez-le pour laisser l’image apparaître plus clairement.
Changer le style du bouton. Cherchez dans les paramètres du bloc Bouton une option de style - “Principal”, “Secondaire”, “Contour”. Cela détermine s’il est plein ou avec un contour.
Changer la hauteur de la bannière. Cherchez dans les paramètres de la section (et non d’un bloc) un paramètre Hauteur de la bannière ou Hauteur de la section. Les options sont généralement “Petite”, “Moyenne”, “Grande” ou une valeur en pixels personnalisée.
Comment modifier la bannière de la page d’accueil Shopify s’il s’agit d’un diaporama ?
Si votre bannière est un diaporama (plusieurs images qui défilent), chaque diapositive est un bloc distinct dans la section.
Dans la barre latérale gauche, développez la section diaporama. Vous verrez les blocs de diapositives individuels listés en dessous. Cliquez sur chaque bloc pour modifier l’image, le texte et le bouton de cette diapositive de façon indépendante.
Pour ajouter une nouvelle diapositive : cliquez sur Ajouter un bloc en bas de la liste des blocs de la section et sélectionnez le type de bloc de diapositive.
Pour réorganiser les diapositives : faites glisser les blocs vers le haut ou le bas dans la barre latérale.
Comment ajouter une bannière vidéo à la page d’accueil Shopify
De nombreux thèmes, y compris Dawn, ont une section Vidéo dans le sélecteur de section de l’éditeur de thème (cliquez sur Ajouter une section en bas de la barre latérale). Dans Dawn, il s’agit d’une vidéo intégrée à cliquer pour lire, et non d’une vidéo en arrière-plan.
Pour une bannière vidéo en arrière-plan pleine largeur - une vidéo jouée silencieusement derrière un texte superposé - il s’agit d’un composant plus avancé. Une vidéo en arrière-plan derrière un texte superposé ne fait pas partie de Dawn ; certains thèmes plus récents, comme Horizon, et de nombreux thèmes payants l’incluent.
Si votre thème ne prend pas en charge les bannières vidéo de manière native, vous avez deux options :
- Une application Shopify qui ajoute la fonctionnalité de section vidéo
- Du code personnalisé via Fudge: “Ajoute une bannière vidéo en arrière-plan pleine largeur à la page d’accueil avec un titre et un bouton CTA par-dessus.”
Pour retravailler l’intégralité de la page, consultez comment refaire votre page d’accueil Shopify.
Bonnes pratiques pour l’image de bannière
Utilisez ces spécifications pour que votre bannière reste rapide et nette :
| Spécification | Recommandé |
|---|---|
| Dimensions | 2560 x 1440 px |
| Taille du fichier | Moins de 1 Mo |
| Format | WebP ou JPEG |
| Image mobile | 750 x 1000 px (recadrage portrait) |
Vérifiez toujours l’aperçu mobile dans l’éditeur de thème avant d’enregistrer. Les images de bannière sont souvent recadrées de manière inattendue sur les petits écrans. Si votre thème propose un champ distinct pour l’image mobile, utilisez-le. Pour comprendre pourquoi les bannières sont recadrées sur mobile et savoir quoi faire lorsque votre thème n’a pas de champ mobile, consultez notre guide sur les tailles d’images Shopify.
Utiliser Fudge pour repenser la bannière de votre page d’accueil
Si vous voulez plus qu’un simple changement d’image — une nouvelle mise en page, l’ajout d’éléments de conversion, une structure différente — Fudge, l’opérateur IA pour les boutiques Shopify, le construit à partir d’une description :
“Refais la bannière de ma page d’accueil avec une mise en page divisée : image du produit à droite, titre et deux points à puces à gauche, avec une couleur d’arrière-plan pleine largeur au lieu d’une image.”
Fudge génère le code comme brouillon dans votre thème. Vérifiez-le dans l’aperçu et publiez-le quand il est prêt. Si vous n’êtes pas sûr que la bannière soit le problème, donnez plutôt à Fudge un objectif de conversion : il cherche les pages où les acheteurs abandonnent et classe les correctifs avant de construire quoi que ce soit.
FAQ
Ma bannière de page d'accueil doit-elle être un diaporama ou une image unique ?
Une image statique unique est généralement meilleure pour la conversion. Les diaporamas divisent l'attention entre plusieurs messages, ralentissent l'affichage initial, et la plupart des acheteurs ne voient pas au-delà de la première diapositive avant de faire défiler. Utilisez un diaporama uniquement si vous avez vraiment plusieurs campagnes d'égale importance qui se déroulent simultanément.
Quelle hauteur de bannière convertit le mieux dans Shopify ?
Une bannière moyenne (environ 60 à 80 % de la hauteur de l'écran) surpasse généralement une bannière en plein écran. Les bannières en plein écran cachent le reste de votre contenu sous la ligne de flottaison, ce qui nuit à la profondeur de défilement et à la découverte des produits. Les marques de vêtements et de style de vie utilisent souvent des bannières plus grandes ; les boutiques proposant de nombreux produits en utilisent souvent des plus petites.
Puis-je programmer l'apparition d'une bannière de page d'accueil à une date précise ?
Pas de manière native dans l'éditeur de thème. L'approche la plus propre : décrivez la date de lancement à Fudge et il générera un wrapper Liquid conditionnel à la date qui activera la bannière à votre horodatage — aucun changement manuel n'est nécessaire le jour du lancement. Alternative : une application de planification Shopify qui contrôle la visibilité des sections par date, ou dupliquez le thème et publiez-le manuellement.
Pourquoi le bouton de ma bannière de page d'accueil est-il coupé sur mobile ?
La hauteur de la bannière n'est pas suffisante pour que le titre + le sous-titre + le bouton tiennent. Vous pouvez soit réduire la longueur du texte, passer à une hauteur de bannière "Petite" sur mobile (certains thèmes ont des paramètres de hauteur distincts pour bureau/mobile), soit déplacer le bouton sous la bannière à l'aide d'une section distincte.
Les vidéos des bannières de page d'accueil doivent-elles se lancer automatiquement (autoplay) ?
Oui, avec des réserves. Les navigateurs exigent que les vidéos soient en sourdine pour se lancer automatiquement — concevez-les pour un visionnage sans son. Utilisez-les uniquement comme arrière-plans d'ambiance où le message se trouve dans le texte superposé, pas dans l'audio. Les navigateurs bloquent la lecture automatique avec son, donc une vidéo non mise en sourdine ne démarrera tout simplement pas.
