Section logo produit

Pour Plain Jane et Plain Jane Interactive

Ce que vous apprendrez

  • Comment configurer la section Logo Produit pour le branding et l'affichage du panier

  • Options de personnalisation avancées pour le logo, le panier et les fonctionnalités de fuseau horaire

  • Comment configurer le style du compteur de panier et l'affichage des horaires promotionnels

  • Bonnes pratiques pour l'optimisation de l'en-tête de la page produit et l'expérience utilisateur

🎯 Qu'est-ce que la section Logo Produit ?

Le Section Logo Produit est un composant d'en-tête spécialisé conçu spécifiquement pour les pages produit qui combine branding, fonctionnalité de panier et affichage optionnel du fuseau horaire. Contrairement aux en-têtes de page traditionnels, cette section est optimisée pour l'expérience d'achat produit et inclut un compteur de panier intégré et des affichages d'informations en temps réel.

Fonctionnalités clés :

  • Affichage du logo spécifique au produit avec taille personnalisée

  • Compteur de panier en direct avec style personnalisable

  • Affichage optionnel de la date/heure avec prise en charge des fuseaux horaires

  • Conception d'en-tête simplifiée optimisée pour les pages produit

  • Disposition et interactions adaptées aux mobiles

  • Intégration avec la fonctionnalité de panier globale

Disponible dans :

  • ✅ Plain Jane v3.1+

  • ✅ Plain Jane Interactive v2+

💡 Remarque: Cette section apparaît spécifiquement sur les pages produit et fonctionne en conjonction avec les mises en page produit pour offrir une expérience d'achat optimale.

🔧 Comment ajouter la section Logo Produit

  1. Aller à Boutique en ligne > Thèmes > Personnaliser

  2. Accédez à Produits > Produit par défaut

  3. Cliquez sur Ajouter une section

  4. Sélectionnez Logo, Panier et Horloge (Section Logo Produit)

  5. Configurez les paramètres du logo, du panier et du fuseau horaire

  6. Placez la section en haut de la mise en page de la page produit

⚠️ Important: Cette section est conçue spécifiquement pour les pages produit et inclut la fonctionnalité du panier intégrée au flux d'achat produit.

Affichage du logo sur la page produit

Afficher le logo produit

  • Activer/désactiver l'affichage du logo sur les pages produit

  • Contrôlé via Paramètres du thème → Logo → "Afficher le logo de la page produit"

  • Indépendant des autres logos de page (page d'accueil, collection, etc.)

Source de l'image du logo

  • Utilise le logo téléchargé dans Paramètres du thème → Logo → "Logo de la page produit"

  • Revient au logo par défaut si aucun logo spécifique au produit n'est défini

  • Prend en charge les formats PNG, JPG et SVG

Dimensionnement du logo

  • Taille du logo à l'écran du produit: Ajustable via les paramètres du thème

  • Plage généralement de 50 à 200 px de largeur

  • Maintient automatiquement le ratio d'aspect

  • Mise à l'échelle réactive pour les appareils mobiles

Lien vers la page d'accueil

  • Le logo renvoie automatiquement à la page d'accueil de la boutique (routes.root_url)

  • Assure une navigation cohérente depuis les pages produit

  • S'ouvre dans la même fenêtre pour une expérience utilisateur fluide

Fonctionnalités d'accessibilité

  • Inclut des attributs alt appropriés pour les lecteurs d'écran

  • Prise en charge de la navigation au clavier

  • Taille adaptée au toucher pour les appareils mobiles

🛒 Intégration du compteur de panier

Affichage du panier en direct

Mises à jour en temps réel

  • Affiche le nombre d'articles actuel dans le panier

  • Se met à jour automatiquement lorsque des produits sont ajoutés/supprimés

  • Se synchronise avec toutes les interactions de la page

  • Aucun rafraîchissement de page requis pour les mises à jour

Personnalisation du texte du panier

  • Couleur du texte du panier: Couleur du texte de l'étiquette "Panier"

  • Par défaut : #000000 (Noir)

  • Doit bien contraster avec l'arrière-plan de la section

Indicateur de quantité du panier

Badge du nombre d'articles du panier

  • Couleur de la quantité du panier: Couleur du texte pour le nombre d'articles

  • Par défaut : #FFFFFF (Blanc)

  • Couleur d'arrière-plan de la quantité du panier: Couleur d'arrière-plan du badge

  • Par défaut : #000000 (Noir)

Style du badge

  • Design de badge circulaire pour une visibilité claire

  • Positionné automatiquement par rapport au texte du panier

  • S'adapte correctement pour l'affichage mobile

  • Contraste élevé pour conformité d'accessibilité

Interaction avec le panier

Accès au panier

  • Cliquer sur la zone du panier peut déclencher le tiroir du panier (si activé)

  • S'intègre à la fonctionnalité de panier du thème

  • Fournit un aperçu rapide du panier sans quitter la page produit

  • Optimisé pour la conversion et l'expérience utilisateur

⏰ 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 : Activé

  • Utile pour créer de l'urgence ou fournir le contexte de la boutique

Affichage de la date

  • Couleur de la date: Couleur personnalisable pour le texte de la date

  • Par défaut : #000000 (Noir)

  • Affiche la date actuelle dans le fuseau horaire de la boutique

  • Se met à jour automatiquement chaque jour

Affichage de l'heure

  • Couleur de l'heure: Couleur personnalisable pour le texte de l'heure

  • Par défaut : #000000 (Noir)

  • Affiche l'heure actuelle dans le fuseau horaire de la boutique

  • Se met à jour en temps réel

Options d'alignement

Positionnement Date/Heure

  • Alignement: Positionnement à gauche, centré ou à droite

  • Par défaut : Alignement à droite

  • Permet de coordonner avec le positionnement du logo et du panier

  • Comportement réactif sur les appareils mobiles

🎨 Configuration de la mise en page et du design

Positionnement de la section

Structure de l'en-tête

  • Logo positionné sur le côté gauche

  • Compteur de panier positionné sur le côté droit

  • Affichage date/heure intégré à la zone du panier

  • Esthétique de conception propre et minimale

Z-Index et superposition

  • Section positionnée avec z-index : 2 pour une superposition correcte

  • Assure la visibilité au-dessus des autres éléments de la page

  • Maintient l'accessibilité des éléments interactifs

Espacement et rembourrage

Rembourrage de la section

  • Rembourrage supérieur : 25px (bureau)

  • Rembourrage inférieur : 10px (bureau)

  • Ajustements réactifs pour les appareils mobiles

Marges du logo

  • Marge supérieure : 5px

  • Marge inférieure : 10px

  • Fournit un espacement visuel approprié

Positionnement du texte du panier

  • Marge supérieure : 10px pour l'alignement avec le logo

  • Espacement coordonné avec les éléments date/heure

📱 Optimisation mobile

Conception responsive

Mise en page mobile

  • Le logo s'adapte correctement aux écrans plus petits

  • Le compteur de panier conserve une taille adaptée au toucher

  • L'affichage date/heure s'adapte à l'espace disponible

  • Maintient la fonctionnalité sur tous les appareils

Interactions tactiles

  • Zone du panier optimisée pour la navigation tactile

  • Lien du logo correctement dimensionné pour le tapotement sur mobile

  • Pas de petites cibles tactiles susceptibles de frustrer l'utilisateur

Considérations de performance

  • JavaScript minimal pour les mises à jour en temps réel

  • CSS efficace pour des animations fluides

  • Chargement rapide sans impacter la vitesse de la page

🔄 Intégration à l'expérience produit

Amélioration du flux d'achat

Optimisation de la conversion

  • Le compteur de panier fournit un retour immédiat

  • Le logo maintient la présence de la marque pendant l'achat

  • La date/heure peut créer de l'urgence pour des offres limitées

  • Un en-tête épuré réduit les distractions

Avantages pour l'expérience utilisateur

  • Branding cohérent tout au long du processus d'achat

  • Accès facile au panier sans quitter la page produit

  • Navigation claire de retour à la page d'accueil

  • Apparence professionnelle et digne de confiance

Coordination avec les sections produit

Harmonie de la mise en page

  • Fonctionne avec toutes les mises en page des sections produit (Vitrine, Miniatures)

  • Maintient une expérience d'en-tête cohérente

  • N'interfère pas avec les galeries d'images produit

  • Se coordonne avec la typographie de la page produit

💡 Conseils de personnalisation avancée

Cohérence de la marque

Coordination du logo

  • Utilisez un logo spécifique au produit s'il est différent de celui de la page d'accueil

  • Maintenez une taille cohérente sur les pages produit

  • Assurez la qualité du logo à toutes les tailles d'écran

  • Tenez compte de la visibilité du logo sur diverses images produit

Stratégie de couleurs

  • Coordonnez les couleurs du panier avec les éléments de la page produit

  • Assurez un contraste suffisant pour l'accessibilité

  • Faites correspondre les couleurs date/heure avec le thème global

  • Testez les combinaisons de couleurs avec différents arrière-plans de produit

Intégration marketing

Synchronisation promotionnelle

  • Utilisez l'affichage date/heure pour les ventes flash

  • Créez de l'urgence avec des messages de compte à rebours

  • Coordonnez avec les offres à durée limitée

  • Améliorez les campagnes saisonnières

Psychologie du panier

  • Utilisez des couleurs de badge de panier contrastées pour attirer l'attention

  • Positionnez le panier de manière visible pour un accès facile

  • Maintenez la visibilité du panier pendant la navigation produit

  • Encouragez la finalisation du panier avec des indicateurs clairs

🔧 Dépannage

Logo non affiché

Problèmes courants

  • Logo non téléchargé dans Paramètres du thème → Logo → Logo de la page produit

  • Paramètre "Afficher le logo de la page produit" désactivé

  • Format de fichier image non pris en charge

  • Paramètre de taille du logo trop petit pour être visible

Solutions

  • Téléchargez d'abord le logo dans les paramètres du thème

  • Activez le bascule "Afficher le logo de la page produit"

  • Utilisez les formats PNG, JPG ou SVG

  • Augmentez le paramètre de taille du logo

  • Videz le cache du navigateur après les modifications

Le compteur de panier ne se met pas à jour

Problèmes potentiels

  • Conflits JavaScript avec d'autres applications

  • Cache du thème empêchant les mises à jour en temps réel

  • Conflits du tiroir de panier avec la section

  • Problèmes de compatibilité du navigateur

Solutions

  • Vérifiez les conflits d'applications dans le code du thème

  • Videz le cache du thème et le cache du navigateur

  • Désactivez temporairement les applications de panier en conflit

  • Testez dans différents navigateurs

  • Assurez-vous que la fonctionnalité du panier est activée dans les paramètres du thème

Problèmes d'affichage Date/Heure

Problèmes courants

  • Fuseau horaire mal configuré dans les paramètres Shopify

  • Couleurs date/heure trop claires pour être visibles

  • Conflits de positionnement du texte avec d'autres éléments

  • Problèmes de formatage sur mobile

Solutions

  • Vérifiez le fuseau horaire dans Admin Shopify → Paramètres → Général

  • Augmentez le contraste des couleurs pour une meilleure visibilité

  • Ajustez les paramètres d'alignement pour un meilleur positionnement

  • Testez sur des appareils mobiles réels pour le formatage

  • Vérifiez les paramètres de traduction date/heure si vous utilisez plusieurs langues

📊 Impact sur la performance

Efficacité de chargement

Utilisation minimale des ressources

  • Section légère avec JavaScript minimal

  • Style basé sur CSS pour un rendu rapide

  • Aucun chargement d'images supplémentaire au-delà du logo

  • Mises à jour efficaces du compteur de panier

Considérations SEO

  • Le logo fournit un branding approprié pour les moteurs de recherche

  • Structure HTML propre favorisant le SEO

  • Aucun impact négatif sur les scores de vitesse de page

  • Hiérarchie des titres correctement maintenue

🎯 Résumé des bonnes pratiques

Liste de vérification de l'installation

✅ Téléchargez un logo spécifique au produit dans les paramètres du thème
✅ Activez le paramètre "Afficher le logo de la page produit"
✅ Configurez les couleurs du texte et du badge du panier
✅ Définissez une taille de logo appropriée pour la consultation mobile
✅ Choisissez l'affichage date/heure en fonction des besoins de la boutique
✅ Testez la fonctionnalité du compteur de panier avec des produits réels
✅ Vérifiez le contraste des couleurs pour l'accessibilité
✅ Vérifiez l'affichage mobile et les interactions tactiles
✅ Coordonnez les couleurs avec le design de la page produit
✅ Testez le fonctionnement du lien du logo vers la page d'accueil

Optimisation continue

Revues régulières

  • Surveillez les performances du compteur de panier pendant les périodes de fort trafic

  • Testez la visibilité du logo avec de nouvelles images produit

  • Mettez à jour les couleurs lors du rafraîchissement des directives de marque

  • Vérifiez l'exactitude de la date/heure lors des changements de fuseau horaire

Optimisation de la conversion

  • Test A/B des couleurs du badge du panier pour une meilleure visibilité

  • Surveillez les taux d'abandon de panier avec la section activée

  • Suivez le taux de clics du logo vers la page d'accueil

  • Analysez l'interaction des utilisateurs avec les informations date/heure

🚀 Cas d'utilisation avancés

Personnalisation saisonnière

Branding pour les fêtes

  • Passez à des logos saisonniers pour les événements spéciaux

  • Coordonnez les couleurs du panier avec les thèmes festifs

  • Utilisez l'affichage date/heure pour le compte à rebours des ventes

  • Créez une expérience d'achat saisonnière cohérente

Campagnes en édition limitée

Création d'urgence

  • Mettez en évidence l'heure actuelle pour les ventes flash

  • Utilisez le style du panier pour souligner les quantités limitées

  • Coordonnez avec les messages de rareté du produit

  • Améliorez la présentation des produits premium

Boutiques internationales

Configuration multi-région

  • Configurez les fuseaux horaires appropriés pour les marchés cibles

  • Tenez compte des préférences culturelles pour le placement du logo

  • Testez la fonctionnalité du panier dans différentes régions

  • Assurez-vous que les formats de date correspondent aux conventions locales

La section Logo Produit fournit un branding et des fonctionnalités essentiels pour les pages produit, créant une expérience d'achat cohérente qui renforce la confiance et encourage les conversions tout en maintenant la présence de votre marque tout au long du parcours client.

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.

PrécédentSection en-tête produitSuivantSection produits associés

Mis à jour