À retenir
- Modifiez 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 en superposition, le texte du bouton, le lien du bouton et le jeu de couleurs sans aucun code.
- Pour les bannières sous forme de diaporama, chaque diapositive est un bloc distinct - modifiez-les individuellement.
- Les bannières vidéo et les sections animées nécessitent du code ou une application Shopify.
La bannière de votre page d’accueil est la première impression de votre boutique. Sa mise à jour pour une nouvelle campagne, une promotion saisonnière ou un rafraîchissement de la marque est une tâche courante dans l’Éditeur de thème.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de vitrine IA utilisé par des centaines de boutiques Shopify, avec une note de 4.9 sur le Shopify App Store.
Comment modifier la bannière de la page d’accueil sur Shopify
Étape 1. Accédez à l’interface d’administration Shopify → Boutique en ligne → Thèmes → Personnaliser.
Étape 2. L’éditeur de thème s’ouvre sur votre page d’accueil par défaut. 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 accéder à 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 ou Image 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 nécessaires :
- Image - cliquez sur la miniature de l’image pour la remplacer depuis votre bibliothèque de médias ou téléverser un nouveau fichier
- Superposition - 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 le lien cible
- Jeu de couleurs - si votre thème utilise des jeux de couleurs, choisissez-en un qui correspond à la nouvelle bannière
Étape 6. Enregistrez.
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
Les thèmes Shopify standards comme Dawn prennent en charge les sections vidéo de manière native. Cherchez le type de 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).
Pour une bannière avec vidéo d’arrière-plan en pleine largeur (full-width) – une vidéo lue silencieusement derrière un texte superposé – il s’agit d’un composant plus avancé. Le thème Dawn l’inclut dans la section Bannière d’image (cherchez un onglet “Vidéo” à côté du sélecteur d’image). D’autres thèmes pourraient ne pas l’inclure.
Si votre thème ne prend pas en charge les bannières vidéo de manière native, deux options s’offrent à vous :
- Une application Shopify qui ajoute la fonctionnalité de section vidéo
- Du code personnalisé via Fudge: “Ajoute une bannière vidéo d’arrière-plan en pleine largeur à la page d’accueil avec un titre et un bouton CTA par-dessus.”
Sur le même sujet : Refaire la page d’accueil de votre boutique 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 sur 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 dispose d’un champ distinct pour l’image sur mobile, utilisez-le.
Utiliser Fudge pour repenser la bannière de votre page d’accueil
Si vous voulez plus qu’un simple changement d’image - une nouvelle disposition, de nouveaux éléments de conversion, une structure différente - décrivez-le à Fudge :
“Repense la bannière de ma page d’accueil avec une mise en page divisée : image du produit à droite, titre et deux puces à gauche, avec une couleur d’arrière-plan pleine largeur au lieu d’une image.”
Fudge génère le code sous forme de brouillon. Vérifiez-le et publiez-le quand il vous convient.
FAQ
Une image statique unique est généralement plus performante pour la conversion. Les diaporamas divisent l'attention entre plusieurs messages, ralentissent le premier affichage (first paint) et la plupart des acheteurs ne voient pas au-delà de la première diapositive avant de faire défiler la page. N'utilisez un diaporama que si vous avez véritablement plusieurs campagnes d'importance égale en cours simultanément.
Une bannière de taille moyenne (environ 60 à 80 % de la hauteur de l'écran) donne généralement de meilleurs résultats qu'une bannière pleine page. Les bannières en plein écran masquent le reste de votre contenu sous la ligne de flottaison, ce qui nuit à la profondeur de défilement et à la découverte des produits. Testez les formats moyen et petit pour votre catégorie — le prêt-à-porter bénéficie souvent de bannières plus grandes ; les produits type SaaS de bannières plus petites.
Pas nativement dans l'Éditeur de thème. L'approche la plus propre : indiquez la date de lancement à Fudge et il générera un conteneur Liquid conditionnel qui activera la bannière à la date et l'heure prévues — aucun changement manuel n'est nécessaire le jour J. Alternative : utilisez une application de planification Shopify qui contrôle la visibilité des sections par date, ou dupliquez le thème et publiez-le manuellement.
La hauteur de la bannière ne suffit pas pour afficher le titre + le sous-titre + le bouton. Réduisez la longueur du texte, passez à une hauteur de bannière « Petite » sur mobile (certains thèmes ont des paramètres de hauteur distincts pour ordinateur et mobile), ou déplacez le bouton sous la bannière à l'aide d'une section distincte.
Oui, avec quelques réserves. Les navigateurs exigent que les vidéos soient en silencieux pour la lecture automatique (autoplay) — concevez-les pour être regardées sans le son. Utilisez-les uniquement comme arrière-plans d'ambiance où le message se trouve dans le texte superposé, pas dans l'audio. La lecture automatique de longues vidéos avec le son est bloquée par les navigateurs et ne se chargerait de toute façon pas.
Article connexe : Fudge Store Editor.
Article connexe : Accélérer un thème Shopify.
Article connexe : Ajouter un bouton dans Shopify.
Article connexe : Remplacer les images d’arrière-plan de la section Hero dans Shopify.