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

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

2. Basculer Activer le tiroir de panier sur activé

3. 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 : 320px

• Optimisé 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

---