Salut, c’est Pascal. J’espère que tu vas bien.
Aujourd’hui, je vais te montrer une méthode pour gérer une navigation entre produits au sein d’une même collection.
C’est particulièrement utile pour les boutiques de type Multi-Produits.
Je produits souvent du contenu pour le Mono-Produit. Le Mono-Produit est souvent trop mis en avant, parfois beaucoup trop.
Dans quel contexte l’utiliser ?
Je me disais que c’était quand même intéressant de vous montrer comment on pouvait gérer la navigation autrement, sachant que je vous propose ce réglage, ensuite ce sera à vous de voir, de faire les tests et de vous décider si vous voulez l’utiliser ou pas.
Parce qu’évidemment plus vous donnez le choix au client d’aller sur des flèches, de quitter des pages Produits pour aller vers d’autres, plus vous ajoutez une part de chaos, une part aléatoire et ça peut faire tout à fait baisser votre conversion.
Mais en même temps, si le client arrive sur une page Produits qui n’est pas top et il voulait se barrer, au final, vous lui donnez une petite option pour aller vers un autre produit qui est similaire et comme ça il peut se balader tranquillement.
Il faut savoir que toutes les grosses boutiques Multi-Produits, ne serait-ce qu’Amazon, proposent des fonctionnalités comme ceci.
C’est parti, je vous montre ça.
L’avantage de cette méthode, c’est que ça permet de vous montrer comment agir directement dans le code de Fastlane.
C’est vrai que depuis six mois, je ne vous ai jamais montré comment faire.
Je me doute que beaucoup d’entre vous l’ont déjà fait, mais pour les débutants ça pourra être une petite introduction à cela.
Ensuite, je vous montrerai les nouveautés.
C’est parti.
Pour les besoins, j’ai créé directement sur mon site Tout Chapinou une collection test.
J’ai repris les mêmes produits, j’ai fait des doublons.
Vous voyez directement la différence entre des images AliExpress et ce que j’ai fait sur ma page d’accueil avec mon vrai produit.
L’importance des images, ce n’est pas du vent.
Si on est sur ce produit, je peux effectivement mettre des Related Products en fin de fiche produit, mais je ne peux pas faire plus que ça.
Il y a une petite option que je vais mettre et qui va vous permettre d’ajouter des informations pour faire article précédent, article suivant etc.
C’est un réglage plutôt sympa.
En plus de ça, je vous fournirai le code CSS pour qu’il s’affiche au mieux suivant une expérience desktop, une expérience mobile etc. ce sera vraiment chouette.
C’est parti.
Intégration du code
Vous allez dans Online Store.
Pour éditer le code de Fastlane indirectement, il faut aller dans Edit Code.
L’inconvénient de cette méthode : Vous entrez un code personnalisé qui est lié à une mise à jour de Fastlane.
Si Fastlane emploie une mise à jour qui va updater le contenu dans lequel se trouve le code que je vous ai donné, le code va être écrasé.
Ça veut dire, potentiellement à chaque mise à jour, vous devez remettre le code.
Par rapport à ça, deux choses : le thème Fastlane a quand même atteint un rythme de croisière, il a atteint sa maturité.
Par exemple, la mise à jour 2.10, je crois qu’elle est restée un bon mois et demi tranquille sans qu’il y ait aucun nouvel ajout.
Ensuite, depuis une semaine, il y a effectivement pas mal de mises à jour, ce sont des mises à jour mineures, de correction qui n’emploient à corriger les petits bugs ou les nouvelles fonctionnalités pour que ça fonctionne mieux.
Mais à chaque fois, il y a un rythme où c’est assez stable pendant un mois-deux mois et ensuite il y a des mises à jour.
Pour mieux le gérer, je vous conseille de prendre un Word, de mettre par exemple les éléments que vous allez devoir rentrer le code et vous prenez un petit screenshoot pour dire « je l’intègre entre là et là ».
Moi, avec cette méthode, ça marche nickel, c’est-à-dire j’ai plusieurs sites, même quand il y a une mise à jour qui impacte l’ensemble de mes sites, ça ne me prend pas plus de 10 minutes de mettre tout à jour, de remplacer et de mettre le code dans n’importe lequel de ces sites.
Il n’y a pas non plus des process de dingue, mais c’est vrai que c’est une petite contrainte.
Il faut en être conscient par rapport à ça.
Le code que je vais vous montrer, on va l’intégrer dans les Snippets, il faudra allez ici.
Ensuite comme on est sur la page Produits, ce sera dans Product Page.
Là, vous avez tout le contenu de la page Produit qui apparaît.
Le langage est une propriété propre à Shopify qui s’appelle du liquid.
On reconnaît quand même une certaine structure propre au HTML, ce sont des dérives, mais c’est assez simple à lire.
Il vous suffit de connaître les options qui apparaissent dans une section, ici dans la page Produit, et de voir qu’il y a des conditions d’un réglage et ensuite ça affiche ça.
La page Produit est l’une des pages les plus difficiles à comprendre, parce qu’il y a beaucoup de cas qui peuvent changer la structure de la page, mais vous voyez que ce n’est que de l’anglais, il n’y a pas besoin d’avoir peur, il y a un code couleur qui facilite la lecture.
Par rapport à ça, c’est très clair.
Par exemple, on voit ici le code des applications, un Ryviu Loox.
C’est Shopify qui est directement intégré dedans, c’est ce qu’on a répété à plusieurs fois.
C’était la petite introduction pour les personnes qui n’étaient jamais allées dans le code-là.
Finalement, tous les éléments de Fastlane (le Header, le Footer, le Mégamenu etc.) en théorie, vous pouvez ajouter ce que vous voulez et faire un thème suivant votre besoin interne à partir de Fastlane.
C’est dit, mais après n’allez pas apprendre un langage que vous ne connaissez pas, faites appel à un développeur.
Je ne suis pas développeur pour info, mais faites appel à un développeur et vous pourrez faire ce que vous souhaitez.
Ne cherchez pas non plus à réinventer la roue, vous êtes avec des très bons outils.
Une fois que j’ai fait cet aparté, on va l’écrire juste en haut comme je vous ai dit, ce sera avant le H1. Le H1, c’est le titre du produit. Ça va être ici.
Il vous suffit de repérer cette balise H1.
Si vous ne la trouvez pas, vous faites un petit contrôle F pour activer la fonction Rechercher, vous écrivez H1 et vous voyez qu’elle est mise en surbrillance tout de suite.
De toute façon, elle est qu’au début, elle se voit très bien.
Comment récupérer le code ?
Moi, pour être sûr qu’on ne va pas empiéter sur le code, on ne va pas coller n’importe quoi, vous mettez quelques lignes en plus et voici le code que je vais vous donner.
Il suffira d’écrire « NAVIGATION » sur ma page Messenger comme d’habitude, non pas sur mon profil perso, j’en vois toujours qui écrivent là-bas.
Là, c’est le code qu’il vous faut et le code est copié-collé, il vous suffit de bien sauvegarder, n’oubliez jamais cette petite étape.
Là, il est marqué Asset saved, c’est bon, c’est bien confirmé !
Normalement, si je refresh c’est tout bon, ça a été pris en compte.
On va regarder ça tout de suite. C’est bon.
Là, il n’y a que « Article suivant » qui apparaît parce que je suis sur le premier produit de la collection, mais si je fais article suivant, là il y a article précédent, article suivant.
Pour info, comme c’est un code qu’on vient d’ajouter, c’est complètement personnalisable, c’est-à dire vous revenez ici, vous voyez, c’est moi qui ai écrit article suivant, article précédent.
Comment vous pouvez personnaliser le code
Si pour une raison ou une autre vous souhaitez écrire « Produit précédent », « Produit suivant », « Previous article », si vous êtes en anglais, faites ce que vous voulez.
Vous pouvez même changer le design de la flèche en prenant un symbole flèche quelconque, vous pouvez faire ce que vous voulez.
Là, c’est tout bon. Je vais vérifier quand même en mobile ce que ça donne pour vous montrer.
Je ne vous ai pas transmis le CSS encore, c’est pour ça que je l’avais un petit peu adapté.
Là, c’est mis sur la droite, je n’aime pas trop comme ça.
En plus, je trouve que ça s’affiche juste en dessous de l’image produit, le design sur mobile est perfectible.
Il y a deux solutions : soit vous allez cacher cet élément pour le mobile parce que c’est vrai que ce n’est pas la même expérience, l’utilisateur va forcément passer dessus, ça coupe le lien entre l’image produit et le titre, vous pouvez tout à fait le couper.
Pour ça, il vous faudra définir une classe de tout cet élément, c’est une navigation en plus.
C’est avec cette navigation que vous pouvez le cacher.
Sinon on peut tout simplement ajuster le CSS pour mettre une petite marge entre l’image produit et cet élément.
Moi, ensuite sur un shop, j’avais plus centré, puisque là sur la droite, je n’aime pas trop sachant qu’après il y a le titre aligné sur la gauche.
Je crois que je l’avais aligné au milieu.
Mais dans cet exemple, on va essayer de le supprimer en mobile pour ne pas s’embêter, c’est un exemple simple.
Là, j’ai juste besoin de remonter, parce que le lien c’est le fameux a.
Le lien, je ne l’ai pas nommé, je n’ai pas défini une classe, si je dis : « cacher les liens », il va cacher tous les liens, ce n’est pas ce qu’on veut.
Mais là, pareil, il y a une Div, mais qui n’a pas été nommée.
On remonte et là il y a div.navigation.
Ça va être tout simple, il suffit d’aller sur le CSS du thème. Je vais dans l’éditeur pour que les réglages CSS se conservent et que je n’ai pas besoin de la réécrire à chaque fois.
Normalement, si vous allez en page Produit, l’éditeur va prendre en compte ce réglage parce qu’il fait partie du thème Fastlane dorénavant.
Si vous allez sur une page produit, il faut que j’aille sur Collection Tests.
Ensuite, si je vais sur ce produit, vous voyez que l’article suivant existe bien.
Considérations pour un affichage responsive optimisé
Pour cacher cette partie en mobile, on va faire quelque chose comme ça.
Je prends l’élément « @media screen and (max width 768) » cela veut dire « pour mobile » et je dis : « display: none » cela veut dire « ne pas afficher ». Je vais me baser sur cette structure et il suffit d’écrire « .navigation ».
Le « .navigation », c’est moi qui l’ai appelé comme ça.
Vous voyez que c’est un div class navigation, tout cet élément a bien été nommé.
Cela me permet d’agir sur cet ensemble et de le cacher notamment en mobile, si je le souhaite.
On va vérifier tout de suite.
Si je passe en mobile, vous voyez que l’élément a bien été supprimé.
Si j’enlève ce code, il va réapparaître.
Vous voyez tout ce qu’on peut faire pour personnaliser l’expérience entre desktop et mobile, il y a des éléments qui, je trouve, valent le coût en desktop, qui est en mobile risquent de distraire.
Effectivement, dans cet affichage-là, je trouve que ce n’est pas pertinent de le laisser, mais en desktop ça s’affiche très bien.
Il y a même moyen avec du CSS de le personnaliser plus.
Je vais voir si je retrouve ce réglage CSS qui permet de mieux l’intégrer, parce que je trouve que c’est perfectible, sinon on restera sur ça.
Je vous ai retrouvé le code CSS que j’utilise personnellement.
Ici, c’est pour la partie desktop ce que je fais et ça, c’est pour la partie mobile, je vais vous recoller ce code en entier.
Sur mobile, effectivement, je le cache, c’est ce que je fais sur mes shops. Je préfère le laisser comme ça.
Là, j’ai mis une petite marge pour mettre Article suivant.
Si vous voulez un dernier réglage plus cosmétique, ce sera plutôt ça. Il faut sauvegarder.
On fait « .navigation a » je vous dis que pour tous les liens qui sont dans la classe navigation, c’est-à-dire ça va prendre seulement en compte ces liens-là.
Je vais mettre cette couleur qui est un petit peu bleuté et qui va prendre la couleur d’un lien qu’on connaît et j’ai mis au survol « a:hover » c’est au survol, Text decoration underline, c’est-à-dire ça on le souligne.
Vous voyez qu’il y a une incitation au clic. Le client, visuellement, repère que c’est un lien.
S’il clique dessus, il comprend que c’est un lien, il n’y a pas de souci, il y a une animation en plus, il y a le pointeur de la souris en plus qui se transforme comme vous le voyez et il clique, ensuite ça va faire quelque chose comme ça.
C’est quelque chose que j’aime bien, je vais vous mettre ici à la suite.
Ça ce sera dans le Custom CSS et ça ce sera ajouté directement dans le Snippets Product.
Je vais quand même vous mettre le chemin au cas où.
C’est plus clair comme ça et avant le titre H1.
Conclusion
C’était tout pour l’astuce du jour.
N’hésitez pas à me dire si vous l’avez trouvé claire, si vous avez compris comment on ajoute quelque chose dans le code directement.
Si vous avez bien compris qu’à chaque fois que cette Product page.liquid sera updaté dans une mise à jour, il faudra bien entendu réintégrer ce code parce qu’il sera supprimé.
Autant vous dire, ça arrivera souvent, parce que la page produit est quand même un élément assez central du thème.
C’est très probable qu’à chaque mise à jour elle soit mise à jour dans tout ce code.
Il suffit qu’il y ait une seule ligne qui soit mise à jour et cette partie-là sera supprimée.
Tout ajout personnalisé, customisé par vous-même sera supprimé.
N’hésitez pas à me dire si c’est bien clair pour vous.
Si besoin, je vous ferais peut-être quelques autres vidéos dans le même sens.
Je n’ai pas non plus ajouté beaucoup de codes sur Fastlane, mais il y a des petits ajouts comme ça qui sont des fois sympas.
En tout cas, j’espère que ça vous a plu.
Maintenant, une petite communication sur mon site de prestations Webdesign.
J’ai refait pas mal d’éléments notamment sur le menu, je pourrais presque vous faire une étude de cas à ce sujet.
C’est beaucoup plus simplifié en termes de structure, puisqu’avant j’avais les mégas menus etc. Là, ce petit bouton, ce sera le sujet d’une autre vidéo, je vous montrerai comment j’ai fait ça.
Sinon, j’ai directement intégré une vidéo, j’ai plus mis l’accent sur la communication de l’audit gratuit.
Si vous n’étiez encore pas très serein quant à cet Audit Stratégique, n’hésitez pas d’en demander un pile au moment où vous allez lancer les pubs, c’est-à-dire vous vous estimez avoir terminé votre site mais vous souhaitez quand même avoir un feedback, c’est un moment parfait pour demander un audit.
À partir de là, l’audit est gratuit, je joue le jeu, je donne le maximum de valeurs.
Bien sûr, je joue le jeu, mais derrière je vous présente aussi mon offre de prestation Webdesign pour vous donner un thème énormément plus professionnel.
Ensuite, c’est à vous de voir suivant vos ressources en temps, en argent si vous souhaitez plutôt investir dans une prestation Webdesign ou si vous préférez faire par vous-même le thème en espérant atteindre la maîtrise de Photoshop, du HTML, du CSS.
Toutes ces choses prennent du temps, mais c’est le but de ma chaîne de vous apprendre toutes les astuces.
J’espère que cette vidéo vous a plu et je vous dis à la semaine prochaine.
À bientôt. Au revoir.
