Tiroir du panier
Pour Plain Jane, et Plain Jane Interactive
Ce que vous apprendrez
Comment activer et styliser le tiroir de panier déroulant
Options de personnalisation avancées incluant les arrière-plans et les minuteries FOMO
Comment optimiser l'expérience du panier pour de meilleures conversions
📋 Aperçu
Le Tiroir du panier est un panneau coulissant qui apparaît lorsqu'un client ajoute un produit à son panier. Il offre un flux d'achat amélioré en permettant aux utilisateurs de consulter leur panier sans quitter la page en cours, augmentant les taux de conversion et améliorant l'expérience utilisateur.
💡 Remarque: Cela remplace la page de panier traditionnelle. Vous pouvez utiliser soit le tiroir de panier, soit la page de panier, mais pas les deux simultanément.
🔧 Comment activer
Aller à Paramètres du thème > Tiroir du panier
Basculer Activer le tiroir de panier sur
activéConfigurez les options de personnalisation ci-dessous
🎨 Options de style de base
Couleurs et apparence
Couleur d'arrière-plan
Personnalisez l'arrière-plan principal du panneau du tiroir
Par défaut :
#ffffff(blanc)Prend en charge toute valeur de couleur hexadécimale
Couleur du texte
Contrôle la couleur de texte générale à l'intérieur du tiroir
Par défaut :
#000000(noir)Affecte les noms de produits, les quantités et le contenu général
Style des boutons
Couleur du bouton: Arrière-plan du bouton d'action principal (Ajouter au panier, Paiement)
Couleur du texte du bouton: Couleur du texte sur les boutons
Par défaut : fond noir avec texte blanc
Dimensions du tiroir
Largeur du tiroir
Largeur ajustable de 300px à 320px
Par défaut :
320pxOptimisé pour la consultation sur mobile et sur bureau
⏰ Fonction minuterie FOMO
Créez de l'urgence et incitez à des décisions d'achat plus rapides avec la minuterie FOMO (peur de manquer) intégrée.
Configuration de la minuterie
Afficher la minuterie FOMO
Activez/désactivez la minuterie d'urgence
Par défaut : Activé
Style de la minuterie
Couleur de fond de la minuterie FOMO: Fond de la bannière d'alerte (par défaut :
#ffeb3b- jaune)Couleur du texte de la minuterie FOMO: Couleur du texte de la minuterie (par défaut :
#333333- gris foncé)
Contenu de la minuterie
Texte de la minuterie FOMO: Message d'urgence personnalisable
Par défaut : "L'offre expire dans :"
Exemples : "Offre limitée !", "Le panier expire bientôt !", "Dépêchez-vous ! Il n'en reste que quelques-uns !"
Durée de la minuterie
Durée de la minuterie FOMO: Définir le temps du compte à rebours (1-72 heures)
Par défaut : 24 heures
La minuterie se réinitialise à chaque nouvelle session de panier
💰 Options de prix et de devise
Affichage de la devise
Afficher le prix avec la devise
Afficher/masquer les symboles/codes de devise avec les prix
Par défaut : désactivé (affiche les prix sans indicateurs de devise)
Utile pour les boutiques internationales ou les configurations multi-devises
🖼️ Personnalisation avancée de l'arrière-plan
Arrière-plan des articles du panier
Transformez votre tiroir de panier avec des images d'arrière-plan personnalisées :
Image d'arrière-plan
Téléchargez une image d'arrière-plan personnalisée pour la zone des articles du panier
Prend en charge les formats d'image standard (JPG, PNG, WebP)
Taille recommandée : 500x600px ou plus
Options de taille d'arrière-plan
Couvrir: Met l'image à l'échelle pour couvrir toute la zone (peut être recadrée)
Contenir: Met l'image à l'échelle pour tenir dans la zone (affiche l'image entière)
Auto: Utilise la taille naturelle de l'image
Position de l'arrière-plan
Centre: Centre l'image dans l'espace disponible
Haut gauche: Positionne l'image en haut à gauche
Haut droite: Positionne l'image en haut à droite
Bas gauche: Positionne l'image en bas à gauche
Bas droite: Positionne l'image en bas à droite
🚀 Meilleures pratiques
Recommandations de conception
Harmonie des couleurs
Utilisez des couleurs qui complètent votre thème global
Assurez un contraste suffisant pour l'accessibilité
Testez la lisibilité sur différents appareils
Utilisation de la minuterie FOMO
Utilisez-la avec parcimonie pour maintenir son efficacité
Choisissez un message urgent mais non agressif
Testez différents réglages de durée pour votre audience
Images d'arrière-plan
Utilisez des images subtiles et à faible contraste qui n'interfèrent pas avec le texte
Optimisez la taille des fichiers image pour un chargement plus rapide
Considérez l'expérience de visualisation mobile
Optimisation de la conversion
Appels à l'action clairs
Rendez les boutons de paiement visibles et accessibles
Utilisez des couleurs contrastées pour les boutons importants
Gardez le chemin vers l'achat simple et évident
Expérience mobile
Testez la fonctionnalité du tiroir sur de vrais appareils mobiles
Assurez-vous que les cibles tactiles sont de taille appropriée
Vérifiez que le texte reste lisible sur les écrans plus petits
Performance de chargement
Optimisez les images d'arrière-plan pour le web
Testez la vitesse d'ouverture du tiroir sur des connexions plus lentes
Surveillez l'impact sur les performances globales de la page
🔧 Dépannage
Problèmes courants
Le tiroir n'apparaît pas
Vérifiez que « Activer le tiroir de panier » est activé
Vérifiez si la page du panier crée un conflit
Testez l'ajout de produits pour déclencher le tiroir
La minuterie FOMO ne fonctionne pas
Assurez-vous que la minuterie est activée dans les paramètres
Vérifiez la prise en charge de localStorage par le navigateur
Vérifiez que la durée de la minuterie est correctement définie
Problèmes d'image d'arrière-plan
Confirmez que l'image a été correctement téléchargée
Vérifiez la taille et le format du fichier image
Testez différents réglages de taille d'arrière-plan
Problèmes d'affichage sur mobile
Testez sur de vrais appareils mobiles
Vérifiez la largeur du tiroir sur les écrans plus petits
Vérifiez que la fonctionnalité tactile fonctionne correctement
📱 Considérations mobiles
Le tiroir s'adapte automatiquement aux tailles d'écran mobile
Contrôles et boutons adaptés au toucher
Espacement optimisé pour la navigation au doigt
Mise en page simplifiée pour les écrans plus petits
⚡ Conseils de performance
Gardez les images d'arrière-plan sous 200 Ko lorsque c'est possible
Utilisez le format WebP pour une meilleure compression
Testez les temps de chargement avec différentes vitesses de réseau
Surveillez l'impact sur les performances globales du site
Mis à jour