# Section Logo de la Collection > **Ce que vous apprendrez** > > * Comment configurer la section Logo de la Collection pour améliorer l'image de marque de la page de collection > * Fonctionnalités avancées incluant le menu mobile, les boutons de filtre et l'intégration du panier > * Navigation mobile complète et options de personnalisation du menu > * Bonnes pratiques pour l'optimisation de l'en-tête de la page de collection et l'expérience utilisateur *** ## 🎯 Qu'est-ce que la section Logo de la Collection ? Le **Section Logo de la Collection** est un composant d'en‑tête sophistiqué conçu spécifiquement pour les pages de collection qui offre une navigation complète, une image de marque et des fonctionnalités de filtrage. Cette section va au‑delà de l'affichage simple du logo pour inclure un système de menu mobile complet, des contrôles de filtrage, une intégration du panier et des fonctionnalités de date/heure optimisées pour l'expérience de navigation des collections. **Fonctionnalités clés :** * Affichage du logo spécifique à la collection avec taille personnalisée * Menu hamburger interactif avec fonctionnalité de filtrage * Système de menu mobile complet avec navigation imbriquée * Compteur de panier en direct avec style personnalisable * Affichage optionnel de la date/heure avec prise en charge des fuseaux horaires * Navigation mobile avancée avec gestes de balayage * Couleurs, typographie et espacements du menu personnalisables * Intégration avec le filtrage et la recherche de la collection Disponible dans : * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Remarque**: Cette section est spécialement conçue pour les pages de collection et inclut des fonctionnalités avancées de navigation mobile absentes des autres types de pages. *** ## 🔧 Comment ajouter la section Logo de la Collection 1. Aller à **Boutique en ligne > Thèmes > Personnaliser** 2. Accédez à **Collections > \[Toute collection]** 3. Cliquer sur **Ajouter une section** 4. Sélectionnez **Section Logo de la Collection** (ou nommage similaire) 5. Configurer le logo, le menu, le panier et les paramètres mobiles 6. Positionner la section en haut de la mise en page de la page de collection > ⚠️ **Important**: Cette section est optimisée pour les pages de collection et inclut des fonctionnalités spécialisées pour le filtrage des produits et la navigation dans les collections. *** ## 🏢 Configuration du logo ### **Affichage du logo sur la page de collection** **Paramètres du logo de la collection** * Utilise le logo téléchargé dans Paramètres du thème → Logo → "Logo de la page de collection" * Reviens au logo par défaut si le logo spécifique à la collection n'est pas défini * Prend en charge les formats PNG, JPG et SVG * Indépendant des logos de la page d'accueil et des pages produits **Dimensionnement du logo** * **Taille du logo sur l'écran de la collection**: Réglable via les paramètres du thème * Plage généralement de 50 à 200px de largeur * Maintient automatiquement le ratio d'aspect * Mise à l'échelle réactive pour les appareils mobiles **Lien et navigation du logo** * Le logo renvoie automatiquement à la page d'accueil du magasin * Assure une navigation cohérente du site depuis les pages de collection * S'ouvre dans la même fenêtre pour une expérience utilisateur fluide * Prise en charge de la navigation au clavier accessible *** ## 🍔 Menu hamburger et intégration du filtre ### **Fonctionnalité du bouton de filtrage** **Contrôle de filtrage interactif** * Icône de menu hamburger servant de bascule filtre/menu * Icône basée sur SVG avec couleur de trait personnalisable * Affichage conditionnel selon le contexte de la collection * Optimisé pour le toucher sur appareils mobiles **Style de l'icône de filtrage** * **Couleur d'arrière-plan**: Couleur de trait personnalisable pour les lignes du hamburger * Utilise les paramètres de couleur d'arrière‑plan de la section * SVG évolutif pour un affichage net à toutes les tailles * Cohérent avec le schéma de couleurs global de la section **Comportement du filtre** * Cliquer ouvre la superposition du menu mobile * S'intègre au système de filtrage de la collection * Donne accès à la navigation dans la collection * Optimisé pour les interactions tactiles *** ## 📱 Système de menu mobile avancé ### **Structure du menu mobile** **Affichage du menu de navigation** * Superposition de menu mobile plein écran * Prise en charge d'une structure de menu hiérarchique * Assignation de menu personnalisée depuis la navigation Shopify * Navigation imbriquée avec sous‑menus **Couleurs du menu mobile** * **Couleur de fond de la navigation mobile**: Fond principal du menu * **Couleur des liens de la navigation mobile**: Couleur du texte pour les liens du menu * **Couleur au survol des liens de la navigation mobile**: Couleur du texte au survol * **Couleur de fond des liens de la navigation mobile**: Couleur de fond au survol * **Couleur du bouton de fermeture**: Couleur du bouton X pour fermer le menu ### **Typographie et mise en page** **Paramètres de texte mobile** * **Alignement du texte**: Alignement gauche, centré ou droit * **Taille de la police**: Plage réglable 10‑26px (par défaut : 16px) * **Espacement vertical**: Espacement réglable 0‑36px entre les éléments du menu **Interaction du menu** * Animations d'ouverture/fermeture fluides * Éléments de menu adaptés au toucher * Structure de navigation accessible * Prise en charge des gestes de balayage *** ## 🛒 Intégration du panier ### **Affichage et fonctionnalités du panier** **Intégration du conteneur du panier** * Intégration complète du panier commerce Shopify * Fonctionnalité de panier en barre latérale droite * Durée de configuration du panier configurable (par défaut : 1000ms) * Mises à jour du panier en temps réel **Affichage du compteur de panier** * Affiche le nombre actuel d'articles dans le panier * Se met à jour automatiquement lorsque des produits sont ajoutés/supprimés * S'intègre au système de panier global * Cohérent avec la fonctionnalité panier du thème **Options de style du panier** * Hérite du style des paramètres de couleur du menu mobile * Coordonne avec les couleurs du bouton de filtre * Design responsive pour toutes les tailles d'écran * Optimisé pour les interactions tactiles mobiles *** ## ⏰ Affichage de la date et de l'heure ### **Informations sur le fuseau horaire** **Basculer l'affichage Date/Heure** * **Afficher la date/l'heure**: Activer/désactiver l'affichage du fuseau horaire * Par défaut : Varie selon la configuration du thème * Utile pour le calendrier de lancement de collection ou le contexte du magasin **Couleurs de la date et de l'heure** * **Couleur de la date**: Couleur personnalisable pour le texte de la date * **Couleur de l'heure**: Couleur personnalisable pour le texte de l'heure * Cohérent avec le style de la section logo * Se met à jour automatiquement en fonction du fuseau horaire du magasin **Positionnement de la date/heure** * Intégré avec la disposition du panier et du logo * Positionnement responsive pour les appareils mobiles * Coordonne avec les autres éléments de l'en‑tête *** ## 🎨 Configuration de la mise en page et du design ### **Structure de la section** **Disposition de l'en‑tête** * Logo positionné sur le côté gauche * Bouton menu/filtre hamburger tout à gauche * Panier et date/heure positionnés sur le côté droit * Hiérarchie d'en‑tête propre et organisée **Style du conteneur** * Classe CSS personnalisée : "logo-container collection" * Optimisé spécifiquement pour les pages de collection * Modèles de conception responsive * Espacement et alignement cohérents ### **Hiérarchie visuelle** **Priorité des éléments** 1. **Bouton Filtre/Menu** - Contrôle de navigation principal 2. **Logo** - Présence de la marque et lien vers la page d'accueil 3. **Compteur de panier** - Fonctionnalité d'achat 4. **Date/Heure** - Informations de soutien **Coordination des couleurs** * Schéma de couleurs unifié pour tous les éléments * Couleurs d'arrière‑plan et de texte personnalisables * Style d'état au survol pour les éléments interactifs * Rapports de contraste conformes à l'accessibilité *** ## 📱 Optimisation mobile ### **Conception priorisant le tactile** **Interface mobile** * Cibles tactiles larges pour tous les éléments interactifs * Menu hamburger optimisé pour la navigation au pouce * Animations et transitions fluides * Prise en charge de la navigation par gestes **Comportement réactif** * Le logo s'adapte correctement aux écrans mobiles * Le bouton de menu conserve une taille adaptée au toucher * Le compteur de panier reste visible et accessible * L'affichage date/heure s'adapte à l'espace disponible **Considérations de performance** * Chargement optimisé du menu mobile * Animations CSS efficaces * Surcharge JavaScript minimale * Intégration rapide du panier *** ## 🔄 Intégration avec l'expérience de la collection ### **Amélioration de la navigation dans la collection** **Intégration des filtres** * Le menu hamburger donne accès aux filtres de la collection * Intégration transparente avec la fonctionnalité de recherche * Options de tri et de filtrage des produits * Navigation par catégorie au sein des collections **Optimisation du flux d'achat** * Accès rapide au panier depuis la navigation dans la collection * Cohérence de la marque dans toute la navigation de la collection * Découverte efficace des produits via le système de menu * Parcours simplifié de la collection vers les pages produit ### **Fonctionnalités spécifiques à la collection** **Fonctionnalité sensible au contexte** * Comportement différent sur une page de collection par rapport à d'autres pages * Options de menu spécifiques à la collection * Intégration avec les mises en page des pages de collection * Optimisé pour l'expérience de navigation des produits *** ## 🎛️ Options de personnalisation avancées ### **Personnalisation du système de menu** **Configuration du menu de navigation** 1. Aller à **Boutique en ligne > Navigation** dans l'administration Shopify 2. Créer ou modifier le menu pour la navigation de la collection 3. Ajouter des liens de collection, des catégories et des filtres 4. Organiser une structure de menu hiérarchique 5. Attribuer le menu dans les paramètres de la section du thème **Stratégie de couleur** * Coordonner les couleurs du menu avec le design de la page de collection * Assurer un contraste suffisant pour la visualisation mobile * Faire correspondre les couleurs du bouton de filtre avec le style du menu * Créer une expérience visuelle cohérente ### **Améliorations du menu mobile** **Fonctionnalités avancées** * Images de fond personnalisées pour la superposition du menu * Transitions de menu animées * Prise en charge des sous‑menus imbriqués * Intégration avec le filtrage de la collection * Fonction de recherche intégrée au menu **Personnalisation de la typographie** * Taille de police responsive pour les appareils mobiles * Typographie cohérente avec les pages de collection * Hiérarchie lisible pour la navigation du menu * Espacement optimisé pour l'interaction tactile *** ## 🔧 Dépannage ### **Logo non affiché** **Problèmes courants** * Logo de collection non téléchargé dans les paramètres du thème * Paramètre "Afficher le logo de la page de collection" désactivé * Format de fichier du logo non pris en charge * Conflits avec d'autres sections de collection **Solutions** * Téléchargez le logo dans Paramètres du thème → Logo → Logo de la page de collection * Activez l'option bascule "Afficher le logo de la page de collection" * Utilisez les formats PNG, JPG ou SVG * Vérifiez les conflits de section sur les pages de collection * Videz le cache du navigateur après les modifications du logo ### **Le menu mobile ne fonctionne pas** **Problèmes potentiels** * Conflits JavaScript avec d'autres applications * Menu non assigné dans les paramètres de la section * Conflits CSS mobiles * Problèmes d'interaction tactile **Solutions** * Vérifiez les conflits d'application affectant le menu mobile * Attribuez le menu de navigation dans les paramètres de la section * Testez le menu mobile dans différents navigateurs * Vérifiez que les cibles tactiles sont de taille appropriée * Recherchez les conflits CSS avec du code personnalisé ### **Problèmes du bouton de filtrage** **Problèmes courants** * Le bouton de filtrage ne répond pas aux clics * Les couleurs des icônes ne s'affichent pas correctement * La fonctionnalité de filtrage ne fonctionne pas * Problèmes d'interaction mobile **Solutions** * Vérifiez les paramètres de couleur de fond pour l'icône * Recherchez des conflits JavaScript * Testez la fonctionnalité de filtrage sur des appareils réels * Assurez l'intégration correcte avec le filtrage de la collection * Vérifiez la taille des cibles tactiles mobiles ### **Problèmes d'intégration du panier** **Problèmes potentiels** * Le compteur de panier ne se met pas à jour * Conflits avec le tiroir du panier * Intégration avec l'ajout au panier depuis la collection * Problèmes d'interaction du panier mobile **Solutions** * Vérifiez la fonctionnalité du panier dans l'ensemble du thème * Vérifiez la compatibilité des paramètres du tiroir du panier * Testez les mises à jour du panier depuis les pages de collection * Assurez une intégration JavaScript correcte du panier * Passez en revue le flux d'interaction du panier mobile *** ## 📊 Impact sur les performances ### **Efficacité du chargement** **Performance optimisée** * Section légère avec JavaScript minimal * CSS efficace pour les animations du menu mobile * Icônes SVG pour graphiques évolutifs * Intégration du panier optimisée **Performance mobile** * Menu mobile à chargement rapide * Animations fluides sans latence * Gestion efficace des événements tactiles * Impact minimal sur les temps de chargement des pages de collection **Considérations SEO** * Hiérarchie de titres appropriée pour la navigation * Structure de menu accessible * Le logo apporte un contexte de marque * Structure HTML propre pour les moteurs de recherche *** ## 🎯 Résumé des meilleures pratiques ### **Liste de vérification de l'installation** ``` ✅ Téléchargez un logo spécifique à la collection dans les paramètres du thème ✅ Activez le paramètre "Afficher le logo de la page de collection" ✅ Créez et assignez un menu de navigation pour l'interface mobile ✅ Configurez les couleurs du menu hamburger pour la visibilité ✅ Configurez l'intégration du panier et testez la fonctionnalité ✅ Configurez l'affichage date/heure si vous utilisez un calendrier promotionnel ✅ Testez la fonctionnalité du menu mobile sur des appareils réels ✅ Vérifiez que les cibles tactiles sont de taille appropriée ✅ Vérifiez le contraste des couleurs pour la conformité à l'accessibilité ✅ Testez l'intégration avec le filtrage de la collection ✅ Vérifiez que le compteur de panier se met correctement à jour ✅ Assurez des animations fluides du menu mobile ``` ### **Optimisation continue** **Maintenance régulière** * Surveillez les performances du menu mobile lors des pics de trafic * Mettez à jour la structure du menu de navigation lorsque les collections changent * Testez les nouveaux appareils mobiles pour la compatibilité * Révisez les schémas de couleurs lors de la mise à jour des directives de marque * Vérifiez l'intégration du panier après les mises à jour du thème **Optimisation de la conversion** * Analysez les modèles d'utilisation du menu mobile * Testez différentes structures de menu pour l'efficacité de la navigation * Surveillez les taux de conversion du panier depuis les pages de collection * Optimisez la visibilité du bouton de filtre pour un meilleur engagement * Suivez l'interaction des utilisateurs avec les éléments promotionnels date/heure *** ## 🚀 Cas d'utilisation avancés ### **Collections saisonnières** **Image de marque dynamique** * Changez les logos de collection pour les campagnes saisonnières * Coordonnez les couleurs du menu avec les thèmes saisonniers * Utilisez l'affichage date/heure pour les lancements limités de collections * Créez une expérience cohérente pour les collections saisonnières ### **Stratégie de lancement de produit** **Optimisation du lancement** * Mettez en avant le timing du lancement avec l'affichage date/heure * Utilisez le menu mobile pour un accès exclusif aux collections * Coordonnez le style du panier avec la campagne de lancement * Créez de l'urgence via des éléments de design visuel ### **Magasins multi‑catégories** **Navigation complexe** * Organisez des structures de menu étendues pour de grands catalogues * Utilisez des menus imbriqués pour les hiérarchies de catégories * Optimisez la navigation mobile pour des gammes de produits complexes * Rationalisez la navigation d'une collection à l'autre *** La section Logo de la Collection fournit des fonctionnalités essentielles de navigation et d'image de marque spécifiquement optimisées pour les pages de collection, créant une expérience de navigation améliorée qui favorise la découverte de produits tout en maintenant la présence de la marque et en offrant un accès facile aux fonctionnalités de panier et de navigation. ### **Besoin d’aide ?** * 💬 **Rejoignez notre communauté sur Discord :** * 📧 **Envoyez-nous un e-mail à :** * 💻 **Discutez en direct avec nous :** Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/plain-jane-docs-v2-fr/readme-1/sections-and-features/collection-logo-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.