Ce qu’il faut retenir
- La méthode la plus rapide : définir une image de collection dans Produits > Collections - la plupart des thèmes l’affichent comme bannière.
- Pour une section d’en-tête personnalisée sur toutes les pages de collection, passez par l’Éditeur de thème > modèle de Collection.
- Pour des bannières uniques par collection, utilisez les méta-champs de collection pour stocker une image spécifique par collection.
- Une bannière avec le titre et la description de la collection améliore le SEO et la qualité de la page.
Une bannière en haut d’une page de collection donne le ton visuel, indique clairement la catégorie et vous offre de l’espace pour du texte riche en mots-clés. Voici comment en ajouter une.
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 IA noté 5,0 sur le Shopify App Store.
Méthode 1 - Définir une image de collection (la plus simple)
Chaque collection Shopify dispose d’un champ facultatif image de la collection. La plupart des thèmes affichent cette image sous forme de bannière en haut de la page de collection.
Étape 1. Allez dans Produits > Collections.
Étape 2. Cliquez sur la collection à laquelle vous souhaitez ajouter une bannière.
Étape 3. Dans la section Image de la collection (généralement sur le côté droit de l’éditeur), cliquez sur Ajouter une image et uploadez votre image de bannière.
Étape 4. Enregistrez.
L’image s’affiche désormais en haut de cette page de collection. La disposition exacte (pleine largeur, encadrée, ou avec du texte superposé) dépend de votre thème.
Cette méthode configure une bannière par collection sans avoir besoin de coder. L’inconvénient est que vous avez un contrôle limité sur la mise en page - vous utilisez ce que le thème fait avec l’image de la collection par défaut.
À lire aussi : Ajouter un texte alternatif (Alt Text) aux images sur Shopify.
À lire aussi : Personnaliser une page de collection sur Shopify.
Méthode 2 - Ajouter une section d’en-tête via l’Éditeur de thème
Pour avoir plus de contrôle sur la mise en page de la bannière, vous pouvez ajouter une section directement au modèle de la page de collection via l’Éditeur de thème.
À lire aussi : Éditeur de boutique Fudge.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Accédez à une Page de collection en utilisant le sélecteur de page en haut.
Étape 3. Dans la barre latérale gauche, regardez les sections au-dessus de la grille de produits. Cliquez sur Ajouter une section et choisissez une bannière d’image, un “hero” (image de mise en avant) ou une section de texte.
Étape 4. Configurez l’image et le contenu dans les paramètres de la section.
Étape 5. Enregistrez.
Limite importante : L’ajout d’une section via l’Éditeur de thème sur le modèle de collection l’ajoute à toutes les pages de collection utilisant ce modèle. Si vous voulez une bannière unique par collection, passez à la Méthode 3.
Méthode 3 - Bannières uniques par collection via les méta-champs
Pour afficher une image de bannière différente sur chaque page de collection, vous devez utiliser des méta-champs de collection (metafields).
Étape 1. Dans l’interface d’administration de Shopify, allez dans Paramètres > Données personnalisées > Collections > Ajouter une définition.
Étape 2. Créez une nouvelle définition de méta-champ : donnez-lui un nom comme “Image de bannière”, et réglez le type sur Fichier (images).
Étape 3. Retournez à votre collection (Produits > Collections > sélectionnez la collection) et remplissez le nouveau méta-champ d’image de bannière.
Étape 4. Dans l’Éditeur de thème, ajoutez une section de bannière d’image au modèle de collection. Dans le champ de l’image, cliquez sur Connecter une source dynamique et liez-la à votre méta-champ.
Étape 5. Enregistrez.
Chaque collection peut maintenant avoir sa propre image de bannière stockée dans le méta-champ. Vous les mettez à jour dans l’éditeur de collection, et non dans l’Éditeur de thème.
Pour une approche similaire, consultez comment changer l’image hero sur Shopify.
Conseils pour le design des bannières de vos pages de collection
Incluez le nom de la collection dans le texte de la bannière. Cela aide au SEO et confirme aux clients qu’ils sont au bon endroit.
Utilisez la description de votre collection. Une description d’une ou deux phrases affichée sous le titre ajoute du contexte et donne à Google un texte crawlable contenant des mots-clés pertinents.
Des dimensions cohérentes. Si vous créez des bannières pour plusieurs collections, utilisez le même format d’image pour que vos pages gardent une apparence homogène. Un format paysage large de 3:1 ou 4:1 est fréquent pour les bannières de collection.
Le recadrage sur mobile. Sur mobile, les bannières très larges sont souvent recadrées uniquement en leur centre. Assurez-vous que votre visuel et votre texte principaux se situent dans la “safe zone” de l’image (les 50-60% du centre).
Bannière de collection vs Image “Hero”
L’image de la collection (affichée sous forme de bannière) est distincte d’un hero pleine largeur avec superposition de texte. Si vous souhaitez un en-tête de style hero percutant sur les pages de collection avec un titre superposé, un bouton CTA et du texte stylé, cela se fait généralement via une section ou un modèle personnalisé, et non via le champ de base de l’image de la collection.
Décrivez-le à Fudge : “Ajoute une bannière hero pleine largeur aux pages de collection avec le titre de la collection superposé sur l’image. Récupère l’image de la bannière depuis un champ méta de collection.”
FAQ
Oui, en utilisant les méta-champs de collection. Créez une définition de méta-champ de type Fichier pour les collections, importez une image unique par collection, puis connectez ce méta-champ comme source dynamique pour une section de bannière d'image dans le modèle de Collection. Si votre thème n'expose pas proprement cette liaison, décrivez ce que vous voulez à Fudge ("lire l'image de la bannière à partir d'un méta-champ spécifique à la collection, avec une image de secours vers l'image de la collection") et il construira la section connectée à votre méta-champ.
Un format paysage de 3:1 ou 4:1 fonctionne bien, avec une largeur d'environ 2000 à 2800px pour rester net sur les grands écrans. Si possible, gardez un fichier de moins de 200 Ko pour les performances, et placez le visuel clé dans les 50 à 60 % du centre pour éviter qu'il ne soit coupé sur mobile.
Non. Tous les thèmes Shopify prennent en charge nativement une image de collection, et les thèmes Online Store 2.0 vous permettent d'ajouter une section de bannière d'image directement dans l'Éditeur de thème. Les applications ne sont nécessaires que si votre thème est plus ancien ou si vous souhaitez des fonctionnalités de mise en page qu'il ne prend pas en charge.
Certains thèmes n'affichent pas du tout l'image de collection, ou ne le font que sur les cartes de collection dans les pages de liste. Ouvrez le modèle de Collections dans l'Éditeur de thème et cherchez une section appelée "Bannière de collection" ou "Image mise en avant" - si elle n'y est pas, le thème n'affiche pas l'image comme en-tête par défaut.
Oui. Ouvrez le modèle de Collections dans l'Éditeur de thème, ajoutez une section de bannière d'image, et configurez l'image. Comme la modification est effectuée sur le modèle, chaque collection utilisant ce modèle affichera la même bannière. Utilisez les méta-champs (Méthode 3) si vous voulez des bannières uniques par collection.
