Personnaliser le thème Shopify : design complet même sans savoir coder — Vidéo 24/41

maintenant on va passer à la personnalisation du thème petit disclaimer alors ici je vais me mettre dans ta peau euh on va dire que je suis débutante je ne maîtrise pas trop le design je me débrouille un peu sur convva je ne sais pas coder je ne connais pas trop Shopify euh je suis justement en train de suivre une formation sinon c'est de la trich je veux t'aider au maximum pour que tu sois autonome je ne veux pas que tu stresses peut y arriver j'ai déjà des membres qui ont fait de belles boutiques tout seul et qui étai vraiment débutant donc je pense que toi aussi tu peux le faire le dernier message que je veux passer ici c'est que tu n'as pas besoin de faire une boutique super professionnelle tu as besoin d'une boutique qui inspire confiance tu as besoin d'une boutique qui est brandée donc c'est-à-dire avec tes couleurs qu'on ressente le positionnement de ta marque qu'on ressente l'image de ta marque tu as besoin d'une boutique fonctionnelle normalement tu verras avec Shopify tu auras une boutique fonctionnelle et il faut que tu aies une boutique qui soit clairire c'est-à-dire qu'on comprenne la plusvalue de tes produits qu'on comprenne comment tu peux nous aider ok voilà tu feras un premier jet de ton site et après tu l'amélioreras soit toi-même soit avec une personne plus pro quand tu auras plus de budget on va passer à la personnalisation donc là si tu tu cliqu sur Personnaliser donc là moi tu vois j'ai déjà commencé un petit peu pour prendre de l'avance tout d'abord on va venir régler les paramètres de thème alors je vais juste rappeler très rapidem les menus comment ça se structure parce que peut-être que tu n'as pas regardé la vidéo facultative sur la page de bienvenue tu peux revenir en arrière ici tu as le nom du thème là en direct ça veut dire que c'est le thème actif avec les trois petits points tu as modifié le code mais normalement ça tu n'as pas besoin de faire modifier le contenu du thème afficher afficher la documentation voilà ça normalement C deuxlà tu n'en auras pas besoin ensuite ici super avec Shopify tu peux faire une boutique par marché donc par exemple tu pourrais faire une boutique pour la France et une boutique pour l'international en changeant le texte en en changeant les images donc ça c'est vraiment top ici tu as tous les modèles de page qu'on verra ensemble là tu as en version PC et en version mobile tu peux mettre en plein écran mais je ne te conseille pas moi j'ai deux menus un à gauche et un à droite parce que j'ai un grand écran si toi tu as un écran plus petit ça va s'afficher comme ça tu auras juste ça ok donc ne panique pas maintenant que ça c'est fait il faut que tu viennes dans Paramètres de thème et on va venir régler tout ça avant de rentrer dans le vif du sujet alors le logo normalement tu l'as déjà fait si ce n'est pas fait je t'invite à le mettre et tu peux choisir la largeur du logo sur ordinateur donc voilà moi j'ai mis ça s'il te plaît ne mets pas ton logo trop gros il faut vraiment que ton aider ne prennent pas trop de place ensuite là tu as l'image favicone donc c'est la petite image je vais te montrer qui s'affiche ici donc c'est très important de le mettre ensuite tu as les couleurs donc là tu as tous les nuanciers ce que je t'invite à faire c'est de changer les nuanciers avec tes couleurs je trouve que le système de nuanciers c'est un nouveau système qui n'existait pas avant c'est à la fois bien et pas bien alors c'est bien parce que maintenant tu peux mettre beaucoup de couleurs tu peux avoir beaucoup de nuanciers avant tu étais limité à tris quatre couleurs donc si tu voulais avoir plus de couleurs c'était un petit peu compliqué mais par contre je trouve que le système est pas ouf ouf mais bon on va faire avec donc ce que je te conseille de faire c'est soit tu fais au fur et à mesure de tes besoins donc quand tu vas venir intégrer ta maquette tu vas créer tes nuanciers soit tu viens directement alors tu as ta palette de couleur et tu viens changer les nuanciers ne me fais pas non plus 20 nuanciers tu as pas a besoin d'autant de couleurs donc voilà ensuite tu as la typographie donc là très important il faut que tu connaisses le nom de tes typos là tu as toute la liste des polices système donc toutes les polices que Shopify a il me semble que c'est à peu près les mêmes police que sur canandva mais en tout cas il y a beaucoup de polices donc tu chercheras moi j'ai tapé Futura et elle y était donc je fais annuler donc ça c'est pour les titres donc là le titre et tu as les par par agrap donc j'ai fait la même chose et j'ai mis Futura ici tu peux venir changer l'échelle de taille de police donc par exemple je vais te montrer tu vois que là c'est beaucoup plus gros mais ça change partout ça change tous les titres donc je vais revenir à 110 tu peux laisser 100 % si tu veux et tu as pour le corps la police de corps donc voilà pour la typographie ensuite la mise en page là c'est les marges à gauche et à droite donc toi normalement tu as 1200 je vais te montrer ce que ça donne ici regarde bien le changement tu vois il y a encore plus de marge donc moi je veux qu'il y ait moins de marge donc je vais mettre 1400 mais après c'est comme tu veux voilà je préfère comme ça plac c'est les espaces entre les sections du modèle donc c'est entre toutes les sections moi je préfère laisser z0ro parce que je préfère gérer manuellement la marge du haut et la marge du bas mais toi si tu veux tu peux faire ça ça va ajouter automatiquement un espace entre toutes les sections et ce sera le même espace de 76 pixels donc moi je mets ZrO parce que je vais venir gérer ça manuellement ensuite tu as l'espace horizontal donc ça c'est entre les éléments ici donc je te montre voilà là l'écart est plus grand tu le vois je vais remettre à 8 et là je te conseille de laisser 8 ensuite tu as les animations donc ça je te conseille de laisser on va enregistrer je vais te montrer ce que ça voilà c'est les animations un petit peu comme ça donc ici tu as le V vertical aucun ou 3D lift alors je trouve que le 3D lift euh c'est un peu too much mais après euh voilà chacun ses goûts c'est un petit effet comme ça je trouve que c'est un petit peu trop donc je vais mettre leev vertical c'est très bien je vais te montrer ce que ça rend voilà je sais pas si tu vois l'effet là tu peux choisir le style des boutons donc est-ce que tu veux un rayon de coin avec des boues pointues ou plutôt arrondi donc ça va le faire pour tous les boutons donc là là et partout pour tous les boutons donc moi comme dans ma maquette je veux que ce soit plutôt rond donc je vais laisser comme ça ensuite là c'est l'épaisseur du contour donc là tu n'as pas est-ce comment je peux te montrer un exemple alors je vais te montrer un exemple là ah mais là on voit pas mais alors c'est juste pour te montrer les ur donc là tu vois qu'il y a le contour qui est vraiment beaucoup donc je vais laisser à un et je vais changer le style ou là voilà c'était juste pour te montrer donc je reviens ici ensuite tu as le l'ombre alors ça c'est super important l'ombre je vais te montrer ce que ça donne al je vais mettre un lien comme ça tu pourras [Musique] voir donc voilà alors là je vais mettre l'opacité donc l'opacité de l'ombre voilà c'est ça donne ça comme ça ensuite tu peux gérer le décalage horizontal et le décalage vertical donc peut-être que si on fait ça voilà ensuite là tu peux gérer le flou donc plus tu mets de flou moins c'est perceptible et là si je mets zéro bon tu vois que ça rend comme ça après ça peut être un effet voilà moi je ne veux pas mettre d'ombre j'espère que tu as bien compris pour ces paramètres parce qu'après c'est pareil partout donc voilà tu as soit la bordure soit l'ombre donc bouton pilule de variante donc je vais aller dans la page Produit pour te montrer je vais changer de juste c'est juste pour te montrer ne t'inquiète pas donc là voilà donc bouton pilule de variante donc c'est ça ensuite ici tu peux venir changer l'épaisseur donc là tu vois que c'est un petit peu trop je vais mettre à un après peut-être que c'est ton style voilà moi je laisse quelque chose de classique du coup un pixel et après tu as le reste des options comme pour le bouton ensuite tu as les entrées donc les entrées c'est tout ce qui est les champs donc là pareil hein c'est toujours les mêmes réglages voilà donc je vais laisser à un ensuite carte de produit alors tu as standard ou carte je vais te montrer comment ça rend dans la p page d'accueil voilà et je vais juste changer le nuancier donc voilà en fait ça te rajoute ça ensuite tu as l'alignement du texte alors tu peux tout mettre à part droite parce que ça fait vraiment bizarre donc moi je préfère quon c'est centré à gauche ensuite là tu as tout le reste si tu prends carte tu pourra gérer la bordure l'opacité et cetera donc donc moi je vais mettre standard donc voilà ensuite tu as carte de collection c'est exactement la même chose mais pour les collections donc là si je mets carte et si je mets ce nuancier là voilà donc je pense que tu as compris hein de toute façon après c'est toujours la même chose donc je reviens dans la page d'accueil là c'est vraiment pour te montrer tu n'es pas obligé d'aller à chaque fois euh sur une page moi c'est pour t'expliquer donc tu as conteneur de contenu donc là si je mets 17 pixels pour te montrer donc tu vois tu as ça là et tu as ça là je vais enlever parce que je ne veux pas de contour je te conseille de faire très attention avec les bordures hein ensuite tu as support multimédia donc ça ça va être toutes tes images est-ce que tu veux mettre une bordure sur tes images après ça peut faire un effet ça c'est comme tu veux mais moi je ne veux pas menu déroulant et pop-up alors là c'est exactement c'est toujours la même chose moi je n'ai pas de menu déroulant donc je peux pas te montrer ensuite tiroir c'est exactement la même chose d'ailleurs je vais mettre comme ça ensuite tu as les badges donc ça très important c'est les badges de réduction ou rupture de stock donc là tu peux choisir la position sur les cartes voilà donc moi je vais laisser en bas à gauche ensuite ici tu peux venir gérer soit tu mets carré soit tu mets rond donc moi je vais laisser carré finalement j'aime bien je vais laisser rom pour les boutons et carré là après même si tu as mis des choses sur ta maquette tu peux changer d' vie voilà c'est pas ta maquette c'est pas la version définitive là tu as nuancier de couleur du badge de rupture de stock là je te conseille de choisir dire plutôt une couleur rouge parce que rupture de stock c'est associé à la couleur rouge quand même même si c'est pas dans ta palette de couleur je vais rajouter un nuancier non je vais aller dans couleur je vais rajouter un nuancier et je vais mettre arrière-plan un petit peu rouge comme ça voilà c'est juste pour te montrer et donc coup dans les bades je vais mettre le nuancier ne ensuite tu as information sur la marque donc là je te conseille de renseigner les champs parce que ça va venir s'afficher ici dans le fooeur après si tu n'as pas envie de faire ce bloc là dans la page de foour tu n'es pas obligé donc voilà moi j'ai mis ça donc j'ai pas mis de titre mais je pourrais mettre BR ira voilà je pourrais faire ça comme ça euh alors je vais pas mettre en h voilà je pourrais faire quelque chose comme ça là tu peux remettre ton logo et tu peux choisir la largeur d'image ensuite tu as les médias sociaux donc là quand tu vas venir mettre le lien ça va s'afficher ici ensuite tu as comportement de recherche je te conseille de laisser les deux activés c'est quand quelqu'un euh va faire une recherche avec la loupe ensuite tu as format de devise donc ça on l'a déjà fait tu n'as pas besoin panier on y vient juste après et passage à la caisse on va le faire ne t'inquiète pas CSS personnalisé c'est si tu veux venir rajouter du code en plus pour les personnes qui connaissent un petit peu de HTML CSS JavaScript et qui veulent rajouter du CSS si jamais vous changez euh vous changez de thème il va falloir recopier tout ce que vous avez mis dans CSS personnalisé parce que ça ne copie pas le CSS d'accord ensuite vous avez le style de thème alors là on n pas ça pour la template down mais peut-être que si tu as d'autres templates surtout payant tu peux avoir différents styles de thème donc là quand on clique il y a rien mais c'est normal donc voilà on a fini pour les paramètres de thème