Points clés
- La méthode la plus rapide : définissez une image de collection dans Produits > Collections - la plupart des thèmes l’affichent sous forme de bannière.
- Pour une section d’en-tête personnalisée sur toutes les pages de collection, utilisez l’Éditeur de thème > modèle de Collections.
- Pour des bannières uniques par collection, utilisez les méta-champs (metafields) de collection pour stocker les images de chaque 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, communique clairement la catégorie et vous donne 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
Puis-je avoir une bannière différente sur chaque page de collection ?
Oui, en utilisant les champs méta de collection. Créez une définition de champ méta de type Fichier pour les collections, téléversez une image unique par collection, puis connectez ce champ méta 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 (“lis l’image de la bannière à partir d’un champ méta par collection, avec l’image de collection comme solution de repli”) et il créera la section reliée à votre champ méta.
Quelle taille doit avoir une bannière de collection Shopify ?
Un format paysage avec un ratio de 3:1 ou 4:1 fonctionne bien, à environ 2000-2800 px de large pour rester net sur les grands écrans. Gardez la taille du fichier en dessous de 200 Ko dans la mesure du possible pour les performances, et placez le visuel clé au centre (50-60 % du cadre) pour que les recadrages sur mobile ne le coupent pas.
Ai-je besoin d’une application pour ajouter une bannière à une page de collection Shopify ?
Non. Chaque thème Shopify prend en charge nativement une image de collection, et les thèmes Boutique en ligne 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.
Pourquoi mon image de collection ne s’affiche-t-elle pas sous forme de bannière ?
Certains thèmes n’affichent pas du tout l’image de la collection, ou ne l’affichent que sur la carte de collection dans les pages de liste. Ouvrez le modèle de collection dans l’éditeur de thème et cherchez une section étiquetée “Collection banner” ou “Featured image” - si elle n’y est pas, le thème n’affiche pas l’image comme en-tête par défaut.
Puis-je ajouter la même bannière à toutes les pages de collection en même temps ?
Oui. Ouvrez le modèle de collection dans l’éditeur de thème, ajoutez une section de bannière d’image et configurez l’image. Comme le changement concerne le modèle, chaque collection utilisant ce modèle affichera la même bannière. Utilisez les champs méta (Méthode 3) si vous souhaitez des bannières uniques par collection.
