À retenir
- La méthode la plus rapide : ajoutez une image de collection dans Produits > Collections - la plupart des thèmes l’afficheront comme une bannière.
- Pour un en-tête personnalisé sur toutes les pages de collection, utilisez l’Éditeur de thème > Modèle de collection.
- Pour des bannières uniques par collection, utilisez les méta-champs (metafields) de collection pour stocker des images spécifiques.
- 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 offre un 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 développé Fudge - un éditeur de boutique IA avec une note de 4.9 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, téléversez une image unique par collection, puis connectez ce méta-champ comme source dynamique pour une section bannière d'image dans le modèle Collection. Si votre thème n'expose pas clairement cette liaison, décrivez ce que vous voulez à Fudge ("lire l'image de la bannière depuis un méta-champ de collection, avec l'image de la collection par défaut") et il créera la section reliée à votre méta-champ.
Un format paysage avec un ratio de 3:1 ou 4:1 fonctionne bien, avec une largeur d'environ 2000-2800px pour rester net sur les grands écrans. Gardez la taille du fichier sous les 200 Ko si possible pour les performances, et placez l'élément visuel clé dans les 50 à 60 % du centre du cadre pour que les recadrages sur mobile ne le coupent pas.
Non. Tous les thèmes Shopify prennent en charge nativement une image de collection, et les thèmes Online Store 2.0 (Boutique en ligne 2.0) vous permettent d'ajouter une section 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 la collection, ou ne la montrent 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, c'est que le thème n'affiche pas l'image comme un en-tête par défaut.
Oui. Ouvrez le modèle Collections dans l'Éditeur de thème, ajoutez une section bannière d'image, et configurez l'image. Comme le changement se fait 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 souhaitez des bannières uniques par collection.
