Fastlane : 5 Réglages Ignorés à Tort sur ce Thème Shopify

Salut, c’est Pascal.

J’espère que tu vas bien et que ta stratégie E-Commerce est toute prête pour la rentrée.

Cinq réglages qui ont été ajoutés depuis moins de deux mois, il y a eu beaucoup de mises à jour qui sont arrivées depuis deux mois à un rythme effréné.

Je vois trop souvent dans les prestations que ces réglages ne sont pas sélectionnés, donc je vais t’inviter à les découvrir, on va balayer tout ça.

Comme ça, ça va te permettre d’améliorer sensiblement l’ensemble de tes shops.

Attends, je me décale s’il veut bien.

1)    Collection Page: Infinite Scroll

On va commencer par la Collection Page.

Je me suis créé un petit lien parce que bien sûr j’utilise mon shop de démo qui est de base en mono-produit.

Là, tu vois, je t’ai fait un vieux doublon à l’arrache.

Sur la Collection Page, je ne sais pas si tu as remarqué, je tire comme ça, ça c’est le mode par défaut, ce fameux Special Page Load, il y a un réglage qui est arrivé et qui te permet de limiter le nombre de produit pour charger moins de contenus, donc améliorer le temps de chargement, améliorer l’expérience utilisateur.

Concrètement, c’est vrai que sur la Collection Page, ça ne sert à rien de charger de son produit d’un coup, c’est beaucoup trop.

Maintenant, à chaque fois qu’on atteint la limite, tu as plusieurs pages qui s’affichent, donc tu peux cliquer facilement sur ces liens-là.

En plus, ils se mettent un petit peu en surbrillance, je ne sais plus si c’est un réglage CSS ou si c’est quelque chose qui se gère de base.

Bref, tu peux gérer ça.

Après, c’est vrai que les boutons sont très petits, ils sont à peine visibles, ce n’est pas très ergonomiques tout ça.

C’est pourquoi, attends, je vais mettre volontairement un très faible nombre de produits, comme ça tu verras bien la différence, tu as maintenant l’Infinite Click.

L’Infinite, c’est ça.

Pareil, ça limite par rapport au nombre que tu t’es fixé ici, sauf que s’ajoute un bouton.

Il suffit de dire Afficher plus, Afficher plus et il va te charger à chaque fois, ici quatre produits.

C’est complètement customisable, c’est-à-dire là tu cliques, ça te fait chargement.

Par défaut, s’il n’y a pas ça, il y a marqué Afficher plus.

J’aime bien mettre chargement, comme ça si pour une raison ou une autre, ça devait mettre un petit peu de temps à charger.

Si par exemple tu mets à chaque fois Charger 60 produits, ça pourrait être le cas, l’utilisateur ne va pas s’énerver à cliquer trois fois, il voit que ça charge, il n’y a pas de problème.

Il y a un autre réglage qui, moi, personnellement, est mon chouchou.

Après, c’est chacun aime ça : Infinite Scroll.

Tout simplement, tu n’as pas besoin de cliquer.

Le bouton est là, mais le bouton ne sert à rien.

À chaque fois que tu scrolles, il charge.

D’où j’aime bien mettre cet aspect chargement, puisque là, tu l’as vu le bouton, on était tout le temps en bas, il a mis chargement, il a affiché le mimi, il a mis chargement il a affiché le mimi et ça s’est fait à chaque fois très rapidement.

Moi, sur des plus gros shops, je mets largement 12 produits à la fois, c’est très bien.

Comme ça, la personne, elle scrolle, elle regarde tranquillement.

En fait, ça se précharge à chaque fois à la fin et elle ne le remarque même pas, donc c’est une excellente expérience utilisateur, ça charge la page intelligemment, c’est quelque chose que je ne peux que te conseiller.

Ça, c’était pour la Collection Page.

2)    Product Page: Special Dropdown

Numéro deux, cette fois-ci, ce sera en Product Page.

Comme je venais de faire la vidéo d’avant, j’ai déjà tous les réglages que je veux comme il faut, ça ne va pas.

De base, il me semble, ce réglage, je l’ai mis sur Variant Type, sur les boutons, c’est-à-dire que par défaut toutes les variantes de ton produit, ça va afficher les boutons.

Voilà, c’est comme ça.

Actuellement, vu que mes variantes ne sont pas travaillées, les boutons ne prennent que deux lignes.

Etant donné qu’il n’y a aucun travail là-dessus, les boutons ne choquent pas.

Mais imagine, si j’avais un texte, ne serait-ce même que deux mots à chaque fois par bouton, ça serait énorme.

Sur mobile, là déjà ça occupe deux lignes, il ne faut vraiment pas plus, après sinon c’est une mauvaise expérience utilisateur.

La personne ne va jamais cliquer là-dessus et avec les images c’est un petit peu galère aussi.

Pour les gros produits, ils prenaient beaucoup de variantes, je veux dire, il faut que tu sélectionnes ce Dropdown.

Si tu passes par ce réglage, ça va appliquer le Dropdown à tous les produits.

N’oublie pas que tu peux personnaliserpour chacun des produits.

Là, je suis dans la fiche Produit, tu peux tout simplement dire le Product template que tu veux.

Et là, notre choix, ce sont les Boutons, le Dropdown, le Radio, le Radio Price avec les bullet points et des prix différents pour chaque variante, etc. 

Ça, c’est nickel ici comme ça.

Et si tu es réglé sur Product, il prend le réglage ici qui va s’appliquer à tous les produits qui seront par défaut sur Product.

Ça, sur ce produit à variante, ça ne convient pas les boutons, on va passer au Dropdown.

Là, tu vas voir ce que ça va faire.

Ce Dropdown n’était pas forcément une option que beaucoup de gens ont aimée parce que ça s’affiche sans CSS, donc sans les affichages qui correspond à Fastlane, c’est juste une liste un petit peu vieillotte.

Maintenant, il y a le Special Dropdown.

C’est le même réglage mais avec du CSS où tu peux bien sûr choisir toutes les couleurs que tu souhaites etc.

Là, tu vas voir, c’est nickel.

En plus, je ne sais pas si tu as vu, mais là Color, ça serait le nom de ta variante qui permet de trier cette liste-là.

Avant, elle s’affichait un peu au-dessus et tu avais ensuite la liste qui prenait toute la largeur.

Tu vois, ça s’affiche plus intelligemment, ça s’affiche même sur le Stiky Add to Cart, donc ça aussi c’est plutôt un bon point.

Tu vois, c’est beaucoup plus clair, on voit directement, enfin ça correspond beaucoup plus au critère du thème Fastlane, c’est énormément mieux géré.

3)    Fast Loading (Lazy Load)

Désolé, Ulrich, si tu regardes cette vidéo, je sais que tu voulais en parler un petit peu, je te laisserai le soin de toute façon.

En tout cas, là, ça vient d’arriver, c’est tout chaud, ça sort du four et cette fonctionnalité est une bombe.

Avant, tu étais par défaut en normal ; de toute façon, ce réglage n’existait pas.

Maintenant, tu as la possibilité de passer sur Fast, alors je ne peux que te le conseiller à titre personnel.

Ça, ça va très vite, je l’ai fait sur la dernière vidéo, du coup j’ai vu.

Pendant une demi-seconde, l’image s’est chargée un petit peu de manière floutée.

Après, elle s’est précisée jusqu’au niveau de qualité finale.

Ce que ça fait, le Lazy Load, c’est que déjà ça affiche avec priorité tous les éléments qui sont au-dessus de la ligne de flottaison, c’est-à-dire tout ce que tu retrouves sur l’écran au tout début avant d’avoir à scroller.

Déjà ça affiche ce contenu en priorité, mais en plus pour toutes les autres images qui pèsent plus de 95 % du poids de la page, ces images-là, il les précharge en flouté et ensuite petit à petit la finit.

Là, j’ai le câble, enfin j’ai un très bon réseau.

Tu as vu, ça a passé très rapidement.

Mais sur une connexion un peu plus lente, sur une connexion mobile, on voit que tout se précharge, ce n’est pas une page blanche où il n’y a rien, et du coup l’utilisateur perd patience et il veut partir.

Non, là il commence à voir les images un petit peu floutés.

C’est bon, il reste, c’est nickel.

En plus de ça, PageSpeed Insights, l’algorithme qui regarde la vitesse de chargement de tes sites et qui est fait par Google, il reconnaît tout à fait ça.

Je t’invite à comparer tes réglages entre Normal et Fast, à faire les tests et tu vas voir que ça charge beaucoup plus vite.

Tu peux même le voir de visu, c’est vraiment notable notamment sur les pages d’accueil où en général tu as beaucoup plus de contenus que sur une simple page Produit.

C’est surtout sur des pages comme ça que ça rend la chose très utile.

Moi, à titre personnel, sur mes pages Produits, elles sont quand mêmes pas mal étayées, un système de Bundle, il y a beaucoup d’autres contenus et je mettrais des produits en lien etc. je mettrais beaucoup d’images dans la description.

Et comme ce sont des Landing Page sur lesquelles mes visiteurs atterrissent, je souhaitais qu’elles soient au max et maintenant ça se charge en un claquement de doigt.

Si jamais tu fais l’essai, mets-toi en navigation privée, parce que comme tu as encore le cache du normal, les images seront déjà préchargées et tu ne verras pas de différence.

Mais mets-toi en navigation privée, mets le Fast, tu vas adorer.

Ça, c’est un excellent ajout qui a été complètement optimisé aux oignons, c’est génial.

Je ne peux que te conseiller de l’activer.

4)    Footer First Row Column Icon Texts

Numéro quatre, le Footer First Row.

Celui-ci, il y a moyen de complètement le chambouler.

Déjà un petit mot là-dessus, quand je fais mes prestations WebDesign avec mes clients, je remarque trop souvent que ce texte n’est jamais touché.

C’est dommage parce que moi, j’ai fait l’erreur aussi pendant longtemps je faisais, pourquoi changer ?

C’est très bien, le texte c’est comme il faut, c’est nickel.

Mais souviens-toi qu’il y a eu beaucoup de licences Fastlane écoulés, ça se compte en millier.

Si sur chaque shop, tout le monde garde le réglage par défaut au niveau du texte, ça va pénaliser, surtout si toi tu arrives après, du coup Google scanne que tu utilises le même texte à telle section que beaucoup d’outils tout que même un seul site, ça pourrait suffire, ça te pénalise.

Plus tu feras quelque chose de différent, mieux ça sera pour toi.

Là par exemple, je mets un petit peu de gras etc. comme ça Satisfait ou remboursé, ça apparaît.

Là, je crois de base, elle est marquée Satisfait ou remboursé ici, donc j’ai contextualisé, j’ai posé une question qui incite à lire davantage.

Là, pareil « Paiement Sécurisé », j’ai un petit peu changé, j’ai un petit peu raccourci la phrase qui est peut-être un petit peu trop lourde à mon goût.

Là ensuite, j’avais customisé cette image par moi-même.

Souvent, je gère la couleur.

Ici, je la fais matcher avec Photoshop.

Ça, c’est quelque chose qui se fait très très bien.

Ça donne un rendu qui est déjà sympa.

D’ailleurs petite notion de WebDesign que je voulais faire, que j’avais faite à la dernière vidéo, c’est que : regarde, on voit ma palette.

Souvent quand je fais mes prestations, il y a toutes les couleurs de l’arc-en-ciel, je ne rigole pas, il y a vraiment toutes les couleurs de l’arc-en-ciel.

Il y a le vert fluo, le rouge etc. 

Là, d’un coup d’œil, on comprend, c’est-à-dire il y a mon rose et mon bleu-là qui sont des couleurs principales pour un branding un petit peu rigolo, un petit peu enfantin, un petit peu marrant, un petit peu mignon et après tu as des nuances de gris pour le texte, les images etc.

Tu as le bleu-là pour les liens et ensuite tu as le vert pour le cycle d’achat, donc les boutons d’Ajout au panier et les boutons d’achat.

Il n’y pas besoin d’aller plus loin que ça.

Tu peux essayer tout à fait un système à deux couleurs comme je l’ai fait, voire à trois couleurs même si ça commence à être un petit peu beaucoup.

Mais souvent, même un système à une couleur fonctionne très bien.

Des fois, ce sont les choses plus simples qui marchent bien.

Là, comme la palette est déjà utilisée, quand tu prends une autre couleur, ne vas pas commencer à régler ça et à chercher là, elles sont déjà là.

Sinon si vraiment tu dois intégrer une nouvelle couleur, tu copies-colles le code hexadécimal, tu le gardes à chaque fois et tu le recolles pour avoir le même, parce que si tu commences à faire un petit peu l’à peu près, ça ne va pas le faire.

Je le redis, des fois, c’est des choses toutes simples, mais combien de fois je vois que les couleurs ne sont pas les mêmes à chaque fois.

C’était la petite pause WebDesign.

Là, je vais te montrer comment on peut faire un bien meilleur Footer.

Celui-ci a fait son temps, j’imagine, je m’en suis un petit peu lassé.

Donc là, tu peux le cacher.

Là, dans les sections, tu as des nouvelles choses qui sont apparues.

Il est en train de les supprimer.

Ça, c’est toute la section de ta Page d’accueil.

D’ailleurs, tu vois le Add section-là qui est à la fin, mais là il en reste deux.

Ces sections-là, tu verras si tu vas dans les autres pages, normalement, tu ne vois plus les sections de la Page d’accueil.

Évidemment tu ne verras les sections que si tu utilises l’application Fastlane Funnel qui te permet d’intégrer les sections comme tu veux comme dans la page d’accueil.

Du coup ces sections-là, elles apparaissent tout le temps, c’est-à-dire qu’elles sont dans le Footer.

D’ailleurs, l’image a été faite en fonction, le Grid Block-là, si tu l’ajoutes dans la Page d’accueil, ça te fait un petit carré ici.

Et là, le rectangle-là, il est en bas, c’est fait exprès.

Donc, je supprime celui-là.

Ce Grid Block, tu peux l’utiliser pour intégrer des images, par exemple tu vas emmener vers un petit menu.

Par exemple sur une boutique Multi-Produits, si tu avais deux systèmes de tri, c’est-à-dire un système de tri par thématique et un tri par type de produit, tu pourrais mettre deux images en 50 % et faire ceci.

Ce que je veux te montrer, c’est plutôt celui-ci.

Je l’ai déjà fait dans la vidéo qui n’a pas fonctionné en Live, mais là on va attendre qu’il s’active.

Là, j’ajoute quatre éléments avec les icônes, c’est super propre.

Là, il y a un texte qui est nickel, j’ai mis littéralement cinq minutes pour le faire, ce n’est vraiment pas le même rendu.

Comme ça apparaît dans le Footer, ça apparaîtra en bas de chaque Page produit.

Autant Amazon n’a pas besoin de faire ça, autant toi tu emmènes tes prospects vers une boutique qu’ils ne connaissent pas.

Avant de réaliser cet achat, ils auront besoin d’avoir confiance et finalement ce sont des choses aussi simples que ça qui permettent d’augmenter ta conversion.

Comment j’ai fait ?

Ces éléments sont en pleine largeur.

Si toi, pour une raison ou une autre, tu préfères n’avoir que trois éléments, je te conseille de désactiver la pleine largeur, la pleine largeur ne se justifie qu’à partir de quatre éléments.

Là, tu l’actives, tu actives la pleine largeur ici.

Là, tu peux changer ta Background Color, ton fond-là, ta couleur de fond.

Là, en général, il y a un titre par défaut que j’enlève pour ce cas-là.

Des fois, ça m’arrive d’écrire Nos engagements, ensuite bien sûr tu peux le centrer.

Ils m’embêtent, ça c’est des anciens réglages CSS que j’ai faits moi-même, qu’il le met en rose.

Bref, en général, je mets tout en Lighter, ça fait beaucoup plus sobre.

Après, il faut que tu les ajoutes, celles-ci, une par une.

Là, tu as le réglage qui est en à Icône par défaut, tu les mets en Image parce qu’en Icône, regarde ce que ça fait.

 Là, en Icône, tu as un code ici, tu peux cliquer ici pour précharger une liste.

En fait, tu as tout simplement besoin d’écrire un identifiant, ça te met l’icône.

Ensuite, tu passes en Image pour qu’ensuite l’image que tu auras uploadée ici s’active.

Après, tu écris ton sous-titre ici, Service français, je le centre, je le mets en Lighter.

Et après, le texte, je l’écris aussi.

Là, je le mets à gauche.

En général, je ne l’aligne pas au centre.

Je mets 25%, par défaut c’est 33%.

Si tu mets quatre éléments et que tu vois que le quatrième dépasse, c’est que tu as mal paramétréun des quatre éléments qui n’est pas bien configuré à 25 %.

Après, je fais la même pour les autres, c’est aussi bête que ça.

Les images se trouvent sur l’une des vidéos d’Ulrich quand il a présenté la fonctionnalité, donc il suffit d’écrire un code dans Messenger et tu auras toute la bibliothèque que je te conseille fortement de garder pour l’adapter à tes besoins.

Ensuite, tu pourras faire de très belles choses.

Une petite remarque qui m’était venue aussi : Là, je suis sur un site mono-produit.

Ce n’est pas mal comme ça, mais encore une fois, contextualise, ça en sera que mieux.

Combien de personnes font des sites mono-produit ?

Est-ce qu’il y a eu vraiment un effet de mode ?

Derrière, ne cherche même pas à profiter de toutes les possibilités qu’offre un site mono-produit.

Avec un site mono-produit, tu peux tellement contextualiser ton marketing, tu peux vraiment créer un concept d’image de marque qui est très puissant.

Au final, ça serait dommage de juste utiliser ça.

Là, regarde-moi, j’avais mis “Notre masseur ne vous convient pas ?”

“Même si Tout Chapinou” : je mets le nom de la boutique alors qu’il y a beaucoup trop de personnes qui font quelque chose de général.

On a par exemple, suite à mon podcast de la semaine dernière, qui avait très bien fonctionné, qui a attiré des réactions, j’ai eu pas mal de messages privés, j’ai eu des personnes qui me disaient : “je ne comprends pas, je n’y arrive pas, ça a déclenché des audits gratuits.”

Moi, j’ai pu leur montrer en regardant juste 20 minutes leurs shops que je voyais qu’il y avait beaucoup de choses qui ne fonctionnaient pas.

Par exemple sur l’une des personnes, ce n’est pas pour jeter la pierre, c’est juste pour faire un cas d’école, il y avait un Exit Intent donc un popup qui, lorsque tu pars, ça fait un petit message.

Le message, c’était “-10 % de réduction” et c’était un mono-produit.

Je me dis : « Bon sang, pourquoi tu ne dis pas : « notre [type de produit] à -10% » ? Pourquoi tu ne parles pas de ton esprit de marque ? »

C’est vraiment dommage de ne pas contextualiser ton offre.

Alors que quand tu as un mono-produit, il faut y aller à fond.

Ça, c’était le petit aparté aussi.

5)    Footer Last Row Champ HTML

En fait, je voulais te parler après d’une dernière fonctionnalité en numéro cinq.

Ce n’est pas vraiment une fonctionnalité, elle est là depuis le départ, mais je te rappelle que tous les champs ici, les champs de texte que tu vois, ce sont des champs HTML, pas simplement à intégrer du texte mais intégrer du code.

Regarde ici ce que j’ai fait à la place de Tous droits réservés, c’est ce qu’on voit à chaque fois.

Là, je t’ai intégré un menu.

En plus, je ne me suis même pas cassé la tête avec le code, c’est-à-dire dans le Footer Seconder Row, là le Footer-là où tu vois l’adresse mail etc. normalement à gauche ou tout à gauche, tu as une liste, un menu avec les liens.

C’est une liste, UL = unorder list, donc liste non ordonnée avec une liste de liens.

Je l’ai reprise et je l’ai copié-collée ici.

Après, tu mets les liens qu’il te faut et c’est nickel.

Tout ça, ça marche beaucoup mieux que de mettre Tous droits réservés, ne serait-ce que de mettre les CGV, Mentions Légales et Confidentialité ici, au lieu de les mettre dans ton menu-là, dans ton Footer Second Row, moi je trouve que c’est beaucoup mieux.

Dans ton Footer Second Row comme ça, tu peux mettre un lien vers Accueil, vers d’autres choses, vers À propos.

Moi, j’ai même tout mis sur la première ligne parce que je n’ai pas souhaité mettre de Footer Second Row.

Je trouve que c’est très bien de mettre les Pages Légales ici de manière un petit moins visible et elle va avoir un menu beaucoup plus intéressant, beaucoup plus orienté expérience utilisateur.

Dans mon exemple, j’ai fait exprès de mettre sur la première ligne des pages orientées expérience utilisateur, c’est-à-dire ce ne sont pas du tout des pages légales, ce sont des pages qui améliorent sensiblement l’expérience client, c’est-à-dire admettons tu as une personne intéressée, elle navigue, elle arrive là, elle est contente, elle a vu que le texte est mis en forme, il y a du gras, il y a des petits checks.

Là, c’est en gras, c’est en souligné, c’est plutôt travaillé, il y a le Waterbranding de ta marque ici, il y a les images qui sont nickels, il y a le petit texte de passage à réaction, il y a la vidéo.

La personne, elle est plutôt convaincue.

Et si le prix ça va, il y a tout ça qui explique, après elle se dit : “J’ai peut-être envie de regarder une autre page ou deux.”

Elle va aller sur la page À propos, sur la page FAQ, sur la page Livraison.

Comment fonctionne la livraison pour ce site que je ne connais pas ?

Comment fonctionne la Politique de retour ?

C’est peut-être ces pages-là qui vont la convaincre.

Encore une fois, si ces pages-là sont très mal faites, ça va peut-être justement faire l’effet inverse.

Mais si tu fais le taf, ça sera nickel.

Entre nous, ces pages-là ne me prennent pas énormément de temps, ce sont des process qui ont été faits, c’est-à-dire pour chaque boutique maintenant, je recopie le code HTML, je le duplique et après je l’adapte ne serait-ce que pour le nom de la boutique, que pour le nom du produit si je fais un mono-produit, mais ça très vite.

Bien sûr, pour moi, c’est très rapide à faire.

Pour le client qui arrive sur l’une de mes boutiques, il ne sait pas que c’est un texte que j’ai déjà travaillé dans d’autres boutiques, donc c’est quelque chose de très intéressant à faire.

Moi, je vois trop trop de boutiques qui ont tout juste mis les pages légales et pas grand-chose de plus.

N’oublie pas que l’espace client, c’est super important et que ça ne passe pas que par le WebDesign ou par d’autres choses, il faut vraiment comprendre comment tu peux faire la chose.

Par exemple aussi dans une autre boutique, je mets par exemple Livraison Suivie offerte, je mets par exemple Plus de détails avec un lien qui va sur ma fameuse page de livraison.

Comme ça j’ai un meilleur maillage interne dans mon shop et du coup la personne peut mieux naviguer. 

Derniers conseils

Là, je n’ai pas forcément mis ça dans ce shop-là, mais des fois je dis vous avez jusqu’à 14 jours, encore une fois plus de détails et je ramène dans la page retour client etc.

Il y a plein de choses à faire et il ne faut pas se cantonner aux réglages de base.

Je te laisse un petit peu t’amuser avec ça, jouer avec les multifonctionnalités en fonction de ta stratégie tout en, bien évidemment, ne réinventant pas la roue, c’est-à-dire il faut comprendre ce qui marche et bien exécuter.

Ce n’est pas un truc original, je ne sais pas faire une image de réseaux sociaux qui est grosse comme ça.

Ça, ce n’est pas original, c’est juste ne pas comprendre les règles du WebDesign de base.

Sois créatif, c’est vraiment ça qui te donnera une image à ta marque.

Là, si j’ai voulu faire une image de marque un peu mignonne, légère, rigolote, ça doit se retranscrire à la fois dans le WebDesign, à la fois dans le texte etc.

Conclusion

Voilà, c’était ces cinq réglages de Fastlane qui ne transformeront pas ta vie, mais si tu les fais, ce sera une petite différence parmi tant d’autres qui donneront une meilleure touche à ta boutique et qui, je n’en doute pas, améliorera tes conversions.

Encore une fois, réfléchis bien à ta stratégie, réfléchis bien à comment tu veux que ton utilisateur se comporte ?

C’est comme ça que tu auras des très belles choses qui arriveront.

Sur ce, j’espère que cette vidéo t’a plu.

Si tu l’as aimé, n’hésite pas à commenter, à mettre un like, à mettre des suggestions pour les prochaines vidéos.

Je me ferais un plaisir de prendre en compte ces avis et de faire la vidéo en priorité pour que ça réponde à ton besoin.

En tout cas, je reste à ta disponibilité sur les réseaux sociaux.

Sur ce, je te dis à la prochaine. 

Salut.