Tiroir du panier

Pour Plain Jane et Plain Jane Interactive

Ce que vous apprendrez

• Comment activer et styliser le tiroir de panier coulissant

• 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: Ceci remplace la page panier traditionnelle. Vous pouvez utiliser soit le tiroir du panier soit la page panier, mais pas les deux simultanément.

---

🔧 Comment activer

1. Aller à Paramètres du thème > Tiroir du panier

2. Basculer Activer le tiroir du panier à sur

3. Configurez les options de personnalisation ci-dessous

---

🎨 Options de style de base

Couleurs et apparence

Couleur d’arrière-plan

• Personnaliser l'arrière-plan du panneau principal du tiroir

• Par défaut : #ffffff (blanc)

• Prend en charge toute valeur de couleur hexadécimale

Couleur du texte

• Contrôle la couleur générale du texte à 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: Fond du bouton d'action principal (Ajouter au panier, Commander)

• 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 réglable de 300px à 320px

• Par défaut : 320px

• Optimisé pour une visualisation mobile et bureau

---

⏰ Fonction minuterie FOMO

Créez un sentiment d'urgence et incitez à des décisions d'achat plus rapides avec la minuterie FOMO (Fear of Missing Out) intégrée.

Configuration de la minuterie

Afficher la minuterie FOMO

• Basculer pour activer/désactiver 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 : "Offre expirant dans :"

• Exemples : "Offre à durée 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

• Basculer pour afficher 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 standards (JPG, PNG, WebP)

• Taille recommandée : 500x600px ou plus

Options de taille d'arrière-plan

• Cover: Redimensionne l'image pour couvrir toute la zone (peut rogner)

• Contain: Redimensionne l'image pour s'adapter à 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 dans le coin supérieur gauche

• Haut droite: Positionne l'image dans le coin supérieur droit

• Bas gauche: Positionne l'image dans le coin inférieur gauche

• Bas droite: Positionne l'image dans le coin inférieur droit

---

🚀 Bonnes 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

• Prenez en compte l'expérience de visualisation sur 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 parcours d'achat simple et évident

Expérience mobile

• Testez la fonctionnalité du tiroir sur de vrais appareils mobiles

• Assurez-vous que les cibles tactiles ont une 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 du panier" est activé

• Vérifiez si la page panier entre en 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 tactile

• 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 200Ko lorsque c'est possible

• Utilisez le format WebP pour une meilleure compression

• Testez les temps de chargement avec diverses vitesses réseau

• Surveillez l'impact sur les performances globales du site

---