Points clés à retenir
- Changez votre image d’en-tête 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 mobile — vérifiez toujours et configurez-la aussi.
- Fudge peut mettre à jour votre image d’en-tête et sa mise en page en même temps si vous souhaitez des changements de design en plus du remplacement.
Pour changer l’image d’en-tête dans Shopify, allez dans Boutique en ligne → Thèmes → Personnaliser, cliquez sur la section Bannière d’image (ou Hero) sur la page d’accueil, remplacez l’image et enregistrez. Cela prend environ deux minutes.
Pourquoi nous faire confiance
Jacques a plus de 15 ans d’expérience en développement et a aidé de nombreuses marques Shopify avec leurs boutiques. Nous construisons Fudge, l’opérateur IA pour les 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 naviguer vers la page d’accueil.
Étape 3. Dans la barre latérale gauche, cherchez une section appelée Bannière d’image, Hero, Diaporama 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 pour afficher votre bibliothèque multimédia.
Étape 6. Sélectionnez une image existante dans votre bibliothèque, ou cliquez sur Télécharger pour ajouter un nouveau fichier.
Étape 7. Enregistrez.
Votre nouvelle image d’en-tête est maintenant en ligne.
Pour les paramètres du texte de la bannière, du bouton et du diaporama, découvrez comment changer la bannière de la page d’accueil dans Shopify.
Vous ne trouvez pas la section hero dans l’éditeur de thème ?
Si vous ne trouvez pas la section hero dans la barre latérale, cliquez sur l’image d’en-tête dans l’aperçu. Cela sélectionne la section et ouvre ses paramètres.
Dans les thèmes avec un diaporama en guise de hero, chaque diapositive est un bloc distinct. Cliquez sur le bloc de la diapositive individuelle pour modifier l’image de cette diapositive.
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 | JPEG de haute qualité ou WebP |
| Profil colorimétrique | sRGB |
Pourquoi 2560 x 1440px ? Cela couvre l’écran de bureau standard le plus large. Shopify sert automatiquement des versions réduites pour les écrans plus petits via son CDN - une grande image source gère donc toutes les tailles d’écran.
Gardez-la sous 1 Mo. Les images d’en-tête sont presque toujours l’élément LCP (Largest Contentful Paint) de la page. Un fichier volumineux nuit directement à votre score de vitesse de page et à votre taux de conversion.
Le JPEG ou le WebP fonctionnent tous les deux. Le CDN de Shopify convertit et redimensionne les images importées pour chaque navigateur, alors importez un JPEG ou WebP de haute qualité et gardez-le en dessous de 1 Mo.
Vous ne savez toujours pas quoi mettre ou à quoi devrait ressembler votre section hero ? Notre outil gratuit de refonte de site Shopify génère trois directions de 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 titre, le sous-titre et le bouton sont des blocs séparés à l’intérieur de la section.
Cliquez sur la section → cherchez les blocs Titre, Sous-titre 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 la lisibilité sur une nouvelle image), cherchez l’option Couleur du texte ou Jeu de couleurs dans les paramètres de la section.
Comment utiliser Fudge pour mettre à jour la section hero
Si vous remplacez une image d’en-tête et souhaitez également modifier la mise en page (une opacité de superposition différente, un nouveau positionnement du texte, l’ajout d’éléments comme un badge d’avis ou un compte à rebours), décrivez-le à Fudge, l’opérateur IA pour les boutiques Shopify :
“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 rédige les modifications dans votre thème sous forme de brouillon avec un aperçu fonctionnel, et rien n’est mis en ligne tant que vous ne l’avez pas approuvé. Une fois le nouveau hero publié, Fudge vous montre le taux de conversion de votre page d’accueil avant et après le changement.
FAQ
Mon image hero affecte-t-elle le SEO de Shopify ?
Indirectement. Le hero est presque toujours l'élément LCP (Largest Contentful Paint), donc la taille de son fichier affecte directement les Signaux Web essentiels (Core Web Vitals) — que Google utilise comme critère de classement mineur. Un hero trop lourd (plusieurs Mo) peut faire chuter le LCP dans la catégorie « médiocre » et nuire à votre classement. Gardez-le en dessous de 1 Mo.
Pourquoi mon image hero est-elle rognée de façon gênante sur mobile ?
La plupart des hero sont au format paysage (ex. 2560x1440), mais les écrans mobiles sont en mode portrait. Le rognage provient du paramètre object-position de la section, qui est centré par défaut. Vous pouvez soit importer une image mobile distincte (certains thèmes le permettent, dont Horizon), soit décrire ce que vous voulez à Fudge ("montre cette image hero rognée sur le tiers droit sur mobile") et il ajoutera le bon CSS object-position limité au mobile.
Dois-je utiliser le format JPEG ou WebP pour mon hero Shopify ?
L'un ou l'autre. Le CDN de Shopify convertit et redimensionne les images importées pour chaque navigateur, alors importez un JPEG ou WebP de haute qualité et gardez-le en dessous de 1 Mo. Shopify réencode chaque taille qu'il sert, donc un WebP fortement pré-compressé peut perdre en qualité lors du deuxième encodage.
Le texte alternatif (alt) 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é de manière naturelle, sans bourrage. 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 fixe ?
Oui, si votre thème dispose d'une section vidéo hero ou de vidéo en arrière-plan (Horizon et de nombreux thèmes payants le font ; la section Vidéo de Dawn nécessite un clic pour lire). Les hero vidéo augmentent l'engagement pour les catégories lifestyle et mode, mais ajoutent 1 à 3 Mo de poids même compressés — ce qui est important sur les connexions plus lentes. Utilisez-les avec parcimonie, coupez le son par défaut (les navigateurs l'exigent pour la lecture automatique) et prévoyez une image de couverture fixe pour les réseaux lents.
