À 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 choisir vos specs techniques fait une vraie différence sur l’apparence et le temps de chargement de votre hero :
Sur le même sujet : Compresser des images sur Shopify.
Largeur : 2000 à 2400 px est la norme pour les images hero en pleine largeur. Le CDN de Shopify diffuse des versions responsive, 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 ratio de votre thème et recadrez votre image en conséquence avant le téléversement.
Format : WebP ou JPEG pour les photos. Évitez le PNG pour les grands arrière-plans photographiques (les tailles de fichiers deviennent vite énormes).
Taille de fichier : Compressez à moins de 500 Ko. Une image hero qui charge lentement donne une mauvaise première impression et nuit à vos scores Core Web Vitals.
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 à toutes vos pages contenant une section hero ou bannière, et pas seulement à la page d’accueil. Allez sur la page correspondante dans l’Éditeur de thème (collections, pages, landing pages) et suivez exactement le même process pour y mettre à jour l’image hero.
Sur le même sujet : Ajouter une bannière à une page de Collection Shopify.