Comment changer la hero image sur Shopify (2026)

À retenir

• Changez votre hero image dans le Theme Editor : Boutique en ligne → Thèmes → Personnaliser → trouvez la section Image banner 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 la version mobile — pensez toujours à la vérifier et à la configurer.
• Fudge peut mettre à jour votre hero image et votre layout en même temps si vous souhaitez des changements de design en plus du remplacement.

Votre hero image est la première chose que les visiteurs voient. La changer est l’une des mises à jour visuelles les plus impactantes que vous puissiez faire, et cela prend moins de deux minutes dans le Theme Editor.

Pourquoi nous faire confiance

Jacques a plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de storefront IA utilisé par des centaines de boutiques Shopify, avec une note de 5.0 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

Pourquoi 2560 x 1440px ? Cela couvre les écrans d’ordinateur standards les plus larges. Shopify affiche automatiquement des versions réduites pour les écrans plus petits via son CDN - une grande image source permet donc de s’adapter à toutes les tailles d’écran.

Restez sous la barre des 1 Mo. Les hero images sont presque toujours l’élément LCP (Largest Contentful Paint) de la page. Un fichier trop lourd nuit directement à votre temps de chargement (page speed) 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.

Comment configurer une hero image distincte sur mobile

De nombreux thèmes prennent en charge une image mobile dédiée pour la section hero. C’est important, car une image au format paysage de 2560 x 1440px est souvent mal recadrée sur les écrans mobiles au format portrait.

Dans les paramètres de la section hero, cherchez le champ Image mobile sous le sélecteur d’image principal. Importez une version recadrée au format portrait de votre hero image - généralement autour de 750 x 1000px.

Si votre thème n’a pas de champ spécifique pour l’image mobile, l’image principale sera recadrée ou redimensionnée selon la propriété 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 remplacez une hero image et que vous souhaitez aussi modifier le layout (opacité de l’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 révisez et approuvez avant que quoi que ce soit ne soit mis en ligne.