À 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, utilisez l’Éditeur de thème > Modèle Collections.
- Pour des bannières uniques par collection, utilisez les champs méta (metafields) de collection pour stocker des images par collection.
- Afficher le titre de la collection et une courte description dans la bannière donne à Google du texte à explorer et confirme aux acheteurs qu’ils sont au bon endroit.
Pour ajouter une bannière à une page de collection Shopify, téléchargez une image de collection dans Produits > Collections ; la plupart des thèmes l’affichent comme une bannière en haut de la page. Pour plus de contrôle, ajoutez une section de bannière d’image ou utilisez un champ méta pour des images spécifiques à chaque collection.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store. Les mises en page de collection font partie des modifications de thème qu’il peut préparer.
Méthode 1 - Définir une image de collection (la plus simple)
Chaque collection Shopify possède un champ optionnel 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 téléchargez l’image de votre bannière.
Étape 4. Enregistrez.
L’image s’affiche désormais en haut de cette page de collection. La disposition exacte (pleine largeur, contenue, avec texte superposé) dépend de votre thème.
Cette méthode définit une bannière par collection sans aucun code requis. L’inconvénient est le contrôle limité de la mise en page : vous utilisez ce que le thème fait avec l’image de la collection par défaut.
Pour d’autres modifications de la page, consultez Personnaliser une page de collection sur Shopify.
Méthode 2 - Ajouter une section d’en-tête via l’Éditeur de thème
Pour 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.
É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 héros 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 souhaitez une bannière unique par collection, utilisez la Méthode 3.
Méthode 3 - Bannières uniques par collection via les méta-champs
Pour afficher une bannière différente sur chaque page de collection, vous devez utiliser les champs méta (metafields) de collection.
É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 champ méta : donnez-lui un nom comme “Image de bannière”, définissez le type sur Fichier (images).
Étape 3. Retournez à votre collection (Produits > Collections > sélectionnez la collection) et remplissez le nouveau champ méta 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 champ méta.
Étape 5. Enregistrez.
Désormais, chaque collection peut avoir sa propre image de bannière unique stockée dans le champ méta. Vous les mettez à jour dans l’éditeur de collection, et non dans l’Éditeur de thème.
Pour une approche similaire, consultez 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 en tant que bannière) est distincte d’une image 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 d’appel à l’action et du texte stylisé, cela se fait généralement via une section ou un modèle personnalisé, et non via le champ d’image de collection de base.
Décrivez-le à Fudge : “Ajouter 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 d’un champ méta de collection.” Fudge prépare la section dans votre modèle de collection, et vous pouvez la prévisualiser sur quelques collections avant de la publier.
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échargez 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 Collection. Si votre thème n'expose pas cette liaison proprement, décrivez ce que vous voulez à Fudge ("lire l'image de la bannière à partir d'un champ méta par collection, avec une solution de repli sur l'image de la collection") et il créera la section reliée à votre champ méta.
Quelle devrait être la taille d'une bannière de collection Shopify ?
Un format paysage de 3:1 ou 4:1 fonctionne bien, avec une largeur d'environ 2000-2800px pour qu'il reste net sur les grands écrans. Maintenez la taille du fichier en dessous de 200 Ko dans la mesure du possible pour les performances, et placez le visuel clé au centre de l'image (environ 50 à 60 %) 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 collection possède un champ d'image, et les thèmes de la Boutique en ligne 2.0 (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.
Pourquoi l'image de ma 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 la collection dans les pages de liste. Ouvrez le modèle Collections dans l'Éditeur de thème et cherchez une section intitulée "Bannière de collection" ou "Image mise en avant" - si elle n'y est pas, le thème ne rend 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 Collections dans l'Éditeur de thème, ajoutez une section de bannière d'image et configurez l'image. Parce que le changement se trouve sur 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.
