Section d'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 textuels du produit
Comment définir le format d'affichage des prix et le style du prix promotionnel
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 d'en-tête produit est un système spécialisé de contrôle de la typographie et des couleurs conçu spécifiquement pour les pages produits. 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, descriptions, prix et indicateurs de promotion.
Fonctionnalités clés :
Contrôles avancés de la typographie pour les titres et descriptions de produit
Format d'affichage des prix personnalisable avec options de devise
Style du prix promotionnel avec couleurs mises en évidence
Gestion cohérente des couleurs de texte pour tous les éléments du produit
Mise à l'échelle de la typographie adaptée aux mobiles
Intégration avec les mises en page de la page produit
Disponible dans :
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
💡 Remarque: Cette section contrôle le style des éléments textuels du produit plutôt que la structure de 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 produit ou Couleurs du texte section
Configurer les paramètres de typographie et de couleur
Prévisualiser les modifications sur différents produits pour garantir la cohérence
⚠️ Important: Cette section affecte le style des éléments textuels du produit sur toutes les mises en page de page produit (Vitrine, Vignette, 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 produits
Doit offrir un fort contraste par rapport à l'arrière-plan de la page
Utilise généralement la couleur primaire 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 des 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 nuance légèrement plus claire que le titre pour créer une hiérarchie
Doit rester très lisible tout en étant moins proéminent que le titre
Par défaut : #000000 (Noir)
Lignes directrices pour le contenu :
Garder les descriptions concises et faciles à parcourir
Utiliser un ton et une voix cohérents entre les produits
Inclure les caractéristiques et bénéfices clés
Optimiser pour la lecture sur mobile
💰 Configuration de l'affichage des prix
Style du prix principal
Couleur du prix
Définir la couleur pour les prix réguliers des produits
Correspond souvent à la couleur du titre produit pour la cohérence
Peut utiliser la couleur d'accent de la marque pour mettre en valeur les prix
Par défaut : #000000 (Noir)
Taille de la police du prix
Plage ajustable : 10-30px
Par défaut : 24px
Doit être suffisamment proéminent pour être facilement vu
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 de devise complet (par ex., « $24.99 »)
Sans devise: N'affiche que 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 promotionnel 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 promotionnel
Couleur du prix promotionnel
Couleur pour le prix promotionnel ou remisé 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 la police du prix promotionnel
Plage ajustable : 10-30px
Par défaut : 16px
Souvent plus petite que le prix régulier pour indiquer qu'il s'agit d'une comparaison
Doit maintenir la hiérarchie visuelle avec le prix courant
🎨 Bonnes pratiques pour la hiérarchie visuelle
Stratégie de couleur
Ordre de priorité de l'information :
Titre du produit - Plus fort contraste, plus proéminent
Prix courant - Gras, clair, couleur de la marque
Description produit - Lisible mais secondaire
Prix promotionnel - Couleur d'accent attirant l'attention
Texte de promotion - Atténué, information d'accompagnement
Hiérarchie typographique
Recommandations de taille de police :
Titre du produit: Plus grand, généralement 24-32px sur bureau
Prix courant: Proéminent, 20-28px sur bureau
Description: Lisible, 14-16px sur bureau
Prix promotionnel: À titre de soutien, 14-18px sur bureau
Directives sur le 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 grand (18px+ gras ou 24px+)
Tester avec des outils d'accessibilité comme WebAIM Contrast Checker
Prendre en compte les daltoniens avec un contraste de luminosité suffisant
📱 Optimisation mobile
Typographie réactive
Considérations mobiles :
Toutes les tailles de police s'adaptent automatiquement aux 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 consultation sur mobile
Ajustements spécifiques au mobile :
Tailles de police légèrement plus petites pour économiser de l'espace
Interlignage augmenté pour une meilleure lisibilité
Contraste des couleurs optimisé pour la visualisation en extérieur
Prendre en compte 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 actif 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 du prix s'intègre au positionnement de la galerie de vignettes
Le formatage de la description fonctionne avec les zones de texte étendues
Intégration avec la mise en page Vignette
Lors de l'utilisation de la section Produit (Vignette) :
Les couleurs fonctionnent harmonieusement avec la mise en page moderne en grille
La typographie s'optimise pour l'expérience modale inférieure sur mobile
L'affichage des prix s'adapte à la sélection avancée de variantes
La tarification promotionnelle s'intègre au système de badges
💡 Astuces de personnalisation avancée
Cohérence de la marque
Coordination des couleurs :
Faire correspondre les couleurs des titres de produit aux couleurs primaires de la marque
Utiliser des couleurs de prix promotionnel qui s'alignent sur 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 avec l'échelle typographique du thème global
Considérer la relation du texte produit avec les en-têtes de section
Maintenir une hiérarchie lisible sur toute 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 promotionnels afin de créer de l'urgence
Rendre les prix réguliers proéminents et dignes de confiance
Envisager de masquer les symboles de devise pour une esthétique plus épurée
Tester différentes combinaisons de couleurs pour l'impact sur la conversion
Expérience utilisateur :
Assurer une lecture rapide des informations clés
Prioriser la lisibilité mobile pour les acheteurs en déplacement
Rendre les informations de prix immédiatement claires et fiables
Créer un flux visuel du titre vers le prix puis vers l'action
🔧 Dépannage
La couleur ne s'applique pas
Problèmes courants :
Le cache du navigateur peut nécessiter un vidage après des changements 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
Vérifier 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 couleur
Tester en mode 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 vérifier 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 trop petit sur les appareils mobiles
Contraste des couleurs insuffisant en plein soleil
Hiérarchie typographique peu claire sur les petits écrans
Zones tactiles trop proches des éléments textuels
Solutions :
Tester sur des appareils mobiles réels, pas seulement en redimensionnant le navigateur
Augmenter les tailles de police si la lisibilité mobile est médiocre
Vérifier le contraste des couleurs dans diverses conditions d'éclairage
Assurer un espacement adéquat autour des éléments cliquables
📊 Impact sur les performances
Efficacité du chargement
Utilisation minimale des ressources :
Le style du texte utilise des propriétés CSS efficaces
Aucun chargement supplémentaire d'images ou de polices requis
Application instantanée des changements de couleur
Aucun JavaScript requis pour la fonctionnalité de base
Avantages SEO :
Une structure HTML propre maintient la lisibilité par les moteurs de recherche
Une hiérarchie correcte des titres soutient le SEO
Un contraste de couleur accessible améliore les signaux d'expérience utilisateur
Un chargement rapide contribue aux scores de vitesse de page
🎯 Résumé des meilleures pratiques
Liste de vérification de l'installation
Maintenance 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 toute modification
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 comprendre rapidement les informations clés du produit tout en conservant l'esthétique de votre marque.
Besoin d’aide ?
💬 Rejoignez notre communauté sur Discord : https://discord.gg/hcc2GvgZc6
📧 Envoyez-nous un e-mail à : [email protected]
💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web
Mis à jour