À 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 est généralement appelée “Bannière d’image”, “Hero” ou “Diaporama” selon votre thème.
- Ajoutez une superposition sombre si vous avez du texte par-dessus l’image - cela améliore considérablement la lisibilité.
- Taille d’image recommandée : 2000px de large, compressée à moins de 500 Ko.
Votre image hero est la première chose que la plupart des visiteurs voient. La modifier via l’Éditeur de thème prend moins d’une minute. Voici exactement comment faire.
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 avec une note de 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, accédez-y à l’aide du sélecteur de page en haut.
Étape 3. Dans la barre latérale gauche, trouvez la section hero. Elle peut être nommée :
- Bannière d’image
- Image hero
- Diaporama
- Image en pleine largeur
Cliquez dessus.
À lire aussi : Éditeur de boutique Fudge.
À lire aussi : Changer la bannière de la page d’accueil sur Shopify.
Étape 4. Dans le panneau de configuration, 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 importez-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
Une largeur de 2000 à 2400 pixels est standard. Une largeur supérieure à 2400 pixels 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 pixels de haut), 2:1 pour les bannières plus courtes (1000 à 1200 pixels). Gardez la taille du fichier en dessous de 500 Ko après compression.
Le WebP en premier. Il est généralement 25 à 35 % plus petit que le JPEG à qualité équivalente, et le CDN de Shopify convertit automatiquement les images importées là où il est pris en charge. Le JPEG sert de solution de repli pour le contenu photographique. Évitez le PNG pour les photos hero — les tailles de fichiers sont généralement 3 à 5 fois plus grandes que le JPEG/WebP équivalent sans avantage visuel au niveau de la qualité.
Trois causes habituelles : (1) le fichier source est trop volumineux (compressez-le à moins de 500 Ko), (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 être chargé en priorité), ou (3) l'image est servie à une résolution bien supérieure à celle affichée. Vérifiez l'onglet Réseau (Network) pour voir la taille du fichier servi.
Oui, via Shopify Markets ou les variantes de modèles. Markets permet une personnalisation de la vitrine par marché. Pour un contrôle plus fin, décrivez ce que vous voulez à Fudge ("montrer cette image hero aux visiteurs britanniques et une différente aux visiteurs américains/canadiens") et il créera une section qui s'affiche conditionnellement en fonction de localization.country.iso_code. Alternative : la géolocalisation des clients via JavaScript.
L'image en premier pour la plupart des boutiques — plus rapide, moins chère, prévisible. La vidéo vaut le coup pour le lifestyle/les vêtements/les cosmétiques où le mouvement apporte une valeur ajoutée claire (texture, coupe, ambiance). Fournissez toujours une image de couverture (poster image), coupez le son par défaut (exigence d'autoplay des navigateurs), et tenez compte des coûts de 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.