Afficher dynamiquement la bannière de collection en fonction de chaque collection

À propos de la bannière de collection

Bannière de collection est une image ou un élément visuel affiché en haut d'un page de collection, représentant le thème ou le but de la collection.

Les bannières dynamiques permettent à chaque collection de présenter automatiquement son image de bannière unique en fonction des données de collection de Shopify.

Comment afficher dynamiquement une bannière de collection pour chaque collection dans GemPages ?

Pour afficher la bannière de collection de manière dynamique en fonction de chaque collection, suivez ces étapes :

Étape 1 : ajouter ou modifier l'image sélectionnée de la collection dans Shopify (facultatif)

Remarque : Si vous avez déjà ajouté des images à vos collections, vous pouvez ignorer cette étape.

• Connectez-vous à votre administrateur Shopify. Accédez à Produits > Collections.
• Sélectionnez la collection que vous souhaitez personnaliser.

• En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Image(s) section, téléchargez ou modifiez l'image sélectionnée pour la collection.

Cette image servira de bannière pour la collection correspondante.

• Une fois terminé, appuyez sur Enregistrer pour appliquer vos modifications.

Étape 2 : Créer une page de collection dans GemPages

Pour un guide détaillé sur la création de pages de collection, reportez-vous à cet article : Comment créer une nouvelle page de collection.

• Consultez la Tableau de bord GemPages et cliquez sur le Créer une nouvelle page .

• Choisir Collection comme cas d'utilisation. Vous pouvez ensuite créer une nouvelle page de collection de A à Z (page vierge) ou utiliser un modèle prédéfini.

Étape 3 : Attribuer la collection

Dans la barre supérieure, cliquez sur «0 Collection attribuée" pour attribuer votre collection à cette page de collection.

Vous pouvez appliquer cette page à toutes les collections ou en sélectionner une/plusieurs préférées.

• Toutes les pages de la collection:Le modèle sera appliqué à chaque collection de votre boutique.
• Collections spécifiques:Sélectionnez les collections auxquelles vous souhaitez appliquer ce modèle.

Par exemple, nous choisissons le Collections GemSkin.

Étape 4 : ajouter les éléments de collection nécessaires

Depuis la barre latérale gauche, vous pouvez glisser-déposer plusieurs éléments adaptés à la collection, tels que le Élément de la liste de produits.

Étape 5 : Ajouter un élément de bannière de collection

• Dans l'éditeur GemPages, faites glisser et déposez le Bannière de collection élément sur la mise en page de votre page de collection.

La bannière affichera dynamiquement l’image vedette de la collection actuelle consultée par le client.

Vous pouvez personnaliser le taille de la bannière, alignement et Catégorie en utilisant le panneau des paramètres dans la barre latérale gauche.

• Ajouter un autre éléments de collection dynamiques à la bannière, comme le titre de la collection, la description, etc.

Cela garantit que chaque page de collection est correctement mise à jour avec ses produits, titres et fonctionnalités uniques à partir des données Shopify. 

Étape 6 : Enregistrer et publier

• Une fois que vous avez terminé de concevoir la page de collection, cliquez sur Enregistrer, et vos bannières dynamiques sont prêtes à être affichées.
• Vous pouvez avant-première la page pour vérifier les résultats avant de republier votre page :

Vous avez maintenant configuré un système entièrement bannière de collection dynamique qui récupère automatiquement les données de Shopify. Chaque page de collection affichera sa propre bannière, créant une expérience de navigation personnalisée et cohérente.

Questions fréquentes

1. Pourquoi ma bannière de collection n'affiche-t-elle pas la bonne image ?

Assurez-vous d'avoir téléchargé une image sélectionnée pour chaque collection dans Shopify et d'avoir attribué les bonnes collections à votre modèle GemPages.

Si le problème persiste, essayez republication de la page or attendre quelques minutes que les données Shopify se synchronisent.

2. Puis-je utiliser une image de bannière différente de l’image vedette de Shopify ?

Non. L'élément Bannière de collection se synchronise automatiquement avec l'image sélectionnée de Shopify, et cette image ne peut pas être modifiée ou remplacée manuellement dans GemPages.

3. Puis-je afficher le titre ou la description de la collection sur la bannière ?

Absolument. Ajoutez les éléments « Titre de la collection » et « Description de la collection » dans la section bannière. Ils extrairont automatiquement les données dynamiques de Shopify pour chaque collection.

4. Cette configuration fonctionne-t-elle à la fois pour les appareils mobiles et les ordinateurs de bureau ?

Oui. L'élément Bannière de collection est réactif par défaut, mais vous pouvez personnaliser sa taille, son remplissage ou son alignement séparément pour les vues mobile et de bureau sous le Avancé languette.

5. Comment puis-je modifier la disposition de la bannière pour des collections spécifiques ?

Si vous souhaitez des mises en page différentes par collection, créez plusieurs modèles de pages de collection et attribuez-les individuellement à l'aide de la fonction « Attribuer une collection » dans l'éditeur GemPages.