4 Fonctionnalités Fastlane & CSS qui changent tout

Aujourd’hui, je vais te présenter quatre astuces Fastlane et CSS pour améliorer ton thème.

Comme tu le vois ici, j’ai investi dans un nouveau micro qui te permettra d’avoir une bien meilleure qualité audio que ce que je pouvais l’avoir avec mon matos pourri d’avant, alors j’ai configuré comme je pense qui conviendra.

N’hésite pas à me faire un retour si c’est bien ou pas bien, comment il faut l’améliorer, comme ça ce sera encore mieux.

En tout cas, je pense que ça sera beaucoup plus agréable pour toi de m’écouter.

Alt-Text sur le Logo

On commence tout de suite avec le premier réglage qui est lié à un ajout à une MaJ de Fastlane. C’est juste ici.

Pour le logo, je n’ai pas mis de logo pour ce thème, j’ai tout simplement défini Pascal Degut dans les réglages Shopify.

Ensuite, j’ai défini la police avec un réglage CSS et ça s’affiche très bien, je ne me suis pas préoccupé à faire un logo.

C’est possible de faire un très bon rendu même sans logo.

Mais de base, normalement, tu as ajouté un logo.

Là, moi, j’ai une image par défaut Fastlane.

L’image par défaut, quand tu la télécharges, elle s’appelle fastlane tout en minuscule.

Si par exemple, j’avais eu un logo Pascal Degut, ça aurait été pascal-degut.jpeg ou .png pour le logo et tout en minuscule aussi.

Jusqu’à maintenant, il n’y avait pas vraiment possibilité de définir l’alt texte de cette image, de définir un attribut pour cette image, chose que tu peux faire pour n’importe quelle autre image.

Par exemple, pour une image produit, tu peux à chaque fois définir son alt texte.

Pour les images de collection, également, c’est possible.

Ça, ça se passe tout dans Shopify à chaque fois.

Mais comme le logo, on l’a intégré directement dans le thème, il n’y avait pas cette fonctionnalité.

Moi, je le faisais depuis le code, c’est-à-dire j’allais dans edit code, j’allais dans les Snippets, dans Header et il y avait un réglage ici où au lieu de définir, alors là ça, ça n’existait pas justement le alt, c’est-à-dire avant le alt prenait automatiquement le nom du shop ; et là maintenant, le alt prend l’image alt.

Après, si justement tu n’as rien défini ici, tout simplement il prend le nom du shop.

De toute façon, ce réglage est complètement facultatif.

Pourquoi je t’en parle ?

Parce que sur un réglage sur un shop mono-produit, tu vas potentiellement choisir un nom de domaine qui va correspondre aux mots-clés que recherche l’utilisateur.

Par exemple, pour prendre le pancake malin, pancake il y a directement la cible qui est dans le nom du domaine, c’est très clair.

Ça ne porte pas confusion, ça s’appelle un nom de domaine en EMD, en Exact Match Domain.

Ça permet de se positionner plus facilement sur Google.

Le problème, c’est que si tu n’as pas un mono-produit, mais un site de niche ou un site généraliste, pire, c’est beaucoup plus difficile de se positionner avec ton nom de domaine sur le produit que tu souhaites, parce que par définition tu auras plein de produits.

Même si tu es sur quelque chose de très niché, tu auras forcément une gamme de produits et tu ne pourras pas être aussi spécifique que possible.

Par exemple, admettons, tu fais des coques téléphones, ton nom de domaine, c’est téléphone rigolo parce que tu as des coques un petit peu au style déluré etc.

téléphonerigolo.com, c’est un nom de domaine qui fonctionne, tu peux faire un joli logo etc.

Mais c’est vrai que ça ne correspondra pas à une recherche d’utilisateur pour trouver une coque téléphone un peu délurée, c’est quelque chose d’assez improbable.

Du coup, tu ne rankeras pas très bien.

Ce que tu peux faire ici, c’est tout simplement mettre un mot-clé qui correspond davantage à la recherche et écrire par exemple “coque téléphone au style ostentatoire ou rigolote” etc. ensuite tu peux mettre le nom de ton site.

Là dans mon exemple, j’ai tout simplement mis « Prestation WebDesign avec Fastlane -Pascal Degut » parce que je ne me doute bien qu’effectivement personne n’ira rechercher pascaldegut.com.

Enfin, Pascal Degut, pourquoi une personne en recherche d’une prestation WebDesign irait écrire Pascal Degut si elle ne me connaît pas en amont via le groupe Facebook ou etc.

Ça n’aurait aucun sens.

Là au moins, je sais que je peux mieux me positionner.

Une dernière chose, là bien évidemment, je n’ai pas mené de recherche SEO en amont, je ne sais pas s’il y a vraiment un intérêt de se positionner sur cette recherche en particulier.

C’est un travail que tu dois faire évidemment en amont, donc regarder le volume de recherche etc.

D’ailleurs, Yannick a parlé en ce moment du lancement de Ecomlife.

Il n’y a pas mal de SEO qui sera proposé en question.

Que tu rejoignes ou pas cette formation, intéresse-toi au SEO, c’est super important.

Je vois beaucoup de gens qui lancent des pubs Facebook à gogo, à perte et c’est lassant, alors que le SEO, c’est vraiment un moyen stable de faire de très belles choses.

Ça, c’était ce premier réglage, donc le alt du logo.

Couleurs de Liens sur MegaMenu et Header

Ensuite, tant que j’y suis, je vais aller dans le CSS.

Alors là, je vais enlever mon CSS, tu vas voir que ce sera un tout petit peu plus moche.

Mais ce n’est pas grave, c’est juste pour te montrer.

Là, j’ai un effet gras là où je survole que ce soit pour le menu coulissant, donc ça c’est enlevé, c’est un réglage CSS. 

Je peux te proposer autre chose si tu n’as pas envie de toucher au CSS, de dire comment je mets cet effet gras etc.

Depuis quelques MaJ, il y a eu une harmonisation entre les interactions du méga menu et du Header.

Il y a les réglages bien comme il faut et on va voir ça tout de suite.

Pour le header, là moi, je suis en style « Extra ».

Tu as le style classique qui est possible aussi.

Je t’invite à mettre extra, c’est quelque chose qui a toutes les fonctionnalités.

Là, tu as le classic type, tu as les réglages du lien et du lien au survol.

Link hover, ça veut dire lien au survol.

Comme je suis en extra, on va ignorer ce réglage ; mais si tu étais en classique, c’est ici que tu dois intervenir.

On a “Extra Type” et on a “Extra Type on scroll”.

C’est là où je te dis qu’en fait tu as plus de fonctionnalités, puisque tu peux non seulement gérer le design des liens quand tu arrives directement là, quand ta barre de scroll est tout en haut, mais en plus unscroll, c’est-à-dire une fois que tu as défilé, comment ça va s’afficher etc. du coup tu peux mettre des effets transparents.

Ça, tu le connais bien normalement, ça a été largement mis en avant avec d’autres sites.

Là, tout simplement extra type, on va mettre les liens en bleu ici.

Comme ça, tu auras tes liens qui s’affichent en bleu.

Finalement, ça incite au clic, ce n’est pas un bleu fluo etc. c’est un bleu sobre.

Mais c’est tout ce qu’il faut, il n’en faut pas plus.

Pourquoi, d’ailleurs, les liens ont été mis en bleu ?

Parce que dans la psychologie des couleurs, le bleu inspire confiance, donc c’est pour ça que dans toute navigation internet tu vois les liens en bleu.

Donc maintenant, j’ai mes liens en bleu.

Mais si tu remarques là ici, dans le méga menu, ils n’apparaissent pas en bleu.

C’est parce que justement je suis juste intervenu au niveau du Header mais pas au niveau du méga menu.

Du coup, pour intervenir au niveau du méga menu, c’est pareil mais c’est juste ici.

Donc, tu fais « link hover color » et tu mets ça.

Et là tu vas voir, c’est tout en bleu maintenant. 

Tu as aussi ça pour mobile.

Moi, je te conseille tout simplement de laisser les réglages parce que tu n’as pas cette notion de survol, tu appuies avec ton bouton.

Donc c’est nickel, il n’y a pas besoin de voir un aspect bleu pour cliquer dessus, c’est vraiment très bien comme c’est.

Petite aparté, des fois je fais pas mal d’audits pour mes clients etc. et j’ai l’impression que c’est un petit peu le concours de on touche à tous les réglages par défaut.

Mais en fait, les réglages par défaut sont très bons, il n’y a vraiment rien à faire des fois notamment la couleur des boutons, du cycle d’achat, elles sont très bonnes.

J’ai été le premier à vouloir essayer quelques autres nuances de vert etc. ou de gérer un petit peu avec la charte graphique de mon site, mais vraiment il ne faut pas.

Des fois, je passe un tiers du temps de la prestation totale à revenir un petit peu aux réglages par défaut parce que c’est meilleur en fait.

Des fois, ne t’amuse pas à gérer les réglages comme il faut, tout simplement il y a des fois des très bons réglages par défaut.

En tout cas, le lien, c’est une très bonne chose.

Couleurs de Surlignage de Texte

Ensuite, je veux en profiter tant que j’y suis là.

Tu vois où je survol, j’ai cette bande noire qui apparaît.

Il faut savoir que cette bande noire, la couleur, elle est définie par cette couleur primaire.

En vrai, le noir, ça passe bien, ça donne un rendu sobre, ce n’est pas quelque chose qu’on voit forcément ce noir en arrière-fond, mais c’est très much, je pourrais le laisser comme ça.

Mais bien sûr, si tu as une couleur un petit peu flashy ou ne serait-ce même qu’un rouge, un petit peu comme le site pancakemalin, tu aurais ce fond un peu en rouge et ce n’est pas forcément très joli, très agréable, alors qu’en fait sur n’importe site, là tu as plutôt un fond bleu.

Si je vais aller sur Amazon, la référence, tu vois, ça se met en bleu tout le temps, vraiment tout le temps.

Sur quasiment n’importe quel site, ça se met comme ça.

Pourquoi ? Parce qu’encore une fois, le bleu, c’est la confiance etc.

Là, j’ai un petit réglage CSS, que je te propose, et à glisser dans le custom CSS.

En fait, tu fais deux points, à nouveau deux points, Sélection, tu ouvres Background.

Background, c’est le fond.

Et ça, c’est une valeur hexadécimale qui va être bleue.

Là, maintenant, je suis en bleu.

Donc, je t’invite à mettre en place ce réglage qui est très bon, ça ne pourra que te servir.

Alors là, je vais voir si je peux remettre mon CSS.

Normalement, c’est tout bon.

Intégration d’un Produit à une Grid Block

Ensuite, j’ai un dernier réglage à te montrer.

Cette fois-ci, ça concerne une petite page sympatoche que j’avais fait, que je t’avais déjà montrée la dernière fois et ça explique comment faire un ajout, une intégration d’un produit à une Grid Block.

C’est ici que ça se passe.

En fait, j’ai intégré quatre produits différents avec des Grid Block, ça veut dire j’ai fait mes images avec des dimensions qui rentrent très bien aux dimensions particulières.

J’ai notamment mis un bouton pour qu’à chaque fois ça apparaisse aux sections que je souhaite, HTML, CSS, lui, il va jusqu’en bas, JavaScript et ensuite, lui, il va dans le copywriting.

En fait, le but de cette page, c’est que l’utilisateur voit directement une gamme de produits qui l’intéresse et après il arrive directement à la section qu’il veut.

Et moi, je vais même aller à une étape plus loin, c’est-à-dire là le texte, je trouve qu’il est un petit peu trop long.

Je vais la raccourcir à chaque fois, puisqu’en plus j’ai vu que sur des résolutions plus petites, finalement, le texte était trop long et du coup ça a coupé un petit peu les images d’ici, ça ne s’affichait pas bien.

Je vais tout simplement remettre un texte plus court et je ferai un bouton En savoir plus, après j’aurai mes quatre pages produits bien définis.

Mais ça, c’est déjà une intégration qui est assez intéressante.

Je peux te conseiller de la faire, c’est vrai que c’est plutôt sympa.

Et du coup, comment j’ai fait ça ?

Alors là, j’ai beaucoup de Grid Block.

Il me semble, c’est celle-là.

Là, je me bouge encore un petit peu.

Je crois tu as déjà vu plusieurs fois les sections image, text ou HTML si tu t’y connais un petit peu en code, mais il y a ces sections :

• image with text
• video with text
• text with image.

Et je ne comprenais pas vraiment l’intérêt de ces sections, parce que je me disais : “Si on veut un text with image, il suffit juste d’ajouter un texte, puis plus loin une image et tout simplement on a tout ce qu’il faut”.

Mais en fait, pour ces réglages-là, il va falloir mettre un text with image.

Donc là, j’en ai ajouté quatre, les quatre ici.

Pourquoi il faut faire ça ?

Parce que si j’avais ajouté par exemple text image, text image, text image, l’affichage en mobile n’aurait pas été bon, j’aurais eu à chaque fois mon titre pas comme il faut.

Alors que là les titres, comme j’ai text image, ça fait text image, text image, text image.

Dans une version précédente, j’avais tout simplement mes quatre titres qui apparaissaient directement au-dessus et ensuite mes quatre images, donc ça ne convenait pas.

Donc, le text with image est super important pour faire ça.

Du coup, je définis là mon titre au tout début : Photoshop.

Là ensuite, je définis mon image.

Là, j’ai le bouton Voir plus qui me permet d’aller vers le lien que je t’ai montré, donc c’est une section Shopify tout simplement.

La largeur, je l’ai sélectionnée sur un quart parce j’ai quatre images.

Ensuite, les paddings, tu les gères, ça c’est un template qui va bientôt arriver.

Normalement, Ulrich te donnera tout ça.

Sinon s’il n’y a pas de vidéo qui sort à ce sujet, j’en ferai une.

Après, tu peux mettre ton produit. 

C’est ça qui, après, ajoute le bouton d’ajout au panier juste ici.

Le bouton d’ajout au panier, moi, je l’ai personnalisé parce que ce ne sont pas des produits physiques, ce sont des services d’infopreneuriat que je propose.

Tout simplement, j’ai changé le bouton.

Aparté sur Google Ads

J’espère qu’en tout cas voir le détail de la construction de cette page t’aura aidé.

Sinon, peut-être un dernier aparté.

Comme tu le sais, depuis six mois, je suis sur Google.

J’ai appris pas mal de notions.

Quand je te mentionnais l’importance du logo alt, je t’explique des notions comme quoi il ne faut pas non plus truffer de mots-clés ton logo alt, parce qu’au final ça deviendra une mauvaise pratique que Google dénomme le keyword stuffing, donc ajouter plein de mots-clés, et finalement ils vont être dilués.

Il n’y aura pas vraiment d’importance entre eux, ce ne sera pas forcément une bonne pratique, tu vas être pénalisé.

Tout ça, ce sont des notions qui s’apprennent.

Et l’avantage de Google, ce que j’aime, c’est que quand je me suis formé à la pub Google, j’ai amélioré mon SEO et du coup je fais vraiment d’une pierre deux coups.

Actuellement, je ne suis vraiment pas un expert en Google etc.

 Mais je vois encore trop de personnes vouloir courir après Facebook, Snapchat, Instagram et au final ils n’ont pas des bons résultats et ils claquent de l’argent, ils dépensent du temps, alors que Google c’est la base.

Ça demande énormément de temps parce qu’à chaque fois dans les produits, il faut que tu crées, que tu mettes le bon nom pour l’image, que tu définisses le bon image alt text.

Attends, je vais essayer d’aller sur un produit pour te montrer les pratiques à faire à chaque fois.

Mais c’est long, puisqu’il faut tu ailles ici et que tu définisses l’alt text.

Là, je ne l’ai même pas fait parce que je n’ai pas pris le temps.

Je vais le faire plus rapidement.

L’image ensuite, là tu dois mettre normalement ton SEO avec la page title qui doit normalement être différente que ce type de produit et en plus du SEO.

En fait pourquoi, ici, je ne l’ai pas fait ?

Parce que tout simplement, je ne sais pas si tu l’as remarqué, sur ce site, je n’ai pas de page produit en tant que telle, ce ne sont que des pages créées avec Fastlane et c’est dans l’application de Fastlane dans les pages que j’ai géré ce SEO.

Mais normalement, tu as des produits classiques, ce sont des choses à gérer.

Idem pour l’URL, tu dois le gérer convenablement.

C’est quelque chose qui prend beaucoup de temps, mais une fois que c’est bien fait, tu es récompensé.

Je ne suis pas un expert en SEO.

Je me suis lancé il n’y a pas non plus super longtemps dans l’E-Commerce.

J’ai des sites, ils sont en première page Google alors que tout le monde me disait : “Tu es sur une niche ultra compétitive” et j’ai encore des optimisations à faire.

Sincèrement, ce n’est qu’en mai-juin que j’ai commencé à me forcer sur le SEO, à aller au bout des choses.

Et finalement, deux mois après, je vois que je ranke en première page sur certains mots.

C’est pour ça aussi que je propose cette formation un peu Google Ads, je vois aussi beaucoup trop de gens qui, dès que je leur parle de Google, me disent : “Mais je n’ai rien compris, je trouve qu’on n’est pas allé assez au bout des choses dans telle formation, machin.”

Moi, je trouve que ça permet de mettre un pied à l’étrier.

Ça aurait dû te donner la curiosité de vouloir en savoir plus et moi honnêtement comment je m’en suis sorti avec Google.

Mais j’ai juste appelé l’assistance de Google environ tous les 10 jours, toutes les deux semaines avec mes essais, leur dire : “Là, j’ai eu ça, qu’est-ce que vous me conseillez etc”.

Ensuite, je suis allé lire des blogs en anglais etc.

En fait, au fur et à mesure, j’ai obtenu plutôt des bons résultats et j’ai choppé des bonnes infos.

Ce n’est pas moi qui les ai créés, je n’ai rien inventé, mais je commence à avoir un petit background et je vais potentiellement lancer une formation s’il y a des personnes intéressées et j’aimerais le faire en petit groupe.

Comme je suis un très jeune infopreneur, je ne vais pas faire un méga lancement avec des milliers de personnes.

Tout simplement, j’ai créé cette petite page et j’ai dit : “Dès qu’on est 30 à être inscrits sur la mailing list, j’envoie un mail, je dis aux personnes si elles sont intéressées”.

Si elles le sont, la formation sera tournée.

Ce sera une formation de 5-10 heures.

Et si les personnes sont intéressées, c’est nickel, on pourra avancer ensemble.

Ce sera un groupe de suivi, on échangera nos avancées.

Ce sera une formation à bas prix, j’ai mis à 147€ en tarif de lancement, 297€ pour les personnes qui ne sont pas inscrites à la mailing list.

Mais ce sera un groupe de suivi et je ne veux pas faire non plus un méga lancement, je ne veux pas me casser la tête.

Pour l’instant, la formation n’est pas faite.

Si ça n’intéresse personne, tant pis, je continue sur mes compétences pour mon propre besoin.

Je pense que ça peut être une opportunité intéressante, si tu souhaites en savoir plus sur ce levier qui est vraiment négligé et ce à tort.

Je conclurais cette vidéo par rapport à ça.

Si tu es intéressé, tout simplement tu t’inscris.

Il n’y aura aucune relance pour l’instant, mais dès que j’ai les 30 personnes, j’envoie tout ça.

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

À bientôt pour la prochaine sur d’autres nouveaux conseils techniques en matière de WebDesign ou d’amélioration de ton mindset pour ton E-Commerce etc.

Sur ce, je te dis à la prochaine.

Salut.