Qu’est-ce qu’un cart drawer sur Shopify et comment ça marche
Découvrez ce qu’est un cart drawer Shopify, comment il fonctionne et pourquoi il convertit jusqu’à 45 % mieux qu’une page panier classique. Conseils inclus.
70 % de vos acheteurs vont abandonner leur panier. Pas 20 %. Pas 30 %. Soixante-dix pour cent. Et la plupart des boutiques Shopify aggravent la situation en envoyant ces clients vers une page panier séparée : une étape de plus, qui fait fuir du trafic avant même qu’il atteigne le checkout.
Le cart drawer règle ce problème. Voici précisément ce que c’est, comment ça fonctionne et comment l’utiliser pour convertir davantage le trafic que vous payez déjà.
Qu’est-ce qu’un cart drawer sur Shopify ?
Un cart drawer (aussi appelé panier coulissant, tiroir panier ou mini panier) est un panneau qui glisse depuis le bord de l’écran quand un client ajoute un produit à son panier. Il se superpose à la page en cours sans rediriger l’acheteur où que ce soit.
Le client voit son article, le total du panier, les upsells ou promotions que vous avez configurés, et un bouton de checkout. Ensuite, il peut le fermer et continuer sa navigation. Ou passer commande immédiatement. C’est lui qui choisit.
Tout l’intérêt est là. Chaque fois qu’une page panier classique se charge, vous demandez au client de quitter le produit qu’il était en train de regarder. Certains reviennent. La plupart, non.
Par défaut, Shopify envoie les clients vers une URL /cart dédiée. Le cart drawer supprime complètement cette redirection. L’expérience paraît plus rapide, plus légère, et donne moins l’impression d’être poussé dans un tunnel.
Comment fonctionne un cart drawer (techniquement)
Quand l’acheteur clique sur « Ajouter au panier », un événement JavaScript se déclenche et lance l’animation du tiroir. Le contenu du panier se met à jour via l’API AJAX Cart de Shopify, sans rechargement de page. Le tiroir glisse depuis la droite (ou la gauche, selon votre thème) et reste fixé en surimpression par-dessus la page en cours.
La page reste visible en arrière-plan. L’acheteur peut fermer le tiroir en cliquant sur la croix, en appuyant sur Échap ou en touchant l’extérieur du panneau. Rien de tout cela ne change l’endroit où il se trouve sur la page.
C’est différent d’un panier en popup, qui apparaît au centre et bloque entièrement la page. C’est aussi différent d’un mini panier déroulant, qui se place généralement près de l’icône du panier et vous laisse très peu d’espace.
Le format tiroir vous offre la plus grande surface : de la place pour une barre de progression vers la livraison gratuite, des upsells produits, des badges de confiance et un bouton de checkout, le tout sans sortir le client de son parcours d’achat.
Cart drawer ou page panier : les chiffres de conversion
La plupart des boutiques Shopify utilisent encore une page panier, simplement parce qu’elle était fournie avec le thème installé. C’est une erreur.
Les cart drawers offrent un multiplicateur de chiffre d’affaires de 3,2x avant le checkout. Les pages panier complètes plafonnent en moyenne à 2,2x. Ce n’est pas du bruit statistique : c’est un écart de performance de 45 % qui tient uniquement à la façon dont les clients interagissent avec leur panier.
Le calcul est simple. L’abandon sur page panier dépasse systématiquement les 70 %. Chaque redirection est une nouvelle occasion de douter. Un nouvel indicateur de chargement. Une nouvelle notification sur le téléphone qui détourne l’attention. Le cart drawer supprime ces moments en gardant le client sur la page qui l’intéressait déjà.
Sur mobile, l’écart se creuse encore. Entre 70 et 80 % du trafic Shopify vient du mobile, mais le mobile ne convertit qu’à 1,8 %, contre 3,9 % sur ordinateur. La raison n’est ni le produit ni le prix : c’est la friction. Sur mobile, les redirections paraissent plus lentes et plus perturbantes que sur ordinateur. Un panier coulissant qui n’impose aucun changement de page colle bien mieux aux usages mobiles qu’un chargement de page complet.
Les boutiques qui passent d’une page panier à un tiroir font état de hausses du taux de conversion de 8 à 15 % dans les 30 premiers jours, sans rien changer au produit, aux prix ni au trafic.
Que mettre dans votre cart drawer
Un tiroir basique avec une simple liste de produits et un bouton de checkout vaut mieux qu’une page panier. Mais pas suffisamment.
Barre de progression vers la livraison gratuite, placée en haut. Pas cachée tout en bas. Les acheteurs qui voient exactement ce qui les sépare de la livraison gratuite réagissent. Les boutiques qui placent la barre en haut du tiroir constatent un panier moyen 10 à 15 % plus élevé que celles qui s’en passent.
Un seul upsell dans le panier. Une recommandation produit, directement liée à ce qui se trouve déjà dans le panier. Pas trois. Pas un carrousel entier. Une suggestion ciblée. Un client achète des chaussures de running ? Proposez des chaussettes de compression ou une semelle. C’est tout.
Des éléments de réassurance près du bouton de checkout. Les logos de paiement (Visa, Mastercard, PayPal, Apple Pay), une mention « Paiement sécurisé » et, éventuellement, un badge « Satisfait ou remboursé ». Ils comptent surtout pour les visiteurs qui arrivent pour la première fois depuis une publicité, c’est-à-dire l’essentiel de votre trafic froid.
Des commandes de quantité et de suppression claires. Tout client qui a ajouté la mauvaise variante ou la mauvaise quantité doit pouvoir corriger facilement depuis le tiroir. S’il n’y arrive pas, il part. Donnez-lui des boutons +/−, une option de suppression visible et un sélecteur de variante si vos produits en ont.
Un bouton de checkout très contrasté en bas. Toujours visible sans faire défiler. Cela semble évident. Pourtant, une part importante des thèmes Shopify repousse le bouton de checkout sous la ligne de flottaison dès qu’un upsell est affiché. Le bouton de checkout doit être l’élément visuellement dominant de la moitié inférieure du tiroir.
À éviter : les champs de code promo en haut (ils envoient les clients chercher des codes ailleurs), plus d’une recommandation d’upsell et toute animation plus lourde qu’un simple glissement de 200 ms.
3 façons d’ajouter un cart drawer à Shopify
Tous les thèmes Shopify ne sont pas livrés avec un cart drawer. Et même ceux qui en ont un manquent souvent d’upsells, de barres de progression ou de vraies options de personnalisation.
Option 1 : l’activer dans les paramètres du thème. Les thèmes récents comme Dawn, Refresh et Sense intègrent un cart drawer natif. Allez dans Boutique en ligne → Thèmes → Personnaliser, trouvez les paramètres du panier et passez de « Page panier » à « Tiroir ». Deux minutes suffisent. La contrepartie : c’est une version minimaliste, sans upsells, sans barre de progression, sans statistiques.
Option 2 : le développer sur mesure. Si vous avez un développeur ou maîtrisez Liquid et JavaScript, vous pouvez créer un tiroir entièrement personnalisé qui fait exactement ce que vous voulez. Contrôle total. Le coût : 4 à 8 heures de développement, plus une maintenance à chaque mise à jour de l’API Cart de Shopify.
Option 3 : utiliser une app dédiée. Le chemin le plus rapide vers un cart drawer complet, avec upsells, barres de livraison gratuite, badges de confiance et statistiques inclus. Des apps comme ConvertX regroupent le cart drawer avec d’autres widgets de conversion (sticky add to cart, barres d’annonce, upsells dans le panier) pour vous éviter de gérer cinq apps distinctes pour cinq fonctionnalités distinctes.
Méthode | Temps d’installation | Upsells inclus | Barre de progression | Coût |
Paramètres du thème | 5 minutes | Non | Non | Gratuit |
Code sur mesure | 4 à 8 heures | À développer soi-même | À développer soi-même | Frais de développeur |
App dédiée | 15 à 30 minutes | Oui | Oui | 20 à 35 $/mois |
Les erreurs de cart drawer qui tuent les conversions
La plupart des marchands installent un cart drawer et s’arrêtent là. C’est une erreur.
Ne pas tester sur mobile. Entre 70 et 80 % de votre trafic est sur mobile. Si le tiroir ne s’ouvre pas proprement sur un écran de 375 px (boutons trop petits, panneau qui chevauche la navigation, glissement pour fermer qui ne répond pas), vos conversions mobiles en pâtiront. Testez sur de vrais appareils avant de publier.
Afficher des upsells hors sujet. Un upsell sans rapport dans le cart drawer est pire que pas d’upsell du tout. Des recommandations hors sujet montrent que votre boutique ne comprend pas ce que le client achète. Utilisez les tags produits ou les collections pour cibler vos recommandations. La pertinence prime sur tout le reste.
Une animation du tiroir trop lente. Si le tiroir met plus de 300 ms à s’ouvrir, les clients le remarquent. À 500 ms, ils commencent à cliquer ailleurs. Gardez une implémentation légère : évitez de charger des scripts externes ou des images non préchargées dans le panneau.
Oublier de trancher la question du champ code promo. Si vos clients arrivent avec des codes promo (flows email, campagnes d’influence, publicités), il vous faut un plan. Soit vous prenez clairement en charge les codes dans le tiroir, soit vous supprimez le champ et appliquez les remises automatiquement. Un champ code promo vide et visible pousse les clients à partir chercher des codes qu’ils n’ont pas, et une part non négligeable d’entre eux ne reviendra pas.
Ce que les cart drawers les plus performants ont en commun
Les tiroirs qui convertissent le mieux partagent quelques choix de design peu évidents, que la plupart des marchands ratent.
Ils s’ouvrent automatiquement au premier ajout au panier, puis se mettent à jour discrètement ensuite. L’acheteur expérimenté qui remplit un panier de plusieurs articles ne veut pas être interrompu par le tiroir à chaque clic. Ouverture automatique une fois, puis on se fait oublier.
Ils gardent des miniatures produits assez grandes pour être parlantes : 60 × 60 px au minimum. Les clients décident sous le coup de l’émotion. Voir le produit dans le panier conforte l’achat qu’ils viennent de faire. Des miniatures minuscules ou absentes affaiblissent ce renforcement au pire moment.
Ils affichent le prix total à deux endroits : à côté des articles et à nouveau près du bouton de checkout. Ce n’est pas redondant : cela réduit le choc du prix au checkout, car découvrir le montant total pour la première fois à cette étape est l’un des déclencheurs d’abandon les plus fréquents.
Ils proposent un lien « Continuer mes achats » à côté du bouton de fermeture. Une invitation explicite à continuer la navigation réduit l’anxiété liée au checkout chez les clients qui ne sont pas tout à fait prêts. Paradoxalement, faciliter la sortie du tiroir augmente le nombre de clients qui y reviennent.
Les meilleurs cart drawers ne donnent pas l’impression d’un tunnel de commande. Ils s’intègrent naturellement à l’expérience d’achat : une barre latérale toujours disponible, jamais intrusive, et prête au moment où le client décide qu’il a fini de regarder.
Les priorités si vous partez de zéro
- Activez ou installez d’abord un cart drawer. Si votre thème le propose nativement, faites la bascule aujourd’hui. Sinon, installez une app : la configuration prend 15 à 30 minutes et l’impact est immédiat.
- Ajoutez une barre de progression vers la livraison gratuite. Fixez votre seuil 20 à 30 % au-dessus de votre panier moyen actuel. Affichez l’écart : « Plus que 14 $ pour la livraison gratuite ». Et regardez les clients le combler.
- Configurez un seul upsell ciblé. Choisissez votre combinaison de produits la plus souvent achetée. Définissez-la comme recommandation unique dans le tiroir. À ce stade, la pertinence compte bien plus que le design.
- Ajoutez des éléments de réassurance près du checkout. Les logos de paiement et une mention « Paiement sécurisé » s’ajoutent en 5 minutes et ont un impact démesuré sur le trafic froid qui ne connaît pas encore votre marque.
- Testez tout sur mobile avant la mise en ligne. Ajoutez un produit depuis votre téléphone. Utilisez le tiroir de bout en bout. Vérifiez que le bouton de checkout est visible immédiatement, sans faire défiler.
Une étape. Cette semaine. Mesurez pendant deux semaines, puis passez à la suivante.
Questions fréquentes
Oui, et les données sont constantes. Les cart drawers offrent un multiplicateur de chiffre d’affaires de 3,2x avant le checkout, contre 2,2x pour les pages panier classiques. Les boutiques qui associent le tiroir à une barre de livraison gratuite et à un upsell dans le panier voient leur panier moyen augmenter jusqu’à 73,8 %. La raison de fond : moins de redirections, c’est moins de moments où le client décroche, et garder l’acheteur sur la fiche produit qu’il consultait réduit la friction psychologique qui provoque l’abandon.
Dans votre admin Shopify, allez dans Boutique en ligne → Thèmes → Personnaliser. Cliquez sur « Panier » dans le panneau de paramètres à gauche. Si votre thème le permet, vous verrez une liste déroulante « Type de panier » avec les options « Page panier », « Tiroir » et parfois « Fenêtre contextuelle ». Sélectionnez « Tiroir » et enregistrez. Si cette liste déroulante n’apparaît pas, votre thème actuel n’intègre pas de cart drawer natif : il vous faudra une app tierce ou un développement sur mesure pour en ajouter un.
Dans les faits, ces termes sont souvent employés l’un pour l’autre, mais ils désignent deux schémas d’UX différents. Le cart drawer est un panneau pleine hauteur qui glisse depuis le côté de l’écran et vous laisse le plus d’espace pour les upsells, les barres de progression et les éléments de réassurance. Le mini panier est généralement un menu déroulant compact près de l’icône du panier. Dans la plupart des cas, le cart drawer surpasse le mini panier, car sa surface plus grande vous donne davantage de contrôle sur l’expérience avant le checkout.