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 comme une bannière est bien distincte d’une image “hero” en fond perdu avec superposition de texte. Si vous souhaitez un en-tête percutant de style hero sur vos pages de collection (avec un titre en surimpression, un bouton CTA et du texte mis en forme), cela se fait généralement par une section personnalisée ou un template, et non via le champ de l’image de la collection de base.
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. Extraire l’image de la bannière à partir d’un méta-champ de la collection.”
