Salut ! C’est Pascal. J’espère que tu vas bien.
Aujourd’hui, Stratégie d’achat N°3.
Vous avez été nombreux à me dire partir sur cette vidéo, je suis allé au bout de mes essais.
Je vais te montrer à nouveau les petits hacks qui permettent d’augmenter le taux de conversion.
J’espère qu’en tout cas ça va te plaire.
Ce sont des choses toutes simples et qui mis bout à bout, ça donne expérience client largement supérieure.
C’est beaucoup plus sympatoche.
Je vais mettre ça en place sur le site Tout Chapinou, parce qu’on est toujours à la version N°2.
Un rappel de l’épisode 2
Petit bilan de ce qu’on avait fait, on était passé au Cart Slide sur desktop pour avoir la même expérience client que sur mobile, c’est-à-dire que dès qu’il y a un ajout au panier, le Cart Slide se déploie.
Je l’ai mis à la fois sur mobile et en desktop avec un teint légèrement grisé pour qu’il se dénote bien.
Ensuite, j’ai enlevé tout ce qui était redirection de panier vers une page panier ou une page de checkout, il n’y a plus de redirection.
On évite aussi d’avoir l’étape du Cart Page, on raccourcit le processus d’achat.
Bien évidemment, je t’avais parlé jusqu’à maintenant de laisser bien le bouton en vert.
Adaptez vos messages d’appel à l’action avec les traductions
Maintenant, on va passer à la stratégie N°3.
On va travailler directement depuis l’éditeur.
Là, on ajoute au panier. Comme tu vois, ça se déploie.
J’avais quand même un petit changement à faire sur le Cart Page, parce que n’oublie pas que le Cart Page, même s’il n’est actuellement pas présent, si la personne va au checkout et qu’après elle décide de revenir en arrière, elle va arriver sur la carte page.
Si je mets ici sur le checkout, il y a toujours ce lien vers le panier qui fait qu’il faut quand même travailler la page panier.
Fais le maximum par rapport à ça.
En général, j’aime bien mettre l’un des deux textes suivants ici, soit « Livraison Suivie OFFERTE », soit « si vous avez un bon d’achat, vous pourrez l’indiquer à l’étape suivante ».
Cela dépend bien entendu des différents types de stratégies que tu as.
J’ai une petite préférence sur le bon de commande.
Ensuite, là, j’ai tendance aussi à changer le texte.
Avant, je mettais par exemple « Paiement » ou « Paiement sécurisé » pour faire mieux passer la pilule.
Là, il y avait « Continuer mes achats ». Là ça peut se faire « Retour ». C’est plus sympa.
Le bouton est plus petit, cela incite vachement à cliquer sur le bouton vert.
Pour ce qui est du paiement, au final c’est comme le mot-clé là que je t’ai mis dans le bouton du Cart Slide.
J’avais mis « Finaliser la commande ».
Au final, je ne parle pas de paiement.
Là, je suis cohérent, on a en page panier « Valider mon panier ». C’est mieux.
Tu peux mettre également « Finaliser la commande » si tu le souhaites. Ça passe très bien.
Aussi, j’ai mis une nouvelle image. Cette image, c’est Ulrich et Youri qui l’on faite sur leur site.
Tout simplement, je l’ai repris. Vous avez les liens Photoshop sur leur vidéo.
Ensuite, vous pouvez également par exemple, là, au lieu de mettre « 30 jours », vous pouvez mettre « 14 jours » etc. « Livraison gratuite dans le monde ».
Souvent, là, en Header Band, je mets de plus en plus « Livraison Suivie OFFERTE en Europe ».
Au lieu de mettre « Dans le monde » là, vous pouvez mettre « en Europe » pour être plus spécifique. En tout cas, cette image, je la trouve très sympa, elle fait bien pro.
Autant il n’y a pas l’aspect multicolore qu’on pouvait voir sur d’autres images, celle d’Ulrich par exemple, qu’il avait avant, qu’il mettait toutes les icônes là avec leurs couleurs, je n’aimais pas trop.
Là, on est sur du monochrome.
Il y a un petit peu de couleurs qui attirent l’attention et c’est un très bon équilibre. J’aime beaucoup cette image.
Clairement, mets cette image ici en Cart Page. C’est déjà une très bonne chose.
On était sur la Cart Page. Tu as vu un changement de sémantique « Retour », « Valider mon panier » et cette image, l’intégrer ce n’est pas mal, alors qu’avant j’avais cette image-là.
Elle avait trop de couleurs et je n’aimais pas trop.
Je voulais mettre l’accent sur les boutons.
Des fois, j’avais même tendance à privilégier l’image en noir et blanc.
Mais c’est vrai que cette image est un peu tristounette.
Je me suis trompé, je l’ai mise au mauvais endroit. Tu as compris la logique.
Je vais remettre la nouvelle. Je vais en profiter. Là, je l’ai mis dans le Cart Header, dans le Cart Page.
Elle est ici.
Si je reviens dans le Cart Header, là c’est idem, si je sauvegarde, tu vas voir qu’il y a cette nouvelle image qui apparaît. Je trouve qu’il y a trop de couleurs.
Ça donne envie de faire plus attention ci qu’aux boutons. Je préfère cette nouvelle image.
Elle donne un bon ton, elle est bien équilibrée, j’aime beaucoup.
Ensuite, pour finaliser la commande, j’ai eu tendance à recopier un peu plus Amazon qui dit juste « Passer la commande », c’est plus rapide. L’appel à l’action est encore plus clair.
« Finaliser », c’est bien si vous avez une boutique de luxe, mais sinon restez sur « Passer la commande ».
Enlevez la livraison calculée à la prochaine étape (si vous l’offrez)
Ensuite, il y a un petit ajustement. Si vous offrez la livraison offerte, le sous-total là, on va mettre un TTC, comme ça le client sait directement qu’il ne va pas se faire gruger sur la TVA, sur les 20 % etc. De toute façon, en France, le client est habitué à ne pas payer plus.
Là au moins, c’est précisé, il sait qu’il ne va pas se faire niquer.
Où est-ce que vous changez tout ça ?
Ça se passe dans Edit Languages. En fait, vous mettez tout simplement à jour les données de vote thème.
Ça va être juste ici Sous-total TTC. Vous sauvegardez bien.
Normalement, ça a été pris en compte. Le Sous-Total TTC apparaît bien ici.
Pareil, ce réglage, je vous le recommande. C’est un petit truc sympa.
D’ailleurs, je vais même aller au checkout parce qu’il me semble j’ai un autre élément à vous montrer dans le checkout qui est lié aux traductions.
Là, effectivement, il y a cette petite traduction qui est apparue « Calculé à l’étape suivante » et je ne l’aime pas, parce que le client risque de penser qu’il va devoir payer des frais de livraison alors que dans notre stratégie, comme je vous l’avais dit, pour faciliter la pilule, on met la livraison offerte.
Ça va être la même chose que tout à l’heure. On revient dans Edit Traduction.
Encore une fois, vous tapez « Calculé à l’étape suivante », ça apparaît directement ici.
Là, je mets « Gratuit ».
Je ne mets pas « Gratuite », parce que même si c’est livraison, si je devais écrire dans un mot français, ça devrait être « Gratuite », mais gratuit c’est 0€, gratuit dans l’inconscient collectif.
Ça passe mieux, je trouve. J’ai mis directement ici le petit « Gratuit ». Je trouve ça beaucoup mieux, c’est plus simple.
Rajoutez un TTC
En plus, vous pouvez à nouveau mettre le TTC et le TTC ici. Je reviens dans Sous-total, j’avais oublié de le mettre ici.
Il faut un peu chercher, c’est un peu les essais. Là, je mets Total TTC ici.
Ici, c’est Customer Order, normalement ce n’est pas concerné.
Je crois que c’est ici qu’il faut mettre le TTC.
Je vérifie. Je fais Sauvegarder.
Je vais regarder vite fait, sinon c’est tout dans le checkout que ça se passe. Je pense qu’on est bon. Vous voyez qu’il y a beaucoup de traductions, il ne faut pas s’embrouiller.
D’ailleurs, une manière de s’organiser de très bien par rapport à ça, c’est que vous ayez un doc Word où vous mettez vos traductions personnalisées.
Comme ça, si vous voulez modifier, vous savez où c’est. Même si ça part en noir, vous les retrouvez facilement.
Mais si aussi à terme, vous refaites un autre shop, vous avez directement vos process qui sont faits, vous n’avez plus qu’à balancer ça.
Vous pouvez même mettre des petites annotations pourquoi vous avez fait cette traduction. Comme je vous l’explique, ça permet d’améliorer les conversions.
Là, je pense qu’on est bon. Je vais faire un petit refresh.
J’espère qu’en tout cas ça a été pris en compte partout.
Là, ça n’a pas été pris en compte. Il faudrait que je le recherche.
En tout cas, là, à nouveau, vous avez le Total TTC. Pas besoinde le rajouter dans les deux.
Comme ça, c’est nickel. Le client sait qu’il va payer 14,90€, il ne va pas payer plus.
Là, il peut tranquillement ajouter ses informations.
Il sait que même s’il y a ces étapes après, il ne va pas payer davantage, il est rassuré.
C’était tout pour ça.
Pourquoi éliminer le Header Band défilant ?
Ensuite, je vais revenir sur le site. Ici, j’ai ce Header Band défilant.
Il faut savoir que je l’utilise de moins en moins, je voulais partager. Je trouve qu’il y a ses avantages.
De plus en plus, j’ajuste ça.
En fait, pourquoi je fais ça ? Parce qu’avec ce scroll, je pouvais mettre pas mal d’infos et je mettais notamment le 10 % de réduction avec le coupon de bienvenue.
Que j’avais le Header Band défilant ou pas, des fois je mettais juste ce texte-là dans la Header Band.
Mais selon moi, cela posait plusieurs problèmes, ça veut dire votre client arrive directement sur un site qu’il ne connaît pas et directement il voit dans la Header Band que pour tous les premiers clients il y a 10 % de réduction avec le coupon de bienvenue.
Je me suis dit : « Est-ce que ça ne fait pas un peu vendeur de tapis ? » dans le sens que le client ne vous connaît pas.
C’est une bonne démarche commerciale en soi de privilégier les nouveaux clients et de leur offrir un coupon pour la bienvenue, mais je crois que c’est un petit peu forcé.
Ça réduisait finalement l’image perçue de votre boutique dès la première seconde.
De plus en plus, j’enlève ça.
Jonglez entre la preuve sociale et vos offres marketing
Ensuite, pour ce qui est du « Plus de 5.000 Clients Satisfaits », je le mets dans le Footer Band, parce qu’en version mobile ce Footer Band s’affiche immédiatement en dessous du « Ajouter au panier ».
Si ce n’est pas clair pour les personnes, je fais un Inspecter, je me mets en mode mobile.
Là, je n’ai pas le Footer Band activé sur ce site.
Mais si vous avez le Footer Band ici, avec le « Plus de 5.000 clients satisfaits », ça rassure le client à ajouter au panier, ça leur rassure par rapport à ça.
Maintenant, le « Plus de 5.000 clients satisfaits », je le mets systématiquement dans le Footer Band.
Il ne reste plus que le « Livraison Suivi OFFERTE ».
Maintenant, je mets un peu pour préciser « Livraison Suivie OFFERTE partout en Europe ». En conclusion, ceci n’apparaît plus dans le Header Band.
Je me suis dit: « Ça serait dommage, il faudra trouver un autre moyen de l’intégrer autrement et que ça soit sympa ».
Ce que je fais par rapport à ça, c’est que des fois je l’intègre en description produit, c’est-à-dire par ici je mettrais : « Pour tout premier client, nous offrons 10 % de réduction avec le coupon de bienvenue ».
Je le mets systématiquement à chaque fiche produit et je le mets en général en fin de description, puisque je considère qu’un client qui a bien pris le temps de consulter toute la fiche produit, il est descendu jusqu’en bas, il est quand même intéressé, je lui donne un petit coup de pouce, je lui donne ce 10 % qui pourra l’amener à convertir.
C’est-à-dire si un client hésitait, c’est juste cette petite chose qui permet de l’inciter à l’acheter.
Ensuite, ce que je fais aussi, c’est que je vais l’ajouter directement dans le Cart Slide et je vais vous montrer comment.
Si j’ajoute directement au panier, là on a ce fameux « Livraison Suivie OFFERTE », encore une fois, mais c’est ici que je vais ajouter ce petit coupon en plus, puisque je trouve que c’est tellement plus intéressant.
Le client, il a ce Cart Slide, il voit qu’il a ce 10 % de réduction et ça va l’inciter à aller jusqu’au bout. Vous lui offrez un cadeau.
Le code sera le suivant : Première commande, la <br> c’est retour à la ligne, 10% avec le code, là je le mets en gras « Bienvenue ».
Là, deux fois <br>, c’est-à-dire je saute à la ligne, mais en plus je fais un petit espacement, Livraison Suivie OFFERTE et là j’ai, pareil, un espacement, c’est pour que ce soit plus sympa avec l’icône qu’il y a en dessous.
Ça apparaît là.
Si je veux être une bonne fois pour toute cohérent avec toute ma stratégie, je vais désactiver ce fameux header défilant et je vais mettre le « Livraison Suivie OFFERTE en Europe ».
Il y a aussi un truc que je fais dans la Header Band, c’est je mets directement le numéro de téléphone.
Je peux même le mettre des fois, si vous avez de la place dans la header, là effectivement c’est le cas et je vais faire comme ça, je le mets directement ici.
Est-ce que j’ai de la place ? Non. Je me suis tout décalé, je n’ai pas de chance.
Je vais le faire rapidement.
Lui, je vais l’activer. Je vais l’activer aussi. Le 4, je vais le remettre dans le 2.
Le 4, je vais l’ajouter, ce sera le numéro de téléphone. Le « Collections » lui, par contre je vais le cacher, ce sera ça.
Le « Collections », je vais le cacher aussi, parce que c’est à l’époque où je vous avais présenté les options de multiproduit, mais ça ne servait strictement à rien.
Je vais cacher le 4 et le 3 je vais ajouter un numéro de téléphone et là je vais mettre n’importe quoi.
Vous pouvez aussi mettre normalement un lien juste ici.
Pour faire un minimum pro, je vais mettre un numéro en 0-800.
Le lien, c’est juste ça, c’est « tel: » et ensuite vous mettez le numéro de téléphone que vous voulez.
Quand les clients cliqueront dessus, surtout sur mobile, ça déclenchera un appel vers le numéro de téléphone.
Je trouve que c’est un moyen très sympa pour afficher tout ça correctement.
Ici, je n’avais pas enlevé les menus, ça gêne un peu.
On va désactiver tous les petits sous menus qui étaient là.
Là, je pense qu’on est bon.
Vous voyez qu’à chaque fois il faut être cohérent tout le long. Il faut que vous réfléchissiez à comment l’information va être présentée.
C’est-à-dire soit vous mettez le numéro de téléphone ici, je trouve ça sympa, parce que il y a à la fois le « Contactez-nous », l’utilisateur comprend par lui-même mais ça fait à la fois un appel à l’action vers le numéro de téléphone. J’aime bien cet affichage-là.
Si vous ne l’aimez pas, j’ai aussi pour le Header Band là un autre affichage que j’aime bien et qui est celui-ci.
Je vous passerai le code à la fin. Je vous mettrai un lien comme d’habitude.
Vous pouvez télécharger tout ce que j’ai mis ici.
Vous allez voir que si je désactive le téléphone ici, vous avez Service Client 7j/7 – Livraison Suivie OFFERTE en Europe.
J’aime bien les espacements avec les points. Ça permet de bien délimiter.
Au final, vous avez ces trois informations pour la version desktop et pour la version mobile vous avez juste ce « Livraison Suivie OFFERTE ».
Vous n’avez pas finalement ajouté le code de bienvenue. Ce code de bienvenue se met à la fois dans la fiche produit et il se fait ici.
Je trouve que c’est vraiment sympa comme ça. Le « Bienvenue », il se détache bien.
Vous rappelez qu’il y a encore une fois la « Livraison Suivie OFFERTE » et en plus il y a cette icône qui est très travaillée.
J’aime beaucoup quand c’est comme ça. C’est tous ces petits hacks de traduction, de mettre le « Gratuit » dans le ckeckout etc. c’est toutes ces petites choses qui augmentent votre taux de conversion.
Vous pouvez aussi dans le checkout mettre la Conversion Pirate qui est très connue et qui permet de mettre un meilleur affichage avec un peu plus de Trust Icons.
Je trouve qu’il est tellement connu, je ne vais pas en parler, mais s’il y a une demande à ce sujet, ça peut être sympa.
Peut-être un dernier point qui est intéressant, ça serait sur le travail du cycle d’achat qui, comme je vous l’avais dit, je le laissais systématiquement en vert pour qu’il se dénote par rapport au reste, je le pense toujours.
Si vous êtes « Débutant » et que vous ne savez pas très bien faire des chartes graphiques, je vous conseille de garder ça comme ça, de faire attention à ce que, quand vous choisissez votre couleur primaire, votre couleur primaire ne soit pas verte mais qu’elle soit autrement.
Comme ça, vous avez un bouton qui se dégage bien.
Moi aussi, de plus en plus quand je suis dans du branding assez fort, je m’inspire, comme je vous l’ai dit, des autres sites, je regarde ce qui se fait et des fois j’ajoute des arrondis beaucoup plus gros.
Des boutons aux bordures arrondies pour les sites de niche féminines
Si je vois que les boutons ronds notamment sur des niches féminines marchent très bien, ils sont plus sympa, j’ajoute ce bouton un peu rond, ça fait un bouton moins agressif.
Ce bouton au final, il fait très corporate, ça marche très bien par exemple pour mon site de vitrine pascaldegut.com où je fais des prestations webdesign.
C’est un bouton très carré, ça va très bien avec le reste du site.
Là par exemple, même sur un Mono-Produit qui est mignon, ça serait sympa de mettre des grosses bordures.
De plus en plus, je regarde ce qui se fait et si la tendance de webdesign se fait dans cette niche-là, je l’adopte et je fais des gros arrondis.
Je ne peux pas mettre, parce que j’ai Lock Kit. Je ne peux pas faire un F12 par hasard ?
Si je sélectionne le bouton, ici vous ajoutez un petit border-radius, ça veut dire le rayon du bouton et là une font, c’est 30 pixels.
Normalement, vous pouvez le faire sur le bouton d’ajout au panier mais également sur ce bouton-là.
Je trouve que c’est très sympa, j’aime beaucoup.
D’ailleurs, j’ai bien là sur ce site, je vais le sauvegarder ce réglage.
Pour garder les réglages, il vous suffit de sélectionner tout le contenu.
Là, je suis en train de vous préparer un nouveau fichier que vous pourrez télécharger, je vais le faire en même temps.
Comme ça, vous avez à la fois ça, ce sera pour les boutons du cart et pour retenir aussi le réglage ici, c’est « Add to cart ».
Comme on est sur le même réglage, je peux mettre une petite virgule et rajouter ça. Normalement, ça devrait fonctionner, je vais vérifier.
Voici des essais de colorimétrie dont vous pouvez vous inspirer
Pour ce qui est de la couleur, je vais faire un petit essai.
C’est vrai que là, le vert ça passe, mais on va considérer qu’on est sur une niche féminine.
La niche féminine aime bien les couleurs roses etc.
Là, je pense que ce rose violet ne conviendrait pas bien pour le bouton d’ajout au panier, ce qui serait beaucoup trop flashy.
En plus de ça, je l’ai pas mal utilisé de partout, ça risque de moins le dénoter.
Je vais quand même essayer.
En tout cas, le message du jour, si vous êtes débutant, restez sur ce bouton vert, mais si vous êtes à l’aise avec le branding et vous savez faire un truc sympa, éventuellement considérez ce changement.
Je vais juste mettre ce réglage-là du bouton pour le 30 pixels.
Si je vais en page panier, je vais regarder ce que je peux faire.
Là, c’est clairement trop fluo, ça épuise l’œil.
Le prospect a carrément envie de détourner son regard et de scroller pour ne pas être ébloui.
Ce qui peut être intéressant, c’est toujours de garder cette couleur surtout si c’est votre seule couleur primaire.
C’est un peu compliqué à faire dans mon cas, parce que j’ai quand même qu’un système à deux couleurs.
Si vous voulez une couleur primaire qui se démarque bien tout au long, ce qui peut être sympa, c’est de faire un petit design.
Je vais prendre cet outil-là que je vous ai présenté plusieurs fois, le HTML color codes.
Vous prenez cette couleur.
Les teintes, ça va vers le plus claire, mais moi j’aimerai faire un truc plutôt comme ça.
Vous prenez une couleur qui est beaucoup moins flashy, beaucoup moins fluo.
Je vais essayer de voir ce que ça donne.
Je vais prendre cette couleur-là, c’est un peu trop foncé, je vais prendre cette couleur-là.
Là, ce n’est pas mal.
Je vais prendre cette couleur-là.
Je vais voir ce que ça donne.
On ne voit pas assez la différence.
C’est comme ça que je travaille mes chartes graphiques, c’est-à-dire je regarde par rapport aux couleurs de base, comment je peux trouver des couleurs apparentées.
Là, ce n’est pas trop mal même si je n’aime pas trop, je ne suis pas non plus hyper fan, mais ça peut faire à peu près le taf.
On pourrait faire la même chose ici.
Je vais sauvegarder quand même.
Je veux voir s’il a pris en compte les arrondis.
En tout cas, ce réglage que je vous montre, je l’ai fait sur certains de mes shops et ça a marché très bien.
Là, je ne pense pas avoir trouvé non plus la bonne couleur, c’est pour cela que je ne suis pas encore hyper satisfait.
Vous voyez que là ça donne un branding un peu plus fort, ça peut être sympatoche.
Je n’ai pas réussi à mettre en place là le border-radius.
Parfois, si ça ne marche pas, vous mettez « !important ».
Je vais voir si c’est pris en compte.
En tout cas, là, vous avez un Cart Slide qui est riche, qui donne beaucoup d’informations qui incitent à nouveau à passer à la commande en offrant un coupon de bienvenue et c’est tout ce qu’il faut.
Je vais même vous dire, en étant aussi clair que je le suis actuellement, il y a quand même des clients qui ne l’écrivent pas.
Au final, c’est donner de la valeur ajoutée et inciter les clients à passer à l’étape suivante.
S’ils ne le font pas, s’ils ne prennent pas en compte ce bon de commande, écoutez tant pis pour eux !
En tout cas, on leur donne une raison supplémentaire d’aller plus loin et ensuite une fois qu’ils sont allés loin de ne pas abandonner et toujours de continuer.
Le Branding dans le Header Band et le Footer Band ? Effets camaïeux
Une petite remarque aussi : Beaucoup de clients ne comprennent pas pourquoi je mets des couleurs neutres dans le Header Band et le Footer Band.
Au final, c’est un peu pour la raison que je viens de vous dire, c’est-à-dire comme là je veux de plus en plus essayer de jouer avec le branding de mes couleurs et mettre des couleurs sympas ici, il ne faut pas en abuser.
De plus en plus, j’aime bien mettre ici aussi, dans le Header Band, des couleurs neutres, soit une teinte de gris, soit là j’ai joué avec le bleu et j’ai mis une nuance beaucoup plus foncée. Vous auriez pu mettre par exemple ce violet au plus sombre possible.
Là, dans le Header Band, vous pouvez mettre ça là. Je vais voir ce que ça donne.
Ce n’est pas mal, mais on ne reconnaît pas trop, on ne peut pas comprendre que c’est un violet issu de celui-ci. Je vais essayer celui-ci.
Sinon, je n’aime pas trop même si ça donne un teint un peu chaleureux, mais je n’aime pas envie en tout cas qu’il se confonde avec le « Passer la commande ».
Je vais garder ce que j’avais avant.
Pour finir, pour être en complète cohérence, pour que vous voyiez tout ce que je fais, là je vais mettre « Plus de 5.000 clients satisfaits » et je vais écrire la même chose ici.
En général, je ne veux pas en mettre non plus des caisses à dire 15.000 clients, mais juste un 5.000. Les gens y croient plus facilement.
En général, ils n’ont pas de problème avec ça.
C’est beaucoup plus sympa.
Une dernière chose, là ce bouton, je prendrai également la peine de le mettre en arrondi.
Je vais la rajouter aussi une fois dans ce code-là. Le code, vous écrivez m.me/pascalfastlane, vous écrivez « CONVERSION » et vous aurez à nouveau ce code.
Checkez que le CSS personnalisé prend en compte tous les éléments
Là, je pense que je serai allé au bout des choses.
Après 2-3 mois d’essai, j’aurais trouvé toutes les subtilités.
En tout cas, j’espère en trouver encore d’autres, mais là clairement ça devient sympa.
Chaque mois, j’ai vu que mon taux de conversion augmentait, c’est vraiment sympatoche.
Faites bien attention aussi de vérifier.
Dans le Cart Page, vous voyez que là je ne l’avais pas fait, pensez bien à le faire de partout.
Il faut que ce soit cohérent, parce que si l’utilisateur revient, il voit la couleur verte et la couleur verte, vous ne l’avez utilisée nulle part, il va trouver ça bizarre. Il faut que vous soyez cohérent de partout.
Là, j’ai mis aussi les boutons arrondis. Il faut que dans la Cart Page ce soit fait également comme ça.
Là, je vais le prendre en compte.
Dans le code que je vous ai donné, je vais vous mettre les petites remarques.
Je vais les distinguer, je vais faire comme ça. Vous voyez que c’est de l’organisation.
Là, je veux dire que c’est pour le Cart Slide.
Là ensuite, je veux dire que c’est pour le bouton « Ajouter au panier » en Product Page. Ensuite, je vais le re-rajouter une nouvelle fois pour le Sticky.
Comme ça, pour une raison ou une autre, vous souhaitez comprendre quel réglage gère quoi, au moins c’est très clair.
Je vais faire ce taf-là de trouver le sélecteur ici et je vais à nouveau faire une dernière fois pour le Cart Page.
Comme ça, vous aurez tous les réglages.
Plus d’excuses, ce sera tout nickel.
Conclusion
Excusez-moi, la vidéo est un peu décousue.
Comme je vous avais prévenus, ce sont des petits ajouts par-ci par-là qui permettent d’optimiser le taux de conversion.
Le taux de conversion, au final, j’ai joué sur la Header Band, c’est-à-dire quelles informations vont être affichées au premier coup d’œil pour le client.
Le « Plus de 5.000 clients satisfaits », ça sert vraiment pour le guider sur qu’est-ce qu’il va avoir quand il sera en dessous de l’ajout au panier.
En plus là, je n’ai pas fait le bon réglage.
Encore une fois, il faut des petits ajustements, parce que là le texte est écrit beaucoup trop gros, il est en gras surtout.
Normalement, je le mets en 12 pixels et là je le mets en lighter, comme ça c’est nickel.
Là aussi, j’ai vu qu’il n’y avait pas le petit point.
Je joue vraiment le détail.
J’aime bien mettre en Camel Case (Capitalization Style) pour bien distinguer et que ça fasse beaucoup plus propre.
J’espère que vous avez bien aimé cette vidéo.
Récupérez le code si ça peut vous être utile.
Sinon, il suffit de faire un Inspecter sur le site Tout Chapinou et de récupérer toutes les données nécessaires, idem pour cette image que vous pouvez récupérer sans souci.
À partir de là, on a un rendu bien sympatoche.
Les couleurs, je ne suis pas encore hyper satisfait, mais c’est un shop de démo, vous avez compris le principe.
C’est pour jouer à fond sur le branding.
Si je voulais mettre du bleu, je pourrais le faire.
C’est à vous de comprendre sur la niche en question :
Est-ce que vous ciblez des hommes, des femmes ? Comprendre les couleurs qu’ils aiment bien en général et de donner un tout harmonieux avec votre site.
Sinon, si vous avez peur de vous tromper, soit vous faites l’essai, vous observez le taux de conversion, vous faites le test A/B, soit vous restez sur le bouton vert et ça marche très bien.
J’espère que cette vidéo t’a plu. Je te souhaite une excellente semaine.
Abonne-toi au contenu.
N’hésite pas si tu souhaites une Prestation Webdesign, on regarde ça en détail et sinon regarde le contenu, regarde bien toutes les vidéos pour aller au bout des choses.
Salut !
