Panier et checkout sur Shopify : le visuel avant de payer

L'essentiel

Le panier et le checkout sur Shopify sont les deux écrans où la personne a déjà choisi le produit et peut encore renoncer avant de payer. Le panier confirme ce qui part, combien cela coûte et comment revenir. Le checkout demande la livraison et le paiement, et son visuel n'habite pas dans le thème de la boutique : il habite dans un éditeur à part. Le taux moyen documenté d'abandon de panier est de 70,22%, et une grande part de cela n'est pas « la personne a changé d'avis ». Le coût supplémentaire, le manque de confiance et un checkout long apparaissent avec un chiffre. Le bon dessin montre le total tôt, laisse acheter sans créer de compte devant, et n'utilise la marque que juste assez pour que la personne sache qu'elle est encore dans la même boutique. Ci-dessous, je sépare ce qui est l'écran du panier, ce que Shopify laisse changer sur n'importe quel forfait, et ce qui n'existe que sur Shopify Plus.

1. Ce que la personne doit voir avant de payer

Quelqu'un qui arrive au panier est déjà passé par la page produit. La question change. Ce n'est plus « ce produit convient-il ? ». C'est « combien vais-je payer à la fin, quand cela arrive, et que se passe-t-il si je renonce ? ».

Baymard sépare ceux qui ne faisaient que regarder de ceux qui se sont bloqués sur un problème de la boutique. 42% ont abandonné parce qu'ils n'allaient pas encore acheter. Cela ne se règle pas avec une bannière. Dans le reste, 40% ont cité un coût supplémentaire élevé (livraison, frais), 19% n'ont pas fait confiance au site avec la carte, 18% ont buté sur une demande de créer un compte, 17% ont trouvé le checkout long ou compliqué, 13% ont trouvé la politique de retour mauvaise et 12% n'ont pas pu voir le coût total avant.

Quand je dessine cette étape, j'utilise cet ordre. D'abord le total, avec la livraison ou une façon claire de la calculer. Ensuite le délai. Ensuite la politique d'échange, sur une ligne, avec un lien. La marque reste en haut, petite. Le bouton pour continuer reste dans le même bloc que le total, pas après un texte de campagne.

Si la boutique est encore en train d'être montée, la création et le réglage de boutiques Shopify est l'endroit où le panier, le thème et le checkout entrent dans le même projet. La page produit, qui vient avant, est dans l'article sur ce que le design doit montrer sur la page produit.

Ce que ce dessin ne couvre pas

Remplacer le checkout de Shopify par Yampi ou Cartpanda est une autre décision : paiement, frais et facture. L'article sur le checkout Shopify au Brésil, natif ou externe traite de cela. Ici, le sujet est le visuel et l'ordre de l'information, sur le panier et sur le checkout que Shopify dessine.

2. L'écran du panier

Le panier est le dernier écran où la personne modifie encore l'achat tranquillement. Chaque ligne doit avoir une photo, un nom, la variante, la quantité, le prix de la ligne et une façon évidente de retirer l'article. Une quantité sans le nom de la variante crée des demandes au support. Une photo minuscule fait douter que le bon article soit entré.

Le résumé reste collé au bouton, à côté sur ordinateur et juste au-dessus sur mobile. Il montre le sous-total, la livraison (ou le champ pour la calculer), la réduction s'il y en a une, et le total. Cacher la livraison jusqu'à la dernière étape répète le motif des 40% et des 12% : un coût qui apparaît tard.

Le coupon ne peut pas être l'élément le plus bruyant de l'écran. Un champ discret, avec l'étiquette « coupon », règle le cas de qui a un code. Une énorme bande « vous avez gagné une réduction » pousse le total vers le bas et retarde celui qui allait déjà payer.

Le lien pour revenir à la boutique reste visible. Les gens qui ouvrent le panier pour vérifier veulent encore regarder un autre produit. Si la seule sortie est le bouton de payer, une partie revient par le navigateur et perd le fil.

Sur mobile, le bouton pour continuer occupe la largeur utile et respecte la cible minimale des WCAG 2.2 : 24 par 24 pixels CSS. Une icône de corbeille collée à la quantité, sans zone de toucher, fait supprimer l'article sans le vouloir. Je laisse de l'espace entre la corbeille, la quantité et le nom.

3. Une page ou trois

Dans l'admin Shopify, la mise en page par défaut du checkout est d'une page. On peut passer à trois pages. L'aperçu de l'éditeur ne se met pas à jour sur le moment : après l'enregistrement, la vérification se fait sur le vrai checkout de la boutique.

Une page montre l'information, la livraison et le paiement dans le même flux, avec moins de sensation qu'« il reste encore des étapes ». Trois pages séparent cela en pas. Aucune des deux n'est magique. Ce qui pèse, c'est la quantité de champs, pas le nombre d'écrans.

Baymard décrit un flux serré avec 12 à 14 éléments de formulaire, ou 7 à 8 si l'on ne compte que les champs. La moyenne qu'ils enregistrent dans les checkouts des États-Unis est de 23,48 éléments par défaut, dont 14,88 de champs. Je ne promets pas de couper jusqu'à leur chiffre. Je regarde le checkout de la boutique et je barre ce qui ne décide ni la livraison ni le paiement : message marketing, inscription obligatoire, champ en plus de « comment nous avez-vous connus ».

La même recherche estime qu'une grande boutique, aux États-Unis et en Europe, peut gagner 35,26% de conversion rien qu'avec un meilleur dessin de checkout. C'est une moyenne de grandes boutiques de là-bas, pas un objectif pour votre boutique. Cela sert à rappeler que le problème est d'habitude l'écran, pas que « le Brésilien n'achète pas ».

Dans l'évaluation de 2025, 64% des sites desktop et 63% des sites mobile se sont retrouvés à une performance médiocre ou pire sur le checkout. Une grande boutique se trompe aussi. Un beau thème sur l'accueil ne répare pas cette étape.

4. Ce que le forfait permet de changer

Le checkout ne s'édite pas dans l'éditeur de thème. Shopify a un éditeur de checkout et de comptes, dans Paramètres, Checkout. C'est là qu'entrent le logo, la couleur, la police et les apps. Une partie de la marque que vous mettez sur le checkout passe aussi au compte du client.

La personnalisation standard vaut sur le forfait Basic ou au-dessus. Plus libère ce que l'aide appelle personnalisation avancée, la Checkout Branding API, et les apps sur les pages d'information, de livraison et de paiement. Une app sur la page de remerciement et sur le statut de la commande peut exister sur Basic, si l'app est éligible.

Source : centre d'aide Shopify, lu le 16/10/2026.

Pour la plupart des boutiques brésiliennes que je dessine, la ligne Basic couvre déjà le visuel : logo, couleur du bouton, couleur de fond, police de titre et de corps. Plus entre quand l'exploitation a besoin d'un bloc d'app au milieu du paiement ou d'un réglage fin par API. Ce n'est pas le premier pas d'une boutique qui ne montre même pas encore la livraison dans le panier.

Depuis le 5 février 2026, Shopify ne laisse plus ajouter d'image de fond dans l'en-tête ni dans la zone principale du checkout. Si une ancienne image existe déjà, on peut seulement la retirer, pas la remplacer. Je traite cela comme une limite, pas comme un bug : le checkout n'est pas un endroit pour une bannière.

Si le panier de votre boutique cache la livraison, le délai ou le total, envoyez l'URL du panier et le forfait. Si vous n'avez pas encore créé la boutique Shopify, parlez-moi avant de la créer : la boutique naît comme boutique de développement, est montée prête et transférée à votre nom.

Parler du projet

5. Logo, couleur et police sans concurrencer le paiement

Shopify elle-même demande un checkout simple. La phrase de l'aide est directe : les gens utilisent ces pages pour indiquer la livraison et le paiement, et trop de couleur distrait ou rend la lecture difficile. L'orientation est un contraste élevé et une image qui ne vole pas les mots.

En pratique, je prends trois décisions.

Le logo reste en haut, aligné à gauche ou au centre, dans une largeur qui ne pousse pas le formulaire vers le bas sur mobile. Un logo haut mange le premier écran. Le nom de la boutique est déjà dans l'en-tête. Si le logo répète le nom en lettres énormes, je le réduis.

La couleur du bouton et des mises en avant (les liens) vient de la marque, mais le texte du bouton doit passer le contraste. Les WCAG demandent au minimum 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 points, ou 14 en gras). Un bouton jaune avec une lettre blanche fine échoue d'habitude. Je teste la paire couleur de fond et couleur de la lettre avant d'enregistrer.

La police du checkout est une liste de Shopify, titre et corps séparés. Ce n'est pas la police du thème. Si la boutique utilise une police de marque très étroite, elle peut même ne pas apparaître ici. Je choisis la plus proche et je vérifie que le champ reste lisible. Un champ de carte en lettre décorative est l'endroit où la personne se trompe de numéro.

Les champs peuvent rester transparents. Avec le fond transparent, le texte du champ doit rester lisible sur la couleur de la page. Si je n'arrive pas à lire l'exemple dans le champ, je désactive le fond transparent.

La palette de l'éditeur sert à réutiliser la même couleur sur le bouton, le lien et l'alerte. On change l'hex sur un échantillon, cela change partout où cet échantillon est utilisé. Je monte la palette avec peu de couleurs : fond, texte, bouton et erreur.

6. Sur mobile, le résumé et le coupon commencent fermés

Sur mobile, le défaut de Shopify cache le résumé de commande et le champ de coupon dans une section repliée. La personne touche le résumé pour voir le total et le coupon. Cela économise de la hauteur, et cela cache aussi le chiffre qui évite l'abandon pour un coût surprise.

Il existe un réglage, « toujours montrer le champ de coupon », sur les deux mises en page. Sur une page, le coupon apparaît au-dessus du résumé replié. Sur trois pages, le résumé du haut s'ouvre par défaut, avec le coupon à côté.

J'active ce réglage quand la boutique vit de coupons, parce qu'un champ caché produit le message « je n'ai pas trouvé où mettre le code ». Je laisse quand même le résumé facile à ouvrir, avec le total partiel visible avant le toucher. Un total à zéro clic est mieux. Si la mise en page ne le montre pas, l'étiquette du résumé doit dire le montant, pas seulement « voir la commande ».

Le même soin de la zone de toucher vaut ici. Un lien « j'ai oublié le coupon » collé au champ, en tout petit et sans espace, échoue au critère de 24 pixels CSS. J'agrandis la cible ou j'écarte les deux contrôles.

7. Compte, délai et politique au bon moment

18% des personnes dans l'enquête de Baymard ont abandonné parce que le site a voulu qu'elles créent un compte. 62% des sites ne mettent pas l'achat en invité comme l'option la plus visible. Si le bouton invité existe mais qu'il est en petit texte sous « créer un compte », pour la personne c'est comme s'il n'existait pas.

Dans le dessin, « acheter sans compte » est le bouton principal. « J'ai déjà un compte » reste à côté, visible, sans être le premier. L'inscription peut être proposée après la commande, sur la page de remerciement, quand la personne a déjà payé.

Le délai de livraison entre avant le paiement, pas seulement dans l'e-mail. 20% des abandons sur la liste de Baymard l'ont été parce que la livraison était trop lente. Le design n'accélère pas la poste. Il évite que la personne découvre le délai après avoir tapé la carte.

La politique de retour, en une phrase avec un lien, reste près du total. 13% ont abandonné pour une mauvaise politique. Si la politique est claire et cachée dans le pied de page de l'accueil, l'effet en pratique est le même que de ne pas en avoir.

La confiance avec la carte (19%) ne se règle pas avec un badge générique empilé. Elle se règle avec un checkout sur le domaine de la boutique, le cadenas que le navigateur montre déjà, et aucun bloc étrange entre le champ de la carte et le bouton. Une app d'upsell dans le résumé peut exister. Si elle pousse le bouton de payer hors de l'écran, je la retire ou je la laisse après le paiement, sur la page de remerciement, où Basic permet déjà une app éligible.

Questions fréquentes

Peut-on donner au checkout l'apparence de la boutique sans Shopify Plus ?

Oui, pour le logo, les couleurs, la police, le fond et les champs dans l'éditeur de checkout, sur le forfait Basic ou au-dessus. Plus entre pour la personnalisation avancée, la Checkout Branding API et les apps au milieu des pages d'information, de livraison et de paiement. La plus grande part du visuel de marque que la personne remarque tient sur Basic.

Le checkout d'une page vend-il plus que celui de trois pages ?

Shopify laisse les deux. Le défaut est une page. Ce que la recherche montre, c'est un excès de champs, pas un vainqueur entre les mises en page. Je compte les champs de la boutique et je coupe ce qui ne sert ni à livrer ni à payer. Le changement de mise en page ne vaut qu'après avoir enregistré et ouvert le vrai checkout, parce que l'aperçu de l'éditeur ne montre pas le changement sur le moment.

Pourquoi le coupon n'apparaît-il pas sur mobile ?

Par défaut, le résumé et le coupon naissent repliés sur mobile. La personne ouvre le résumé pour voir. Si la boutique dépend du coupon, l'admin a l'option de toujours montrer le champ de coupon, au-dessus du résumé replié sur le checkout d'une page.

Le panier s'édite-t-il au même endroit que le checkout ?

Non. Le panier fait partie du thème. Le checkout s'édite dans Paramètres, Checkout, dans l'éditeur de checkout et de comptes. Une bannière et une section en plus que vous montez dans le thème ne passent pas au checkout. C'est pour cela que la marque du checkout est le logo, la couleur et la police, pas l'accueil entier.

Faut-il montrer la livraison déjà dans le panier ?

Qui ne voit pas le total avant de payer est dans le groupe des 12% qui ont abandonné pour cela, et un coût supplémentaire élevé est le motif de 40%, en dehors de ceux qui ne faisaient que regarder. Si la livraison dépend du CEP, le champ de CEP reste dans le panier, à côté du total, et pas seulement à la dernière étape.

Conclusion

Le panier et le checkout sur Shopify gagnent la vente quand le total, le délai et la sortie sans compte apparaissent avant que la personne doive trouver le courage de payer. Le thème s'occupe du panier. L'éditeur de checkout s'occupe de la marque à cette étape, et le forfait Basic couvre déjà le logo, la couleur et la police. Plus est un outil d'exploitation, pas un raccourci de mise en page. Si votre boutique perd déjà des gens à cette étape, voyez la création et le réglage de boutiques Shopify et envoyez l'URL du panier et le forfait de la boutique. Si vous n'avez pas encore créé la boutique Shopify, parlez-moi avant de la créer : la boutique naît comme boutique de développement, est montée prête et transférée à votre nom.

Parler du projet