À retenir
- Allez dans Boutique en ligne > Thèmes > Personnaliser > cliquez sur la bannière ou la section hero > modifiez l’image d’arrière-plan.
- La section hero est généralement appelée “Bannière d’image”, “Hero” ou “Diaporama” selon votre thème.
- Ajoutez un overlay sombre si vous avez du texte par-dessus l’image - cela améliore considérablement la lisibilité.
- Taille d’image recommandée : 2000 px de large, compressée à moins de 500 Ko.
Votre image hero est la première chose que la plupart des visiteurs voient. La changer via l’Éditeur de thème prend moins d’une minute. Voici exactement comment procéder.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique par IA noté 5.0 sur l’App Store de Shopify.
Comment changer l’image d’arrière-plan du hero
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Vous arrivez par défaut sur la page d’accueil. Si votre hero se trouve sur une autre page, naviguez vers celle-ci grâce au sélecteur de page situé en haut.
Étape 3. Dans la barre latérale gauche, trouvez la section hero. Elle peut être nommée :
- Bannière d’image (Image banner)
- Image hero
- Diaporama (Slideshow)
- Image pleine largeur (Full-width image)
Cliquez dessus.
Sur le même sujet : Éditeur de boutique Fudge.
Sur le même sujet : Changer la bannière de la page d’accueil sur Shopify.
Étape 4. Dans le panneau des paramètres, trouvez le champ Image. Cliquez sur Sélectionner une image ou Changer d’image.
Étape 5. Choisissez une image depuis la bibliothèque de fichiers de votre Shopify, ou téléversez-en une nouvelle directement.
Étape 6. Cliquez sur Enregistrer.
Spécifications d’image recommandées
Bien configurer les spécifications techniques fait une vraie différence sur l’apparence et le temps de chargement de votre hero :
À lire aussi : Compresser des images sur Shopify.
Largeur : 2000 à 2400 px est la norme pour les images hero en pleine largeur. Le CDN de Shopify sert des versions responsives, mais l’image source doit être assez large pour rester nette sur les grands écrans.
Hauteur : La plupart des thèmes affichent le hero avec un ratio d’aspect fixe — généralement 16:9, 2:1 ou 3:1 pour les bannières au format large. Vérifiez les paramètres de ratio de votre thème et recadrez votre image pour la faire correspondre avant de l’uploader.
Format : WebP ou JPEG pour les photos. Évitez le PNG pour les grands arrière-plans photographiques (les tailles de fichiers deviennent très lourdes).
Poids du fichier : Compressez à moins de 500 Ko. Une image hero qui charge lentement donne une mauvaise première impression et nuit aux scores Core Web Vitals.
Si votre hero est chargé en lazy-loading par votre thème (un avertissement Lighthouse courant), consultez Corriger le problème de chargement (Eager Loading) des bannières Hero sur Shopify.
Ajouter un overlay sombre pour la lisibilité du texte
Si du texte (titre, sous-titre, bouton CTA) est superposé sur votre image hero, la lisibilité est cruciale. Un texte blanc sur fond clair est illisible.
La plupart des thèmes Shopify intègrent une option overlay (superposition) directement dans la section Bannière d’image :
- Cherchez les champs “Couleur de la superposition” et “Opacité de la superposition”.
- Un overlay noir à 30-50 % d’opacité est souvent suffisant pour rendre le texte blanc lisible sans masquer l’image outre mesure.
- Ajustez selon la clarté de votre image.
Si votre thème ne propose pas d’option d’overlay intégrée, vous pouvez l’ajouter via CSS. Vous pouvez décrire le style exact à Fudge : “Ajoute un overlay noir de 40% sur l’image hero de la homepage.” Fudge génèrera le code et vous montrera un aperçu avant de publier.
Sur le même sujet : Ajouter des sections à la page d’accueil sur Shopify.
Diaporama vs image hero unique
Certains thèmes utilisent un diaporama (slideshow) pour le hero pour faire défiler plusieurs images automatiquement. Si vous voyez une section diaporama :
- Chaque slide possède son propre réglage d’image — cliquez sur la slide concernée pour changer son image.
- Vous pouvez ajouter ou supprimer des slides de la section.
- La vitesse d’autoplay et le style de transition sont généralement configurables dans les réglages de la section.
Pour la majorité des boutiques, une bonne image unique surperforme un diaporama. Les carrousels diluent l’attention et la deuxième ou troisième slide est rarement vue par les visiteurs. Si vous utilisez un diaporama, envisagez de simplifier pour n’avoir qu’une seule image hero.
Utiliser une vidéo en arrière-plan du hero
Certains thèmes prennent en charge une vidéo en arrière-plan pour la section hero au lieu d’une image statique. Cherchez un onglet “Vidéo” ou l’option “Vidéo d’arrière-plan” au sein de ces mêmes réglages de section.
Si votre thème ne le gère pas nativement, un background vidéo hero peut être ajouté via le code. Il suffit de le décrire à Fudge : “Remplace le background du hero de la homepage par une vidéo MP4 en boucle. Garde le titre et le CTA par-dessus. Affiche l’ancienne image sur mobile.”
Images hero sur les sous-pages
Les étapes ci-dessus s’appliquent à n’importe quelle page comportant une section hero ou une bannière, et pas seulement la page d’accueil. Naviguez jusqu’à la page concernée dans l’Éditeur de thème (collections, pages, landing pages) et suivez le même processus pour y mettre à jour l’image hero.
FAQ
La norme est de 2000 à 2400 pixels de large. Au-delà de 2400 px, cela alourdit le fichier sans gain visuel sur la plupart des écrans. La hauteur varie selon le ratio : 16:9 pour les bannières larges (1125 à 1350 px de haut), 2:1 pour les bannières plus courtes (1000 à 1200 px). Gardez la taille du fichier en dessous de 500 Ko après compression.
WebP en priorité. Il est généralement 25 à 35 % plus léger que le JPEG à qualité équivalente, et le CDN de Shopify convertit automatiquement les fichiers quand c'est supporté. Le JPEG sert de solution de repli pour les photos. Évitez le PNG pour les photos hero — les fichiers sont généralement 3 à 5 fois plus volumineux que le JPEG/WebP équivalent sans aucun gain de qualité visible.
Trois causes fréquentes : (1) le fichier source est trop lourd (compressez-le à moins de 500 Ko), (2) l'image hero est en lazy-loading alors qu'elle ne devrait pas l'être (elle correspond à l'élément LCP — elle doit se charger en priorité), ou (3) l'image est servie dans une résolution beaucoup plus grande que son affichage. Vérifiez l'onglet Réseau (Network) pour voir la taille du fichier servi.
Oui, via Shopify Markets ou les variantes de modèles (templates). Markets permet de personnaliser la boutique marché par marché. Pour un contrôle plus précis, décrivez ce que vous voulez à Fudge ("montrer cette image hero aux visiteurs britanniques et une autre aux visiteurs américains/canadiens") et il vous crée une section qui s'affiche de manière conditionnelle en fonction de localization.country.iso_code. Alternative : la géolocalisation des clients via JavaScript.
Une image pour la plupart des boutiques : c'est plus rapide, moins cher et prévisible. La vidéo est intéressante pour le lifestyle/les vêtements/les cosmétiques, là où le mouvement apporte une vraie valeur (texture, coupe, ambiance). Prévoyez toujours une image de couverture (poster), mettez la vidéo en sourdine par défaut (requis par les navigateurs pour l'autoplay), et pensez au coût des données mobiles. Une mauvaise vidéo est pire que pas de vidéo du tout.
À lire aussi : Ajouter une bannière à une page de collection Shopify.