À retenir
- Allez dans Boutique en ligne > Thèmes > Personnaliser > cliquez sur la section hero ou bannière > 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 affiché au-dessus de 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 voient la plupart de vos visiteurs. La modifier via l’Éditeur de thème prend moins d’une minute. Voici la marche à suivre exacte.
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
Quelle est la bonne taille d’image pour un arrière-plan hero sur Shopify ?
Une largeur de 2000 à 2400 px est la norme. Au-delà de 2400 px, cela alourdit le fichier sans avantage visuel sur la plupart des écrans. La hauteur varie selon le ratio d’aspect : 16:9 pour les bannières larges (1125 à 1350 px de haut), 2:1 pour les bannières plus courtes (1000 à 1200 px). Gardez un poids de fichier inférieur à 500 Ko après compression.
Vaut-il mieux utiliser du JPEG, du PNG ou du WebP pour l’image hero Shopify ?
Le 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 uploads quand le format est supporté. Le JPEG sert de fallback (solution de repli) pour le contenu photographique. Évitez le PNG pour les photos hero : les fichiers sont généralement 3 à 5 fois plus volumineux qu’un JPEG ou WebP équivalent sans différence de qualité visible.
Pourquoi mon image hero Shopify charge-t-elle lentement ?
Trois causes courantes : (1) le fichier source est trop lourd (compressez à moins de 500 Ko), (2) l’image hero est lazy-loadée alors qu’elle ne devrait pas l’être (le hero est l’élément LCP — il doit se charger en eager loading, de façon prioritaire), ou (3) l’image est servie dans une résolution beaucoup plus grande que celle qui est affichée. Vérifiez l’onglet Network (Réseau) de votre navigateur pour voir le poids final affiché pour le visiteur.
Puis-je avoir des images hero différentes selon les marchés ou les pays ?
Oui, via Shopify Markets ou les variantes de templates. Markets permet de personnaliser la vitrine marché par marché. Pour un contrôle plus minutieux, décrivez ce que vous voulez à Fudge (“afficher cette image hero pour les visiteurs du Royaume-Uni et une différente pour les visiteurs US/CA”) et il créera une section qui s’affiche conditionnellement selon le localization.country.iso_code. Alternative : utiliser la géolocalisation de vos clients via JavaScript.
Dois-je utiliser une image ou une vidéo hero pour ma page d’accueil Shopify ?
L’image en premier pour la majorité des boutiques, car c’est plus rapide, moins cher et prévisible. La vidéo vaut le coup pour l’habillement, le lifestyle ou les cosmétiques, là où le mouvement apporte une vraie valeur (texture, tombé d’un vêtement, ambiance). Prévoyez toujours une image poster, désactivez le son par défaut (requis par les navigateurs pour l’autoplay), et gardez en tête le coût des données sur mobile. Une vidéo de mauvaise qualité est pire que pas de vidéo du tout.
À lire aussi : Ajouter une bannière à une page de collection Shopify.