Section en-tête produit
Pour Plain Jane et Plain Jane Interactive
Ce que vous apprendrez
Comment configurer la section En-tête du produit pour l'image de marque et la navigation
Options avancées de typographie et de personnalisation des couleurs pour les éléments de texte du produit
Comment définir le format d'affichage des prix et le style du prix en promotion
Bonnes pratiques pour la hiérarchie et la lisibilité du texte sur la page produit
🎯 Qu'est-ce que la section En-tête du produit ?
Le Section En-tête du produit est un système spécialisé de contrôle de la typographie et des couleurs conçu spécifiquement pour les pages produit. Contrairement à un en-tête de page traditionnel, cette section se concentre sur le style visuel des éléments d'information clés du produit, notamment les titres, les descriptions, les prix et les indicateurs de promotion.
Fonctionnalités clés :
Contrôles typographiques avancés pour les titres et les descriptions de produits
Format d'affichage des prix personnalisable avec options de devise
Style du prix en promotion avec couleurs mises en avant
Gestion cohérente des couleurs de texte pour tous les éléments produit
Mise à l'échelle typographique adaptée aux mobiles
Intégration avec les mises en page des pages produit
Disponible dans :
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
💡 Remarque: Cette section contrôle le style des éléments de texte du produit plutôt que la structure de la mise en page. Elle fonctionne en conjonction avec les mises en page de la section Produit.
🔧 Comment configurer la section En-tête du produit
Aller à Boutique en ligne > Thèmes > Personnaliser
Accédez à Produits > Produit par défaut
Recherchez En-tête du produit ou Couleurs du texte section
Configurer les paramètres de typographie et de couleur
Aperçu des modifications sur différents produits pour assurer la cohérence
⚠️ Important: Cette section affecte le style des éléments de texte produit sur toutes les mises en page des pages produit (Vitrine, Vignettes, etc.).
✏️ Contrôles de typographie et de couleur
Style du titre du produit
Couleur du titre du produit
Définir la couleur principale pour les noms de produit
Doit offrir un fort contraste avec l'arrière-plan de la page
Utilise généralement la couleur principale de la marque ou une couleur neutre foncée
Par défaut : #000000 (Noir)
Bonnes pratiques :
Utiliser des couleurs à fort contraste pour l'accessibilité
Maintenir la cohérence avec la palette de couleurs globale de la marque
Tester la lisibilité sur fonds clairs et foncés
Prendre en compte les conditions de visualisation sur mobile
Style de la description du produit
Couleur de la description du produit
Contrôle la couleur du texte de la description du produit
Généralement une teinte légèrement plus claire que le titre pour établir la hiérarchie
Doit rester très lisible tout en étant moins proéminent que le titre
Par défaut : #000000 (Noir)
Directives de contenu :
Garder les descriptions concises et faciles à parcourir
Utiliser un ton et une voix cohérents pour tous les produits
Inclure les principales caractéristiques et avantages
Optimiser pour la lecture sur mobile
💰 Configuration de l'affichage des prix
Style du prix principal
Couleur du prix
Définir la couleur pour le prix régulier du produit
Correspond souvent à la couleur du titre pour la cohérence
Peut utiliser la couleur d'accent de la marque pour mettre en valeur le prix
Par défaut : #000000 (Noir)
Taille de police du prix
Plage ajustable : 10-30px
Par défaut : 24px
Doit être suffisamment visible pour être facilement repéré
Prendre en compte l'importance du prix dans la décision d'achat
Options de format de devise
Paramètres d'affichage de la devise
Avec devise: Affiche le symbole monétaire complet (par ex. « $24.99 »)
Sans devise: Affiche uniquement la valeur numérique (par ex. « 24.99 »)
Par défaut : Sans devise
Quand utiliser chaque format :
Avec devise: Boutiques internationales, devises multiples, clarté pour les nouveaux clients
Sans devise: Esthétique minimaliste et épurée, boutiques nationales, contraintes d'espace
🏷️ Style du prix en promotion et des promotions
Configuration du texte de promotion
Couleur du texte de promotion
Couleur pour le texte « Était » ou « À l'origine » précédant les prix barrés
Généralement un gris neutre ou une couleur atténuée
Doit rester lisible mais moins proéminent que le prix soldé
Par défaut : #000000 (Noir)
Exemples typiques de texte de promotion :
« Était $XX.XX »
« À l'origine $XX.XX »
« PDSF $XX.XX »
« Comparer à $XX.XX »
Style du prix en promotion
Couleur du prix en promotion
Couleur pour le prix promotionnel ou réduit mis en évidence
Utilise couramment le rouge, l'orange ou la couleur d'accent de la marque
Doit créer un sentiment d'urgence visuelle tout en restant lisible
Par défaut : #FF0000 (Rouge)
Taille de police du prix en promotion
Plage ajustable : 10-30px
Par défaut : 16px
Souvent plus petit que le prix régulier pour montrer qu'il s'agit d'une comparaison
Doit maintenir la hiérarchie visuelle avec le prix courant
🎨 Bonnes pratiques de hiérarchie visuelle
Stratégie de couleurs
Ordre de priorité de l'information :
Titre du produit - Contraste le plus élevé, le plus proéminent
Prix courant - Gras, clair, couleur de la marque
Description du produit - Lisible mais secondaire
Prix en promotion - Couleur d'accent attirant l'attention
Texte de promotion - Atténué, information de soutien
Hiérarchie typographique
Recommandations de taille de police :
Titre du produit: Le plus grand, typiquement 24-32px sur desktop
Prix courant: Proéminent, 20-28px sur desktop
Description: Lisible, 14-16px sur desktop
Prix en promotion: De soutien, 14-18px sur desktop
Directives de contraste des couleurs
Normes d'accessibilité :
Ratio de contraste minimum de 4,5:1 pour le texte normal
Ratio de contraste minimum de 3:1 pour le texte de grande taille (18px+ en gras ou 24px+)
Tester avec des outils d'accessibilité comme le vérificateur de contraste WebAIM
Prendre en compte les daltoniens en assurant un contraste de luminosité suffisant
📱 Optimisation mobile
Typographie réactive
Considérations mobiles :
Toutes les tailles de police se redimensionnent automatiquement pour les appareils mobiles
La hiérarchie du texte reste cohérente sur toutes les tailles d'écran
Espacement adapté au tactile maintenu autour des éléments cliquables
Distance de lecture optimisée pour la visualisation mobile
Ajustements spécifiques au mobile :
Tailles de police légèrement plus petites pour optimiser l'espace
Interlignage augmenté pour une meilleure lisibilité
Contraste des couleurs optimisé pour une visualisation en extérieur
Prise en compte de la navigation au pouce autour des éléments textuels
Performance mobile
Optimisation du chargement :
Les valeurs de couleur CSS se chargent instantanément avec la page
Aucun asset d'image supplémentaire requis pour le style du texte
Impact minimal sur la vitesse de chargement de la page
Rendu efficace sur tous les appareils mobiles
🔄 Intégration avec les mises en page produit
Intégration avec la mise en page Vitrine
Lors de l'utilisation de la section Produit (Vitrine) :
Les couleurs de texte s'appliquent de manière cohérente à la mise en page traditionnelle
La typographie se met à l'échelle de manière appropriée pour l'affichage côte à côte
Le style des prix s'intègre au positionnement de la galerie de vignettes
Le formatage des descriptions fonctionne avec les zones de texte développées
Intégration avec la mise en page Vignettes
Lors de l'utilisation de la section Produit (Vignettes) :
Les couleurs fonctionnent parfaitement avec la mise en page moderne en grille
La typographie s'optimise pour l'expérience en modal en bas sur mobile
L'affichage des prix s'adapte à la sélection avancée de variantes
Les prix promotionnels s'intègrent au système de badges
💡 Conseils de personnalisation avancée
Cohérence de la marque
Coordination des couleurs :
Faire correspondre les couleurs des titres produit aux couleurs primaires de la marque
Utiliser des couleurs de prix promotionnel en accord avec le branding promotionnel
Coordonner avec les couleurs des boutons et les éléments d'accent
Maintenir la cohérence sur toutes les pages produit
Coordination typographique :
Aligner les tailles de police sur l'échelle typographique globale du thème
Considérer la relation entre le texte produit et les en-têtes de section
Maintenir une hiérarchie lisible sur l'ensemble de la page
Tester avec différentes longueurs de titres de produit
Optimisation de la conversion
Psychologie des prix :
Utiliser le rouge ou l'orange pour les prix en promotion afin de créer un sentiment d'urgence
Rendre les prix habituels proéminents et dignes de confiance
Envisager de masquer les symboles monétaires pour une esthétique plus épurée
Tester différentes combinaisons de couleurs pour l'impact sur la conversion
Expérience utilisateur :
Assurer un balayage rapide des informations clés
Prioriser la lisibilité mobile pour les acheteurs en déplacement
Rendre les informations de prix immédiatement claires et dignes de confiance
Créer un flux visuel du titre au prix puis à l'action
🔧 Dépannage
La couleur ne s'applique pas
Problèmes courants :
Le cache du navigateur peut nécessiter d'être vidé après des modifications de couleur
Certaines applications tierces peuvent remplacer les couleurs du thème
Le CSS personnalisé peut entrer en conflit avec les paramètres du thème
S'assurer que les modifications sont enregistrées et publiées
Solutions :
Vider le cache du navigateur et actualiser la page
Vérifiez les conflits d'applications dans le code du thème
Vérifier tout CSS personnalisé pour des remplacements de couleurs
Tester en navigation privée/incognito
Problèmes de lisibilité du texte
Problèmes d'accessibilité :
Contraste insuffisant entre le texte et l'arrière-plan
Tailles de police trop petites pour une lecture confortable
Combinaisons de couleurs difficiles pour les daltoniens
Problèmes de visualisation sur mobile
Solutions :
Utiliser des outils de vérification du contraste pour valider l'accessibilité
Tester les tailles de police sur de vrais appareils mobiles
Envisager des combinaisons de couleurs adaptées aux daltoniens
Obtenir des retours d'utilisateurs ayant des besoins d'accessibilité
Problèmes d'affichage sur mobile
Problèmes courants :
Texte apparaissant trop petit sur les appareils mobiles
Contraste des couleurs insuffisant en plein jour
Hiérarchie typographique peu claire sur les petits écrans
Zones tactiles trop proches des éléments textuels
Solutions :
Tester sur de vrais appareils mobiles, pas seulement en redimensionnant le navigateur
Augmenter les tailles de police si la lisibilité mobile est insuffisante
Vérifier le contraste des couleurs dans différentes conditions d'éclairage
S'assurer d'un espacement adéquat autour des éléments cliquables
📊 Impact sur la performance
Efficacité de chargement
Utilisation minimale des ressources :
Le style du texte utilise des propriétés CSS efficaces
Aucun chargement d'images ou de polices supplémentaire requis
Application instantanée des changements de couleur
Aucun JavaScript requis pour les fonctionnalités de base
Avantages SEO :
Une structure HTML propre maintient la lisibilité pour les moteurs de recherche
Une hiérarchie correcte des titres soutient le référencement
Un contraste de couleur accessible améliore les signaux d'expérience utilisateur
Un chargement rapide contribue aux scores de vitesse des pages
🎯 Résumé des bonnes pratiques
Liste de vérification de l'installation
✅ Définir la couleur du titre du produit avec un fort contraste
✅ Configurer la couleur du prix pour une visibilité claire
✅ Choisir une couleur pour le prix en promotion qui crée de l'urgence
✅ Tester la préférence de format de devise (avec/sans symbole)
✅ Vérifier que la couleur de la description assure une bonne lisibilité
✅ Vérifier toutes les couleurs pour la conformité à l'accessibilité
✅ Tester la hiérarchie typographique sur les appareils mobiles
✅ Assurer l'intégration avec la mise en page produit choisie
✅ Vérifier la cohérence entre différents types de produits
✅ Tester avec du contenu produit et des images réelsMaintenance continue
Revoir régulièrement les choix de couleurs pour la cohérence de la marque
Tester les nouveaux produits avec les paramètres typographiques existants
Surveiller les retours clients concernant la lisibilité
Mettez à jour les couleurs lors du rafraîchissement des directives de marque
Assurer la conformité à l'accessibilité lors de tout changement
La section En-tête du produit fournit la base pour créer des pages produit professionnelles, lisibles et optimisées pour la conversion. Une configuration appropriée permet aux clients de trouver et de comprendre rapidement les informations clés sur le produit tout en respectant l'esthétique de votre marque.
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