Intégrer ta maquette dans Shopify : bannières, images et mise en forme — Vidéo 29/41

donc là je vais aller un petit peu plus rapidement on va venir intégrer la maquette normalement hop là tu as ta bannière si tu cliques ici tu peux venir changer ton image alors le format c'est que tu peux mettre une deuxième image donc je vais venir mettre ça et ça donne ce style là donc c'est quelque chose que tu peux faire moi j'ai pas envie donc je vais venir supprimer l'image ensuite tu as l'opacité ici donc moi je vais laisser à 30 % là tu as la hauteur de la bannière alors ce que je te conseille tu mets comme tu veux sauf adapté à la première image d'accord donc là je pourrais mettre petit grand ou moyen donc je vais laisser moyen ensuite là tu as la position du contenu donc moi si je regarde ma maquette c'est à gauche au milieu au milieu à gauche voilà ensuite tu peux afficher le conteneur mais moi je ne veux pas là tu as l'alignement voilà moi je reste sur gauche tu as le nuancé comme d'habitude donc là tu as l'animation de l'image tu peux avoir un mouvement ambiant comme ça voilà moi je suis pas trop fan personnellement ici tu as la position de l'arrière-plan fixe ça veut dire que quand on scroll en fait l'image reste fixe je suis pas fan non plus pour en tout cas pour la bannière de l'image donc je vais mettre aucun ensuite tu as la mise en page sur mobile donc on va aller sur mobile là je peux mettre gauche centre on va mettre gauche ensuite tu peux venir empiler les images alors ça c'est si tu as les deux images tu venir les empiler et tu peux afficher le conteneur sur le mobile moi je préfère quand c'est comme ça on enregistre et on va venir changer à l'intérieur tu viens mettre ton texte tu peux changer la taille du texte tu viens changer ici où tu ne mets pas tu n'est pas obligé de mettre une description mais je trouve que c'est bien pour un petit peu C et tu as bien sûr le CTA le bouton vers soit une catégorie ou soit directement un produit donc dans mon cas j'ai mis directement un lien vers un produit ensuite tu peux cliquer ici pour avoir un style comme ça transparent moi je ne veux pas et tu peux mettre un deuxième bouton mais moi je vais laisser comme ça généralement le deuxième bouton c'est plus par exemple si tu veux en savoir plus sur entreprise des choses comme ça là on va aller à l'essentiel on donne un seul choix à la personne c'est de cliquer sur ce bouton voilà pour la bannière là je vais venir intégrer ça donc toi ne t'inquiète pas regarde ma vidéo comme ça tu vas comprendre comment on personnalise la page d'accueil et ensuite toi tu essayes de faire l'exercice tu prends chaque section de ta maquette et tu viens essayer de personnal ta page d'accueil là juste regarde regarde ici ce que j'ai fait c'est que en bas tu as ajouté une section et ici tu as toutes les sections avec un aperçu donc tu as 17 sections donc là tu as collection produits en vedette liste des collections donc moi j'ai cherché ce qui pourrait le plus ressembler à quelque chose comme ça donc là je cherche je cherche je cherche je cherche alors de tout ce que j'ai vu c'est ça qui pourrait le mieux correspondre donc c'est ce que j'ai fait j'ai pris ça et je suis venue personnaliser donc là j'ai mis quatre colonnes donc pour mes quatre colonnes ici et je suis venue pour chaque colonne je suis venu changer le titre et la description là tu peux mettre un lien mais c'est comme pour la bannière d'annonce je ne te conseille pas de mettre de lien ce que je voulais faire c'est que je voulais mettre hop là c'est C je voulais mettre une image le seul problème c'est que avec Shopify directement il faudrait que je code c'est la taille la plus petite que je peux mettre avec les options donc je vais te montrer je vais venir personnaliser alors là tu peux venir mettre un titre mais moi je ne mets pas de titre ensuite tu as la taille du titre là tu as la largeur d'image donc c'est ce que je te disais tu peux venir mettre comme ça là comme ça et là comme ça après tu vas me dire oui mais tu as qu'à faire ton image plus petite non ça ne marche pas j'ai testé la seule solution j'ai testé il faudrait venir coder moi je suis dans ta peau je ne sais pas coder donc ce qu'on va faire c'est que tant pis on ne va pas mettre d'image donc je fais supprimer l'image on va laisser comme ça ensuite je reviens ici nombre de colonnes sur ordinateur très important alors là tu as le rapport d'image tu peux mettre portrait square ou cercle donc j'avais mis cercle là très important si je mets 3 ça va me faire ça et ça on veut pas donc il faut que ton nombre de colonnes corresponde à ton nombre de colonnes ici alignement donc moi j'ai mis centre arrière-plan secondaire donc tu peux faire ça donc moi je ne veux pas tu as le texte du bouton donc tu peux avoir un bouton mais non c'est pas ce qu'il y a dans ma maquette alors là voilà et tu as la mise en page sur mobile donc on va regarder ce que ça donne sur mobile là tu peux mettre une colonne ou deux colonnes ce que je te conseille c'est une colonne c'est quand même un petit peu plus propre ensuite là tu peux venir activer le balayage sur mobile c'est le fait de venir un petit peu tourner comme ça avec son doigt je te conseille d'activer le balayage déjà ça va prendre moins de place et la personne pour venir balayer tout simplement parce que là comme ça ça prend un petit peu trop de place en plus c'est tout serré on peut pas venir gérer ça donc c'est mieux que ce soit comme ça en plus il écrit un/ 4 donc c'est parfait la personne elle sait qu'il y a quatre point là tu peux venir gérer la marge supérieure et inférieure donc on revient en format bureau et on passe à la suite plus tu vas tester des choses plus ça va devenir facile parce que vraiment sur Shopify c'est vraiment pas compliqué ensuite la prochaine section c'est ça je veux mettre tous mes produits donc je vais faire ajouter une section et je vais venir chercher une section qui correspondrait donc de tout ce que j'ai vu c'est ça qui marcherait donc c'est ce que j'ai fait j'ai mis collection en vedette voilà collection en Vette et ici tu as les options donc je peux venir mettre un titre mais moi je n'ai pas de titre ensuite je peux mettre une description là je ne te conseille pas de mettre ça voilà je vais un petit peu plus vite parce que je pense qu'on a compris là tu vas venir choisir ta collection donc moi j'ai mis ça ensuite ici quantité maximale de produits à efficher donc je laisse sur de toute façon moi j'ai quatre produits et là nombre de colonnes pareil hein ensuite là tu peux rendre les produits pleine largeur mais j'ai pas envie tu peux venir activer le style tout affiché donc là j'ai que quatre produits mais si par exemple tu as 16 produits il va t'en afficher h maximum donc là même je vais mettre juste quatre en fait maximum il va m'en afficher quatre maximum et il y aura un petit bouton Tout affiché ensuite tu pourras gérer le style du bouton là tu peux venir activer le carroussel sur ordinateur moi toute façon il ne se passe rien parce que j'ai quatre produits et ainsi de suite donc là tu peux faire la carte de produit donc on a mis portrait la forme par défaut donc pareil hein tu peux venir choisir là c'est exactement ce qu'on a fait euh dans les autres donc je vais très vite on met pas ça on met pas ça là tu peux mettre ça mais c'est pas la peine ensuite sur mobile on met deux colonnes donc voilà je vais un petit peu plus vite parce que déjà la vidéo je pense qu'elle est un petit peu longue ici est-ce que je pourrais faire ça donc je vais faire ajouter une section on regarde les sections alors là malheureusement je n'ai pas de section qui correspondrait à ça je ne sais pas coder je suis débutante donc qu'est-ce que je fais alors là les solution soit tu peux venir chercher une application qui pourrait te permettre de faire ça moi personnellement j'en connais pas mais on pourrait chercher je remplace par une autre section où j'abandonne donc là je vais abandonner l'idée dans la template payante que j'ai moi j'ai pu le faire parce que j' avais déjà une section qui pouvait qui permettait de faire ça je reviens ici donc on a dit qu'on laisse tomber on va passer à la section suivante la section suivante c'est ça pareil j'ajoute une section je cherche la section qui correspondrait le plus à ça donc ah voilà là c'est parfait image avec texte donc je sélectionne ça et on va venir personnalisé tu peux venir mettre l'image choisir la hauteur de l'image je te conseille vraiment pas de mettre adapté à l'image parce que sinon après c'est compliqué quand tu changes d'image et cetera je vais mettre moyen ensuite largeur d'image sur ordinateur je laisse moyen l'image en premier ou inversement ensuite là je peux mettre au milieu bas donc ça c'est la position du texte donc je vais laisser milieu c'est plus harmonieux là je peux mettre ça comme ça mais je laisse gauche c'est beaucoup mieux ensuite là je peux mettre chevauchement donc ça fait un petit effet comme ça c'est pas mal et je peux venir changer le nuancier de couleur je vais laisser comme ça là tu peux mettre mouvement ambiant moi j'aime pas trop donc ces animations là donc je vais laisser comme ça mais après toi tu fais comme tu veux et ensuite tu as sur mobile donc on va voir ce que ça donne hop là tu peux mettre centre ou droite donc on va laisser gauche parfait donc ici c'était pour te montrer un truc donc on va venir mettre l'œil parce que je te le rappelle on veut pas déconcentrer le visiteur on veut vraiment que lui il remonte et il clique là on a la newsletter là on va venir abandonner parce que je n'ai toujours pas la vidéo Youtube pour l'instant ensuite on a Instagram les posts Instagram mais ça il va falloir rajouter une application je vais te montrer et ensuite ici tu as le footeur donc voilà il nous reste deux choses et après on a fini ici j'ai rajouté inscription à la liste de diffusion donc voilà là tu peux mettre ça ou ça et là tu as les marges là tu peux venir personnaliser un petit peu comme les footur je t'avais montré et puis pu voilà donc on a fini il nous reste uniquement les posts Instagram on va venir faire ça tout de suite donc là on va faire sorti on va venir à rajouter une application qui est gratuite et elle est très bien tu ver là il faut que tu marques Instagram feed tu choisis Instagram feed ici et elle est gratuite alors elle a des options payantes mais la version gratuite est ok là je viens installer l'application là il faut connecter avec Instagram alors moi je vais connecter avec mon magify he voilà j'autorise alors petit conseil juste avant ouvre un onglet va sur Instagram connecte-toi sur Instagram avec ton compte avant de venir connecter ici donc là voilà c'est ce que ça donne tu peux venir mettre un titre donc moi je vais rien mettre ensuite tu peux mettre un espacement tu peux mettre pas d'espacement je vais mettre pas d'espacement ensuite ici tu as le format donc moi je vais laisser carré je veux sur une ligne donc on va mettre en version ordinateur d'ailleurs voilà ça c'est très bien comme ça on va venir enregistrer le flux et on va venir l'ajouter dans la boutique en ligne et ce sera fini on fait personnaliser on vient tout en bas on fait ajouter une section cette fois-ci on va faire les trois petits points application instaed et puis voilà ce que ça donne donc on va venir cliquer là et moi je veux vraiment que ça colle euh qu'il ait pas de marge donc on va enlever ça voilà parfait donc j'enregistre ici hop là voilà donc là tu vois dommage je ne peux pas euh gérer la marge parce que c'est une app et en fait on peut pas venir gérer la marge donc ce que j'aurais fait c'est que j'aurais rajouté du code mais je ne peux pas rajouter de code la petite astuce que je pourrais faire c'est rajouter hop là rajouter quelque chose euh pour venir avoir un truc entre les deux comme ça je pourrais venir rajouter la marge soit je laisse comme ça donc je pense que tu l'as compris hein voilà c'était juste pour l'exemple donc voici ce que donne la page d'accueil bien sûr les photos elles sont pas optimales faudrait changer ça mais voici ce que ça donne donc tu vois que c'est vraiment pas mal alors peut-être que toi tu n'es pas sur Instagram donc tu peux installer exactement la même application mais tu mets TikTok feed et c'est exactement la même chose tu vas venir connecter à ton compte TikTok et tu auras les derniers TikTok par contre c'est vrai que ça sera moins joli c'est tout pour la page d'accueil tu vois j'ai fait quelque chose de super simple je me suis pas cassé la tête moi de toute façon mon focus au niveau 1 vu que je suis débutante c'est de comprendre mon audience comprendre les problèmes de ma cible idéale faire en sorte de bien communiquer sur mon produit voilà faut vraiment faire les choses par priorité ta priorité surtout si c'est principalement les réseaux ta source Tacquisition client c'est vraiment tes réseaux donc il faut vraiment que tu travailles tes réseaux parce que ça sert à rien de travailler pendant je sais pas un mois sa boutique d'un petit peu délaisser euh la partie communication au final après tu auras fini ton site mais au niveau de la communication tu as pas entretenu le lien et tu vas venir tu vas devoir ramer pour refaire du contenu l'idéal c'est de faire les deux travailler un petit peu sur site et communiquer en même temps maintenant on va passer enfin à la page de produit