Salut ! C’est Pascal. J’espère que tu vas bien.
Aujourd’hui, je vais te montrer une vidéo sur une stratégie de circuit client sur le cycle d’achat. Je vais te présenter deux méthodes parmi celles que je ne vois pas le plus souvent, mais ça peut être intéressant.
Évidemment, je ne vais te prétendre qu’elles sont mieux que celles que tu as déjà mises par toi-même.
En fait, je te donne une méthode qui se retranscrit directement avec les outils de Fastlane.
Ensuite, libre à toi de tester, de voir d’une semaine sur l’autre ce qui fonctionne le mieux.
Je vais te donner deux méthodes.
Tu les essaies une semaine après l’autre.
Tu vois ensuite si tu reviens en arrière, si tu essaies.
C’est parti.
1. Réduire les Choix dans le Cart Header
Aujourd’hui, je te montre ce que je fais pour l’ajout au panier.
Dans quasiment tous les shops que je vois, il y a un Cart Header ici. Là, c’est un site qui est de base Mono-Produit, j’ai désactivé le bouton pour aller vers la Cart Page, la page panier, puisque c’est effectivement une lourdeur de l’ajouter en tant que telle. En général, elle est ici.
Si tu as un shop niché ou généraliste, Multi-Niche, tu as très souvent les deux boutons ici.
C’est ce que je vois en général. C’est sympa, mais je pense qu’on peut aller un peu plus loin. Là, j’avais même mis le paiement sécurisé.
Je t’avoue qu’avec les tests que j’ai faits sur mes shops à moi, je trouve que c’est un petit peu trop lourd déjà de répéter.
Tout simplement, Paiement, ça fonctionne très bien.
Sachant que, pour être clair, offrir une fonctionnalité de paiement sécurisé n’est pas un avantage, c’est juste une nécessité.
C’est affiché dans le Footer ici, c’est affiché ici, c’est affiché dans la Cart Page.
Il n’y a pas besoin d’en faire des couches.
C’est la situation qu’on voit très souvent.
À un moment, j’avais tendance de complètement désactiver le premier bouton, c’est-à-dire les personnes n’ont pas le choix et vont directement au paiement.
C’est aussi ce que je vois souvent.
En fait, j’ai adopté la stratégie Mono-Produit à mes sites Multi-Produits.
J’avais décoché cette option, il ne reste plus que l’option de paiement.
Les personnes sont directement dirigées vers le checkout.
À partir de là, le cycle d’achat est retranché d’une étape et ça donne moins de friction.
2a : Définir une Redirection Automatique en Cart Page
Mais ce que j’ai remarqué, personnellement, c’est que les personnes ajoutent au panier juste ici, le Cart Header s’active.
Après, il y a le paiement et les personnes bloquent un petit peu à cette étape-là.
Même si elles savent que si elles l’ont vu, c’est très bien que le Cart Header s’affiche, mais elles se sentent un peu bloquées et elles se disent :
« OK. Là, je dois payer. Je vais procrastiner, je vais regarder le site et limite je vais chercher un prétexte pour ne pas acheter, parce que je n’ai pas envie d’acheter ».
Maintenant, ce que je fais, c’est ce qui semble mieux marcher, mais encore une fois je ne te prétends pas avoir la science infuse.
Cela ne fonctionne peut-être que pour moi sur une niche particulière.
Encore une fois, teste tout ce que tu veux.
Ce que je fais, c’est que je réactive cette option.
Ensuite, dans Product Page, je vais ajouter une redirection automatique vers la Cart Page, la page panier, ici.
Qu’est-ce qui va se passer ? Quand j’ajoute au panier, la personne est redirigée vers la Cart Page.
Petite info : Souvent, c’est intéressant de proposer un Upsell ici.
Avec l’application qui est sortie récemment, la Bundle Kick, cette intégration se fait uniquement dans la page panier, pour l’instant en tout cas, je ne connais pas les plans d’Ulrich à ce sujet.
Cart Page : A Propos des Upsells
À une époque, je testais aussi d’autres applications qui permettaient de mettre un Upsell ici.
Avec cette méthode, je te le déconseille.
Comme on fait une redirection vers la page panier, il faut que cette redirection soit rapide, il faut que la page soit minimaliste, il faut qu’il y ait le moins de contenus possible, parce que si tu forces une redirection, ça ne va pas le faire.
La personne va être mécontente.
Si ça met 5-10 secondes à charger, tu vas la perdre.
Tu ne mets rien d’autres que l’ajout au panier.
C’est le réglage de base.
Cart Page : Activer un bouton Retour
Là, il y a le paiement sécurisé qui rassure.
Ce que tu vas faire, c’est que tu vas aller dans la Cart Page et on va réactiver le bouton Continuer mes achats.
Parce qu’il ne faut pas oublier que la personne a été redirigée, c’est quelque chose qui est quand même impulsif.
Même Amazon ne le fait pas, les plus gros sites ne forcent pas.
Tu me pardonneras, les réglages, c’est un peu en gras, ce n’est pas très joli.
Tout simplement, tu actives ce bouton Continuer mes achats, comme ça la personne a été redirigée.
Mais si pour une raison quelconque, elle souhaitait rallonger son cursus client, elle peut regarder, elle peut ajouter des nouveaux produits.
Et comme tu as réactivé mon panier, elle peut se rediriger en toute tranquillité, elle ajuste son panier.
Au bout d’un moment, elle pourra passer au paiement tranquillement.
Je vais ajuster les réglages. Je vais revenir sur la page d’accueil de Tout Chapinou vu que je suis sur un site Mono-Produit.
Sinon, par défaut, ce sera peut-être « Collections All » que tu préféreras.
Si tu veux voir les réglages comme moi je les ferai, je mettrai Paiement ici.
Pas besoin de rajouter Paiement sécurisé, c’est quelque chose que j’avais testé mais que désormais j’enlève.
Ici, tu as un petit texte qui peut être intéressant à ajouter.
Soit la livraison est offerte si, bien entendu, tu l’offres, il faut que tu sois cohérent ici et ici.
Souvent, je trouve des incohérences faites entre ce qui est dit par exemple dans le Header, ce qui est dit ici, ce qui est dit dans le Cart Header et ce qui est vu dans le Footer.
Sois bien cohérent avec ta stratégie E-Commerce.
Je te donne la méthode avec les outils, mais il ne faut pas que tu oublies qu’est-ce que tu as derrière la tête et comment tu veux que le cursus client se fasse.
La meilleure manière pour le construire, c’est le bon vieux papier stylo.
Tu fais des diagrammes et ensuite dès que c’est au clair, tu regardes comment ça peut se retranscrire avec les outils.
Mais là, en tout cas, on n’est pas mal.
Là, je crois que j’ai un réglage CSS qui fait que c’est en gras.
Ce bouton, je le mets en beaucoup plus petit.
Je l’écris de manière à ce qu’il soit beaucoup moins visible, puisqu’il faut quand même inciter la personne à aller au paiement.
Autre chose aussi, sur les icônes, tu as vu le paiement sécurisé.
En général, je le mets coloré dans la Cart Page, mais ici, avec les nouveaux essais, j’ai tendance à le mettre en noir et blanc.
Pourquoi ? Parce que je trouve que la couleur distrait l’utilisateur de cliquer sur ces boutons-là. De plus en plus, je mets ici en grisé.
C’est plus sobre, je trouve.
Cela permet à la personne de se centrer sur ça.
2b : Redirection Automatique vers le Checkout (Agressif)
Enfin, tu as une méthode que tu peux faire dans une stratégie d’achat impulsif, voire Mono-Produit, c’est tout simplement on oublie tout ce que je t’ai dit sur le panier, je désactive aussi le bouton « Continuer mes achats » en Cart Page et dans la Product Page tu rediriges vers le checkout.
Ce réglage est à bannir sur un Multi-Produits, clairement.
Une redirection vers un checkout duquel l’utilisateur ne peut pas sortir, c’est extrêmement agressif. Comprends-le.
Encore une fois, fais tes essais.
Peut-être que sur la niche que tu cibles, il y a des personnes que ça ne dérangera pas.
Mais en général, les gens se sentent trop forcés.
Là, tu vas avoir Ajouter au panier. Je ne sais même plus.
Normalement, ça devrait fonctionner le checkout même sur l’éditeur.
Là, la personne est redirigée vers le checkout.
Même si elle peut encore cliquer ici et rebasculer sur la page panier, considère que c’est très agressif.
Ne fais ça que si tu es sur un Mono-Produit ou éventuellement une stratégie d’achat impulsif avec Sales Sniper ou par exemple tu as une limite de stock, une promotion.
Rappel sur la Légalité
Attention aussi à la légalité.
Normalement, tu ne peux pas imiter des fausses promotions et imiter des fausses ruptures de stock.
Encore une fois, on vous donne les outils, à vous de choisir ce que vous voulez en faire.
En tout cas, sur le marché français, la loi est claire là-dessus.
Je t’ai présenté différentes manières de jongler avec le cycle d’achat.
Remarques sur le WebDesign
Aussi une petite remarque, les boutons, je vois des couleurs rocambolesques à chaque fois.
Ce vert et ce vert au survol sont très bien.
J’ai moi-même essayé de changer plusieurs fois, je n’ai pas trouvé mieux.
Bien entendu, si tu as ce vert pour le cycle d’achat, fais en sorte que ton webdesign n’ait pas d’autres verts ailleurs sur ton site.
Il faut que le vert soit dans l’inconscient de l’utilisateur lié au cycle d’achat.
Sinon, ça va porter la confusion et ça ne va pas fonctionner.
Fais en sorte que les couleurs de ton site ne s’apparentent pas au vert.
Éventuellement, la seule chose que je me suis permise, c’est d’écrire du vert ici.
Encore, si je voulais être cohérent, j’aurais changé la couleur.
C’est ce que d’ailleurs j’ai fait sur mes vrais shops.
CSS Personnalisé sur le Sticky Add to Cart
Maintenant que ceci s’est fait, je vais aussi te proposer une petite personnalisation CSS sur ce Sticky Add to cart.
C’est un réglage que j’utilise aussi sur mes shops que j’aime bien.
Je vais passer le code que tu pourras inscrire sur Messenger.
Tout simplement, tu écriras le code « STICKY ».
En fait, tu iras sur ma page Facebook, pas mon contact privé.
Ma page Facebook s’appelle Pascal Fastlane.
Tu me retrouves en m’écrivant aussi à Pascal Degut.
Tu pourras m’envoyer un message avec le mot et je vais t’envoyer le code.
Je vais te montrer l’affichage en live, directement.
Tu vas directement voir en quoi ça change l’affichage. C’est quelque chose que je préfère.
Sur le groupe, je vois beaucoup des gens se baser sur des détails qu’ils ne maîtrisent pas.
C’est très bien de passer une heure à changer les réglages si c’est beaucoup mieux à la fin. Mais prenez conscience que les réglages que je vous donne vont peut-être augmenter le taux de conversion de 0,1 %.
Ne vous prenez pas le chou avec ça.
D’ailleurs, si pour une raison quelconque, vous rencontrez un bug avec le code que je vous transmets, je ne fais pas de SAV dessus.
Bien entendu, cette vidéo est gratuite, c’est de l’échange.
Je vous communique le code, je vais bien faire attention à ce que cela marche de mon côté.
Mais derrière, si vous trouvez un cas où cela ne fonctionne pas, tout simplement ne l’utilisez pas et restez sur les réglages de base qui restent très bons.
Maintenant que ceci s’est dit, je vais vous copier-coller le code et vous allez voir, l’affichage de l’ajout au panier va être un petit peu plus harmonieux à mon goût.
Ça va prendre la largeur de l’écran.
En tout cas, personnellement, je préfère un affichage comme ça que j’utilise.
Dans une version antérieure, j’utilisais même un bouton clignotant sur le Sticky uniquement, parce que je vois beaucoup trop de personnes me demander un bouton clignotant pour l’ajout au panier normal.
C’est une pratique qui date des années 2010 et qui est complètement à bannir.
Sur le Sticky, je faisais un petit pop-up comme ça.
Ça clignotait avec une animation toutes les cinq secondes.
Je l’ai enlevé, parce que je pense que c’est une animation CSS qui alourdit le thème, qui alourdit la rapidité de votre site et qui ne fait pas très sérieux.
Si vous êtes éventuellement sur un site au design un petit peu rigolo ou design un petit peu enfantin, ça passe.
Mais si vous voulez faire quelque chose de sobre, c’est quelque chose à bannir complètement.
Dans la version que je vous donne, cette animation est désactivée et je ne la transmets pas.
J’ai de plus en plus tendance à enlever l’effet gras et à mettre une police normale quitte à la mettre un petit peu plus grosse.
C’est un réglage que je préfère faire.
Bien entendu, pour le réglage sur mobile, ça reste inchangé, ça reste tout en bas ici comme ça.
Une option intéressante à modifier si le Sticky Add to Carrt est activé
Une petite remarque par rapport à ce Sticky Cart Header.
On va revenir au réglage que j’utilise actuellement.
Je réactive le premier bouton pour avoir le bouton de panier et dans la page panier, je réactive le bouton Continuer mes achats, comme ça la personne peut partir quand elle veut.
Dans la page produit, j’active une redirection vers la page panier.
Là, qu’est-ce qui se passe ?
On est d’accord que comme il y a une redirection, il n’y a plus besoin que le Cart Header s’affiche, parce que la personne va être redirigée.
Le Cart Header là, la personne ne sera plus notifiée pour être incitée à passer à l’achat.
Qu’est-ce que cela implique comme conséquence ?
C’est que j’ai tendance à faire ça, je désactive le Sticky Header, parce que jusqu’à maintenant il fallait que le Header reste effectivement ancré pour que le Cart Header apparaisse et qu’il soit visible, mais comme maintenant vous rebasculez vers l’ajout au panier, il n’y a plus besoin d’ajouter ce Cart Header.
Maintenant, c’est le Sticky Cart Header qui est tout en haut.
Je vais retrouver le code, parce que de toute façon j’utilise les deux versions et ensuite tu auras le Sticky qui sera tout en haut bien convenablement.
En fait, les éléments du Header ne vont pas distraire l’utilisateur, il aura directement cette incitation à ajouter au panier si bien sûr il revenait en arrière dans son cycle d’achat, parce qu’à chaque ajout au panier il sera redirigé.
S’il scrolle, il sera moins incité à avoir le menu du Header, à basculer sur la page d’accueil. Il y aura directement cet élément uniquement.
Conclusion
J’espère que cette vidéo t’a plu.
On a bien balayé les différentes possibilités de cycle d’achat qu’il était possible de rendre suivant ta stratégie, suivant ton concept, suivant ta stratégie qu’elle soit un petit peu intrusive ou vraiment respectueuse de l’utilisateur.
Le réglage que j’ai actuellement avec la redirection vers la page panier avec les deux boutons sur la Cart Header et les deux boutons sur la page panier, sur la Cart Page, pour éventuellement laisser la possibilité à l’utilisateur de revenir en arrière, je trouve que c’est le meilleur réglage, parce qu’on incite l’utilisateur à avancer dans le cycle d’achat, on le met sur la page panier.
Si vraiment il s’est senti bloqué, en général, on lui laisse la possibilité de revenir en arrière, ce qu’il nous pardonne.
Il ne part pas, il a été redirigé très rapidement vers une page Cart Page minimaliste sur laquelle on n’a pas intérêt d’application d’Upsell.
Dans 90 % des cas, moi, sur mes shops, la personne ne commande qu’un seul article.
Mais si d’aventure, elle s’était sentie forcée, elle a toujours la possibilité de revenir en arrière.
Comme convenu, je te transmets le code CSS à la fois avec les réglages Sticky Header et à la fois sans ce réglage-là, comme ça le Sticky va s’afficher convenablement.
J’espère que cette vidéo t’aura plu.
