Personnaliser la page produit Shopify : la dernière étape clé (tutoriel) — Vidéo 30/41

maintenant on va venir personnaliser la page produit c'est la dernière étape avant les applications et les derniers paramètres donc accroche-toi on va venir cliquer ICI produit et produit par défaut alors ce qu'on va faire parce que maintenant tu as quelque chose de super puissant sur Shopify c'est-à-dire des modèles de page un petit peu ce qu'on a fait pour la page FAQ on a fait une page personnalisée pour la page FAQ là on peut faire un petit peu la même chose pour les pages produits je vais t'expliquer par exemple si on revient sur ma maquette je t'avais expliqué que moi mon détail 1 et mon détail 2 ça va être par rapport au produit donc si je mets détail 1 et détail 2 sur le t-shirt et que mon deuxième produit c'est le maître ruban ou le journal digital tu vois bien que ça va pas coller on a deux façons de faire on fait deux trois modèles de pages différents donc je pourrais faire un modèle de page uniquement pour le t-shirt parce que je pense que enfin au début ça va être mon bestseller enfin ça va être le en tout cas ça va être le produit sur lequel je vais le plus communiquer ensuite tu as le maître ruban donc je pense que ça sera le modèle par défaut parce que c'est ça sera les produits les produits classiques et ensuite tu as produit digital qui est le le journal sinon je peux utiliser ce qu'on appelle les métaonnées quand je vais dans produit je vais dans la fiche produit en bas tu as les champ méta donc c'est des choses que tu peux venir personnaliser pour chaque produit donc je pourrais mettre par exemple détail 1 un deuxième champ méta détail 2 et comme ça je pourrais personnaliser pour chaque fiche produit je préfère personnellement créer plusieurs modèles de page donc là je vais juste faire l'exemple pour le t-shirt et pour par exemple hairc journal comme ça tu vas voir comment on fait très important ce qu'on va faire c'est qu'on va venir changer le produit par défaut et on va pas tout de suite créer le modèle de page on va venir tout paramétrer et ensuite on va venir comme dupliquer à partir de produit par défaut ok donc là on a heureusement on a fait l'ENT et le foeur donc ça c'est fait on va venir changer le contenu donc là je vais juste venir modifier le produit pour choisir le t-shirt comme ça on est ok je vais venir mettre ma maquette ici comme ça on va venir regarder ça voilà donc comme avec la page d'accueil je te conseille de regarder une première fois la vidéo comme ça tu vois ce que je fais tu t'habitues et ensuite toi comme exercice tu vas venir venir prendre ta maquette et tu vas venir intégrer toutes les sections ensuite si tu as du mal tu reviens sur la vidéo tu re garde à nouveau pour t'aider et après si tu as des difficultés n'hésite pas à me consulter ok on va commencer alors là on a le carroussel photo donc là c'est comme ça là tu as information produit donc on va cliquer ici et on va venir gérer ça donc là tu as AC le contenu de la note flottante sur Leon tu peux laisser comme ça toute façon c'est rien support multimédia ah voilà c'est ce qui nous intéresse alors là tu peux gérer la largeur donc tu as petit moyen et grand donc moi les photos ça va être vraiment une part importante dans mes produits donc je vais plutôt mettre moyen voilà pour que la pour qu'on voit bien les photos là tu peux limiter les supports multimédia à la hauteur de l'égran ça c'est très important je vais te parler d'un concept qui s'appelle la ligne de flottaison non pardon donc si je viens ici alors là qu'est-ce que c'est la ligne de flottaison alors la ligne de flottaison elle est ici en fait c'est avant c'est tout ce qui est alors c'est tout ce qui est affiché avant que la personne scroll et va en normalement ce qu'on dit en optimisation des conversions c'est qu'il faut que toutes les inform formation les plus importantes soit en haut comme je t'avais dit lors de la maquette parce qu'il y a des personnes elles font juste ça elles lisent et puis si ça les convient pas elle quitte le site donc on va venir limiter les supports multimédia à la hauteur de l'écran ensuite ici tu peux faire remplir ou taille d'origine moi je laisse en taille d'origine parce que je vais vraiment travailler mes images elles ont toutes la même taille et cetera donc j'ai pas besoin de faire ça ensuite tu as mise en page du bureau donc tu peux faire empiler comme ça hou là tu peux faire deux colonnes tu peux faire vignett ou tu peux faire carrousselle donc moi je vais laisser carousselle de vignett ensuite tu as la position de l'image moi je te conseille de laisser gauche parce que c'est ce que les gens ont l'habitude de voir on veut pas trop les perturbé non plus là tu peux avoir le zoom sur l'image alors moi j'ai mis pas de zoom parce que parfois c'est un petit peu b mais par exemple tu peux avoir la light box donc ça veut dire que quand quelqu'un clique voilà ça lui zoome là comme ça et tu peux faire cliquer et passer à la souris donc quand on clique comme ça on peut venir voilà zoomer moi je vais mettre pas de zoom parce que normalement pour le produit il y aura pas besoin je vais mettre des photos de zoom sur le produit voil je va faire les choses bien ensuite mise en page sur mobile donc on regarde sur mobile ensuite on fait deux colonnes afficher les vignettes ou masquer les vignettes moi ce que je te conseille c'est d'afficher les vignettes comme ça la personne elle a déjà un aperçu des images ensuite tu peux masquer les supports multimédia des autres variantes après la sélection d'une variante j'ai pas besoin de ça activer le bouclage de la vidéo ça je ne te conseille pas parce qu'en fait ça va tourner la vidéo en boucle ensuite tu peux venir gérer les marges donc on va faire enregistrer on va faire comme ça là c'est bon maintenant on va rentrer dans le détail qu'est-ce qu'on va venir mettre dans la boîte d'achat donc là tu as le texte qui reprend le champ méta du fournisseur donc là ce que tu vois là avec le petit logo de base de données c'est un champ méta si je clique ici je peux venir insérer une source dynamique c'est-à-dire que c'est une source qui ne va pas être fixe ça va changer en fonction des données qui seront dans la fiche produit si je fais ça tu peux venir mettre ces différents champs méta tu peux venir ajouter un champ méta on va pas le faire pour l'instant je vais te montrer quand je vais être ici donc là tu peux venir personnaliser moi si je regarde ma maquette voilà c'est ça donc c'est parfait alors c'est pas comme dans la maquette mais on fait du mieux qu'on peut ensuite le titre tu ne peux rien changer alors je trouve ça un petit peu dommage parce qu'on peut pas venir gérer la taille du titre je trouve que c'est énorme là si on compare ici donc voilà tu vois c'est vraiment pas la même chose mais bon on se débrouille avec la template ensuite tu as le prix donc là par exemple tu peux venir mettre l'œil et tu peux venir déplacer les éléments donc le prix par exemple je peux venir le mettre en haut après c'est assez bizarre de faire ça comme ça je te conseille de laisser comme ça ensuite ici on veut venir mettre les avis avant le prix là ce sera avec une app ne t'inquiète pas tout ce qui est application on va venir faire ça après je sais pas si tu te rappelles j'avais dit que je voulais un petit peu comme un teaser une phrase pour mettre en avant le bénéfice du produit donc là ça va bien sûr dépendre du produit c'est là qu'interviennent les champs méta ce que tu vas faire si tu veux faire la même chose de moi tu as ajouté un bloc donc là tu as plein de blocs et tu vas mettre texte quand tu as mis texte tu vas venir le monter en haut donc moi je l'ai monté tout en haut j'ai mis en dessous du prix comme dans ma maquette et ensuite j'ai mis le champ méta test 2 donc comment on fait ça tu viens cliquer ici tu fais ajouter un champ méta ça te ramène ici donc je vais juste aller en arrière pour que tu vois donc dans Paramètres don don personnalisé je reviens encore en arrière tu peux avoir des champs méta et c'est super puissant pour les produits variante collection client commande emplacement ce que j'utilise le plus moi c'est produits et variantes le reste j'utilise pas trop pour être honnête donc on vient dans produit ensuite ici tu peux venir rajouter une définition donc moi j'ai déjà le test 2 on va venir ajouter une définition ici je vais mettre bah test 3 voilà choisis bien le nom he que tu veux ensuite super important tu mets boutique en ligne sinon tu ne pourras pas l'utiliser automatiquement ça te crée un ID pour venir identifier la le champ méat donc là tu peux venir mettre une description je te conseille de mettre une description si tu travailles en équipe donc par exemple ici mettre une phrase du bénéfice produit B défice produit c'est pour venir guider mais toi tu as pas besoin donc ici très important tu vas venir sélectionner le type donc tu peux mettre une seule lignes plusieurs lignes nombre entier décimal produit fichier tu vois c'est super puissant parce que par exemple je pourrais mettre un fichier euh et ça peut être ça peut être la taille le guide de taille du t-shirt je peux mettre euh la date et l'heure je peux mettre les dimensions le volume le poids plein plein de choses tu pourras regarder j'ai testé la seule chose qui marche euh dans mon cas c'est euh texte texte texte texte une seule ligne de texte si tu mets texte enrichi alors texte enrichi ça a été bien parce que tu aurais pu mettre en gras en italique mais bon c'est pas grave on va mettre une seule ligne de texte là tu peux mettre une valeur ou liste de valeurs moi pour le cas ça sera une valeur ensuite ici tu peux mettre nombre minimum de caractères nombre maximum de caractère et cetera donc ça je ne mets rien et je fais sauvegarder donc là ça a bien enregistré donc c'est super tu reviens ici tu refreshes on sélectionne ça et tu viens cliquer ici et normalement tu auras test 3 tu pourras venir sélectionner ici donc là toi peut-être que tu vas voir qu'il y a rien tu vas dire ah bah c'est bizarre tu vas devoir faire une deuxème étape tu vas devoir aller dans produit aller dans chaque produit et mettre ton texte donc moi c'est ce que j'ai fait j'ai mis un texte pour tous mes produits on veut aller dans le détail ensuite ici c'était pas prévu mais finalement j'ai mis l'état des stocks comme je te l'ai dit la maquette n'est pas définitive tu peux venir rajouter d'autres choses donc ici j'ai fait ajouter un bloc et il y avait état des stocks je l'ai juste remonté ici pour qu'on puisse voir et je l'ai mis là donc là tu peux venir sélectionner le seuil de stock faible donc par exemple si je mets euh de ça va mettre en stock si je mets 10 ça va mettre stock bas parce que je crois que j'ai euh h t-shirts j'ai mis h en stock donc voilà là tu peux afficher l'inventaire pour que on voit le nombre donc c'était pas 8 c'était 6 ou tu peux venir rester vague donc moi par exemple dans le cas de mon t-shirt je veux afficher l'inventaire parce que pour moi c'est pertinent je veux avoir un sentiment d'urgence il reste que 6 t-shirts donc si tu veux ton t-shirt c'est maintenant ou jamais ça part vite ensuite qu'est-ce qu'on a d'autre ensuite on a les tailles d'accord donc ça on l'a ici tu peux venir faire comprimer ou menu déroulant alors je te conseille pas menu déroulant pourquoi comprimer ça permet de voir directement dans quelle taille il n'y a plus de stock ça permet de voir aussi qu'il y a SML directement alors que si j'avais mis menu déroulant il faut que la personne clique pour voir qu'il y a SML c'est vraiment pas pratique en terme d'expérience client c'est pas bon on a la quantité donc ça ok on a le bout bouton le bouton d'achat je te conseille de mettre un seul bouton comme tu l'as vu dans le cours on veut donner une seule option et là on va venir décocher ça et décocher ça on veut un seul bouton donc là tu vas me dire oui j'aime pas la couleur de mon bouton donc on va faire enregistrer donc là normalement ça reprend quand je va paramètre de thème ça reprend le nuancier 3 donc il faut que tu vois le nuancier qui est utilisé pour le bouton pour que tu puisses changer la couleur du bouton c'était pas prévu non plus mais j'ai voulu rajouter alors ça c'est quelque chose que je ne peux pas faire avec la template down que j'ai pu faire avec ma template moi donc ça calcule ici automatiquement euh la livraison je pense qu'il y a des applications qui peuvent te permettre alors pas d'avoir quelque chose comme ça hein dépuré comme ça euh mais tu peux avoir une estimation de la livraison de la date de la livraison donc si tu veux vraiment tu peux tu as juste aller sur l'App Store et regardez au pire là j'ai pas l'application en tête mais si je la retrouve soit je la mettrai dans les ressources Shopify soit n'hésite pas à venir me redemander pour que j'essaie de vous trouver ça donc moi ce que j'ai mis j'ai mis icône avec texte donc dans les blocs ici et j'ai rajouté ça donc là tu peux venir mettre horizontal ou vertical je préférais vertical ça passe mieux je trouve ensuite là tu as la première icône la deuxième icône et la troisème icône et tu peux venir mettre le texte donc voilà je te laisserai faire tu peux venir totalement mettre ce que tu as mis ici ou d'autres choses en tout cas il faut que ce soit des choses rassure le visiteur qui convain le visiteur ok ensuite tu as la description donc moi j'avais mis logo de paiement j'ai essayé de chercher quelque chose qui me permettrait d'avoir ça je n'ai pas trouvé donc je laisse tomber et ici tu as la description donc c'est ce qu'on a ici là ce que j'avais dit c'est que j'aimerais bien avoir des euh rangées réductibles donc on va venir mettre ça ici voilà tu as rangée réductible donc là tu peux venir en mettre autant que tu veux je peux en mettre un deuxième donc voilà donc là je vais venir faire l'œil et je viens ici tu peux mettre un titre tu peux mettre une icône voilà quelque chose d'assez classique donc moi j'avais renseigné tout ça sur la livraison pour que ce soit très clair avec la personne par exemple je dis tout de suite que les frais de retour sont à ta charge voilà j'essaie pas de dis uler cette information parce que c'est super important ensuite ici si tu veux tu peux ne pas mettre de texte et venir directement sélectionner une page mais après ça fait beaucoup beaucoup de choses ensuite ici si tu veux tu peux venir mettre le SKU ta référence mais moi je ne veux pas et qu'est-ce que tu as d'autre ah oui alors partager pour moi c'est pas utile parce que très rarement les gens vont partager personne ne fait ça donc onenlève si ça ne sert à rien on enlève et tu peux avoir produits complémentaires alors là tu ne l'as pas parce que il faut que tu télécharges seirch and discovery mais ça je t'explique dans une autre vidéo ne t'inquiète pas et donc voilà on est pas mal on va venir continuer avec marque détail mini FAQ avis recommandation et ce sera ok donc là je vais aller un petit peu plus vite parce que maintenant tu connais j'ai rajouté une section texte enrichi je suis venue changer les options et je suis venu remplir le texte donc là comme je te l'ai dit je suis venu enlever le bouton je n'ai pas mis de bouton vers la page qui suisje voilà ensuite ici j'ai rajouté ce bloc là qui s'appelle multiligne et ensuite ici tu as voilà tu as donc l'entête avec le titre et tu as le t texte donc là comme je t'ai dit soit je peux mettre des métadonnées donc je peux mettre une métadonnée avec le titre et la description comme ça ça va changer en fonction de chaque produit par contre tu vois que l'image malheureusement ça ne peut pas être personnalisable en fonction du produit donc là tu vois que je suis un petit peu bloqué c'est pour ça que je préfère la deuxième option qui est de créer un deuxième modèle de page mais on va venir finir donc là tu mettras par exemple si toi tu veux faire pareil que moi tu mettras tes images par rapport au t-shirt enfin au produit pardon donc là je mets ça voilà là on veut venir c'est du bonus mais c'est du bonus on veut venir rajouter du bonus de qualité des choses qui vont venir convaincre la personne l'a persuadé de d'acheter d'ajouter le produit au panier ici j'ai mis contenu réductible pour la FAQ donc j'ai mis trois questions les trois questions les plus importantes pour les personnes sont sur les frais de livraison délai de livraison retour du produit et donc dans ce cas-là dans ce cas-là là ça sera pareil pour tous les produits à part le produit digital parce que le produit est disponible tout de suite vu que c'est un téléchargement donc là par exemple je pourrais faire une trisème un troisème pardon modèle de page rien que pour le produit digital où j'enlèverai la FAQ enfin où j'enlèverai tout ce qui est frais de livraison retour voilà sinon je pourrais mettre la même chose mais avec des réponses différentes pareil par exemple là ce que je pourrais faire aussi c'est venir mettre des méta donné au lieu de rajouter un modèle de page c'est plus facile de venir rajouter un modèle de page et je pourrais faire les choses différemment aussi donc voilà donc contenu réductible c'est toujours la même chose hein je vais pas aller dans le détail voilà et ensuite qu'est-ce qu'on a on a l'avis client donc ça c'est une app ne t'inquiète pas on va venir la rajouter après et ensuite qu'est-ce qu'on a on a les recommandations donc ici tu as produit associé là tu peux venir sélectionner la quantité maximale de produit à afficher et le nombre de colonnes sur ordinateur là tu peux venir mettre portrait ou carré donc je vais mettre plutôt carré tu peux venir changer la forme bon bref je pense que tu as compris c'est toujours la même chose donc voilà on a fini pour la page produit tu vois que finalement c'est pas si difficile que ça hein ce que je te conseille c'est de regarder sur mobile pour voir si ça rend bien de toute façon à la fin on va venir faire des tests sur les navigateurs en vers PC en version mobile un test de commande pour voir si tout est ok là on regarde ce que ça rend pour voir s'il y a pas un petit problème h c'est nickel donc là toi peut-être que tu ne veux pas faire d'autres modèles de page parce que ça sera la même chose partout moi je veux aller dans le détail donc on va venir faire produit là on va faire créer un modèle on va venir mettre digital et donc ça va venir selon produit par défaut donc c'est pour ça que je te dis c'est super important de venir faire toute la page tous les paramètres et ensuite de venir créer un modèle parce que ça va créer le modèle selon la page donc on fait créer un modèle voilà et bah c'est parfait tu vient modifier on va venir faire en fonction du journal digital donc voilà ça c'est parfait tu vois là par exemple ici je vais pas afficher l'inventaire parce que c'est à l'infini donc on va juste mettre en stock voilà donc là par exemple on va enlever livraison voilà ensuite ça c'est ok donc ça on va venir l'enlever parce que c'est disponible tout de suite suite là c'est tout ce qui concerne la marque donc c'est OK ici je pourrais venir changer au lieu de mettre deux accessoires inclus je pourrais mettre euh ton journal capillaire blab blabla là j'ai pas d'inspiration mais voilà je pourrait venir mettre ça ou complètement enlever cette partie et vraiment être juste très très très rapide donc là je peux venir mettre la FAQ donc là par exemple au lieu de mettre frais de livraison je pourrais mettre autre chose donc là je pourrais venir personnaliser je pourrais même venir mettre peut-être une autre couleur voilà ensuite ici je pourrais venir mettre ça voilà les produits associés et je pourrais faire enregistrer tu as vu c'est aller sur super rapidement parce qu'on avait juste à changer quelques petits trucs si tu avais directement créé un modèle tu aurais dû tout refaire donc là je reviens d'ailleurs sur le t-shirt parce que en fait je me suis trompée sur quelque chose dans mon cas moi je ne vais pas mettre les produits associés pourquoi parce qu'en fait pour l'instant j'ai pas beaucoup de de produits et les produits c'est tout ce qui est le journal et le maître qui sont directement inclus dedans donc ça sert à rien de mettre des produits associés moi je veux vraiment que la personne elle prenne le t-shirt d'ailleurs dans les autres produits je dis que si tu veux avoir le journal ou le mîre gratuit tu peux directement acheter le t-shirt ça fait comme un lot c'est pour ça qu'il faut réfléchir et essayer d'être stratégique dans ce qu'on fait ne mets pas des ne mets pas des sections pour mettre des sections pour faire quelque chose de long tu peux faire quelque chose de très court dans la page j'aurais pu enlever ça j'aurais pu enlever tout ça laisser juste la mini FAQ et les produits associés et c'est bon ou même enlever la FAQ et juste avoir les produits associés le plus important le plus important c'est il faut de belles photos il faut des détails du produit il faut le produit en utilisation les photos dans une fiche produit ça dépend les produits c'est 50 voit 80 % de la prise de décision du visiteur ok là par exemple mes photos elles sont pixelisées elles sont pas très belle ça donne pas trop envie d'acheter le produit mais quand je commencé à faire mon shooting pH à faire les rououches à faire de belles photos là tu vas voir que ça va être complètement pour pour la même fiche produit quand tu changes juste les photos ça fait waouh concentre-toi sur déjà les photos et concentre-toi ici sur les éléments que tu mets ici ok super important plus c'est haut plus c'est important d'accord là ce que j'ai mis moi c'est vraiment du bonus la dernière chose qu'on va devoir faire c'est cliquer dans produit et là tu vois que le produit par défaut est attribué à qu produits et le modèle Digital est attribué à zéro produit donc on va aller dans produit et là fait très attention ici tu dois absolument changer le modèle de thème on va venir dans la fiche produit concerné c'est le journal digital et ici on va faire digital pour vérifier que ça a bien été attribué à la bonne fiche produit je fais [Musique] personnaliser produit et là on voit bien que c'est attribué à un produit fais bien attention à ça sinon ça ne va pas marcher donc j'espère que tu es pas trop rincé parce que je sais que c'est beaucoup de travail mais tu peux y arriver vraiment donne-toi une deadline moi ce que je je recommande c'est de pas mettre plus d'une semaine à travailler sur le site quand je dis une semaine c'est que tu as fait tes maquettes tu as préparé tes photos tu as toutes tes descriptions de prêts tu as tout de prês et tu viens venir juste faire les paramètres créer tes fiches produits personnaliser la boutique ok je sais que c'est compliqué mais tu es pas une expert tu es pas designneuse tu es pas tu es pas expert Shopify tu es pas expert en emailing tu es juste toi tu fais de ton mieux je veux pas du tout que tu culpabilises ah moi j'arrive pas les autres ils arrivent pas tu avances à ton rythme si toi tu mets 2 semaines pour personnaliser la boutique tu mets 2 semaines mais en tout cas n'abandonne pas si tu as un problème contacte-moi voilà je suis là contacte-moi dès le début et s'il te plaît mets-toi une deadline voilà je veux juste te rassurer euh je sais que c'est beaucoup de travail mais tu peux y arriver donc voilà maintenant on passe