À retenir
- Allez dans Boutique en ligne > Thèmes > Personnaliser > cliquez sur la section hero ou bannière > modifiez l’image de fond.
- La section hero s’appelle généralement “Bannière d’image”, “Hero” ou “Diaporama” selon votre thème.
- Ajoutez un overlay sombre si vous avez du texte par-dessus l’image - ça améliore considérablement la lisibilité.
- Taille d’image recommandée : 2560 x 1440px, compressée à moins de 1 Mo.
Pour remplacer l’image de fond du hero dans Shopify, ouvrez Boutique en ligne > Thèmes > Personnaliser, cliquez sur la section Bannière d’image (ou Hero), choisissez Modifier l’image, sélectionnez ou uploadez la nouvelle image et enregistrez.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons aussi Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store.
Comment changer l’image d’arrière-plan du hero
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Vous atterrirez sur la page d’accueil par défaut. Si le hero est sur une autre page, naviguez-y en utilisant le sélecteur de page en haut.
Étape 3. Dans la barre latérale gauche, trouvez la section hero. Elle peut s’appeler :
- Bannière d’image
- Image hero
- Diaporama
- Image en pleine largeur
Cliquez dessus.
Étape 4. Dans le panneau des paramètres, trouvez le champ Image. Cliquez sur Sélectionner une image ou Modifier l’image.
Étape 5. Choisissez une image dans votre bibliothèque de fichiers Shopify, ou uploadez-en une nouvelle directement.
Étape 6. Cliquez sur Enregistrer.
Pour les paramètres de texte, de bouton et de diaporama de la bannière, consultez comment changer la bannière de la page d’accueil sur Shopify.
Spécifications d’image recommandées
Avoir les bonnes spécifications techniques fait une vraie différence sur l’apparence et le chargement du hero :
Largeur : 2560px de large (2560 x 1440px pour une bannière 16:9). 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 fixe - généralement 16:9, 2:1 ou 3:1 pour les bannières larges. Vérifiez les paramètres de proportions de votre thème et recadrez votre image pour qu’elle corresponde avant de l’uploader.
Format : WebP ou JPEG pour les photos. Évitez le PNG pour les grands fonds photographiques (la taille des fichiers devient très importante).
Taille du fichier : Compressez à moins de 1 Mo. Une image hero qui charge lentement donne une mauvaise première impression et nuit aux scores Core Web Vitals. Pour savoir comment la compresser, consultez comment compresser les images sur Shopify.
Si votre hero est chargé en lazy-loading par votre thème (un avertissement Lighthouse courant), consultez Corriger l’eager loading de la bannière hero sur Shopify.
Ajouter un overlay sombre pour la lisibilité du texte
Si vous avez du texte (titre, sous-titre, bouton CTA) superposé sur l’image hero, la lisibilité est cruciale. Un texte blanc sur un fond clair est illisible.
La plupart des thèmes Shopify incluent un paramètre d’overlay (superposition) directement dans la section Bannière d’image :
- Cherchez les champs “Couleur de superposition” et “Opacité de la superposition”
- Un overlay noir à 30-50% d’opacité est généralement suffisant pour rendre le texte blanc lisible sans trop masquer l’image
- Ajustez en fonction de la luminosité de votre image
Si votre thème n’a pas d’option d’overlay intégrée, on peut l’ajouter via CSS. Vous pouvez décrire le style exact à Fudge, l’opérateur IA pour les boutiques Shopify : “Ajoute un overlay sombre de 40% à la section image hero sur la page d’accueil.” Fudge écrit le CSS dans votre thème et vous montre un brouillon avant de publier.
Pour ajouter d’autres sections autour du hero, consultez comment ajouter des sections sur la page d’accueil de 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 (Horizon et beaucoup de thèmes payants) offrent une option de fond vidéo dans la section hero ; la Bannière d’image de Dawn ne le fait pas. Vérifiez les paramètres de la section pour voir s’il y a un champ vidéo ou vidéo de fond.
Si votre thème ne le supporte pas nativement, un fond vidéo hero peut être ajouté via le code. Décrivez-le à Fudge : “Remplace le fond du hero de la page d’accueil par une vidéo MP4 en boucle. Garde le titre et le bouton CTA par-dessus. Utilise l’image existante en fallback sur mobile.” Une vidéo alourdit votre page la plus visitée, donc avant de publier le brouillon, demandez aussi à Fudge un audit de vitesse de la page d’accueil.
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
Quelle est la bonne taille d'image pour un fond hero Shopify ?
2560px de large : 2560 x 1440px pour une bannière 16:9, ou environ 2560 x 1280px pour une bannière 2:1 plus courte. Gardez la taille du fichier sous 1 Mo après compression.
Dois-je utiliser du JPEG, PNG ou WebP pour le hero Shopify ?
Un JPEG ou WebP de haute qualité. Le CDN de Shopify convertit et redimensionne les uploads pour chaque navigateur, donc les deux fonctionnent. Évitez le PNG pour les photos hero — les fichiers sont généralement 3 à 5 fois plus lourds qu'un JPEG/WebP équivalent sans gain de qualité visible.
Pourquoi mon image hero Shopify charge-t-elle lentement ?
Trois causes habituelles : (1) le fichier source est trop lourd (compressez à moins de 1 Mo), (2) le hero est chargé en lazy-loading alors qu'il ne devrait pas l'être (le hero est l'élément LCP — il doit charger en eager loading), ou (3) l'image est servie dans une résolution bien plus grande que celle affichée. Vérifiez l'onglet Réseau (Network) pour voir la taille du fichier servi.
Puis-je avoir des images hero différentes selon les marchés ou les pays ?
Oui, via Shopify Markets ou les variantes de modèles. Markets permet de personnaliser la vitrine par marché. Pour un contrôle plus fin, décrivez ce que vous voulez à Fudge ("montre cette image hero aux visiteurs UK et une autre aux visiteurs US/CA") et il créera une section avec un rendu conditionnel basé sur localization.country.iso_code. Alternative : géolocalisation du client via JavaScript.
Dois-je utiliser une image hero ou une vidéo hero pour ma page d'accueil Shopify ?
L'image en priorité pour la plupart des boutiques — plus rapide, moins cher, prévisible. La vidéo vaut le coup pour le lifestyle/mode/cosmétiques où le mouvement apporte une vraie valeur (texture, coupe, ambiance). Prévoyez toujours une image poster, coupez le son par défaut (requis pour l'autoplay des navigateurs), et pensez aux coûts de données mobiles. Une mauvaise vidéo est pire que pas de vidéo.
