Section logo de la collection
Pour Plain Jane et Plain Jane Interactive
Ce que vous apprendrez
Comment configurer la section Logo de la Collection pour un meilleur branding de la page de collection
Fonctionnalités avancées comprenant 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 fournit une navigation complète, du branding et des fonctionnalités de filtrage. Cette section va au-delà d’un simple affichage de logo pour inclure un système de menu mobile complet, des contrôles de filtrage, l’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 du menu, typographie et espacement 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
Aller à Boutique en ligne > Thèmes > Personnaliser
Accédez à Collections > [Toute Collection]
Cliquez sur Ajouter une section
Sélectionnez Section Logo de la Collection (ou nommage similaire)
Configurer le logo, le menu, le panier et les paramètres mobiles
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 de 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 »
Replie sur le logo par défaut si aucun logo spécifique à la collection n’est défini
Prend en charge les formats PNG, JPG et SVG
Indépendant des logos de la page d’accueil et de la page produit
Dimensionnement du logo
Taille du logo sur écran pour la collection: Ajustable via les paramètres du thème
Plage typique 50-200px de largeur
Maintient automatiquement le ratio d’aspect
Mise à l’échelle responsive pour les appareils mobiles
Lien du logo et navigation
Le logo renvoie automatiquement à la page d’accueil de la boutique
Fournit une navigation cohérente 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 des filtres
Fonctionnalité du bouton Filtre
Contrôle de filtrage interactif
Icône du 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 tactile sur les 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 de fond de la section
SVG évolutif pour un affichage net à toutes les tailles
Cohérent avec le schéma de couleurs général de la section
Comportement du filtre
Un clic ouvre la superposition du menu mobile
S’intègre au système de filtrage des collections
Donne accès à la navigation des collections
Optimisé pour les interactions tactiles
📱 Système de menu mobile avancé
Structure du menu mobile
Affichage du menu de navigation
Superposition de menu mobile en plein écran
Prise en charge d’une structure de menu hiérarchique
Affectation 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 de survol des liens de navigation mobile: Couleur du texte au survol
Couleur d’arrière-plan des liens de navigation mobile: Couleur d’arrière-plan au survol
Couleur du bouton Fermer: 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 à droite
Taille de la police: Plage ajustable 10-26px (par défaut : 16px)
Espacement vertical: Espacement ajustable 0-36px entre les éléments du menu
Interaction du menu
Animations d’ouverture/fermeture fluides
Éléments de menu adaptés au tactile
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 du panier configurable (par défaut : 1000ms)
Mises à jour du panier en temps réel
Affichage du compteur du panier
Affiche le nombre d’articles actuellement 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 filtrage
Conception responsive pour toutes tailles d’écran
Optimisé pour les interactions tactiles sur mobile
⏰ 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 d’une 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é à la disposition du panier et du logo
Positionnement réactif 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 hamburger/bouton de filtre à l’extrême 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
Bouton Filtre/Menu - Contrôle de navigation principal
Logo - Présence de la marque et lien vers la page d’accueil
Compteur du panier - Fonctionnalité d’achat
Date/Heure - Informations complémentaires
Coordination des couleurs
Schéma de couleurs unifié pour tous les éléments
Couleurs de fond et de texte personnalisables
Style d’état de survol pour les éléments interactifs
Contrastes conformes aux normes d’accessibilité
📱 Optimisation mobile
Conception privilégiant le tactile
Interface mobile
Grands objectifs tactiles pour tous les éléments interactifs
Menu hamburger optimisé pour la navigation au pouce
Animations et transitions fluides
Prise en charge de la navigation basée sur les gestes
Comportement responsive
Le logo s’adapte correctement aux écrans mobiles
Le bouton de menu conserve une taille adaptée au tactile
Le compteur du panier reste visible et accessible
L’affichage de la date/heure s’adapte à l’espace disponible
Considérations de performance
Chargement optimisé du menu mobile
Animations CSS efficaces
Surcharge JavaScript minimale
Intégration du panier rapide
🔄 Intégration avec l’expérience de la collection
Amélioration de la navigation dans la collection
Intégration du filtrage
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 lors de la navigation dans les collections
Cohérence de la marque tout au long de la navigation dans les collections
Découverte efficace des produits via le système de menu
Parcours rationalisé de la collection vers les pages produit
Fonctionnalités spécifiques à la collection
Fonctionnalité contextuelle
Comportement différent lorsqu’on est sur une collection vs. 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 produit
🎛️ Options de personnalisation avancées
Personnalisation du système de menu
Configuration du menu de navigation
Aller à Boutique en ligne > Navigation dans l'administration Shopify
Créer ou modifier le menu pour la navigation des collections
Ajouter des liens de collection, catégories et filtres
Organiser une structure de menu hiérarchique
Affecter le menu dans les paramètres de la section du thème
Stratégie de couleurs
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 au style du menu
Créer une expérience visuelle cohérente
Améliorations du menu mobile
Fonctionnalités avancées
Images d’arrière-plan 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 des collections
Fonction de recherche dans le 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écharger le logo dans Paramètres du thème → Logo → Logo de la page de collection
Activer le basculeur « Afficher le logo de la page de collection »
Utiliser les formats PNG, JPG ou SVG
Vérifier les conflits de section sur les pages de collection
Vider le cache du navigateur après les modifications du logo
Menu mobile ne fonctionnant pas
Problèmes potentiels
Conflits JavaScript avec d’autres applications
Menu non affecté dans les paramètres de la section
Conflits CSS mobiles
Problèmes d’interaction tactile
Solutions
Vérifier les conflits d’applications affectant le menu mobile
Affecter le menu de navigation dans les paramètres de la section
Tester le menu mobile dans différents navigateurs
Vérifier que les cibles tactiles ont une taille appropriée
Vérifier les conflits CSS avec le code personnalisé
Problèmes avec le bouton Filtre
Problèmes courants
Le bouton de filtre ne répond pas aux clics
Couleurs d’icône qui ne s’affichent pas correctement
Fonctionnalité de filtrage non opérationnelle
Problèmes d’interaction mobile
Solutions
Vérifier les paramètres de couleur de fond pour l’icône
Vérifier les conflits JavaScript
Tester la fonctionnalité de filtrage sur des appareils réels
Assurer une intégration correcte avec le filtrage des collections
Vérifier la taille des cibles tactiles mobiles
Problèmes d’intégration du panier
Problèmes potentiels
Le compteur du 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 sur mobile
Solutions
Vérifier la fonctionnalité du panier dans l’ensemble du thème
Vérifier la compatibilité des paramètres du tiroir du panier
Tester les mises à jour du panier depuis les pages de collection
Assurer une intégration JavaScript correcte du panier
Examiner le flux d’interaction du panier mobile
📊 Impact sur la performance
Efficacité de chargement
Performance optimisée
Section légère avec JavaScript minimal
CSS efficace pour les animations du menu mobile
Icônes SVG pour des 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 balises correcte pour la navigation
Structure de menu accessible
Le logo fournit un contexte de marque
Structure HTML propre pour les moteurs de recherche
🎯 Résumé des bonnes pratiques
Liste de vérification de l'installation
✅ Télécharger un logo spécifique à la collection dans les Paramètres du thème
✅ Activer le paramètre « Afficher le logo de la page de collection »
✅ Créer et affecter un menu de navigation pour l’interface mobile
✅ Configurer les couleurs du menu hamburger pour la visibilité
✅ Mettre en place l’intégration du panier et tester la fonctionnalité
✅ Configurer l’affichage de la date/heure si vous utilisez une synchronisation promotionnelle
✅ Tester la fonctionnalité du menu mobile sur des appareils réels
✅ Vérifier que les cibles tactiles ont une taille appropriée
✅ Vérifier le contraste des couleurs pour la conformité à l’accessibilité
✅ Tester l’intégration avec le filtrage des collections
✅ Vérifier que le compteur du panier se met correctement à jour
✅ S’assurer d’animations fluides du menu mobileOptimisation continue
Maintenance régulière
Surveiller les performances du menu mobile lors des pics de trafic
Mettre à jour la structure du menu de navigation au fur et à mesure que les collections changent
Tester les nouveaux appareils mobiles pour la compatibilité
Revoir les schémas de couleurs lors de la mise à jour des directives de marque
Vérifier l’intégration du panier après les mises à jour du thème
Optimisation de la conversion
Analyser les modèles d’utilisation du menu mobile
Tester différentes structures de menu pour l’efficacité de la navigation
Surveiller les taux de conversion du panier depuis les pages de collection
Optimiser la visibilité du bouton de filtrage pour un meilleur engagement
Suivre l’interaction utilisateur avec les éléments promotionnels date/heure
🚀 Cas d'utilisation avancés
Collections saisonnières
Branding dynamique
Changer les logos de collection pour les campagnes saisonnières
Coordonner les couleurs du menu avec les thèmes saisonniers
Utiliser l’affichage date/heure pour les lancements limités de collections
Créer une expérience cohérente de collection saisonnière
Stratégie de lancement de produit
Optimisation du lancement
Mettre en avant le timing du lancement avec l’affichage date/heure
Utiliser le menu mobile pour un accès exclusif aux collections
Coordonner le style du panier avec la campagne de lancement
Créer de l’urgence via des éléments de design visuel
Magasins multi-catégories
Navigation complexe
Organiser des structures de menu étendues pour de grands catalogues
Utiliser des menus imbriqués pour les hiérarchies de catégories
Optimiser la navigation mobile pour des gammes de produits complexes
Rationaliser la navigation d’une collection à une autre
La section Logo de la Collection fournit une navigation essentielle et des fonctionnalités de branding 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 au panier et aux fonctionnalités de navigation.
Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.
Besoin d'aide ? 💬 Rejoignez notre communauté sur Discord :
https://discord.gg/hcc2GvgZc6 📧 Envoyez-nous un e-mail à :
[email protected] 💻 Chat en direct avec nous :
Mis à jour