Comment Optimiser son Checkout (Pages de paiement) sur Shopify et Shopify Plus ?

Toutes les optimisations dont vous avez besoin pour augmenter votre taux de conversion au checkout sur Shopify

Comment Optimiser son Checkout (Pages de paiement) sur Shopify et Shopify Plus ?
Comment Optimiser son Checkout (Pages de paiement) sur Shopify et Shopify Plus ?

Rédigé par

Thomas Giraud
06/2023

Le checkout est un élément essentiel dans toute boutique en ligne, et le rendre aussi efficace et transparent que possible est crucial pour maximiser les ventes et minimiser les abandons de panier. Voici quelques astuces pour améliorer le processus de checkout pour les boutiques Shopify et Shopify Plus.

Optimisations basiques du Checkout Shopify (Pour tous les plans Shopify)

Notez avant tout que vous pouvez éditer chaque mention de texte depuis vos paramètres de langues (ou contenu) de la boutique.

Maintenant, découvrons ensemble les modifications que vous pouvez appliquer sur vos pages de paiement Shopify afin d’optimiser ces étapes primordiales à la finalisation d’un achat de la part de votre client. L’objectif sera de rassurer votre futur client et de faire disparaître un maximum de frictions.

Ajout de mention d’assistance et support au Checkout

Il est important de montrer à votre utilisateur qu’il peut vous faire confiance. Et ce, pendant toutes les étapes de votre tunnel de ventes.

Sur votre Checkout Shopify, c’est d’autant plus important car votre utilisateur a (techniquement) une intention d’achat. Il est convaincu par votre produit, il a décidé d’aller de l’avant mais tout n’est pas joué.

Il peut être en désaccord avec certaines modalités, informations, moyens de paiement ou une simple incompréhension. Même si le Checkout Shopify est par défaut assez clair, nous vous recommandons de laisser un moyen de contact présent à tout moment pour rassurer votre utilisateur.

Pour ce faire, nous utiliserons seulement la bannière, disponible dans vos paramètres de thème Shopify. Elle réunira votre logo ainsi que vos informations de contact.

Exemple par défaut :

Checkout shopify par défaut

Exemple avec les informations de contact dans la bannière :

Checkout shopify avec informations de contact

Notez que, le fait d’afficher un numéro de téléphone n’augmente pas significativement le nombre d’appels que vous allez recevoir. Cependant, il augmente le niveau de confiance en ayant la possibilité de vous contacter à tout moment.

Nous vous recommandons tout de même de traiter ces appels avec la plus grande attention, les informations que vous en tirerez vous serviront à améliorer de nombreux aspects de votre entreprise (Produit, publicités, site web, communication globale, …)

Suppression de Champs optionnels sur le Checkout Shopify

Le fait de supprimer des champs de formulaire qui ne sont pas indispensables vous permettra de réduire le chemin à parcourir jusqu’à votre appel à l’action principal (le passage à l’étape suivante).

Si votre cible n’est pas un professionnel, nous vous invitons à supprimer le champ “Entreprise”, par défaut optionnel sur Shopify.

Champ optionnel d'entreprise sur Shopify
Paramètres checkout (Entreprise) sur Shopify

Nous vous invitons également à consulter si d’autres champs de formulaire sont inutilisés dans votre cas précis.

Solutions de paiements rapides sur le Checkout Shopify

Paypal ne devrait pas être la seule solution de paiement express disponible sur votre boutique en ligne (même si elle est importante).

Aujourd’hui, si votre discours permet de convaincre vos utilisateurs et que vous générez des ventes de manière stable : Réduire le nombre d’étapes ou faciliter la complétion de ces dernières devient primordial. Plus votre utilisateur passera de temps sur votre checkout, plus vous aurez d’opportunités de le perdre.

Nous vous recommandons d’avoir plus de solutions express. Parmi les plus connues vous trouverez :

  • Amazon Pay
  • Apple Pay
  • Google Pay
  • PayPal
  • Shop Pay (agit même comme un argument d’autorité pour les pays ayant le plus acquis cette solution, comme aux états-unis)

Choisissez 3 à 4 solutions maximum pour qu’elles se positionnent sur la même ligne.

Exemple avec Paypal seulement :

Exemple avec plus de solutions de paiement express dans votre Checkout Shopify :

Voici quelques statistiques trouvées dans cet article pour Shop pay :

Le temps nécessaire pour remplir automatiquement les formulaires des clients Shop Pay est passé de 3,3 à 0,7 secondes. Le temps total de chargement a diminué de 7,4 à 4,7 secondes.

Enfin, nous vous invitons à mieux différencier les moyens de paiement express du formulaire classique. Nous avons remarqué que c’est d’autant plus pertinent lorsque vous visez une audience plus agée.

Exemple par défaut :

Exemple en ayant modifié la mention “OU” :

Ajout de réassurances sur votre Checkout Shopify

Allons dans le même sens que ce que nous cherchons à faire depuis le début : Rassurer notre utilisateur au maximum et limiter les frictions.

Naturellement, le paiement et le prix sont les points qui soulèvent le plus d’objections à l’achat.

Pour ce faire, malheureusement, hors Shopify Plus il sera difficile de creuser ce point en détail. Cependant, vous pouvez déjà remplacer le mot “Paiement” présent dans le fil d’ariane par “Paiement sécurisé”, exemple :

Même principe pour les autres mentions du mot “Paiement” comme ce bouton “Continuer vers le paiement” en étape 2 de votre Checkout Shopify, ou vous pouvez Ajouter aussi “Continuer vers le paiement sécurisé”.

Détails de livraison :

Nous vous recommandons de rédiger vos politiques d’expédition dans les encarts réservés aux pages légales de Shopify.

Ainsi, vous aurez la possibilité d’afficher tous les détails liés à la livraison dans une petite bulle d’information à côté de la mention “Livraison”, dans le bloc d’annonce du prix.

Voici à quoi cela ressemble :

Nous vous recommandons ensuite de créer une structure de page assez visuelle et espacée pour que l’utilisateur accède facilement à l’information qu’il recheche.

Exemple :

Bonus : Livraison offerte

Enfin, petit Bonus si vous offrez la livraison sans minimum d’achat. Sous le total, en face de “Livraison”, vous aurez par défaut le texte suivant “Livraison calculée à l’étape suivant

Exemple par défaut :

Exemple après modification :

Je sais, ces changements ne sont peut-être pas ce que vous espérez

Malheureusement, depuis quelques années, les solutions externes de Checkout en un clic sur Shopify ont été bannies car elles permettaient de détourner les frais par achat appliqués par Shopify.

Shopify a cependant sorti un nouveau Checkout en une page accessible seulement aux boutiques Shopify Plus. Jusqu’à maintenant, les boutiques Shopify Plus débloquaient un fichier checkout.liquid permettant d’ajouter du code personnalisé dans les différentes étapes du checkout. Même s’il est déjà possible de jongler sur le novueau Checkout de Shopify, le fichier checkout.liquid sera abandonné et disparaîtra pour tout le monde à partir du 13 août 2024.

En attendant, découvrez ce que l’on peut faire une fois que nous avons accès au fichier checkout.

Optimisations du Checkout avancées pour les forfaits Shopify Plus

Dans cette partie, nous allons vous partager de nombreuses modifications avancées effectuées par nos soins ou non, sur différentes boutiques Shopify Plus.

Notez que certaines modifications peuvent s’avérer très techniques quand d’autres le sont beaucoup moins mais vous devrez dans tous les cas passer par de la technique.

En s’appuyant sur la capture d’écran ci-dessous, notez que les encarts violets seront accessibles assez facilement avec du HTML. Alors que pour modifier les autres parties, vous devrez injecter vos changements à l’aide de Javascript lors du chargement de la page.

Possibilité de lancer des A/B tests sur le Checkout

En dehors de Shopify Plus, il n’est pas possible de mener des tests A/B sur les étapes de Checkout car nous n’avons pas la possibilité d’y intégrer des scripts.

Mais sur Shopify Plus c’est possible !

Si vous nous connaissez et si pilotez correctement votre activité, vous savez que nous ne pouvions nous fier qu’à la donnée. L’A/B test étant la seule manière d’optimiser vos performances on-site avec méthode.

Choix du point relais avant achat

C’est un problème assez connu et une grosse friction pour le client final qui, depuis les autres forfait de shopify, doit choisir le mode “Point relais” et payer, sans savoir dans quel point relais arrivera son produit.

Heureusement, grâce à l’accès au fichier de checkout.liquid, c’est un problème que nous pouvons résoudre rapidement comme le montre cet exemple/

Livraison offerte annoncée dynamiquement dans le Checkout

En commençant par la dernière recommandation que nous vous avons faite. Si vous n’offrez pas la livraison tout le temps, vous aurez la possibilité d’afficher directement le montant de la livraison sur la première étape en fonction du montant total de la commande.

Vous pourrez ainsi éviter les mauvaises surprises sur les étapes suivantes.

Exemple par défaut :

Exemple après :

Au dessus d’un certain montant, nous pourrons également remplacer ce montant par une mention “Gratuite”.

La différence avec Shopify classique, c’est que vos textes ne sont plus fixes et peuvent être modifiés en fonction des conditions de votre choix :

  • Si produit X fait partie de la commande
  • Si le montant total est inférieur à 150€
  • etc…

Fil d’ariane et annonce des différentes étapes du Checkout

Dans la section concernant les modes de paiement express, nous disions qu’il est important de réduire le nombre d’étapes ou faciliter la complétion de ces dernières.

Si vous ne pouvez ni réduire ni faciliter, vous pouvez donner une meilleure vue d’ensemble à votre prospect sur les étapes à accomplir jusqu’à la fin.

C’est toujours plus agréable d’avancer sachant ou se trouve la ligne d’arrivée.

Pour cette raison, nous vous conseillerons de mieux mettre en avant les différentes étapes visuellement ainsi que celle sur laquelle nous nous trouvons :

Si on regarde bien ces captures d’écran, on remarque qu’ils ont tous retiré leur première étape (et lien) “Panier >” pour ne pas inciter l’utilisateur à revenir en arrière.

D’ailleurs, petite idée en passant : Vous pourriez indiquer quelque part le temps moyen de complétion des étapes de paiement pour encore mieux projeter votre utilisateur. Un peu comme le temps de lecture à côté des articles de blog 🙂

Upsells et Cross-sells

Depuis votre Checkout Shopify Plus, vous avez également la possibilité d’ajouter des upsells ou cross-sells sur vos différentes étapes de paiement.

Vous pourrez ainsi permettre à votre utilisateur d’augmenter la quantité d’un produit présent dans son panier, de commander une version améliorée ou simplement un produit complémentaire.

Voici deux exemples :

Réassurances

Pour aller plus loin au sujet des réassurances (ce que nous n’avons pas pu faire à travers les autres forfaits Shopify), vous pouvez ajouter facilement du code sous votre bloc d’annonce du prix du produit (Desktop) et après votre formulaire (Mobile).

Vous pouvez communiquer vos réassurances comme dans cet exemple :

Vous pouvez aussi communiquer d’autres arguments comme l’argent que vous reversez à des associations et les causes auxquelles vous contribuez. Exemple :

Ajout d’urgence

Bien utilisé, l’urgence peut avoir un impact assez fort sur les performances de vos pages de paiement. Naturellement, en ayant accès au code de votre checkout, vous pourrez ajouter ce que vous voulez, voici un exemple :

Pour avoir testé ce genre de composants, utilisez-les avec parcimonie. Les fausses mentions peuvent impacter négativement vos performances à long terme ou déclencher de potentiels conflits avec certaines autorités.

Bonus : Essayez avant d’acheter pour 0€

Vous l’avez compris, tout est possible ou presque. Pour aller plus loin et vous donner quelques idées supplémentaires, il est possible de modifier vos prix et de choisir d’afficher ou non certains modes de paiement.

C’est le cas dans cet exemple, et c’est le clou du spectacle ! Vous donnez la possibilité à votre prospect de passer les étapes de checkout pour 0€ (Aujourd’hui).

Concernant la solution, nous utilisond https://elyn.io/ mais pour appliquer cette logique, ce n’est que du code personnalisé.

Premièrement, sur les fiches produit, vous avez un bouton d’ajout au panier ainsi qu’une seconde option à 0€ comme ceci :

Ensuite, si vous cliquez sur ce bouton, vous vous retrouverez au panier avec un total à payer aujourd’hui de… 0€ !

Et ce n’est pas tout ! Car cette logique est suivie lors des étapes de Checkout comme vous pouvez le voir ici :

Enfin, pour ne pas déconcentrer l’utilisateur, nous cachons toutes les autres méthode de paiement pour ne laisser que celle sélectionnée et le tour est joué !

Conclusion

Lorsqu'il s'agit d'optimisation de taux de conversion, ne vous limitez jamais aux contraintes que Shopify vous impose. Il y a toujours un moyen de contourner la plateforme à votre avantage, en accord avec votre typologie de produit et votre cible afin de répondre au mieux à leurs potentielles objections.

Nous espérons que cet article vous sera utile !

Contactez-nous