À retenir
- Modifiez votre image hero dans l’éditeur de thème : Boutique en ligne → Thèmes → Personnaliser → trouvez la section Bannière d’image ou Hero → cliquez sur l’image pour la remplacer.
- Taille recommandée : 2560 x 1440px, moins de 1 Mo, au format WebP ou JPEG.
- La plupart des thèmes vous permettent de définir une image distincte pour le mobile — vérifiez toujours et configurez-la également.
- Fudge peut mettre à jour votre image hero et votre mise en page simultanément si vous souhaitez modifier le design en plus du remplacement.
Votre image hero est la première chose que voient vos visiteurs. La modifier est l’une des mises à jour visuelles les plus percutantes que vous puissiez faire, et cela prend moins de deux minutes dans l’éditeur de thème.
Pourquoi nous faire confiance
Jacques a plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de vitrine IA utilisé par des centaines de boutiques Shopify, avec une note de 4.9 sur le Shopify App Store.
Comment changer la hero image sur Shopify
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. La page d’accueil est généralement la vue par défaut. Sinon, utilisez le sélecteur de page en haut pour y naviguer.
Étape 3. Dans la barre latérale gauche, cherchez une section appelée Image banner, Hero, Diaporama (Slideshow) ou similaire. Le nom varie selon le thème.
Étape 4. Cliquez sur cette section pour ouvrir ses paramètres.
Étape 5. Cliquez sur la miniature de l’image actuelle (ou sur la zone de téléchargement d’image). Un sélecteur de fichiers s’ouvre, affichant votre bibliothèque multimédia.
Étape 6. Sélectionnez une image existante dans votre bibliothèque, ou cliquez sur Ajouter (ou Upload) pour ajouter un nouveau fichier.
Étape 7. Enregistrez.
Votre nouvelle hero image est maintenant en ligne.
Articles liés : L’éditeur de boutique Fudge.
Articles liés : Ajouter un lien à une image sur Shopify.
Articles liés : Compresser des images sur Shopify.
Pour une approche similaire, consultez comment changer la bannière de la page d’accueil sur Shopify.
Comment changer la photo de mon Hero ?
Si vous ne trouvez pas la section hero dans la barre latérale, essayez de cliquer directement sur la hero image dans l’aperçu à droite. Cela sélectionne la section et ouvre ses paramètres dans le panneau de gauche.
Dans les thèmes avec un hero sous forme de diaporama (slideshow), chaque diapositive est un bloc distinct. Cliquez sur le bloc de la diapositive en question pour modifier son image.
Spécifications recommandées pour une hero image
| Spécification | Valeur recommandée |
|---|---|
| Dimensions | 2560 x 1440px |
| Taille du fichier | Moins de 1 Mo |
| Format | WebP (préféré) ou JPEG |
| Profil colorimétrique | sRGB |
Pourquoi 2560 x 1440px ? Cela couvre les écrans d’ordinateur standard les plus larges. Shopify diffuse automatiquement des versions réduites pour les plus petits écrans via son CDN - une grande image source s’adapte donc à toutes les tailles d’écran.
Maintenez la taille sous 1 Mo. Les images hero sont presque toujours l’élément LCP (Largest Contentful Paint) de la page. Un fichier volumineux nuit directement au score de vitesse de votre page et à votre taux de conversion.
Utilisez le format WebP. Shopify convertit automatiquement les images importées en WebP pour les navigateurs compatibles, mais partir d’une source WebP donne les meilleurs résultats.
Vous ne savez toujours pas ce que votre section hero devrait dire ou à quoi elle devrait ressembler ? Notre outil de refonte de site Shopify gratuit génère trois pistes pour votre page d’accueil à partir de vos vrais produits, section hero incluse.
Comment configurer une hero image distincte sur mobile
Certains thèmes prennent en charge une image mobile dédiée pour la section hero - c’est le cas du thème Horizon de Shopify, mais pas de Dawn. C’est important car une image au format paysage de 2560 x 1440 px est souvent mal recadrée sur les écrans mobiles au format portrait. Notre guide des tailles d’images Shopify explique pourquoi ce recadrage se produit et liste les tailles pour chaque type d’image.
Dans les paramètres de la section hero, cherchez le champ Image mobile sous le sélecteur d’image principal. Téléversez une version portrait de votre image hero - généralement autour de 750 x 1000 px.
Si votre thème n’a pas de champ distinct pour l’image mobile, l’image principale sera recadrée ou redimensionnée selon le paramètre CSS object-position de la section. Vous pouvez ajuster cela via le code ou avec Fudge.
Comment modifier le texte et le bouton de la hero image
Le texte de la hero image (titre, sous-titre et bouton) est constitué de blocs séparés à l’intérieur de la section.
Cliquez sur la section → cherchez les blocs Titre (Heading), Sous-titre (Subheading) et Bouton dans la barre latérale gauche sous le nom de la section. Cliquez sur chaque bloc pour modifier le texte et le lien.
Pour changer la couleur du texte (pour plus de lisibilité sur une nouvelle image), cherchez l’option Couleur du texte ou Jeu de couleurs (Color scheme) dans les paramètres de la section.
Comment utiliser Fudge pour mettre à jour la section hero
Si vous changez d’image hero et que vous souhaitez aussi modifier la mise en page - opacité d’overlay différente, nouveau positionnement du texte, ajout d’éléments comme un badge d’avis ou un compte à rebours - décrivez-le à Fudge:
“Mets à jour le hero de ma page d’accueil avec la nouvelle image de bannière et déplace le titre vers la gauche. Ajoute une note par étoiles avec ‘4,8 sur 1 200 avis’ sous le sous-titre.”
Fudge génère les modifications sous forme de brouillon dans votre thème. Vous vérifiez et approuvez avant la mise en ligne.
FAQ
Mon image hero affecte-t-elle le SEO Shopify ?
Indirectement. L'image hero est presque toujours l'élément Largest Contentful Paint (LCP). Sa taille de fichier affecte donc directement les Core Web Vitals — que Google utilise comme un léger signal de classement. Une image hero trop lourde (plusieurs Mo) peut faire chuter le LCP dans la catégorie "médiocre" et nuire au classement. Gardez-la sous la barre de 1 Mo et utilisez le format WebP.
Pourquoi mon image hero est-elle mal recadrée sur mobile ?
La plupart des images hero sont au format paysage (ex. 2560x1440), mais les écrans mobiles sont au format portrait. Le recadrage provient du paramètre object-position de la section, qui est centré par défaut. Soit vous téléversez une image mobile distincte (certains thèmes le permettent, dont Horizon), soit vous décrivez ce que vous voulez à Fudge ("afficher cette image hero recadrée sur le tiers droit sur mobile") et il ajoutera le bon CSS object-position appliqué uniquement au mobile.
Dois-je utiliser du JPEG ou du WebP pour mon image hero Shopify ?
Le WebP. Il est généralement 25 à 35 % plus léger que le JPEG à qualité équivalente et est pris en charge par tous les navigateurs modernes. Shopify convertit automatiquement les images téléversées en WebP pour les clients compatibles, mais partir d'une source WebP préserve davantage la qualité et évite une étape de transcodage.
Le texte alternatif d'une image hero est-il important ?
Oui — pour l'accessibilité (lecteurs d'écran) et le SEO des images. Utilisez une phrase descriptive qui inclut un mot-clé naturellement, sans sur-optimisation. Exemple : "Femme portant le manteau en laine Aurora dans un col de montagne enneigé" plutôt que "image hero" ou "meilleurs manteaux d'hiver Shopify".
Puis-je utiliser une vidéo comme hero au lieu d'une image statique ?
Oui, si votre thème le prend en charge (Dawn, Sense et la plupart des thèmes modernes le font). Les vidéos en hero augmentent l'engagement pour les catégories lifestyle et vêtements, mais ajoutent 1 à 3 Mo de poids même lorsqu'elles sont compressées — ce qui se ressent sur les connexions lentes. Utilisez-les avec parcimonie, coupez le son par défaut (les navigateurs l'exigent pour la lecture automatique), et prévoyez une image fixe de remplacement sur les réseaux lents.
