Conception d'un site Web Shopify : planifier, concevoir et créer une vitrine Shopify avec l'IA

1. Introduction: Bonjour et bienvenue sur Shopify Web Design. Votre guide pour planifier, concevoir et créer une vitrine Shopify avec l'IA Si vous n'avez jamais vu mon visage auparavant, je m'appelle Christopher Dodd Je suis l'un des meilleurs professeurs sur skillshare.com et un expert du développement de Shopify. Je travaille avec les boutiques Shopify depuis 2019 Dans ce cours, je vais vous expliquer le processus de création d' un design Web haut de gamme pour une boutique de commerce électronique dans Figma Utiliser l'intelligence artificielle autant que possible pour automatiser les tâches les plus élémentaires. Dans mes deux cours précédents, je vous ai enseigné comment créer des designs Web sur Figma, structurés de manière à les rendre plus faciles à interpréter pour les agents d'IA Plus récemment, je vous ai en une transformer une marque de ses éléments fondamentaux vitrine fonctionnelle à l'aide d'un Shopify prêt à l'emploi Dans ce cours, je vais vous présenter un processus qui porte sur ce que nous avons appris dans ces deux cours. Nous allons prendre cette même marque lors du dernier cours, mais au lieu de l'intégrer à un thème Shopify existant, nous allons créer un design web haute fidélité Figma pour créer quelque chose de complètement personnalisé C'est avec cette même convention que je vous ai enseigné lors mon précédent cours de conception Web Figma cadre de ce cours, nous allons automatiser autant que possible le processus de conception Web, en concentrant uniquement sur les décisions et les principes fondamentaux de la conception Web, tout en laissant l' IA gérer la majeure partie du travail de base conception Web, tout en laissant IA gérer la majeure partie du travail À la fin du cours, vous aurez créé un ensemble de maquettes haute fidélité dans Figma, toutes mappées à des modèles sur Shopify, que nous pourrons ensuite utiliser à nouveau pour générer le code d'un Commençons. 2. Préface: Comme je l'ai mentionné dans l'introduction, je vais concevoir et créer une vitrine Shopify dans ce cours en utilisant la même marque fictive que celle que j'ai utilisée dans le cours précédent, Attaché à ce cours, vous devriez être capable de localiser et télécharger le dossier du projet pour CNS Macha La plupart des fichiers sont identiques à ceux de la classe précédente, mais vous constaterez également que j'ai séparé le dossier Images du site Web et ajouté un tas d'autres images à ce dossier également. J'ai également inclus un dossier d'icônes de site Web avec les icônes Shopify standard Si vous voulez suivre à la lettre, vous pouvez utiliser les mêmes fichiers que moi, mais si vous voulez apprendre avec votre propre marque, n'hésitez pas à utiliser vos propres fichiers à la place. Outre les fichiers de projet, vous aurez besoin de quelques outils. Et malheureusement, les deux ont un prix. Claude Code est l'outil que je vais utiliser comme agent d'IA pour cette classe afin d'automatiser une grande partie du travail fastidieux, mais vous pouvez le remplacer n'importe quelle alternative, que ce soit Codex par une IA ouverte ou Le code Claude nous aidera à créer des wireframes dans Figma, qui est l' outil principal que nous utiliserons dans cette classe pour créer nos Bien que Figma soit généralement gratuit, pour utiliser le Figma MCP, qui est ce dont vous aurez besoin pour le connecter au code Claude, vous devez avoir souscrit un abonnement . Pour moi, je paie environ 20 USD chacun pour ces services, mais cela en vaut la peine à 100 %. Cela étant dit, si vous souhaitez suivre sans qu' aucun agent d'IA ne vous aide, c'est également possible. Vous devrez simplement effectuer vous-même une grande partie du travail de base, à savoir configurer les wireframes Figma manuellement Enfin, et j'ai oublié de le mentionner plus tard dans le cours, mais si vous souhaitez utiliser le code Claude pour créer un thème personnalisé basé sur les maquettes Figma que nous créerons dans le cours, vous devez installer la propre boîte à outils d'IA de Shopify Sans cela, le code chiffré ou agent que vous choisissez d'utiliser risque ne pas avoir les compétences et les connaissances nécessaires pour écrire le code du thème Un autre outil que vous pourriez également envisager d'ajouter est le Chrome DevTools MCP Cet outil permet au code chiffré d'ouvrir des pages et de prendre des captures d'écran afin qu'il puisse vérifier son propre travail dans le navigateur C'est un outil que j'ai actuellement installé, mais j'ai également oublié de le mentionner plus tard dans le cours. Il se peut donc que vous souhaitiez que celui-ci soit également installé. Cela étant dit, si vous avez un agent IA et un abonnement Figma, vous devriez être prêt à suivre Bien que nous nous fiions beaucoup à l' IA dans ce cours, je peux vous assurer qu'en tant que personne ayant des années d'expérience dans la création de sites Shopify, nous utiliserons ces outils de manière professionnelle pour concevoir et créer un site Web Shopify sur les bonnes bases, plutôt que de simplement créer un autre site Web basé sur l'IA. 3. Planche d'inspiration / Rassembler de l'inspiration: Dans cette vidéo, nous allons aborder le moodboard, qui est la première étape du processus de conception Web pour vous inspirer visuellement afin de vous aider à déterminer quels éléments vous voulez voir sur votre site Web et quelle esthétique vous souhaitez pour ces sections et pour le site Web dans vous aider à déterminer quels éléments vous voir sur votre site Web et quelle esthétique vous souhaitez pour ces sections et pour son ensemble Comme on dit, ici, un mood board n'est qu'un collage visuel d'images, de textes, couleurs et de textures utilisé pour définir et communiquer l' orientation esthétique d'un projet de design. De toute évidence, dans notre situation actuelle, nous le faisons pour la conception de sites Web. vais regarder d'autres sites Web Shopify similaires, voir ce qu'ils font, faire captures d'écran des sections que nous aimons et les mettre dans un mood board, que vous pouvez imaginer comme un album Vous n'avez pas besoin de logiciel spécifique pour cela, mais comme nous allons utiliser Figma pour le reste de la classe, je vais utiliser J'ai déjà créé un dossier de design pour cette marque sur laquelle nous allons travailler est la même fausse marque que le cours précédent, Sans Macha Évidemment, nous procédons différemment cette fois-ci, mais le processus avec le moodboard est fondamentalement le même La première étape consiste évidemment à savoir où chercher ces sites d'inspiration. Si vous le souhaitez, vous pouvez simplement le rechercher sur Google ou utiliser un outil tel que Gemini, qui est également un produit Google Nous pourrions donc entrer ici, comme nous l'avons fait dans le cours précédent, et demander quelles sont les meilleures marques de MachaPowder qui vendent OK. C'était donc essentiellement le même message que celui que nous avions mis dans Gemini la dernière fois, et vous pouvez voir ici qu' il y a différentes catégories ici Comme nous l'avons vu la dernière fois, certaines d'entre elles sont très japonaises et authentiques, tandis que d'autres sont des marques de macha plus destinées au consommateur moderne En voici donc quelques-unes, Jade Leaf Marcha. Et bien sûr, c'est spécifiquement pour les marques de macha. Vous voulez changer cela quelle que soit votre marque. Donc, si vous vendez des suppléments protéinés, vous devez déterminer quelles sont les meilleures marques de suppléments protéinés. Mais vous pouvez également rechercher l'inspiration pour le design en dehors de votre créneau. Tout type de site Web de commerce électronique que vous aimez. Chaque fois que vous naviguez sur d'autres sites Web de commerce électronique et que vous voyez quelque chose que vous aimez, vous devriez certainement l'ajouter à vos favoris vous devriez certainement l'ajouter à vos favoris ou l' intégrer à votre moodboard Mais nous le faisons en une seule séance ici. Nous allons donc prendre Jade Leaf Marcher comme premier exemple. Et je peux déjà dire ici, comme je l'ai fait lors du dernier cours que j'aime certains éléments de design. La différence entre cette classe et la précédente est que nous allons tout concevoir à partir de zéro. Je vais donc mentionner tous les sites Web dont j'aime le système de conception global, car plus tard dans le cours, nous allons créer ce que l'on appelle un design MD pour tous les sites que nous aimons, décrire ce que nous aimons sur ces sites, puis le combiner avec notre propre système de marque pour créer un système de conception global pour notre conception Web utilisant l'IA. D'accord ? Je vais donc non seulement faire une capture d'écran des sections que j'aime, mais je vais également noter les URL des sites dont l'esthétique générale me plaît Alors celui-ci, Jade Leaf, j'aime beaucoup leur esthétique. Je cherche à construire quelque chose de similaire. Donc, ce que je vais faire, c'est ouvrir un éditeur de texte, n'importe quel logiciel de texte simple, et je vais simplement le coller dedans. OK, alors je voudrais parcourir et inspirer pour les sections que je pourrais aimer sur mon site Web. Comme vous pouvez le voir ici, nous avons une section consacrée aux héros, puis une section consacrée aux collections en vedette. Voici les conditions standard du secteur sur Shopify. Un héros que vous pouvez considérer comme une grande bannière placée en haut de votre page et une section de collection en vedette, en ce qui concerne Shopify, est essentiellement un ensemble de fiches de produits répertoriées dans une rangée, comme celle-ci, généralement avec un slider Cela explique donc simplement une partie de cette terminologie. Presque tous les sites de commerce électronique que vous verrez commencent par un héros et une section de collection en vedette. Et vous verrez que cela est intégré paramètres par défaut de l'outil que nous utilisons ensuite pour générer le plan de notre vitrine Shopify D'accord ? Alors que nous descendons, il y a une autre bannière ici. Il y a différentes catégories ici. Il y a donc une sorte de section de liste des collections ici, une image sur la gauche, du texte sur l'élément de droite. Ils ont un slider de recettes ici. Encore une fois, cela dépend du site que vous consultez. Généralement, la plupart des sites de commerce électronique Shopify proposent une section consacrée au héros et à la collection en vedette, mais après cela, tout dépendra vraiment de la marque en question OK, donc ce que je veux que vous fassiez ici c'est tout d'abord, comme je viens de le faire, de répertorier les sites Web dont vous aimez système de conception global, car nous l'utiliserons pour créer notre système de conception plus tard. Deuxièmement, je veux que vous consultiez certaines sections et que vous vous inspiriez du type de sections que vous pouvez mettre sur votre site Web, en dehors de la collection de héros et de fonctionnalités standard. Par exemple, vous regardez cette section de recettes ici et vous vous dites : « Oh, en fait, j'ai beaucoup de bonnes recettes avec notre marque Marcher. C'est certainement une section que je souhaite voir sur mon site Web. Nous pouvons donc même l'écrire dans notre document texte ici, les sections que je veux, non ? Disons, des recettes en vedette. Et dans Shopify, nous pouvons mettre cela dans un blog. Je pense que c'est probablement ce qu'ils ont fait. Oui, ils utilisent donc le modèle d'article pour proposer toutes ces recettes. Ce n'est en fait qu' un article de blog, d'accord ? Il y a aussi quelques textes de présentation sur ce qu'est le Macha, comment en tirer parti, sur les bienfaits du Macha pour la santé Vous pourriez donc dire « OK, je veux », puis le décrire comme vous le souhaitez. Tant que vous le comprenez et que vous pouvez le décrire, il n'est pas nécessaire qu'il ait un nom exact, mais je dirais que ceux qui répertorient produits en vedette ou les produits en vedette, et celui-ci est un héros, car l'application que nous allons utiliser pour créer les plans comprend ce qu' est une section de collection en vedette et une section de héros. D'accord, donc plus nous pouvons utiliser la terminologie standard, mieux c'est, mais ne vous y attardez pas trop. Décrivez la section du mieux que vous pouvez. Pour moi, ce que je vais faire pour ma liste de sections, c'est simplement reproduire les mêmes sections que celles que nous avions sur notre site Web scientifique lors du cours précédent Donc, si vous vous en souvenez, nous l'avons simplement configuré sur un thème prêt à l'emploi. Donc, si vous regardez le site Web, nous avons notre héros. Nous avons notre gamme de produits, notre collection vedette ici. Nous avons quelques textes de présentation sur Y Cans Macha. Comme il n'y avait pas de section de texte avec des icônes dans l'en-tête du thème WA, nous avons dû combiner deux sections ici, mais nous n'aurons pas à combiner deux sections pour créer une section lorsque nous la développerons sur mesure. Il s'agit donc essentiellement d'une section, les USP, puis de cette section de témoignages Je vais également en ajouter quelques autres, comme je vais ajouter une barre d'annonces, mais pour l'essentiel, je vais utiliser la même liste de sections que celle que nous avons créée dans le cours précédent, d'accord ? Vos objectifs, ce que je veux que vous fassiez, c'est de vous appuyer sur cette liste, de déterminer le type de sections que vous souhaitez et d'en examiner également le design, d'accord ? Peut-être n' avons-nous pas un tas de catégories différentes dans notre marque Marcher. En fait, nous n' avons que quatre produits. C'est une marque assez simple pour ma marque de test en particulier, mais j'aime vraiment le style de l'en-tête. Je vais donc faire une capture d'écran, et je l'ai configurée pour qu'elle passe directement dans le filtre de captures d'écran ici, n'est-ce pas ? Ensuite, je peux consulter mon mood board ici et dire, vous savez, que vous pouvez le configurer comme bon vous semble. Je peux dire des designs d'en-tête que j'aime bien. OK. Ensuite, vous pouvez simplement apporter cette capture d'écran. Vous voulez peut-être agrandir ce texte. Je le sais sans aucun doute. Encore plus grand que ça. On peut donc dire, responsable des designs que j'aime bien. J'aime bien le look d'une pilule. Vous pouvez dire, OK, les sections que j'aime bien. OK, disons que pour celui-ci, je vais juste faire un zoom arrière pour pouvoir le capturer plus facilement. Le zoom arrière ne fonctionne pas vraiment. Je vais donc essayer de le capturer du mieux que je peux dans la petite largeur de mon écran ici. Je vais donc prendre ça. Et puis je dirai, en fait, que je peux simplement copier cette tête. Et disons des idées de sections, non ? Nous pourrions donc créer une section de recettes, l' apporter dans les idées de section. Tu sais, on peut arranger ça dans un cadre. Je vais donc cliquer et faire glisser pour créer un cadre, puis le mettre ci-dessus ici sous forme d'idées de section. En fait, vous pourriez le mettre sur une autre page Par exemple, c'est à vous de décider comment configurer votre moodboard. Je ne fais que vous exposer les grands principes de ce que vous recherchez et ce dont vous voulez vous inspirer afin que nous puissions vous proposer ici les recettes en vedette, n'est-ce pas ? Donc, à la tête des designs, vous aimez les idées de sections pour votre propre site Web. Je vais juste apporter un peu cette nageoire blanche. Mets-le également sur la gauche. Essaie juste de le mettre au milieu. Et, bien entendu, nous n'avons examiné qu'un seul site Web jusqu'à présent. Regardons donc quelques autres incher. Regardons Kincher Macha. OK. Et cherchons encore une fois une très belle section sur les héros. Peut-être que nous faisons une capture d'écran de la section des héros, fermant toutes les fenêtres contextuelles ennuyeuses qui s'y trouvent. J'aime bien les badges ici pour ceux cultivés au Japon et à l'USDA Nous pouvons donc dire, ici, copiez ce titre et dites « designs de héros que j'aime », puis apporter la dernière capture d'écran. Hein ? Nous sommes donc en train de créer un tableau Mo ici, exactement comme nous l'avons fait la dernière fois, mais cette fois, nous ne sommes pas limités à la liste des sections d'un thème prédéfini. Nous construisons tout cela à partir de zéro. Ainsi, nous pouvons créer n'importe quelle section et n'importe quel look que vous aimez grâce à ce processus qui consiste à tout créer à partir de zéro, qui semble intimidant, mais avec l'IA, ce qui semble intimidant, mais avec l'IA, nous sommes en mesure d'automatiser autant de choses que Je n'aime pas le système de design global de ce One Peak Marcher, mais j'aime bien celui-ci, qui consiste à partager les avantages. Je pourrais donc en prendre une capture d'écran, puis la mettre dans mes idées de section ici. Très bien, je vais donc donner un nom à celle-ci, disons, une section sur les avantages sociaux. Et nous pouvons suivre ce processus autant que vous le souhaitez. Plus vous collectez de recherches et d'inspiration, mieux c'est. Mais au minimum, je dirais de passer au moins une demi-heure à le faire. Et pour ce qui est de mes besoins, comme je l' ai dit, je vais m'en tenir à la même liste de sections que nous avons créée dans le cours précédent en utilisant le thème prêt à l'emploi, juste pour simplifier les choses. Mais pour vous, je veux que vous listiez URL des sites Web dont vous appréciez le système de les URL des sites Web dont vous appréciez le système de conception global, fassiez une liste des sections que vous souhaitez, que vous preniez note de certaines conceptions pour les sections que vous allez certainement inclure ou que vous envisagez d'inclure et que vous réfléchissiez à envisagez d'inclure et que vous réfléchissiez ce que vous aimez vraiment dans ce design en particulier Encore une fois, il s'agit d'un processus flexible. Il n'y a pas de méthode définie pour le faire , à part le fait que nous allons charger nos sites Web préférés dans un outil plus tard pour générer un système de conception global. Mais bien sûr, si vous voulez simplement regarder le cours et y revenir plus tard avec votre propre marque, vous pouvez toujours suivre tous les exemples et le projet de test que je dirige pour ce cours en particulier. Vous pouvez simplement suivre la fausse marque que j'ai déjà créée sur SNS Marcher. OK, c'est tout pour le moodboard. Dans la vidéo suivante, nous allons commencer élaborer le plan de notre site Web, à élaborer le plan de notre site Web, qui deviendra ensuite le fil conducteur de notre design haute fidélité Shopper Fi 4. Planification et génération initiale de maquette: Dans cette vidéo, nous allons aborder la phase de planification, qui créera à son tour nos maquettes initiales pour notre site Web Shopify Désormais, la vitrine Shopify repose sur un système de modèles et de sections Donc, l'outil que vous examinez actuellement, que j'ai développé spécifiquement à cette fin, va faire de l'ingénierie inverse de ce système afin que nous puissions générer nos conceptions sur la base du système de modèles réellement utilisé dans Shopify afin que nous puissions facilement traduire ce projet de conception en code réel, qui est essentiellement de tout projet de conception Web, que nous utilisions l'IA ou non. Bien, comme vous pouvez le voir ici, nous sommes sur Storefront Il s'agit de l'URL à partir de laquelle vous pouvez accéder à cet outil. Et comme vous pouvez le voir, j'ai déjà mes informations d'identification ici, et je peux simplement appuyer sur Se connecter quand je suis prêt. Pour vous, vous devrez créer un nouveau compte. Il vous suffit donc de cliquer ici pour créer un nouveau compte. C'est totalement gratuit. Si je peux le faire gratuitement , c'est parce que nous allons toujours envoyer des instructions à Claude ou à l' assistant IA de votre choix. Vous aurez donc besoin de votre propre commande d'abonnement AI pour gérer le Figma et la génération de code Mais cet outil vous aidera à générer le plan que nous pourrons ensuite transmettre à notre agent d'IA. Donc, sans plus attendre, je vais me connecter. Comme vous pouvez le constater, la page initiale d'un nouveau compte ne contient pas encore de projets Je vais donc simplement cliquer sur ce bouton pour créer un nouveau projet. Et comme nous en avons déjà discuté, je vais utiliser la même fausse marque que celle que j'ai créée lors du dernier cours de Skillshare, Sance Macha premium Macha pour les Ensuite, je vais cliquer sur Créer un projet. Vous pouvez voir ici que nous avons déjà un point de départ pour la création du plan de notre site. Donc, si nous revenons à l'éditeur de boutique en ligne pour le thème de séance sur lequel nous avons travaillé dans le précédent cours Skillshare , vous verrez dans cette liste déroulante que vous avez une liste de modèles , dont certains proposent des modèles alternatifs N'importe lequel de ces modèles avec le chevron à côté permet d'utiliser un modèle par défaut de ce type avec d'autres modèles alternatifs Il s'agit du système de thèmes Shopify, et j'espère que si vous avez déjà travaillé avec Shopify, vous devriez être familiarisé avec ce Nous revenons au planificateur du magasin, vous verrez que ce plan du site ici est spécifique au système de développement de thèmes Shua Fi. Et si nous les survolons, comme dans l'éditeur de boutique en ligne, nous pouvons ajouter de nouvelles sections au modèle dans le groupe d' en-têtes, et également sur certains modèles, nous pouvons ajouter des modèles alternatifs Vous pouvez donc voir ici si je clique dessus et disons simplement bundle, en fait, nous allons le faire pour notre projet en particulier. Je vais donc le faire maintenant. Ajoutez un modèle de produit alternatif au bundle. Et si nous faisons défiler la page vers le bas, nous pouvons voir le groupe correspondant au modèle de produit. Nous avons ici notre modèle de produit par défaut, mais nous avons ensuite un modèle alternatif distinct appelé Bundle. D'accord. Vous pouvez le voir également pour le modèle de page. C'est très typique de Tuba fy. Vous disposez d'un modèle de page par défaut. Ainsi, par exemple, vous pourriez avoir une page de politique de confidentialité et une page à propos de nous. Ils suivent tous le même modèle, mais la page de contact comportera un formulaire de contact. Cela repose donc sur un modèle différent, et vous pouvez voir ici que pour le modèle de page par défaut, nous avons juste une section de page principale, et pour la section du formulaire de contact, au lieu de cela, nous avons une section de formulaire de contact. Vous verrez ici qu'un grand nombre de ces sections sont précédées d'une section principale car elles sont supposées correspondre à un type de modèle particulier. La page d'accueil sera la plus flexible qui soit. Comme je l'ai dit, la plupart des projets comportent une section consacrée aux héros et une section consacrée aux collections en vedette. Mais sur la page de collecte, vous aurez probablement juste une grille de collecte, comme c'est le cas ici, ou sur n'importe quel site Web de Sho Fire que vous trouverez, vous accédez à une page de collection. Il s'agit généralement d'une grille de fiches de produits présentant les produits de cette collection, d'accord ? Donc, dans ce sens, nous en avons trois types différents. Nous avons ces sections globales, donc l'en-tête et le pied de page, si je passe simplement à cela. Juste ici. Il s'agit donc de l'en-tête et du pied de page par défaut, mais nous pouvons également ajouter de nouvelles sections au groupe d'en-tête et de pied Je pourrais changer cela à l'avenir, mais j'ai beaucoup de réglages finaux ici. Dites-nous donc quelles sections nous devons encore planifier. Nous avons nos sections principales et nos excuses. Si l'application est un peu lente. Je viens de le créer, donc je pense qu' il faut un certain temps pour s'échauffer. Vous pouvez voir ici la configuration de nos sections principales. Ainsi, par exemple, dans la section principale du produit, si nous accédons à un modèle de produit, vous verrez ici qu'il y a une section simplement appelée page produit. Mais comme vous pouvez le voir ici, nous pouvons ajouter différentes sections sous ce que nous appelons généralement la section principale du produit, qui montre la galerie d'images, le titre, le prix et tous les autres détails dont vous avez besoin pour ce produit. D'accord ? Ensuite, nous avons d'autres sections, qui peuvent être autres que nos sections globales, c' est-à-dire l'en-tête et le pied de page ou nos sections principales Nous avons donc le formulaire de contact, la section collection de fonctionnalités et la section héros ici. D'accord ? Notre objectif est donc de commencer par le plan du site, ajouter des modèles alternatifs, ajouter notre liste de sections pour chaque modèle, puis de fournir à notre planificateur des détails supplémentaires dans l'en-tête et le pied de page, dans les sections principales, puis dans toutes les autres sections Nous construisons donc ici notre liste de modèles et notre liste de sections, puis les trois autres onglets donneront des détails supplémentaires à ces sections. Bien, entre les vidéos, comme je vous ai suggéré de le faire vous-même, j'ai créé une liste des sections que je souhaite parmi ces sections facultatives, et j'ai également ajouté un deuxième site d' inspiration ici, nous utiliserons plus tard pour améliorer notre système de conception Pour l'instant, nous ne nous concentrons trop sur le design haute fidélité. Nous essayons juste de réduire notre structure. Il s'agit donc de la planification et du wireframing de haut niveau, d'accord ? Donc, évidemment, je veux un héros de page d'accueil et une section de collection en vedette, mais nous voulons une section sur les arguments de vente, essentiellement la section Y Sance Marcher que j'ai mentionnée plus tôt Je vais cliquer sur la collection en vedette ci-dessous. Je vais quitter cette nouvelle section créée, puis je vais appeler cela « points de vente ». Ici, je veux décrire du mieux que je peux à quoi cela est censé ressembler et faire en sorte que l'IA sache quoi construire. Je vais donc dire le titre de la section, y Sans Macha, avec trois textes de présentation. S'agit-il de trois textes de présentation ? Un, deux, trois, quatre, quatre. Je vais donc remplacer cela par quatre textes de présentation ci-dessous. Chaque texte de présentation comporte une icône, un titre et un sous-texte. Ensuite, nous allons cliquer sur Insérer une section. OK, alors allons-y. Nous avons ajouté la section des arguments de vente ici, et la dernière section de notre page d'accueil était la section des témoignages, section des témoignages avec trois avec Chaque témoignage comporte une citation, ainsi qu'une image et un nom pour chaque auteur du témoignage Disons. D'accord, je vais également passer à la section collection. Si vous vous souvenez, de notre ancien site Web que nous avions configuré en utilisant le thème du prestige, il y a aussi cette section de bannières de collection ici. Je vais donc cliquer au-dessus de la section principale de la collection, et je vais l'appeler bannière de collection, section héros avec image de fond pour aller haut des pages de collection au-dessus de la grille des produits. Insérer une section. OK, c'est là. qui concerne la section panier, il est assez démodé que le client doive se rendre sur une page séparée pour voir son panier. La plupart des chariots fonctionnent désormais comme un tiroir qui sort sur le côté et se trouve à l'intérieur de l'en-tête Je ne vais donc pas trop me concentrer sur celui-ci. Nous pouvons simplement le laisser dans la section principale du panier. Toutes les sections principales de ce planificateur ont déjà des descriptions qui correspondent aux valeurs par défaut, mais vous pouvez bien sûr y accéder et modifier ces valeurs par défaut si vous avez un design très spécifique en tête Je vais vous le montrer ensuite lorsque nous passerons à l'onglet suivant. Même chose avec la page de recherche, même chose avec l' index du blog et l'article de blog, mais j'ai également laissé ces icônes ici pour supprimer ces modèles des wireframes au cas où votre site Web Shopify n'aurait pas de blog Pour l'instant, je vais juste le garder ici et utiliser l'index du blog par défaut et la section principale de l'article. En passant au modèle de produit, comme je l'ai déjà mentionné, j'ai créé un modèle alternatif. Je peux créer un autre modèle alternatif comme celui-ci. Ou supprimez tout autre modèle ici. Je souhaite un modèle différent pour un produit groupé. Si vous vous souvenez de notre marque CNS, nous avons un quatrième produit qui contient en fait les trois produits précédents Je souhaite donc créer un modèle différent, et la raison en est que je vais ajouter une section différente intitulée Ce qui est inclus, qui ne concerne que le produit groupé. Je vais donc parler d'une section qui montre les trois produits inclus dans un ensemble de produits. Donc, pour la section principale des produits et la section des offres groupées, je vais à nouveau ajouter les arguments de vente. Et comme il s'agit d'une section existante, je ne vais pas la laisser dans la section Créer une nouvelle. Je vais l'ouvrir et sélectionner des points de vente à partir d'ici. Je n'ai pas besoin de description car j'en ai déjà une Nous allons donc l' ajouter , puis les produits connexes en dessous. Alors je vais aller plus bas, et nous pouvons simplement recycler la collection en vedette. Maintenant que j'ai déjà créé le modèle alternatif, il n'y aura naturellement pas ces sections ici. J'aurais probablement dû le construire d'abord , puis le diversifier, mais tout va bien Ce que je vais faire, c'est également ajouter la section des points de vente de ce modèle. Et peut-être que je laisse de côté la collection en vedette car ce pack contient , car ce pack contient tous les produits inclus Nous voulons donc les conserver sur ce produit. Et puis un schéma assez typique, comme je vous l'ai déjà montré, le modèle de page, juste la section de la page principale qui affichera le contenu que l'utilisateur administrateur insère dans la section de contenu de la page d'administration, puis ce formulaire de contact, avec lequel nous n'avons pas vraiment besoin de réinventer la roue Nous pouvons également ajouter un modèle de méta-objet. Si vous ne savez pas ce que cela signifie, ne vous inquiétez pas, mais c' est au cas où vous voudriez créer des pages à partir de vos méta-objets. Très bien, donc si je reviens ici, j'ai presque terminé, sauf que je veux ajouter une nouvelle section au groupe d'en-têtes. Ce sera une section de barre d' annonces, une barre d' annonces, annonces, et nous pourrons simplement avoir des barres d' annonces qui s'afficheront sous la forme d'un slider, d' un chapiteau, un chapiteau Mais je dirais simplement une promotion de texte sur une seule ligne dans une fine barre. Très bien, je vais cliquer sur la section Insérer. Vous allez maintenant voir que tous nos modèles qui utilisent le même groupe d'en-têtes, c' est-à-dire tous, ont désormais cette barre d' annonce ajoutée. s'agit donc désormais d'une section globale définie par le fait qu'elle a été ajoutée à un groupe d'en-têtes ou à un groupe Potter. Vous verrez donc que chaque modèle possède cette barre d'annonce. D'accord. Si vous vouliez apparaître sur un seul des modèles, au lieu de l' ajouter au en-têtes ou au groupe de pieds de page, vous devez simplement l'ajouter dans cette section blanche ici Quel est le modèle, d'accord ? Donc, à condition qu' il s'agisse de notre plan global, que nous pouvons toujours revenir en arrière et modifier à tout moment, et que nous sommes heureux de passer à autre chose, nous pouvons maintenant passer à l' onglet Sections générales suivant. Et renseignez d'autres informations pour aider l'IA à comprendre ce que sont chacune d'entre elles. D'accord ? Je vais donc cliquer sur Modifier les informations dans la barre d'annonce. Et comme vous pouvez le constater, il est un peu écrasé à cette hauteur d'écran Mais vous pouvez voir ici, dans la barre des annonces, quel est le but de cette section ? Nous pouvons donc ajouter un objectif ici, par exemple promouvoir certaines offres, puis comment cela fonctionne-t-il ? S'il s'agit d'un slider contenant plusieurs messages différents que nous voulons afficher, nous voulons l'écrire ici Et nous voulons également cocher cette case pour les blocs répétables par les utilisateurs, car nous pouvons configurer sous forme de messages distincts intégrés dans différents blocs que nous pouvons ensuite définir dans l'éditeur de la boutique en ligne En ce sens, il va extraire les données des paramètres de section et de bloc. Comme vous pouvez le voir ici pour la source de contenu, nous pouvons insérer des données thématiques, c' est-à-dire extraites du magasin lui-même, non de l' éditeur de la boutique en ligne ou d'un mélange des deux. Il s'agira certainement de données thématiques, car l'intention est l'utilisateur modifie le texte au niveau du thème Shopify, et il n'y a aucune fonctionnalité Je vais donc laisser ce champ vide et appuyer sur Enregistrer. OK, donc la barre d'annonce, nous l'avons configurée, et maintenant nous allons passer à l'en-tête. L'en-tête contiendra donc des champs supplémentaires pour la configuration. Il va d'abord nous demander ce que doit contenir l'en-tête ? Habituellement, l'en-tête contient titre ou le logo du site, une partie de la navigation, puis ces icônes particulières qui déclenchent différentes choses sur Shopper Fi Je vais donc tous les sélectionner. Il y aura une icône de carte de compte pour le tiroir du panier et une icône de recherche qui permettra aux utilisateurs de faire une recherche directement dans l'en-tête. Ensuite, je vais passer à la suivante. Maintenant, je peux décider si je veux un méga menu, qui convient à trois niveaux d'imbrication, ou une liste déroulante, qui est préférable pour deux niveaux d'imbrication Disons donc que pour nous, nous allons simplement faire une liste déroulante parce que nous n'avons pas nécessairement autant de niveaux de nidification différents Vous pouvez également choisir d'utiliser un tiroir de navigation sur le bureau. Ainsi, généralement, lorsque vous naviguez sur mobile, vous n'avez plus d' éléments de navigation dans votre en-tête car la largeur de l'écran est si petite. Vous avez généralement cette icône de hamburger sur la gauche. Donc en fait, je vais juste vous le montrer ici. Exactement comme ça, vous avez généralement cette icône de hamburger sur la droite, et c'est ce que l'on appelle le tiroir de navigation Certains sites Web utilisent le tiroir de navigation à la fois sur mobile ou sur ordinateur Vous pouvez donc cliquer ici pour le choisir à la place, ou vous pouvez décrire un comportement personnalisé ici. Mais je vais faire une liste déroulante, puis dans ce champ facultatif, vous pouvez ajouter tout élément spécial qui apparaît dans le tiroir du menu mobile lorsque vous appuyez sur l' icône du hamburger Une chose que je tiens à souligner ici, c'est si vous ne connaissez pas la réponse à tout cela, tout cela vous embrouille, planifiez simplement ce que vous voulez. Nous allons récupérer les wireframes. Vous le verrez dans un Figma, puis vous pourrez le modifier à partir de ce point Ce ne sont là que quelques décisions de conception courantes éléments et des modèles vraiment courants sur les sites Web de commerce électronique Shopify que nous demandons simplement à l' avance. Il suffit d' un clic dans le planificateur pour que l' IA puisse créer exactement cela D'accord ? Ensuite, comment doit se comporter la recherche lorsqu' un visiteur clique sur l'icône ? Je dirais donc que cela devrait ouvrir une entrée de recherche sous l'en-tête dans laquelle l'utilisateur saisit son terme de recherche, appuie sur Entrée et est dirigé vers la page de recherche avec cette requête de recherche préremplie. D'accord. Mais encore une fois, quoi que vous en pensiez, en fait, je pense que vous pouvez laisser ce champ vide si vous souhaitez ou simplement faire une estimation. Maintenant, que doit faire l'icône du panier ? Sur certains sites Web qui n'ont pas de tiroir de panier, l' utilisateur est simplement dirigé vers la page du panier. Mais nous allons créer un thème Shopify moderne normal, afin d'ouvrir le tiroir du panier Ensuite, nous pouvons parler ici de la façon dont le tiroir du chariot devrait fonctionner. Laissez-moi voir si je peux ignorer cela car nous ne voulons rien spécial avec le tiroir du chariot. Ouais Et puis tout ce que nous voulons décrire à propos de l'en-tête. C'est ici que nous pouvons ajouter des informations supplémentaires. Sinon, si nous nous contentons d'informations génériques, cela nous donnera un schéma générique qui, si vous n'avez aucune objection, est tout à fait acceptable Mais si vous voulez quelque chose de spécifique, mieux vaut l'écrire dès maintenant afin que vos maquettes initiales soient plus proches de la vision que vous aviez en tête pour votre vitrine Je vais donc appuyer sur Enregistrer terminer la configuration de l' en-tête. Comme vous pouvez le voir ici, configurez puis descendez dans le groupe Pied Je vais cliquer sur Configurer à ce sujet. Et encore une fois, il va me demander quels éléments je veux voir figurer dans mon pied de page Je pense donc que je vais tous les sélectionner. Je veux un logo pour le site. Je veux des navigations. Je veux un abonnement par e-mail, des icônes sociales et une dernière ligne sous le reste du pied de page, généralement appelée section inférieure Et puis de combien de menus différents aurons-nous besoin ? Par exemple, encore une fois, je voudrais y ajouter un visuel si nous assistons à la séance Macha du dernier cours de Skillshare Vous pouvez voir ici, vous verrez qu'il n'en a qu'un, alors je vais en mettre un ici. Et que doit inclure la section inférieure ? Comme vous pouvez le voir ici, la section inférieure du site Web précédent ne contient que le droit d'auteur. Mais si nous allons sur l'un de nos sites d'inspiration comme Jade Leaf Macha, si vous allez ici, vous verrez qu'il propose trois menus différents, une inscription à la newsletter et que la section inférieure contient uniquement le texte du copyright Nous n'avons donc pas beaucoup de contenu Je vais donc également cliquer sur le texte du copyright, aucun menu supplémentaire, sur aucune icône de paiement, puis sur Suivant. Et pour tout ce qui est décrit en particulier à propos du pied de page, il s' agit d'un champ facultatif dans lequel vous pouvez ajouter des informations supplémentaires qui n'ont pas été demandées Je vais laisser ce champ vide et appuyer sur Enregistrer. Vous pouvez maintenant voir comment l'en-tête, pied de page et la barre d'annonce sont désormais configurés Passons maintenant aux sections principales. La principale, comme indiqué ici, est la section principale du produit. Je vais donc cliquer sur Configurer. Et quels éléments allons-nous avoir dans cette section principale du produit ? Ce sont tous des éléments typiques. Donc, ce que je vais faire, c'est que, bien sûr, il n'y a pas les images ici parce que cela suppose que nous allons certainement les avoir. Titre du produit, assez évident. Nous allons inclure le résumé des avis sur le prix de ce produit. Le sélecteur de quantité ajoute un bouton Panier et quelques accordéons. Je ne pense pas qu'il y aura de variation Je n'inclurai donc pas de sélecteur de variantes, et nous n'allons pas encore proposer d'abonnement Je ne vais donc pas ajouter d'abonnement et j'ajouterai une description du produit Je peux également ajouter mon propre élément personnalisé si aucun de ceux-ci ne décrit un élément que je souhaite voir figurer dans la section principale de mon produit. Je peux donc le faire également. Sinon, nous pouvons l'ajouter plus tard une fois que nous aurons atteint les wireframes C'est cool. Où doit se trouver la galerie de produits sur le bureau ? Habituellement, il se trouve sur la gauche. Laissez-le simplement sur la gauche, sauf si vous avez un autre type de page produit et que vous voulez l' image sur la droite. Ensuite, vous pouvez également cliquer sur faire glisser le pointeur dans quel ordre avec la galerie sur la gauche et le contenu sur la droite, quel ordre vous voulez pour cela. Je vais donc déplacer la description de mon produit vers le haut. En dessous du prix du produit. Mais à part ça, c'est ma commande. Je vais donc passer à la prochaine étape. Ensuite, je vais choisir ma mise en page mobile, qui change parfois. Peut-être que l'image est très grande et que l'utilisateur devra donc faire défiler la page ou regarder vers le bas pour voir d'autres informations importantes. Un schéma assez courant consiste donc à déplacer le titre et le prix du produit au-dessus de l'image sur mobile. Alors faisons-le. En fait, nous voudrons peut-être également y mettre le résumé des critiques afin que l'utilisateur puisse voir clairement le titre, le prix et les avis avant de voir l'image, puis qu' il puisse faire défiler la page vers le bas pour tout le reste. D'accord. Passons maintenant au style de la galerie, nous pouvons avoir des miniatures sur la gauche pour parcourir les différentes images du produit ou des vignettes Nous pouvons avoir un seul curseur d'image ou une grille. Ces deux sont les plus courants. Faisons donc simplement des vignettes sur la gauche, ou vous pouvez décrire style particulier si aucun d'entre eux ne correspond à ce que vous recherchez Et puis, en ce qui concerne le style de galerie mobile, voulons-nous des vignettes en bas Voulons-nous un slider sans vignettes ? Voulons-nous autre chose ? Voulons-nous un réseau ? Je vais faire des vignettes en bas sur mobile D'accord. Nous allons donc enregistrer ces informations, puis une fois qu'elles seront enregistrées et actualisées, vous verrez que la section principale du produit est configurée Comme vous pouvez le voir ici, cela nécessite probablement une mise à jour de la mise en page, mais cela nous indique qu' avant de pouvoir dire que nous avons terminé la configuration et créé le plan de notre site Web, nous avons créé la section principale de la collection et la section principale du produit, puis que nous répondons à la question de savoir si nous avons besoin d'une configuration différente pour la section principale du produit sur les modèles alternatifs. À ce stade, vous pensez peut-être que tout ce processus est assez laborieux. Il y a beaucoup de décisions à prendre, mais cela va nous faire gagner beaucoup de temps lors de la génération initiale des fichiers Figma Et cette étape de planification peut être aussi longue ou aussi courte que vous le souhaitez. Vous pouvez donner autant ou aussi peu d'informations que vous le souhaitez dans cette section de planification. Évidemment, si vous aviez une idée particulière en tête, cet outil est principalement conçu pour vous inciter à réfléchir à ces décisions de conception avant passer à l'étape FIGMA proprement dite Mais évidemment, une fois que la Figma a été créée et que vous vous rendez compte de quelque chose que vous n'avez pas aimé ou que vous voulez changer quelque chose, c'est totalement cool également Planifier à l' avance nous aide vraiment à automatiser le processus initial de conception Web. Et pour ne pas avoir affaire à un fichier Figma vierge. Et comme vous le verrez bientôt, nous aurons un bon point de départ avec les wireframes déjà créés dans Plutôt que de partir de zéro et d'avoir à ces décisions de conception à la volée et à le construire manuellement dans Figma D'accord. Cela étant terminé, terminons notre planification. Il y a donc une autre question ici. Comme nous avons deux modèles, il va falloir se demander si la section principale du produit varie d'un modèle à l'autre. Je vais dire non, c'est pareil partout. La seule différence avec le modèle réside dans la supplémentaire « ce qui est inclus » située sous la section principale du produit. Mais le design de la section principale du produit peut rester le même pour les deux modèles de produits. Et puis, si nous sommes satisfaits de la section panier, comme vous pouvez le voir ici, pour beaucoup d'entre elles, elle suppose simplement une certaine configuration, donc elles sont facultatives, mais nous devons simplement prendre quelques décisions concernant la section principale de collection, principalement en ce qui concerne le nombre de colonnes que nous voulons voir figurer dans la grille. Donc, sur ordinateur de bureau, je vais le définir sur une grille à quatre colonnes et je vais déplacer une grille à deux colonnes. La prochaine question sera la suivante : la collection a-t-elle besoin de filtres ? Comme notre gamme de produits ne comprend que quatre produits, nous n'avons pas besoin de filtres. Si vous avez une gamme de produits comprenant de nombreux produits différents, les filtres peuvent être très pratiques. Tout dépend de l'étendue de votre gamme de produits. Je vais donc passer à la prochaine étape. Ensuite, nous allons concevoir la fiche produit, qui est la vignette sur laquelle chaque produit est affiché, qui est utilisée non seulement sur les pages de collection, mais aussi sur les collections en vedette et les produits connexes Cette fiche produit un autre produit lorsque vous n'êtes pas sur cette page produit est un élément commun sur lequel nous devons prendre certaines décisions. Donc, évidemment, je veux l'image ou les images du produit. Je veux le titre du produit. Il n'y a aucun écart pour mes projets particuliers, je vais donc laisser cela de côté. Je vais avoir un résumé de l'avis et un bouton d'ajout rapide au panier, puis ici je peux cliquer sur O pour en ajouter un autre si je le souhaite. Et puis en bas, si je fais défiler l'écran vers le bas, vous pouvez voir que je peux également contrôler la commande. En fait, cela ne me donne pas le choix, mais une fois que nous aurons intégré Figma, je mettrai le bouton Ajouter au panier en haut de l'image Mais pour l'instant, je vais juste le laisser dans cet ordre. La commande peut facilement être modifiée ultérieurement, je vais donc simplement appuyer sur Enregistrer. Cool. C'est donc maintenant configuré. Vous verrez ici que la section principale de la carte, la section de la page principale et la section principale de l'article ont toutes une description par défaut. Mais pour l'index du blog, question se pose de savoir s'il y aura des tags. Je ne vais même pas créer de section de blog, donc je vais juste laisser cette section de côté. Encore une fois, vous n'avez qu'à donner les détails dont vous avez réellement besoin pour votre projet, puis nous pourrons passer à nos autres sections ici. Et ces autres sections ne contiennent pas de questions spécifiques. Si nous cliquons sur Modifier les informations sur l'un d'entre eux, nous allons simplement indiquer à quoi il ressemble et comment il doit fonctionner, puis également d'où proviennent les données. Bannière de collection et emplacement de la source de contenu. Le but, encore une fois, c'est de laisser ce champ vide. Les champs sont facultatifs ici. n'a pas vraiment de fonctionnalité et il sera extrait des données thématiques. L'intention est donc dans l'éditeur de boutique en ligne, définissez l'image, définissez le texte qui apparaît. Et puis pour le look, il est déjà pré-rempli ici. Voici une section avec une image de fond à placer en haut de la page de collection au-dessus de la grille des produits. Ah, nous l'avons déjà renseigné lorsque nous l'avons créé plus tôt, d'accord ? Donc, formulaire de contact, comme vous pouvez le voir ici, nom, message électronique qui soumet une demande de contact. Oui, nous n'avons pas vraiment besoin de modifier tout cela. Tout cela n'est qu'une fonctionnalité standard. La section des héros, je pourrais juste préciser. Il s'agit certainement de données thématiques. Cette source de contenu n'affectera pas les maquettes de Figma, mais ce qu'elle fera, c'est plus tard, lorsque nous reviendrons sur cet outil pour récupérer la fiche technique, nous reviendrons sur cet outil pour récupérer la fiche technique, afin de pouvoir l'implémenter sur le site Web, ce qui est un peu un bonus à cette classe pour vous montrer comment intégrer ce design au intégrer ce design code requis pour le À ce stade, nous verrons en quoi ces décisions concernant les sources de contenu sont importantes. Mais pour l'instant, tout ce qui compte pour la génération de design Figma, c'est principalement le look, d'accord ? Arguments de vente, il s'agira également de données thématiques. J'ai déjà mentionné le look dans la description lorsque je l'ai créé dans le plan du site. Il n'y a aucune fonctionnalité. Le but est assez explicite et je souhaite utiliser des blocs répétés. Encore une fois, les informations que je viens de saisir ici ne concernent que la fiche technique à la fin lorsque nous essayons de construire Cela ne change pas vraiment le design de Figma. Il s'agira également de données thématiques utilisant des blocs répétables Et puis, pour ce qui est inclus, encore une fois, les données thématiques à l'aide de blocs répétables, cliquez sur Enregistrer, et c'est tout Évidemment, cela dépend de ce que vous mettez dans le plan de votre site en termes de sections qui apparaissent dans Global, Maine et dans les autres sections ici. Je ne pense pas que vous puissiez ajouter d'autres sections principales, mais vous pourriez ajouter, comme nous l'avons montré dans cette vidéo, une barre d'annonce aux sections générales, puis toutes ces autres sections comme les arguments de vente, les témoignages, héros qui ne sont pas des sections principales ou les sections mondiales renvoyant ici Donc, évidemment, cette liste dépendra de vos besoins spécifiques. Si vous vouliez suivre exactement mon projet de test, voici à quoi il ressemblera également de votre côté. Et maintenant, à partir de n'importe lequel de ces onglets, nous pouvons cliquer sur ce bouton bleu pour créer le plan de conception Web. Très bien, vous pouvez voir ici que nous avons plan de conception Web sur la gauche, et nous avons la fiche technique sur la Le plan de conception Web couvre essentiellement toutes les sections où elles existent et à quoi elles devraient ressembler. La fiche technique est quelque chose que nous utiliserons pour accompagner les wireframes ultérieurement afin donner le contexte des fonctionnalités et de la source de contenu à l'IA afin de l'intégrer au thème source de contenu à l'IA afin de l'intégrer Mais pour l'instant, ignorons complètement ce côté droit et regardons le côté gauche. Ici, nous pouvons exporter ce plan de conception Web, et à ce stade, nous n'avons même pas besoin d'utiliser l'IA. Nous pouvons avoir ce document ici que vous pouvez envoyer à un designer ou que vous pouvez afficher sur un deuxième écran lorsque vous créez un design manuellement sur Figma Vous n'êtes donc pas obligé d' utiliser l'IA si vous ne le souhaitez pas, mais comme nous avons pris toutes ces décisions à l' avance, nous pouvons automatiser l'élaboration de ce plan de conception Web dans Figma D'accord ? Comme vous pouvez le voir ici, nous avons le nom du modèle, puis les différentes sections globales, la section principale, puis la section FOOTA Et pour la page d'accueil, évidemment, nous n' avons pas de section principale. Nous avons ces deux sections globales , puis nos quatre sections facultatives, d'accord ? Donc, dans ce cours, nous n'allons pas créer le Figma manuellement à partir de ce plan de conception Web Nous allons simplement cliquer ici pour copier les instructions de Figma, puis nous allons coller ces instructions dans une session de code griffée. Vous pouvez utiliser l'application de bureau ici, mais je préfère exécuter l'extension de code clawed dans mon éditeur de code préféré, Visual Studio Cependant, si vous voulez le faire, je vais juste ici pour commencer une nouvelle session. Il est juste en train de charger ici. Et puis c'est ici que je peux insérer mon invite, afin que je puisse coller, et là, vous pouvez voir l' invite très détaillée qui devrait être en mesure de donner à Claude toutes les informations dont il a besoin pour créer le wireframe Ici, je l'ai mis dans l'ordre, donc il me demandera le moins possible d'autorisations et vais simplement le créer. Et, bien entendu, pour que Claude puisse se connecter à Figma, l'application Figma doit être ouverte N'oubliez pas que vous avez besoin d'un poste de développeur ou plus pour utiliser cette fonction MCP, au moins au moment de l'enregistrement, et que le MCP doit également être Les instructions d'activation du MCP ont donc changé depuis mon dernier cours sur la conception Web de Figma Assurez-vous donc de consulter les dernières instructions pour installer le Figma MCP Cela change assez souvent. Mais à condition que vous ayez déjà configuré Figma MCP, vous pouvez simplement exécuter cette invite dans le code Cloud Et voyons si cela soulève des questions. Sinon, il devrait simplement créer le fichier Figma pour nous. Comme vous pouvez le voir, ici, cela va charger la compétence de génération de design Figma depuis Figma, puis elle va déclencher d' autres compétences et d' autres actions MCP Mais on y va. Voici notre première question. Il nous demande dans quelle équipe Figma doit créer les nouveaux wireframes Pour moi, ce sera certainement mon équipe personnelle, l'équipe de Christopher Dodd Assurez-vous de choisir une équipe dotée d'un ensemble de développeurs. Bien entendu, je vais aborder rapidement une grande partie de cette question, car Claude travaille juste en arrière-plan. Si cela vous prend du temps, ne vous inquiétez pas. Cela devrait prendre un certain temps. Je suis actuellement en attente d'environ 17 minutes. Mais si vous souhaitez voir quelque chose d'un peu plus intéressant, vous pouvez accéder à Figma, voir le fichier et le voir se construire en temps réel Je vais donc passer à cette vue, et vous pouvez voir maintenant que nous avons un cadre avec nos composants, et que nos différents modèles sont en cours de construction. De toute évidence, ce n'est pas encore terminé. Je vais donc laisser ça continuer jusqu' à ce que ce soit fait. Bien, au bout de dix minutes de plus, ça faisait environ 26 minutes. Vous pouvez donc vous attendre à ce que l'ensemble du processus soit probablement terminé en moins d'une demi-heure. Mais évidemment, cela dépend du nombre de sections que vous avez incluses et de tout cela. Mais pour un projet de cette envergure, cela a pris environ 26 minutes. Et maintenant, si je passe à Figma, vous pouvez voir que tous les wireframes ont été générés Alors ne vous inquiétez pas, ce ne sera pas le formulaire final. Nous allons rendre cela beaucoup plus beau, mais il ne s'agit essentiellement que des maquettes basse fidélité ici Nous avons donc notre page d'accueil sur ordinateur. La version mobile de cette page d'accueil. Ensuite, nous avons la page du produit. N'oubliez pas que nous avons pris certaines décisions de conception à l'avance nous voulions que la galerie de produits se trouve sur la gauche, que nous avons les vignettes des produits sur la gauche sur l'ordinateur, puis que nous les avons en bas avec celles ci-dessus Toutes ces décisions sont donc désormais prises en compte dans les wireframes de Figma Et comme vous pouvez le voir, Y Suns Macha est ici, et il devrait utiliser des composants autant que possible Les composants font donc partie intégrante de Figma. Je crois que nous l'avons abordé dans le cours de conception Web Figma où nous avons notre composant principal ici car cet en-tête est censé avoir le même aspect sur tous les modèles Donc, si nous mettons à jour celui-ci ici, il devrait être transféré vers l'en-tête du bureau de chaque modèle. Vous pouvez voir ici, indiqué par ce losange, qu'il s'agit d'une instance du composant. Cela correspond donc assez bien au système Shopify. Nous devons évidemment remplac 5. Mettre en œuvre un système de conception: Dans cette leçon, nous allons créer un système de conception, puis nous allons envoyer ce système de conception à Claude pour qu'il implémente ensuite ce système de conception sur nos structures filaires Figma peu fidèles actuellement grises Donc, si nous regardons ce que nous avons généré au cours de la dernière leçon, nous avons tous ces wireframes gris ennuyeux de Figma, qu'il est difficile d' imaginer pour l' instant qu'il s'agisse d'un site Web ou d'un design Web terminé , car il manque quelques éléments Premièrement, il manque ce système de design, il manque la couleur, il manque les polices. Il manque également une certaine imagerie et une certaine iconographie. Et aussi, pour certaines parties, nous devons mettre des espaces réservés plus appropriés et modifier un peu la mise en page Mais vous commencez déjà à voir ce design prendre beaucoup plus vie en lui appliquant simplement un système de design. Maintenant, à l'ère de l'IA, nous avons ce qu'on appelle point de design D. De quoi s'agit-il exactement ? Il a été développé par Google, je crois, et il s'agit d'un document de système de conception que les agents d'IA peuvent utiliser pour lire et générer une interface utilisateur cohérente dans l'ensemble de votre projet. Donc, en gros, c'est comme si le système de conception dans un fichier Markdown point d était Markdown, qui est simplement un document facilement lisible par les agents d'intelligence artificielle Et si nous examinons le dossier du projet, si je consulte notre dossier d'identité de marque ici, nous pouvons voir que nous avons déjà une identité de marque ici. Laisse-moi juste mettre ça dans le cadre. Vous pouvez voir ici que nous avons déjà notre palette de couleurs et nos polices de caractères. Un système de conception va bien plus loin que cela. Mais pour ce projet, nous restons simples et nous pouvons réellement créer un fichier de conception MD à partir de cela. Ensuite, je vais me souvenir de ces sites d'inspiration que vous avez découverts plus tôt ? Eh bien, encore une fois en tête. J'ai Jade Leaf Marcher et Morning Made. Eh bien, j'ai créé cet outil appelé Design System Mixer. Nous allons utiliser une extension Chrome que j'ai créée, appelée Design MD Extractor. Nous allons extraire le système de conception et créer un fichier de design DotD à partir de chacun de ces sites Web, puis nous allons les mélanger avec notre propre design point md pour créer un nouveau fichier de design DotD remixé C'est l'une des choses les plus puissantes dans lesquelles l'IA est douée. Il est bon pour mélanger les choses, et en utilisant le format design dotmd, cela signifie que nous utilisons un format conçu par une entreprise géante comme Google OK. La première chose que je vais faire est donc de générer un fichier design MD à partir des fichiers que j' ai déjà dans mon projet. D'accord ? Donc, ce que je vais faire, c'est me rappeler que je l'ai lancé ici, dans cette fenêtre. Ce dossier n'est connecté à aucun dossier. Je vais donc cliquer sur ce bouton ici pour ouvrir un dossier, puis je vais sélectionner le dossier CNS de l'identité de marque ici, ouvrir et maintenant il y aura un contexte dans ce dossier Je pense que cela va ouvrir une toute nouvelle fenêtre, et je vais devoir créer une nouvelle session griffée, mais c'est bon Comme vous pouvez le voir ici. Si j' exécute une session de code chiffré, elle s' exécute désormais dans ce dossier, elle a donc accès à toutes les ressources de ce accord ? Donc, ce que je vais faire, c'est lui demander de générer un fichier design point md basé sur les fichiers de ce dossier. À savoir le logo. Vous pouvez donc utiliser le symbole arobase ici pour référencer des fichiers spécifiques du dossier. Je peux donc dire notamment le logo, les oups que je viens d' écrire littéralement Sans, il ne répond malheureusement pas bien aux fichiers contenant des accents étranges. Je vais donc simplement ouvrir le champ At ici, puis le trouver dans la liste. Il y a beaucoup de dossiers imbriqués ici. Mais nous y voilà. Le guide d'identité de marque et le document sur les couleurs et les polices. Je suis également là pour qu'il ait le contexte de ce qu' est un fichier Design Dot MD, collez-le dedans. Je vais donc zoomer ici pour que vous puissiez voir ce que c'est. Il suffit de l'écrire mot pour mot. Créez un point de conception d à partir de celui-ci en suivant les spécifications canoniques de Google Lab à l'adresse Github du fichier de conception MD et reflétez la structure de l' exemple de référence dans le D'accord ? Il suffit de lui donner ces détails supplémentaires pour qu' il sache exactement ce que nous essayons de faire ici, puis j'appuierai sur Entrée laisser Claude code faire sa magie. Pendant ce temps, nous pouvons ensuite consulter nos exemples de sites Web et extraire leur design MD. Passons donc à cette page de mon site web, christopher dow.com, DesignMD Et en bas, il renvoie à une autre page, DesignMDetractor Je vais juste l'ouvrir dans un nouvel onglet et vous pouvez voir ici que nous pouvons télécharger cette extension Chrome Donc, comment cela fonctionne, vous ouvrez n'importe quel site Web , puis vous cliquez sur l'icône de l'extracteur Design MD Dans votre barre d'outils Chrome, tous les styles calculés et les variables CSS de nom seront ensuite placés dans un fichier design point md. Pour l'installer, nous devons télécharger et décompresser le fichier, puis accéder aux extensions Chrome Colon, activer le mode développeur, puis charger le fichier décompressé, cliquer sur Load Unpacked et sélectionner le dossier d'extraction design MD décompressé Très bien, donc un peu de configuration ici. Nous allons simplement accéder à notre bureau ici et y déposer Design DMDetractor Ensuite, nous allons décompresser ce fichier Zip. Et ici, vous pouvez voir le dossier décompressé contenant l'extension Web Ensuite, nous pouvons passer aux extensions Chrome Colon Dash. Activez le mode développeur en haut à droite, moins déjà activé. Cliquez sur Charger le fichier décompressé ici sur la gauche, accédez au dossier nommé Design MD Dash Extractor, celui que nous venons de décompresser, appuyez sur Sélectionner dessus accédez au dossier nommé Design MD Dash Extractor, , puis il sera indiqué que Et comme vous pouvez le voir ici, je l'ai reçu deux fois, donc je vais juste supprimer le plus récent. Je n'en ai pas besoin de plusieurs. Les extensions Chrome sont très faciles à créer de nos jours grâce à l'IA. J'en ai donc quelques-uns que j'ai créés précédemment et qui sont déjà présents sur mon compte Chrome. Ensuite, ce que je vais faire, c'est naviguer jusqu' à cette adresse. Donc, la première, Jade Leaf Macha, et moi avons quelques extensions différentes Je vais devoir cliquer dessus pour ouvrir la liste complète des extensions. Et puis je cherche juste un extracteur Design Dot D. Cliquez dessus. Ensuite, je vais vérifier que le nom de la marque est correct, extraire et copier. Cela ouvrira Cloud dans un nouvel onglet. Nous pouvons soit le faire ici sur le Web, soit revenir à notre session de code Cloud ici et créer une nouvelle session. Mais faisons-le simplement sur le Web parce que c'est assez simple. Nous n'avons pas vraiment besoin de gérer quoi que ce soit localement ici. Je vais donc simplement coller cette invite exacte et appuyer sur Exécuter dessus. Ensuite, nous pouvons passer à la suivante, qui est Morning Made.com C'est un autre design que j' aime bien pour un site web Macha. Alors nous allons aller ici. Nous allons à nouveau concevoir l'extracteur point d. Celui-ci porte le mauvais nom. C'est écrit cérémonial. Il suffit donc de remplacer cela par Morning Made. Ensuite, nous allons cliquer sur Extraire et copier. Mettez-le dans une nouvelle session avec griffes. Appuyez sur Entrée, c'est aussi simple que cela. Ensuite, chacune de ces sessions griffées renverra un fichier design point d. D'accord ? Donc, si je reviens à ma séance ici, il semblerait qu'elle soit terminée maintenant. C'est ce qu'il est dit, j'ai créé un fichier design point md dans le dossier Sans de l'identité de marque, bla, bla, bla, bla Regardons donc l'intérieur de notre dossier. Entrez dans une séance d'identité de marque, et nous avons ce fichier design point d juste là Si nous l'ouvrons dans le code Visual Studio ou quel que soit notre éditeur de code, voici un petit aperçu de ce à quoi il ressemble. Vous pouvez voir les variables générées pour toutes les couleurs et les polices ici. Il y a également déduit d'autres détails. Disposez de quelques informations générales sur le contenu de la marque. Évidemment, si vous voulez revoir cela et modifier quelque chose ici parce que cela ne correspond pas vraiment à ce que vous aviez en tête pour la marque, allez-y. Mais si cela est basé sur des fichiers d'identité de marque verrouillés qui ont été confirmés, alors tout cela devrait être exact. Nous avons donc ce fichier de conception maintenant. Nous allons y retourner. Je vais revenir sur ce qui n' est pas vraiment cette page. Nous avons déjà acheté notre extracteur, puis ici, dans le mixeur Design MD, nous allons commencer par télécharger design point md de notre propre marque Je vais donc cliquer sur Ouvrir ici et les détails seront simplement copiés dans cette case. Ensuite, nous aurons nos sites d'inspiration. Ici, vous pouvez voir que je l'ai déjà fait. J'ai donc déjà préparé le matin ici. Je crois que mes entrées précédentes ont été mises en cache ici. Mais maintenant, vous pouvez voir dans ces sessions Claude qu'elles semblent toutes deux être terminées Vous pouvez donc voir que nous avons un directeur de design pour lequel est celui-ci ? J'ai oublié le nom. Donc celui-ci est pour Jade Leaf Marcher, donc je vais le télécharger. Et au lieu de l' appeler design MD, je vais l'appeler Jade Leaf design point md. Nous pouvons le déposer où nous voulons, puis je vais télécharger celui-ci, qui est Morning Made Design MD. Je les ai donc tous les deux maintenant, et ensuite je pourrai retourner ici. Pour ce qui est de la matinée, je vais prendre un peu de recul. En fait, c'était deux pas en arrière , ajouté au design créé le matin. Et comme vous pouvez le voir ici, j'ai une case supplémentaire pour savoir ce que vous aimez dans le design de ce site. Ainsi, lorsque l'IA les remixe, elle conserve ce que vous aimez dans chaque système de conception Donc, ce que j'ai aimé dans Morning Made, si j'y reviens, c'est que j'ai aimé ce type de papier qui ressemble à de la couleur de fond, et j'ai aussi aimé l' espacement et les lignes de démarcation Si je vais ensuite sur Jade Leaf Macha, télécharge le point de dessin D pour Jade Leaf Macha. Qu'est-ce que j'ai aimé ? J'ai aimé l'en-tête en forme de p, les rayons de bordure et l'iconographie Donc, si vous allez chez Jade Leaf Marcher. J'ai aimé ce pilulier. Comme vous pouvez le voir ici, cela flotte au-dessus du haut et du rayon de la bordure J'ai donc particulièrement apprécié les bords incurvés. Donc, ce que je fais ici en ajoutant ceci, c'est faire savoir à Claude qu' il doit examiner ces éléments spécifiquement lors de la construction de notre nouveau système de conception. Comme vous pouvez le voir ici, nous pouvons ensuite appuyer sur Générer une invite. Cela va générer une invite assez importante, 34 000 caractères. Ensuite, comme nous l' avons fait avec l'outil de planification, nous allons copier cette invite, puis retourner directement à Claude. Ici, dans la même fenêtre où j'ai créé mon design MD pour ma marque, je peux le faire directement au la même session ou créer une nouvelle session. Je vais faire une nouvelle session, puis je vais coller l'invite pour générer le fichier design point D combiné qui s'inspire de cet autre site, mais qui le combine finalement avec votre propre design MD pour créer un nouveau fichier design dotmd toutes les informations dont Claude a besoin pour relooker les wireframes Figma Appuyez sur Entrée à ce sujet. OK, maintenant qu'il voit que nous le créons dans le même dossier où se trouve le point de dessin d'origine d, il nous demande si nous voulons remplacer ce fichier ou l' enregistrer en tant que nouveau fichier Cela n'a pas vraiment d' importance. Je vais appuyer sur Enregistrer en tant que nouveau fichier au cas où nous aurions besoin de l' original pour une raison quelconque, mais nous ne devrions pas le faire. C'est donc apparemment fait. Si je regarde dans le dossier, il s'agit de la version synthétisée du design qu'ils viennent de créer Donc, ce que je vais faire, c'est revenir à la session d'origine. Vous pouvez probablement créer une nouvelle session, mais je sais au moins que cette session a déjà fait quelque chose sur Figma, elle possède donc déjà le contexte Je préfère donc le faire ici, et tout ce que je veux faire, c'est écrire l'invite simple suivante. Veuillez prendre ce système de conception et l' appliquer à nos maquettes Figma actuelles OK. Ensuite, bien sûr, je dois joindre ce fichier Je vais donc cliquer sur Télécharger depuis un ordinateur. Prenez le design synthétisé DotMD tant qu'il est dans le même format que le point de design MD, il n'est pas nécessaire de le nommer exactement point de design Et puis tout ce que je vais faire c'est appuyer dessus, puis ça devrait nos maquettes Figma en temps réel, Je suis donc tentée de passer directement à Figma et de voir tout cela se produire en direct Figma, mais Claude peut avoir quelques questions. Je voudrais donc vérifier les deux en même temps, si possible, mais il semble que Je voudrais donc vérifier les deux tout va bien pour le moment . Je vais donc laisser les choses ici pour le moment, afin que nous puissions voir cette mise à jour en temps réel Très bien, maintenant c'est terminé, et vous pouvez voir que ces dessins figma sans ont maintenant un aspect Comme vous pouvez le constater, il utilise couleurs de notre marque, le vert Marcher. Il a implémenté ce fond de couleur papier. Il a implémenté le design de la pilule pour l'en-tête que je lui ai dit avoir aimé de Jade Leaf Marcher. Les fiches produits sont beaucoup plus jolies. Les polices doivent maintenant correspondre aux polices de ma marque. Donc, si on regarde, on a Inter et Seance Body. Il utilise donc Sans body, ce qui devrait être le cas, si je dissocie le lien, c'est Inter Peut-être devons-nous mettre à jour les titres si nous voulons qu'ils soient. Eh bien, en fait, le titre ici est correct, mais le titre du produit utilise Inter Cela devrait donc être sur Brand with tennis Sands. Oui D'accord, il utilise donc les bonnes polices la plupart du temps. Nous voudrions peut-être vérifier un peu son fonctionnement ici. Et comme vous pouvez le constater, nous avons au moins intégré la couleur et le rayon de bordure dans nos designs Figma Je vais donc m'en tenir à cette vidéo sur la mise en œuvre du système de conception. Et dans la vidéo suivante, intégrons certaines de nos images, notre iconographie, et peut-être améliorons un peu plus le design, car certaines parties ont certainement besoin d'être retravaillées car certaines parties ont certainement besoin d'être retravaillées 6. Images et iconographie: Bien, dans les deux vidéos précédentes, nous avons utilisé notre planificateur de vitrines et l'IA pour créer nos wireframes, puis nous avons appliqué notre système de conception aux Ils ont l'air beaucoup plus animés maintenant, mais il reste encore du travail à faire. Et nous pouvons utiliser l'IA pour cela dans certains domaines. Par exemple, nous pourrions demander à l'IA de mettre à jour les icônes ici et de leur indiquer exactement où regarder. Mais, bien entendu, l'IA n'est pas gratuite. Nous allons devoir utiliser des jetons et attendre que Claude revienne vers nous ou tout autre outil d'IA que vous utilisez. Donc, pour cela, je vais faire principalement du travail manuel. Mais vous pouvez voir ici que la majorité du travail que nous pourrions automatiser a déjà été fait pour nous. Donc, la première chose que je vais faire est d'ajouter notre logo, car vous verrez ici qu'il est simplement écrit Sans marcher partout où le logo est censé apparaître. Et si vous vous souvenez, dans la dernière leçon, j'ai parlé des composants et des instances de Figma Voici donc une instance de l'en-tête. Allez ici, nous avons une autre instance de l' en-tête, l'en-tête du bureau. Si nous voulons changer quelque chose sur toutes les instances, nous devons accéder au composant principal, qui se trouve ici, et vous pouvez voir qu'il s'agit d'un composant principal. En le survolant, il sera indiqué composant, mais aussi cette icône ici C'est donc pour les composants. Et si on y jette un coup d'œil, ce diamant l' est par exemple. Donc, si vous souhaitez apporter une modification uniquement à une instance, nous le faisons sur l'instance, mais si nous voulons qu'elle soit répercutée tous les en-têtes ou sur toutes les instances de ce composant, nous le faisons au niveau du composant Alors faisons-le. Au lieu de Sans Macha, nous le remplacerons par le logo Je vais donc ouvrir mon dossier ici, saisir le logo, puis le faire glisser jusqu'à cette position. Maintenant, nous devons faire un peu de travail ici pour modifier la hauteur ici afin de remplir le conteneur Cela va naturellement remplir la hauteur du conteneur, ce qui est le cas en HTML de toute façon. Ensuite, nous pouvons supprimer le texte qui était l'espace réservé au logo Cela peut paraître un peu petit. J'ai besoin de le voir dans la vraie vie, mais peut-être qu'il est un peu petit. Je pourrais donc simplement en augmenter la hauteur minimale. Je vais aller ici jusqu'à la hauteur, cliquer pour ajouter une hauteur minimale, et disons simplement que je veux qu'elle soit d'au moins 30. OK ? Alors maintenant, ça va être un peu plus gros. Maintenant que je vois cela se manifester, je pense que j'ai peut-être besoin d'un peu plus de rembourrage sur la gauche Je vais donc faire un ajustement au rembourrage ici même Il est actuellement de 24, ce qui est lié à une variable spécifique, rembourrage des conteneurs En fait, je vais peut-être laisser ça pour le moment. Cela ne s'est pas produit lorsque je l'ai fait auparavant, mais la disposition des composants est un peu décalée . Certaines d'entre elles se chevauchent Permettez-moi donc de déplacer certains de ces composants dans leur propre espace ici, afin qu'ils ne se chevauchent pas avec d'autres composants Et puis voici le composant de la ligne d'accordéon. Vous pouvez les étiqueter ou simplement les laisser tels quels. Mais comme vous pouvez le voir ici, ce cadre contient nos composants principaux. Et pour chaque composant, il y aura une version pour ordinateur et une version mobile. Ce n'est évidemment pas le cas dans la version de code finalisée du thème, mais Figma, étant donné que nous avons une séparation entre le design pour ordinateur et le design mobile, il y aura une version pour mobile et une version pour ordinateur de bureau Je vais donc aller ici et faire la même chose pour remplacer le logo ici. Allez ici, remplissez le récipient pour les hauteurs, retirez le conteneur existant. Et puis, comme vous pouvez le voir ici, c'est encore un peu trop gros. Avons-nous donc des rembourrages en haut et en bas ? Alors peut-être devons-nous travailler un peu avec la largeur ici ? Et réduisez-le à 100, disons. Comme vous pouvez le voir ici, il est en train de recadrer ici. Nous n'avons pas sélectionné de rapport d'aspect fixe. Je vais donc atteindre ratio d'aspec fixe, puis réduire la largeur à 100, et là, vous pouvez voir que cela fonctionne un peu mieux, mais qu'il n'est pas disposé au centre absolu Je pourrais donc le sortir de la mise en page automatique en cliquant sur ce bouton ici pour effectuer un positionnement absolu. Cela lui fera ignorer la mise en page automatique, puis je pourrai simplement le placer au point mort, d' accord, au cas où nous le voudrions. En fait, cela semble un peu décalé vers la droite ou c'est juste ce que j'imagine Je pense qu'il a l'air mieux. OK, vous devriez maintenant être en mesure de voir que ce logo a été intégré à tous les designs qui utilisent ce composant, c'est-à-dire à peu près tous car il s'agit d'une section globale. Et donc, pour l'en-tête, ça a l'air plutôt beau. Il a d'une manière ou d'une autre découvert les icônes sans que je lui en donne aucune. Peut-être qu'il a vraiment regardé dans le dossier. Donc, si nous revenons au dossier, et en fait, ils ne s'y trouvent pas, mais si nous revenons dans mais si nous revenons ce dossier ici même, nous avons des icônes de sites Web. Alors peut-être qu'il a regardé en dehors du dossier pour les trouver. Je ne suis pas sûr. Parfois, l'IA fonctionne d'une manière que vous n'avez pas spécifiquement indiquée, mais nous devons remplacer les icônes ici pour IG, Facebook et Tik Tok. Donc, ce que je vais faire, c'est aller dans le dossier des icônes sociales où j'ai ces icônes. Le premier est IG, donc je vais vous proposer Instagram. On dirait qu'il n'est pas tombé dans la bonne position. Oh, je vois. Je suis en train de modifier l'instance ici. Je veux donc vraiment aller ici et modifier le composant lui-même. Permettez-moi donc de le refaire au niveau des composants. C'est une bonne idée. C'est un peu un piège On dirait qu'il est positionné à l'intérieur ce cercle à côté du texte de l'IG. Je vais supprimer ce texte IG, et je ne veux pas du tout le cercle. Faisons-le donc glisser hors du cadre et mettons-le simplement là. Ensuite, je ferai de même pour Facebook. Il est assez difficile de les placer exactement là où vous le souhaitez sur un petit design comme celui-ci, mais voilà. Vous pouvez toujours les déplacer une fois que nous les avons placés. Essayez d'y ajouter TikTok . Nous y voilà. Et voilà, les trois icônes sociales sans les cercles qui les entourent. Mais ils sont un peu plus petits que ce que nous avions prévu. Les cercles étaient de 28 par 28, donc je vais créer toutes ces icônes de 28 par 28. Mais d'abord, je dois corriger le rapport hauteur/largeur. Encore une fois, cliquez ici pour fixer le ratio Aspec. Et puis encore une fois sur l'icône TikTok. Nous ne voulons pas d' arrière-plan blanc, donc c'était une petite erreur de l'IA Je vais donc simplement supprimer le remplissage comme tel, et vous pourrez le voir. se peut donc que nous voulions qu'ils soient blancs, afin que nous puissions entrer ici. Il y a un remplissage ici, nous pouvons donc changer la couleur , car ce sont en fait des SVG Mais je l'aime bien en noir. En fait, je pense qu' il y a une erreur que nous avons probablement stockée quelque part sous forme de variable. Je vais donc déplacer le remplissage ici, ouvrir ici et essayer de trouver la couleur appropriée dans nos bibliothèques. Nous avons donc ici tout un tas de variables de couleur qui ont été implémentées à l'étape précédente. Qu'en est-il du secondaire ? Donc, oui, c'est à peu près la même couleur mais légèrement différent. Faisons-les donc au secondaire. Il est toujours bon d'utiliser des variables. Voyons voir. Si je détache la variable, oui, vous verrez qu' elle est presque noire C'est très proche du noir. Il est donc préférable d'utiliser des variables cohérentes afin que nos couleurs soient cohérentes. Et comme vous le verrez dans le pied de page, il y a également un logo Je vais donc le remplacer par le logo de notre site Web. Encore une fois, nous devons en fixer la hauteur, donc je pourrais simplement en réduire la largeur à 100, peut-être un peu plus de 100, donc disons 150. Cool. Et puis il en va de même pour la version mobile du pied de page Encore une fois, celui-ci peut probablement être à 100 sur mobile. OK. Ensuite, nous devons déménager, nous pouvons probablement simplement copier et coller ce que nous avons déjà fait ici pour gagner du temps, puis supprimer ce cadre. 28 semble un peu trop grand, alors changeons-les à 20 sur mobile. Et comme nous apportons toutes ces modifications au composant, cela devrait se répercuter sur toutes nos conceptions mobiles, d' accord ? Les fiches produits constituent un autre élément. Donc, dans cette zone, nous allons avoir l'image de notre produit, afin que nous puissions ignorer la couleur de celui-ci. Ça va avoir l'air différent. Mais comme vous pouvez le voir, nous avons ces bordures incurvées avec une ombre. Il se peut que vous le vouliez ou non. Je pense que ça a l'air bien, alors je vais laisser ça pour le moment. Ce que je veux faire, et je l'ai mentionné dans une vidéo précédente, c' est placer le bouton d'ajout rapide en haut de l'image. Donc, ce que je vais faire, c'est appuyer sur ce bouton et nous pouvons l'étiqueter si nous le voulons. Nous pouvons dire bouton d'ajout rapide, changer le nom du cadre si nous le voulons, puis je vais cliquer dessus pour le faire glisser. En fait, je dois le faire à l'intérieur de la barre latérale. Et je vais cliquer pour le faire glisser vers le haut. Le problème, c'est que nous avons maintenant ce petit cadre pour l'icône de l'image. Nous n'allons pas vraiment vivre avec ça. C'était juste une icône pour indiquer un espace réservé. Je vais donc simplement le supprimer complètement. Ensuite, je vais prendre ce bouton. En fait, la couleur d'arrière-plan du bouton et la couleur de l'espace image sont les mêmes, nous n'allons donc pas voir le contour ici. Mais ce que je vais faire, c'est juste ajouter un peu de rembourrage ici Ensuite, pour le bouton, je vais le positionner en bas. Je vais donc cliquer ici en alignement. En fait, je dois le faire sur le cadre parent, régler l'alignement vers le bas, puis vous verrez les limites du bouton ici. Peut-être que j'ajoute juste une bordure pour rendre cela un peu plus évident. Il semble donc qu'il y ait un trait, mais peut-être que le trait est de la même couleur que l'arrière-plan. Permettez-moi donc de changer le trait pour un autre trait, disons, sur le primaire. OK, maintenant vous pouvez le voir une fois que je l'aurai implémenté, je ferai en sorte une fois que je l'aurai implémenté, je ferai que ce bouton n'apparaisse que sur Ha. Mais pour l'instant, cela indique à peu près ce que je veux. N'oubliez pas que cette zone sera remplacée par des images, et je ne sais pas si je l'ai demandée lors de la phase de planification ou non, mais le prix de cette carte ne semble pas non plus être indiqué. Je vais donc simplement dupliquer titre du produit et indiquer le prix du produit ici. Et c'est tout simplement trop gros. En fait, je pense que je vais les regrouper. Sélection du cadre, transformez-le en cadre de mise en page automatique, définissez la direction comme telle, alignez-les de manière à ce qu' ils soient espacés de manière égale, puis définissez la largeur pour remplir le conteneur Si vous n'avez jamais utilisé Figma auparavant et que vous ne savez pas exactement ce que je viens de faire, n'hésitez suivre le cours de conception Web de Figma Je ne veux pas me répéter dans ce cours alors que vous pouvez y retourner et regarder celui-ci. Dans celui-ci, je couvre davantage les aspects pratiques de l'utilisation de Figma, Je vais donc le mettre à 12 au lieu de ce qu'il est actuellement en tant que titre du produit. Donc en fait, je pense que je vais passer ce prix à 16 sur ordinateur de bureau et le prix à 14. Et puis, évidemment, ici, je dois faire quelque chose de similaire. C'est comme si c'était tout petit par ici. Laissez-moi voir comment cela apparaît dans les dessins réels, car nous avons indiqué dans le plan que nous voulions qu' il y ait deux colonnes. Ce n'est pas une tonne d'espace, nous devrons donc peut-être réduire cet écart sur les appareils mobiles. Pour l'instant, je vais juste le laisser tel quel. Et comme il n'y a pas de date de récolte sur mobile, je vais laisser les boutons d' ajout rapide en dessous. Ou peut-être simplement s' en débarrasser complètement. Je ne le ferai donc pas sur une instance. Je vais le faire sur le composant principal ici et le supprimer simplement de l'expérience mobile. OK ? D'accord, ce sont donc essentiellement les composants principaux. Je les ai un peu mises à jour. J'ai mis le logo et les icônes, mais je n'ai pas encore créé d'images. Donc, ici, je vais mettre à jour l'image du héros. Je vais donc cliquer dessus, puis je vais entrer dans le remplissage. Supprimez ce remplissage de couleur et remplacez-le par un remplissage d'image. Je vais donc le télécharger depuis mon ordinateur dans les images du site Web. J'ai ma section de héros juste là, donc je vais l'apporter, puis je pourrai la positionner comme je le souhaite, comme telle. Maintenant, c'est un peu clair, donc si je mets du texte par-dessus, ce sera peut-être un peu difficile à voir. Je vais ajouter une autre garniture par dessus, et Figma est douée pour ça Il sait ce que j'essaie de faire. Cela ajoute une couche noire à 20 %, puis je vais passer d' une couleur foncée pour le remplissage du texte à une couleur claire Et comme toutes nos variables sont configurées, encore une fois, je vous encourage à ne pas définir la couleur avec une valeur hexadécimale ici, mais utiliser les variables existantes Je pense donc à la primaire, puis ici, à la primaire également. Et tu peux voir que ça a l' air très joli, d'accord ? L'autre point, c'est que je voulais que le pilulier recouvre le héros Donc, ce que je vais faire, c'est créer cet en-tête sur le bureau, en particulier sur le cadre de bureau de la page d'accueil parce que je veux que cela s'applique uniquement à cette page Je vais supprimer la mise en page automatique et laisser cette position absolument. OK ? Alors maintenant, ça va passer en revue, puis je dois juste ajuster un peu mon image. Je vais donc le traîner comme tel. Maintenant, vous pouvez voir que j'ai ce joli en-tête en forme de pilule que j'ai vu sur Jade Leaf et qui m'a plu. OK ? Mettons la même image de héros sur notre version mobile. Il suffit donc de cliquer ici, même section consacrée aux héros. Ce panneau le bloque en quelque sorte, mais vous pouvez le voir ici, j'en suis content et nous voulons les mêmes couleurs ici. C'était donc juste au primaire , puis pareil pour ici au primaire. Et j'ai oublié de mettre la superposition, alors je vais juste appuyer sur ce bouton pour ajouter un remplissage supplémentaire, la superposition à 20 %, et je vais laisser les choses comme ça, Nous allons insérer la copie un peu plus tard, mais allons-y et complétons les images des produits sur ces fiches produits De toute évidence, ces informations seront extraites du back-end de Shopify lors de sa mise en ligne Mais à des fins de visualisation lors de la conception, nous allons à nouveau remplacer le remplissage ici sur l'instance, non sur le composant, car chacun aura un remplissage différent pour représenter un produit différent. Nous allons passer aux images du site Web. Nous allons regarder les photos intérieures, et j'ai des images de produits ici. Nous allons regarder les images principales du produit. Je vais d'abord présenter la poudre de matcha, comme vous pouvez le voir ici Nous pouvons maintenant voir que notre bouton n'est pas rempli une fois que nous l'avons placé au-dessus d'une image plutôt que sur cet arrière-plan. Je vais donc revenir au composant ici, assurer qu'il est un peu rempli. Je pense donc que je vais utiliser cette couleur ici. En fait, ça ne va pas du tout avec le green. Alors peut-être que je veux juste faire surface. Jetons un coup d'œil avec une image. OK. Je pense que j'en suis plutôt content. Modifiez le titre du produit. Encore une fois, il s'agira d'informations dynamiques, vous n'avez donc pas vraiment besoin de le faire. Mais selon que vous en avez besoin pour la visualisation ou que vous souhaitez le présenter à quelqu'un d'autre. Je vais mettre à jour le titre. Le nom du produit est le suivant : si nous allons ici, il suffit de l'ouvrir dans le nouvel onglet afin que nous puissions regarder les deux en même temps. Si nous allons ici, nous avons notre liste de produits ici. Donc, la poudre de matcha de qualité supérieure, 100 grammes. Je vais juste me débarrasser de la partie des 100 grammes car nous n' avons pas de place pour cela. Et ici, nous pouvons effectivement voir que nous n'avons peut-être pas de place pour tous les détails. se peut donc que nous devions revenir à la carte, au composant, et le réduire à nouveau, sinon 16, c'est déjà assez petit. Peut-être que nous augmentons simplement la largeur du conteneur ici pour lui donner plus d'espace. Donc, actuellement, il est de 1 200. Il y a pas mal de rembourrage. Vous pouvez voir ici que cela ne s' étend pas sur toute la largeur du conteneur Je pourrais donc essayer de corriger ce problème ici dans la grille des produits. Je vais donc les aligner au centre, les espacer uniformément. Ça ne va toujours pas très bien. Donc, ce que je pense que je vais faire, c'est que oui, nous n'avons pas de place pour fixer le juste prix, donc je vais simplement changer cela, abaisser ce prix en dessous du titre du produit. Et maintenant, nous n'avons plus besoin du cadre, nous pouvons donc simplement le retirer. Encore une fois, ces éléments apparaissent lors de la conception, mais avec un outil comme Figma, vous pouvez tout faire manuellement, et avec le Figma MCP, vous pouvez également avoir l'IA pour vous aider dans les tâches les plus élémentaires Donc, le prix de ce produit, si nous examinons la liste des produits, est de 45$ Vous pouvez donc voir, par exemple, comment la carte apparaîtra sur le site Web. Continuons avec les autres fiches produits. Je veux le faire rapidement parce que je ne veux pas trop m'enliser là-dessus C'est le même processus, encore et encore. Alors peut-être que nous ferons le bol ensuite. Et comme ces titres vont apparaître de manière dynamique, je ne vais pas les modifier ici. Mais encore une fois, vous voudrez peut-être le faire, les mettre à jour avec le bon nom. En fait, je veux m' occuper des accessoires une dernière fois, donc je vais faire du fouet, puis je vais faire le kit d'accessoires. OK. Je vais peut-être mettre à jour les titres ici. Je dirais simplement un bol en céramique, un fouet cérémoniel et un ensemble de paquets OK. Cela semble donc très bon sur ordinateur de bureau. Je vais remplacer la collection en vedette par notre gamme de produits, puis je vais passer à cette page et faire de même sur mobile. Je vais juste faire les images pour mobile. Mais pour votre design, vous souhaiterez peut-être également mettre à jour les titres et les prix des produits. Je viens de me rendre compte que nous avons un prix supplémentaire à l'ensemble du composant, donc je vais le faire également. Le suivant était un bol. Ensuite, je vois que c' est toujours le cas sur la carte mobile , je veux juste le supprimer. Et puis ajoutez le prix. Je vais donc simplement le prendre, le coller ici, puis évidemment réduire parce que nous sommes sur mobile. Très bien, nous pouvons donc revenir ici, mettre à jour ces images via la propriété fill, et voilà votre bundle. OK ? Cela couvre donc essentiellement les deux premières sections. Si nous voulons également mettre à jour la copie de la section des héros, j'ai le document de copie Web ici à titre de référence. C'était donc un Macha haut de gamme pour le style de vie moderne en matière de bien-être Je vais donc simplement le remplacer parce que maintenant nous pouvons voir que c'est trop gros ou que nous devons nous diviser en deux lignes. Il est donc bon d'y mettre la copie réelle juste pour voir. Donc, ce que je vais faire, c'est réduire cela à l'une de ces variables. C'est mieux Ensuite, je vais passer à la question de savoir quel était l'autre conçu pour la qualité et la pureté. OK, donc nous allons entrer ici, mettre ça là-dedans. Et en fait, je vais juste laisser la taille de police comme ça. Même chose ici, inscrivez cette rubrique. Ce sera bien trop gros pour un mobile, je pense. Nous voulons donc le réduire, puis nous pouvons utiliser des sauts de ligne ici, mais il est encore un peu trop grand. Je vais donc simplement décomposer les variables ici et en faire 24. Ensuite, ici, l'autre copie Web qui se trouve en dessous. Je vais dire qu'il va certainement falloir un saut de ligne pour celui-ci aussi. Je vais donc probablement faire deux sauts de ligne comme ça. Peut-être que nous réduisons également la taille de la police. Comme vous pouvez le constater, c'est en quelque sorte le flux de travail. Nous insérons les images, les icônes, le contenu réel, et nous apportons modifications que nous repérons en cours de route et que nous devons corriger Je ne vais pas utiliser tous les modèles, car pour beaucoup d'entre eux, les images seront extraites des données du thème et les stockeront. Une grande partie de ces informations est donc perdue lorsque nous construisons. Et c'est basé sur ce que je viens de vous montrer. Par exemple, si nous voulions accéder à la page du produit, c'est à nouveau la même chose. Nous prenons simplement la zone où l'image est censée aller. Nous nous débarrassons de cette petite icône agaçante qui s'y trouve. Parce que ça va poser problème. Nous remplaçons ce fond d'arrière-plan une image réelle du produit ou par n'importe quel type d'image selon l'endroit où vous vous trouvez, et vous continuez à mettre à jour les images et à remplacer la copie, voir ce qui se casse, à voir ce qui change et à la mettre à jour au fur et à mesure. La seule chose que je veux aborder en vidéo, c'est notre Y CNS Macha n'est pas très beau , tout comme nos témoignages Je veux donc refactoriser cela et aussi ce qui est inclus consiste à utiliser essentiellement fiches produits, donc je veux changer cela Mais le reste semble plutôt bon. Il suffit de renseigner le contenu manquant. Mais sinon, ça a l' air plutôt bien. Jetons un coup d'œil à nos sections internationales ici. Oui, ça a l'air plutôt bien. Il y a même des icônes ici dans la navigation mobile. Plutôt que de parcourir, d'ajouter des images et de les copier à tous les modèles, je pourrais simplement, dans la prochaine vidéo, vous présenter la section des témoignages sur les points de vente et la section incluse , car le résultat initial en matière d' IA va demander un peu de travail Et si vous souhaitez parcourir et remplir le reste des wireframes avec vos images, vous pouvez également le faire Je pourrais également le faire moi-même un peu plus tard pour ce projet de test. Je vais le diviser dans une nouvelle vidéo, et nous pourrons parler de ces sections supplémentaires qui nécessitent un peu de travail dans la prochaine vidéo. 7. Manuel de conception Figma: Comme nous l'avons vu dans la dernière vidéo, IA a défini certaines sections Je trouve que la section des héros et la section de la collection en vedette sont plutôt belles. Mais pour ce qui est de la section Y CNS Marcher, je n'en vois pas encore vraiment la vision. Et ici, la section des témoignages a également besoin d'un peu de travail Il n'a donc pas bien compris ce qui est inclus, car mon intention n'est pas que le client ajoute des produits individuels à la carte lorsqu'il figure sur la page produit du lot. Je souhaite simplement présenter les différents produits inclus dans le bundle lorsqu'ils seront sur cette page. Dans cette vidéo, nous allons donc corriger manuellement ces sections. Mais tout d'abord, pour ce qui est des arguments de vente Claude ne l'a pas créé en tant que composant, et je veux que ces modifications s'appliquent à tous les modèles qui l'utilisent. Je peux, bien sûr, simplement supprimer la section puis la transférer, mais je préfère que ce soit une instance de composant Je pense que cela aide également à générer du code en expliquant qu'il s'agit du même code pour chacune de ces sections, mais avec un contenu potentiellement différent. Donc, au lieu de régler le problème moi-même, je vais en fait revenir à Claude, et c'est quelque chose que vous pouvez faire quel que soit le stade du projet. Claude peut réellement se plonger dans Figma grâce au MCP à n'importe quel moment Et si c'est quelque chose que vous pouvez facilement expliquer et que Claude peut facilement interpréter, c'est une bonne réponse de Claude. Plutôt que d'avoir à effectuer vous-même le travail manuel. Je vais donc copier les noms de ces sections, puis je vais revenir à ma session de code Claude dans le code de Visual Studio. Je dirais que vous avez mis en place la section des points de vente. En fait, la section des témoignages n'apparaît que sur la page d'accueil Je vais donc simplement dire que vous avez implémenté la section des points de vente sous forme de sections dupliquées régulières. J'aimerais que ce soit un composant de Figma. D'accord, donc je ne sais pas si je m' explique bien, mais il semble avoir compris ce que je voulais dire, cela va transformer la section des arguments de vente en un composant réutilisable approprié. Il va donc inspecter ce qui se passe actuellement dans le fichier Figma et le modifier pour nous OK, ça veut dire qu' il a remarqué quelque chose inattendu et qu'il pense que quelqu'un d'autre a modifié le fichier depuis sa dernière vérification. Donc je vais juste m'assurer que Claude le comprend. Oui, j'ai modifié le fichier depuis que vous avez généré les wireframes pour la première fois Je vous en prie, ne renversez pas mon travail. OK. J'espère qu'il le comprendra et qu' ne reviendra pas en arrière sur le travail que nous avons déjà accompli Je ne pense pas que ce sera le cas, tant que nous le disons clairement. Très bien, il semble maintenant que c'est fait. Permettez-moi de passer à Figma, et oui, il semble que les arguments de vente soient désormais un élément courant Je ne sais pas où se trouve le composant, car il s'agit toujours d'une instance. Nous devons donc le trouver. Encore une fois, cela se chevauche avec l'autre contenu, mais je pourrais simplement m'en sortir. Et pour être honnête avec vous, cela a pris environ 6 minutes avec Claude. Dans cette situation, il aurait peut-être été plus rapide pour moi de le faire moi-même, ce qui montre que certaines choses sont simplement mieux faites avec l'IA et d'autres sont simplement mieux faites manuellement. C'est donc un bon exemple qui a pris 6 minutes et qui a dépensé beaucoup de jetons. Parfois, il vaut mieux le faire manuellement. Maintenant que c'est fait, nous pouvons modifier la section relative aux arguments de vente en un seul endroit, et ces informations seront répercutées sur tous les modèles qui l'utilisent. OK, donc ce que je vais faire, c'est évidemment remplacer ces petits cercles par l'icône. Et si nous utilisons le site Web que nous avons créé lors du précédent cours Skillshare, par exemple, ces icônes sont un peu plus grandes que 40 pixels Donc, si je regarde ici, 64 x 64, c'est probablement à peu près la bonne taille que nous voulons. Donc, au lieu de simplement changer cela en 64 par 64, nous allons le remplacer de toute façon. Je vais donc apporter les icônes. Le premier était la défense radicale. Alors laisse-moi trouver où c'est. Donc, à l'intérieur des images du site Web, à l'intérieur des icônes , celle-ci est la première, donc je vais la faire glisser ici. Ça va sortir énorme. Je veux corriger le rapport hauteur/largeur, puis le régler sur 64, puis supprimer ce point. Je vais rapidement faire de même pour les autres. Procédez rapidement, car le processus est exactement le même pour chaque texte de présentation. Je vais également le faire pour la version mobile. OK, cool. Ensuite, je vais également remplir les titres et les descriptions en vedette. Je vais donc simplement copier cela sur le site Web, Radical Defense, Sustained Ritual, Metabolic Spark, Vivid Detox, puis les descriptions Cela se trouve également dans le document de copie Web. Donc, si vous ne le prenez pas sur le site Web comme moi, vous pouvez le prendre à partir du document de copie Web qui se trouve ici. S, un rituel soutenu. Je vais passer au document de copie Web car vous n'avez peut-être pas accès au site Web du cours précédent, mais le contenu est exactement le même ici. Et peut-être est-il intéressant de noter que nous aurions probablement pu éviter cette étape si nous avions simplement communiqué cette information à Claude dès le début. Mais voilà. Cela nous a pris quelques minutes de plus, mais maintenant nous avons chargé ces informations, et je veux les voir maintenant sur l'instance elle-même. Comme vous pouvez le constater, certaines choses doivent changer. Je veux que tous ces textes soient centrés Je vais donc passer à chacun de ces textes de présentation, centrer le contenu Et je pense que je le veux aussi ici sur mobile. Laissez-moi aller le voir sur place. Je pense que je veux peut-être aussi une couleur de fond différente. Je vais donc changer la couleur de fond ici pour, disons, blanc, mais je ne vais pas choisir le blanc normal. Je vais choisir la variable d' arrière-plan, en fait, la variable d'arrière-plan. Il avait l'air blanc ici, mais ce n'est pas vraiment blanc. Essayons Surface. Je vais faire Surface Bright. Et puis ici aussi remplir la surface brillante. Oui, je crois que je préfère ça, et le texte n'est pas aligné au centre. Il est aligné vers la gauche. Il suffit donc d'aligner le texte ici pour chaque texte de présentation et de l' aligner au milieu Maintenant, jetons un coup d'œil à nouveau. Cela semble plutôt correct, mais le texte est un peu trop gros, donc je veux avoir un conteneur Max WIP sur le contenu du texte ici Donc, ici, je vais définir un WIP maximum en cliquant sur le chevron à côté du WIP, en ajoutant un maximum de WIP, voyons à quoi ressemble 200 OK, peut-être 250, peut-être 260. Ouais. Je vais donc tous les régler sur Max WIP 260 sur mobile. Et sur ordinateur, peut-être 260 aussi. Expérimentons cela. 250 n'a pas l'air d'être emballé. J'ai juste besoin de modifier les règles de redimensionnement ici. Oui, je n'aime pas la façon dont ça s'enroule comme ça. Je pense donc que je vais me contenter du Max avec 260. Donc celui-ci aussi, en les réglant tous à 260. Certaines d'entre elles ne changeront pas car elles étaient déjà suffisamment petites, mais ce sont des règles réactives qui se traduiront bien, le Web et lorsque nous les redimensionnerons sur différentes largeurs d'écran OK, maintenant vous pouvez voir que nous avons Y CNS Macha, et toutes nos modifications s'appliquent à tous les modèles qui l'utilisent OK ? Permettez-moi de vérifier également la police. C'est donc sous le nom d'Inter. Je veux utiliser la police du titre ici, donc je vais également la changer. Je peux également utiliser une variable ici. Je peux cliquer ici pour passer à la variable, ou je devrais pouvoir le faire. Je jure que j'ai déjà vu une variable pour les titres. Titre de séance : titre MD. OK, il suffit donc d' aller ici, et je pense qu'il faut cliquer ici pour appliquer des styles. C'est ce que je recherche. Je vais donc faire Headline MD, appliquer ce style à tous les niveaux Il y a aussi le Title MD que je peux utiliser. Mais voyons à quoi ressemble le titre MD. C'est peut-être un peu trop gros. Oui, je pense que ça va probablement être un peu trop gros. Alors peut-être que nous le savons. Au lieu de ce style, nous changeons le style en un autre. Donc, titre MD, et puis peut-être, comme sur le site Web, les majuscules ne vont pas bien avec cette police. Peut-être que je le mets sur MD, mais il suffit de le dissocier, ramener la taille de la police à 24 ou nous pouvons passer au style lui-même et le modifier au niveau du style Donc, si je vais ici et que je clique pour modifier le style, je peux le réduire à quelques pixels, peut-être à 24. Et cela va changer les choses partout. Alors, souvenez-vous, ici, nous l'avons ramené à 24. Nous pouvons probablement ramener cela au style d'avant, et je préfère le faire parce que cela permet simplement de maintenir la cohérence sur le site Web en utilisant ces variables. Je dois donc également appliquer les styles ici, titre MD. Et une dernière modification que je veux apporter ici est que je veux un peu plus d'espacement entre l'en-tête et le conteneur Je vais donc simplement augmenter l'écart à, disons, 48 et peut-être faire cette rubrique plutôt que MD large, c'est parti. Ajoutez peut-être un point d' interrogation ici. Faites-le sur les deux. Je veux que celui-ci soit centré, donc je vais juste définir l'alignement ici, et je suis plutôt d'accord avec ça. Je vais donc en rester là et travailler ensuite sur la section des témoignages Celui-ci n'apparaît donc qu'une seule fois, ce ne sera donc pas un composant, mais nous pouvons bien sûr le traiter comme un composant. Je vais donc remplacer tous ces espaces réservés aux images des photos des clients eux-mêmes. Les mêmes photos que nous avons utilisées dans le cours précédent, encore une fois, ça va les rendre énormes. Nous devons donc les réduire à ce que nous pensons être de meilleures dimensions. Je pense que 200, c'est peut-être suffisant. Ensuite, nous voulons ajouter un rayon d'angle. Nous avons notre rayon d'angle, les variables ici. Donc, comme nous utilisons des rayons partout, je pense que nous devrions les utiliser ici Supprime ça. Mettons un vrai devis. Je vais donc le récupérer sur la copie Web. Ça peut être Sarah. Je vais donc également copier son nom d' auteur. Et oui, ça n'a pas l' air génial. Je pense que ce que nous allons vouloir faire, c'est faire en sorte que cela ressemble davantage à une carte de produit. Je vais donc ajouter un peu de remplissage ici. Je vais donc aller dans mes bibliothèques. Allons y jeter un œil. Faisons le contexte. Cela va juste rendre l'arrière-plan de la page sur arrière-plan, et la surface de la surface sera lumineuse, comme nous l'avons fait ici, sans sentir cette Eva. Je ressens quelque chose d' un peu plus blanc. Peut-être que si je mets un rayon d' angle ici, encore une fois, en utilisant l'une des variables par défaut. Ensuite, centrons le tout dans ce cadre, ajoutons un peu de rembourrage à l'intérieur de ce cadre. Je pense que c'est une chose qui manque définitivement. Voyons si nous avons des variables pour l'espacement. Oui, donc du rembourrage du conteneur. Utilisons-le. OK, ça a l'air un peu plus joli. Et puis il y a une lacune ici aussi. Il n'y a actuellement que dix pixels d'écart. Mettons-le donc à 20. Maintenant, je dois le voir empilé l'un à côté de l'autre pour voir s'il est beau Je vais donc dupliquer. OK. C'est bon. Je crois que j'aime bien ça. Il suffit donc de retirer ce porte-espace et d'utiliser ce doublon. Et encore une fois, si cela devenait technique, nous voudrions peut-être en faire également un composant. Donc, si nous apportons des modifications, elles s'appliqueront à tous les composants présents ici En fait, laissez-moi le faire tout de suite. Je vais créer des composants, les intégrer dans notre section des composants ici, les supprimer, puis apporter une instance de ce composant. Et maintenant, vous devriez savoir que cela nous permet modifier la carte une fois dans nos composants, puis ces modifications seront répercutées sur toutes les cartes de témoignage, d'accord ? Je vais donc juste le nommer au lieu de Témoignage One Témoignage Card Desktop, Ensuite, je vais juste le dupliquer deux fois. OK. J'aime bien le look, mis à part ce qui se passe ici avec cette coupure Je sais pourquoi cela se chevauche avec le dernier et pas avec les autres. La carte elle-même se chevauche. Donc, ce que nous voulons faire, c'est intégrer le contenu du WIP, puis ajouter un minimum de fouet pour qu' il ne soit pas trop écrasé comme ça Alors peut-être 300. Maintenant, nous pouvons les aligner au centre. Nous pourrions les aligner avec un écart égal si nous le voulions. Je vais juste les aligner comme ça. Et je ne pense pas que l' image doive être aussi grande, alors je pourrais la réduire à 150 et peut-être mettre le témoignage en haut Je pense que tous ces témoignages contiennent probablement trop de texte, mais ne réinventons pas notre copie pour l'instant Nous allons donc remplacer celui-ci. De toute évidence, à ce stade, nous modifions les instances car nous ne voulons pas que cette modification s'applique à toutes les instances de nos composants. Ensuite, il suffit de le faire glisser dans cette instance. n'aime pas que je fasse glisser une nouvelle image, donc je vais juste mettre à jour le remplissage ici, puis remplacer le contenu de la dernière instance ici. Ava, alors évidemment, vous devez remplacer l'image ici du troisième profil OK, donc je pense que c'est une bonne chose pour le moment. Je pense que si j'y consacrais plus de temps, je pourrais certainement régler ce problème. Je pense que ces banlieues sont probablement ces témoignages trop longs ou ont besoin d'être présentés peut-être un peu différemment, mais je suis assez contente pour le moment, et je vais faire la même chose ici pour Je vais donc créer une version mobile de cette carte de témoignage J'ai donc simplement dupliqué le composant, et je l'appelle mobile, c'est vrai, faites-le glisser, pour que nous sachions qu'il est différent, puis je vais choisir le faire glisser Pour l'intégrer, supprimez les autres, les espaces réservés, puis dupliquez-les deux fois Comme vous pouvez le voir ici, il n'est pas centré au milieu, je vais donc l'aligner au centre. Et je me rends compte que nous n'avons pas de titre, donc je dois mettre un titre au-dessus de cette rangée de témoignages En fait, je vais juste copier le titre ici, le placer au-dessus d'ici. Ensuite, nous allons avoir besoin d'une lacune dans notre section de témoignages Je pense que le gap que j'ai utilisé tout à l'heure, c'était quoi ? Faisons en sorte que l'écart soit constant. C'était 48, je crois que j'en ai utilisé 48 ici, puis c'est parfait. OK. Ensuite, même chose ici, nous allons les copier sur le design de notre mobile, les mettre en haut, et je suis plutôt d' accord avec ces cartes. Je vais donc simplement remplacer le contenu une fois de plus. OK. Donc, comme vous pouvez le voir ici, cela semble assez bien rempli. Il contient du contenu réel, vous pouvez donc voir à quoi il ressemblera sur le site Web final. Ce sont donc les deux sections de la page d'accueil que je voulais aborder. La section sur les arguments de vente est également intégrée au modèle de produit, sorte qu'elle couvre également le modèle de produit. Mais enfin, je voulais couvrir et corriger ce qui est inclus dans le bundle. Je ne veux pas que cela ressemble à une fiche produit Je peux donc détacher une instance ici, afin qu'il ne s'agisse pas d'une instance de la fiche produit Ensuite, je vais supprimer les autres ici et je vais simplement dupliquer ce que je crée ici. Je ne veux pas que ce soit une fiche produit. Cela peut être un peu similaire. Je vais supprimer l'annonce rapide. Je vais mettre dans le titre du produit, poudre de marcha de qualité supérieure, en le remplaçant, bien sûr, par l'image Je vais l'enlever. Ajoutez un remplissage d'image. Nous voulons revenir aux photos de nos produits. Nos principaux, ajoutez la poudre macho. Et au lieu de critiques et tout ça, je veux mettre un descripteur de ce qu'est ce produit Je pense donc que je l' ai peut-être dans la copie Web ici. En fait, faisons quelques points. Je vais donc créer un nouveau, dupliquons simplement ceci, alors évidemment, nous ne voulons pas le mettre en gras ici. On dirait que j'ai accidentellement déclenché la boîte de dialogue AI ici. Nous y voilà. Je veux donc regrouper cela dans sa propre sélection de cadres. Je souhaite ajouter une mise en page automatique. Je veux l'aligner au centre, ce titre soit plus grand. Je vais donc appliquer ce style. Cela nécessite évidemment un certain écart. Je vais ajouter un écart de 16 pixels. Les hauteurs ne seront pas fixées. Ce sera un gros contenu, et je vais renommer ce cadre avec la carte incluse Faites-en un titre plus grand, gros titre, centrez tout dans le conteneur Et beaucoup de préférences personnelles ici, évidemment, en matière de design, comme vous aimez concevoir. Et je vais évidemment passer par là rapidement parce que, vous savez, vous voudrez peut-être le concevoir d'une manière complètement différente. Mais pour terminer cette leçon et faire en sorte que cela corresponde un peu plus à ce que j'avais en tête pour le site Web lui-même, je vais les aligner automatiquement, plier avec un espace entre les deux, puis les renommer ici en les autres produits Si nous regardons dans la liste des produits, nous avions l'élégant fouet de marche Faisons en sorte que le titre de chaque produit corresponde à deux lignes, puis textons un centre de ligne. Il faut évidemment remplacer l'image, puis le dernier sera le bol, puis nous devrons saisir le nom de ce bol, le bol Marcher en céramique de qualité supérieure. Et pour le moment, je n' ai pas encore de contenu. Je vais donc le laisser comme espace réservé pour le moment, Je vais donc le laisser comme espace réservé puis le nettoyer entre les vidéos avant que nous ne soyons prêts à générer le code Il y a quelque chose qui rend la section vraiment importante, alors laissez-moi essayer de comprendre de quoi il s'agit. Je crois que nous avons une hauteur fixe pour le conteneur ici. Si je passe ça au contenu des câlins, non. Permettez-moi de l' aborder manuellement, et je pense que c'est suffisant pour notre page Bundles Encore une fois, je pourrais aborder beaucoup plus de corrections et de mises à jour pour tous ces différents modèles, mais cela créerait un parcours vraiment long, et cela dépendra en grande partie de vos préférences personnelles en tant que concepteur. Donc, dans cette vidéo, je voulais juste vous montrer comment je pourrais nettoyer certaines sections. Évidemment, je dois en faire la version mobile. Je vais le faire entre deux vidéos. Mais pour vous montrer comment créer vos wireframes, vous pouvez les retoucher avec votre propre système de conception, puis nous pourrons passer à Et effectuez manuellement notre processus de conception Figma normal maintenant que nous avons les bases nécessaires Je pense que vous conviendrez que configurer les wireframes à l'avance et demander à Claude de nous aider à mettre en œuvre notre système de conception nous fait gagner beaucoup de temps, nous permet de nous concentrer sur les choses importantes, les qui nous permet de nous concentrer sur les choses importantes, les petites mises à jour mineures dont nous avons parlé dans cette vidéo et dans la vidéo précédente Après cette vidéo, je vais continuer à nettoyer ces designs, à les faire apparaître exactement comme je le souhaite sur le site Web en ligne, puis nous utiliserons ces designs figma haute fidélité, ainsi que la fiche technique que nous avons générée précédemment Ici pour continuer et générer le code de notre vitrine Shopify 8. Génération de code de thème: Bien, comme je l'ai mentionné entre les vidéos, j'allais nettoyer le design de Figma si nous passons à la page du produit, à la page du produit du bundle, la page de collection, vous verrez que tout est construit maintenant Contactez-nous. Je n'ai pas eu besoin d' y apporter de modifications. J'ai rempli des images et des informations réelles ici pour la page du panier. page du panier n'est pas trop importante car peu de personnes y accèderont, étant donné que nous avons un tiroir de panier. La page de recherche sur ordinateur et mobile, puis nous avons nos pages de blog ici, que je n'ai pas remplies. Je ne vais pas implémenter de blog dans cette classe, donc je vais simplement supprimer complètement tous ces modèles. N'oubliez pas que j'ai mentionné dans la vidéo de planification que vous pouvez simplement les supprimer de votre forfait si votre site Web Shopify ne possède aucun blog Je voulais les inclure juste pour vous montrer comment ils s'en sortent sous forme de wireframe. Mais je vais simplement supprimer complètement ces wireframes car nous n'avons pas vraiment besoin d'un modèle de blog Et vous pouvez voir nos tiroirs ici. Donc, le tiroir du chariot sur le bureau, qui a essentiellement le même design que sur le mobile, et notre tiroir de navigation ici. Nous avons maintenant essentiellement créé notre fichier Figma. Il contient tous les modèles dont nous avons besoin pour créer. Comme vous pouvez le voir listé ici. Tout est joliment structuré en sections avec mise en page automatique et en composants avec instances, comme nous l'avons fait dans le cours de conception Web de Figma Et tout comme dans le cours de conception Web de Figma, nous allons maintenant générer le code de ce thème Shuberfi Contrairement au cours de conception Web de Figma qui était indépendant d'une plateforme, il n'était pas basé sur Shopify Il était simplement basé sur le HTML et le CSS. Dans ce cas, nous allons créer un thème Shopify, qui est un ensemble très spécifique de fichiers de code qui ne s'exécutent que sur les boutiques Shopify C'est pourquoi nous avons effectué la planification dès le début avec le planificateur. Tout cela est conçu spécifiquement pour Shopify, puis ces wireframes ont été configurés spécifiquement sur la base de ce plan mappé à certains modèles d'un thème, le thème étant le système représentant la vitrine qui fonctionne représentant la vitrine Donc, en plus de ces maquettes haute fidélité finies et de la fiche technique, qui si nous revenons à notre planificateur de vitrine et que nous examinons notre plan de conception Web, nous pouvons voir notre fiche technique ici, nous avons suffisamment d' informations pour donner à une IA comme Claude les instructions pour Avant cela, nous voulons simplement vérifier quelles questions pourraient se poser lors de la construction. Vous pouvez voir ici que j'ai cette partie orange en haut de la fiche technique Cela couvrira des choses que nous n'avons pas vraiment couvertes dans notre plan. Il demande donc la section de collection en vedette, la source de contenu, les données thématiques, les données de magasin ou le mix de la section . Il semble donc que nous n'ayons pas renseigné la source de contenu. Je vais donc revenir au projet et m'assurer de préciser cette partie. Je vais donc passer à d'autres sections, accéder à la collection en vedette, modifier les informations. Et vous pouvez voir ici que je n'ai pas défini la source du contenu. Je vais donc parler d'un mélange de données thématiques et de données de boutique, car les produits proviendront de la collection, mais la collection spécifique qui sera choisie se fera dans les paramètres de la section. Je vais donc enregistrer ces informations, revenir à la création du plan de conception Web, puis copier les instructions de création du thème. En fait, avant de le faire, je voudrais renommer et vous donner accès à ce fichier Supposons donc un projet de cours Seance Macha Skillshare au cas où vous voudriez Je vais donc cliquer sur Partager ici, puis je copierai le lien et j'essaierai de l'inclure quelque part dans le cours. Dans le pire des cas, si je n'ai posté nulle part, je vais simplement créer une note ici, faire une pause ici, capture d'écran puis en extraire le contenu du texte ici même. OK ? Bien, revenons-en à là, je vais copier à nouveau les instructions de construction du thème et ouvrir une nouvelle fenêtre dans le code VS Vous pouvez le faire dans l' éditeur de code ou l'IDE de votre choix. Pour moi, c'est du code Visual Studio, et j'utilise le code Visual Studio dans toutes mes classes. Je vais donc créer une nouvelle fenêtre dans Visual Studio Code. En fait, je dois le pointer vers un dossier spécifique. Je vais donc ouvrir la fenêtre de mon Finder ici, revenir au dossier de mon bureau ici, et créer un dossier appelé thème personnalisé OK. Ensuite, je vais aller ici, cliquer sur ce bouton appelé Explorer. Et comme il est dit ici, je n'ai pas encore ouvert de dossier, donc je vais ouvrir ce dossier. Bien sûr, ce dossier est vide, mais maintenant tout ce que nous faisons dans ce dossier s'appliquera à ce dossier. OK ? Je vais donc cliquer ici pour ouvrir une session de code Claude. Ensuite, il ne me reste plus qu'à coller les instructions Figma, puis je dois également joindre la fiche technique Je vais donc aller ici et le télécharger en tant que Markdown. Markdown est plus facile à lire pour les IA. Le document Word est davantage destiné aux humains. Je vais donc télécharger la fiche technique des Suns Marcher dans ce même dossier Ensuite, je vais appuyer dessus pour le télécharger depuis mon ordinateur. Sélectionnez la fiche technique du SNS Marcher, et cela devrait suffire pour créer le thème Maintenant, je peux vraiment lire ici. Il y a quelques points que je dois mentionner. Avant de commencer, cela doit d'abord être fait. C'est dans l'invite, donc il vous demandera de le faire de toute façon. Vous aurez besoin de Shopify CLI pour transférer les fichiers de thème vers votre boutique Shopify Je suppose que vous pouvez simplement choisir de créer le thème, de croire qu'il fonctionne, compresser, puis de le télécharger mais je vous recommande de le faire avec la CLI. Donc, si vous n'êtes pas familier avec la CLI de Shopify, CLI est simplement l'abréviation d'interface de ligne de commande Vous pouvez simplement rechercher Shopify CLI sur Google. Il devrait vous diriger vers une page comme celle-ci, puis vous pourrez simplement l'installer si vous ne l'avez pas déjà installé. OK ? Les autres prérequis dont vous aurez besoin sont un connecteur Shopify MCP Cette invite Icloud devrait vous demander configurer et de vous connecter à une boutique Bien entendu, vous aurez besoin d'une boutique à laquelle vous connecter. Je vais déployer ce thème directement dans le même magasin que celui que j'avais pour le cours précédent, Sansmchatmshofy Comme vous pouvez le voir ici, nous avons le thème Horizon et le thème Prestige en version d'essai, qui est le thème sur lequel nous avons construit notre vitrine dans le cours précédent Donc, en se connectant à cette boutique, elle va publier thème que nous sommes en train de créer dans les brouillons de thèmes. OK, donc je pense que ce sont toutes les conditions préalables, mais encore une fois, si nous lançons cette invite, Claude devrait nous dire ce dont nous avons besoin s'il nous manque quoi que ce soit de toute façon OK ? Je vais donc zoomer, puis appuyer sur Envoyer dessus. Pendant ce temps, nous pouvons revoir notre design et examiner certains des contenus dynamiques dont nous aurons besoin dans notre boutique Shopper Fire existante Par exemple, les menus et les produits, d'accord ? Donc, ici dans notre en-tête, vous pouvez voir que nous avons ces éléments de menu, et ils ont chacun un chevron, ce qui indique que s'il y a des sous-éléments, fait de passer le curseur dessus ouvrira les sous-éléments Nous avons actuellement un menu très basique dans notre magasin. Donc, si je passe à ce qui se actuellement dans la section du contenu de l'Amen, vous verrez le menu principal, y a que trois liens qui ne sont pas imbriqués. Pour un magasin ne proposant que quatre produits, cela est logique, mais dans le monde réel, vous pouvez avoir 100 produits. Vous pourriez donc avoir besoin de menus imbriqués sur deux ou trois couches de profondeur avec plus d'éléments de menu que cela Même chose pour le pied de page. Donc, si nous faisons défiler la page vers le bas, vous pouvez voir qu'il y a tous ces éléments de menu. Cela va provenir de cette même section de l'administrateur. Vous verrez donc que lorsque nous publierons ceci, ceux-ci seront vides et nous devrons le lier aux bons liens de menu. Il se peut donc que cela ne ressemble pas exactement au design dans ce sens, avec les éléments de menu réservés ici Bien entendu, chacun d'entre eux est tiré d'un produit différent. Chacun d'entre eux devrait donc être configuré en tant que produit. Mais je crois que nous l'avons déjà fait dans le cours précédent. Donc, si je vais dans ma section de produits ici, vous pouvez voir que les quatre produits sont déjà chargés. Et si vous n'avez pas suivi le dernier cours et que celui-ci n' est pas déjà chargé , c'est très bien. Si nous allons dans le dossier du projet, je suis sûr que je l'ai laissé dans la liste des produits. Vous pouvez donc simplement vous rendre ici haut de la page des produits dans l'interface d'administration, cliquer sur Importer, puis importer un fichier CSV au format Shoo Five, et cela affichera exactement la même liste de produits OK. Les collections aussi. Je pense que c'est assez simple, mais j'ai une boutique ou une collection. Cela n'a pas vraiment de sens d'avoir d'autres collections que celle-ci alors que vous n'avez que quatre produits en magasin. Mais lorsque vous avez beaucoup de produits dans votre magasin, vous devez évidemment les organiser en collections. Je pense donc que c'est la majorité des données dynamiques. Ce genre de choses proviendra des paramètres de la section. Nous n'aurons donc qu' à le configurer, sinon le thème inclura ces valeurs par défaut, il sera donc prêt à l'emploi Évidemment, tout ce qui est contenu dans cette section provient de l' objet du produit lui-même. Ce qui est inclus n'a pas vraiment besoin de changer sur le site. Cela provient évidemment d'une certaine collection, et la recherche provient évidemment de produits ou d'autres ressources de votre site en fonction de votre terme de recherche. OK ? Permettez-moi donc de regarder notre instance de code griffée maintenant, pour voir où elle se trouve Et il nous demande si nous voulons procéder à une requête ou à une action MCP Je ne me souviens pas comment ça s'appelle. Et bien sûr, nous voulons dire oui. Nous allons devoir utiliser le Shopify MCP pour nous connecter à notre Nous allons donc simplement attendre qu'il revienne pour nous demander de nous connecter. OK, alors allons-y. De quoi avons-nous besoin avant de commencer ? Il a besoin du domaine exact de la boutique. Je vais donc juste le prendre pour notre exemple ici. Ce sera Sans marcher.mishabify.com. Je vais donc dire le numéro un. Numéro deux, connexion à la CLI Shopify. Je vais donc cliquer pour ouvrir un nouveau terminal et exécuter cette commande ici, en remplaçant votre boutique par Sans Macha Évidemment, installez-le dans votre propre boutique ici. OK, nous avons trouvé une erreur ici. Je pense que c'est un peu dépassé. C'était autrefois la façon dont vous pouviez vous connecter à un magasin. Au lieu de cela, je vais simplement passer à Shopify Theme Dev. Stockez les équivalents, puis inscrivez le point Sans Macha sur my shoafi.com Et cela ouvrira une nouvelle fenêtre de navigateur pour que je puisse me connecter. Nous allons simplement faire correspondre ce code à ce qu'il affiche dans notre terminal. Ouaip. Confirmez et connectez-vous, indique que nous sommes connectés avec succès afin que nous puissions revenir ici. D'accord, donc je vais dire numéro deux, je me suis authentifié avec succès, et ici, je vais dire oui à continuer Il va vous demander le mot de passe du magasin. OK, donc nous n'avons pas encore terminé. Le mot de passe de la boutique en ligne se trouve dans les préférences du canal de vente de la boutique en ligne. J'ai falsifié le mot de passe, donc je vais juste le saisir. Faux. Et cela devrait suffire pour se connecter réellement au magasin. OK, ça dit « Non », parce que j' exécute déjà cette même commande avec un autre magasin. C'est assez typique pour moi d' être un développeur Shopify Je travaille dans divers magasins. Je viens de terminer cela, donc je vais le relancer. Oui, je veux continuer. OK. Et maintenant, cela semble avoir fonctionné, mais il essaie de télécharger ce thème, et il n'y a rien là-dedans. Donc oui, ça ne marchera pas encore vraiment. Ensuite, le numéro trois est le lien du cadre Figma. Donc, ce que je vais faire, c'est le lien que j'ai copié tout à l'heure, je vais aussi le copier dans ce chat avec Claude. Donc, le lien de partage ici. Ensuite, le connecteur Shopify MCP, je vais demander si le code Claude lui-même peut me connecter Merci de me connecter. C'est bon. Et c'est une bonne chose à propos de l'IA si vous êtes bloqué à un moment ou à un autre, vous indiquera que vous êtes bloqué et vous demandera ce dont vous avez besoin pour être débloqué Suivez donc simplement ce que l'agent IA vous dit et tout devrait bien se passer. Sinon, comme toujours, vous pouvez utiliser la section de discussion du cours Skillshare Je vais le minimiser un peu afin que nous puissions en savoir plus sur ce qui se passe ici. Et je peux voir, d'après les journaux, qu'il commence déjà à lire le Figma, comprendre ce qu'il contient, et bientôt il devrait commencer à le construire Si je clique sur ce bouton pour regarder l'explorateur, vous pouvez voir qu'aucun fichier n'a encore été créé, mais cela se produira bientôt car nous développerons ce thème en utilisant cette invite principale avec une feuille de spécifications OK, donc il m'interroge sur les cadres du blog et du modèle d'article, ceux que je viens de supprimer. Il me demande donc s'il doit créer une convention standard ou simplement sauter pour le moment. Je vais cliquer sur Skip pour le moment. Bien, donc après 15 minutes supplémentaires, il a terminé ce qu'il était en train de faire Et comme vous pouvez le voir ici, il a créé tous les fichiers contenus dans les différents dossiers qui composent un thème Shopify OK ? Faisons donc défiler la page un peu vers le haut et lisons ce qu'il en est ressorti. Cela dit, j'ai maintenant créé et validé les huit modèles couverts par Figma Voici un rapport de situation complet. Donc, au lieu de lire ce plan ligne par ligne, je vais simplement aborder les points principaux. Il a donc compris que certaines sections sont partagées entre tous les modèles. Il les a donc créés. Il a créé les différents modèles. Il est entendu qu'il existe un autre modèle. Pour la page de contact et pour le pack de produits. Comme vous pouvez le voir ici, je ne m'attends pas à ce que vous compreniez parfaitement le code du thème Shuba Fi, mais si vous le faites, vous pouvez voir ici qu'il s'agit certainement d'un modèle alternatif rien qu'à cause du nom de fichier Ils ont ignoré les modèles d'articles de blog parce qu'ils ont été supprimés de la Figma, puis certaines hypothèses ont été formulées en ce qui concerne le changement de variante Par exemple, aucune interface utilisateur Figma n'a été affichée pour cela, ce qui a permis d'ajouter une sélection minimale de design bas au cas où une variante concerne l'ajout rapide au panier, elle en a déduit qu'il devait être dirigé vers le panier plutôt que vers un tiroir du chariot Il se peut que nous devions changer cela. Nous allons y jeter un œil . Tri de collection, il va effectuer un tri par page de collection en utilisant Ajax, ce qui signifie essentiellement qu'il n'y a pas de rechargement de page Il n'a inventé aucune facette filtrante. Encore une fois, nous n'avons pas dit au planificateur au début que nous avions besoin de filtres de collecte, il n'en a donc tout simplement pas tenu compte. Sur la page du panier, Ajax est utilisé pour modifier la quantité chaque fois que nous mettons à jour la quantité sur la page du panier Et la page de recherche est limitée aux produits uniquement. La section de collection Fixtured n' a pas encore de données en temps réel. Le magasin avait déjà deux thèmes, Horizon, et il est dit que le développement ici doit signifier celui qui fonctionne actuellement à l'aide de la CLI. Cela n'a rien poussé. Dites-moi s'il faut passer à ce thème de développement existant ou en créer un nouveau. Techniquement, ce thème de développement n'existe que dans la CLI. Dès que nous désactivons la CLI, elle n'existe plus. Il va donc falloir lui demander de passer à un nouveau thème. Ensuite, une assurance qualité visuelle manuelle est toujours requise, ce qui est tout à fait normal. OK ? Je vais donc dire que pour la cible de déploiement, veuillez déployer le thème sur un tout nouveau thème. Veuillez déployer le code sur un tout nouveau thème. Celui que nous utilisons ici dans Shopify Theme Dev est toujours celui qui a été mentionné précédemment, ce thème de développement Donc, si vous connaissez la CLI, nous pouvons exécuter un thème de développement pour tester les modifications du code sans les transférer au magasin. Alors qu'il s'agit de proposer le thème à la boutique, jetons un coup d'œil à celui-ci. Nous pouvons donc généralement trouver la même adresse à chaque fois Si nous ouvrons le terminal, nous pourrons voir laquelle il s'agit. Il s'agit donc généralement de cette adresse. Je vais donc copier cette adresse, coller ici et il semblerait que nous ayons une erreur de quatre ou quatre. Je vais simplement fermer notre session précédente en appuyant sur Ctrl C puis en la redémarrant Nous l'avons lancé pour la première fois, il n'y avait aucun fichier de thème, donc c'est probablement le problème. Et maintenant, vous pouvez voir que c'est passé. Donc, comme vous pouvez le voir ici, certains sont bons, d' autres ne le sont pas. Notre cadre de base est là, mais il y a certaines choses que nous devons corriger. À savoir, nous avons un étrange contenant ici. Je ne sais pas exactement ce qui se passe, mais il semble que la page ne s'étende pas vers la gauche et la droite de l'écran. Ainsi, même si nous pouvons utiliser Figma pour créer notre thème initial, et si nous accédons à une page produit, cela sera plus facile si nous entrons dans l'éditeur de boutique en ligne Je vais donc regarder le deuxième lien ici. Cela nous permettra de naviguer entre les différents modèles et d'ajouter les données thématiques manquantes. Si nous allons sur la page du produit ici, nous devrions pouvoir voir, et il s'agit d'un écran de très petite taille. Je vais faire un petit zoom arrière, et vous verrez que cela a créé les sections nécessaires, mais qu'il y a pas mal de nettoyage à faire ici Comme vous pouvez le constater, voici nos petites fiches produits. Ce que je vais faire avant de procéder au nettoyage c'est ajouter les données manquantes. Donc, pour la collection en vedette, bien compris que nous avons bien compris que nous voulions apporter une collection, mais nous devons sélectionner de quelle collection il s'agit, d'accord ? Donc, une fois que nous l'avons fait, il renseigne les informations. Je vais cliquer sur Enregistrer à ce sujet. Et dans la vidéo suivante, je vais vous expliquer comment nettoyer le résultat de la génération de code AI. 9. Nettoyage du code du thème: Bien, dans la dernière vidéo, nous avons généré le code du thème Shopify pour notre vitrine Mais comme nous l'avons vu, il est sorti un peu cassé et un peu incomplet. Nous allons donc passer un peu de temps dans cette leçon à corriger mieux que nous pouvons le résultat de l'IA. Si vous vous souvenez du cours de conception Web de Figma, nous avons pu trouver une solution équitable en utilisant la génération de code AI, condition que les fichiers Figma soient correctement configurés , nous devions encore apporter quelques petites améliorations en cours de route, et cela ne fait En fait, c'est probablement un peu plus difficile, car il repose sur une plateforme où de nombreuses données sont extraites de différents endroits. Par exemple, la section des produits en vedette sur la page d'accueil est extraite des données de section. Et vous remarquerez ici que la liste des produits est absente ici. C'est une solution facile. Parfois, il manque des données que nous devons réellement insérer dans le thème. Maintenant, l'un des problèmes auxquels nous allons être confrontés est que ce thème que nous examinons ici est un thème de développement qui disparaîtra dès que nous désactiverons la CLI, comme cet éditeur de boutique en ligne ici. Je ne vais donc pas l'utiliser maintenant pendant que je mets à jour le thème et plutôt regarder le thème sur la boutique qu'il a créée. Et Macha Pour effectuer les modifications, nous allons demander à Claude, mais nous devrons simplement demander à Claude, à la fin de chaque session, d'appliquer ces modifications au thème de la boutique afin que nous puissions réellement les visualiser. Et c'est un petit problème avec Shopify : les données du thème dans lequel nous éditons ici dans l' lequel nous éditons ici éditeur de la boutique en ligne et le code se trouvent tous deux dans les mêmes dossiers Mais si nous modifions les données ici, elles ne reviendront pas automatiquement à cette version du thème sur notre ordinateur local, d'accord ? Donc, pour l'instant, je vais le faire sur la vitrine, puis je vais compiler une liste des modifications que je veux corriger, l' envoyer à Claude, et ensuite Claude pourra appliquer ces modifications au thème D'accord ? Je vais donc aller dans la section des collections en vedette ici et charger une collection. Comme vous pouvez le voir ici, la génération du code du thème a été ajoutée avec succès dans les paramètres de personnalisation. Comme vous pouvez le voir ici, nous pouvons personnaliser le titre. Nous pouvons donc parler de collection en vedette, ou nous pouvons nous en tenir à notre gamme de produits. Et si nous avions d'autres collections dans notre boutique, nous pourrions montrer d'autres collections, d'accord ? Cela fonctionne correctement. Comme vous pouvez le voir ici, nous avons des blocs d'arguments de vente. En fait, je vais faire un petit zoom arrière, afin que nous puissions voir sur la gauche des blocs d'arguments de vente , puis les détails de chacun d'eux. Nous pouvons donc changer cela. Nous pouvons mettre à jour l'icône. On dirait qu'il a retiré l'icône et l'a ajoutée directement au thème. Mais idéalement, nous ne voulons pas le faire. Je vais laisser ça tel quel pour le moment. Il semble qu'ici, nous pouvons changer l'icône en autre chose, comme nous pouvons le voir ici. Mais si nous ne l'ajoutons pas, ces images seront toujours utilisées par défaut. Et si nous descendons ici, c'est pareil, donc je peux changer l'image ici. Ce magasin contient déjà des images de la classe précédente, c'est pourquoi vous les voyez dans la bibliothèque ici, mais vous pouvez toujours télécharger vos images dans cette section. En fait, je vais mettre cela comme premier commentaire. Si nous allons dans le dossier Assets, nous devrions voir toutes les images incluses dans le thème. Idéalement, nous ne voulons pas qu' aucune image soit installée dans le thème lui-même. Je vais donc simplement créer une invite de commentaires ici. Premièrement, ne stockez pas d'images dans le thème. Toutes les images doivent provenir des données du magasin ou des données thématiques. D'accord, c'est mon premier commentaire , car le fait d'avoir les images dans le thème signifie que nous créons un thème plus volumineux Nous voulons juste avoir le code ici, et nous voulons que les photos soient réellement téléchargées dans la section des fichiers de notre Shabafi Amin OK, donc c'est la première chose que je vais changer ici dans l'en-tête, vous verrez qu'il renvoie au menu principal. Ce sont donc en fait les liens du menu que nous avons dans notre liste de liens du menu principal. Comme vous pouvez le voir ici, si je clique sur Modifier, cela nous amène à la section des menus de l'administrateur pour que nous puissions cela nous amène à la section des menus la modifier. Je pense donc que ces liens devraient donc être corrects si j'y reviens maintenant sur la base du travail que nous avons effectué la dernière fois. Oui, donc ces liens devraient fonctionner. Le logo, encore une fois, montre un logo sans que nous y téléchargions quoi que ce soit Ce premier commentaire devrait donc également résoudre ce problème. Et puis ce qui est vraiment flagrant, c'est que si je vais juste ici pour prévisualiser ce thème, je dirais simplement que toute la mise en page est en retrait à gauche et à droite Essayez d'être aussi descriptif que possible ici. Je suis développeur, donc je peux en quelque sorte regarder le code et être un peu plus descriptif. Nous pouvons probablement déterminer ce qu'est cette indentation en regardant le code ici Nous avons donc cet étrange système de grille de contenu avec marge de contenu. est généralement pas ainsi que je le configurerais , mais vous pouvez voir ici, je crois que la partie du corps se trouve sur une sorte de grille. Mais demandons simplement à Claude de le réparer. L'ensemble de la mise en page est en retrait à gauche et à droite. Le bord gauche de chaque section n'est pas aligné avec le bord gauche de la fenêtre d'affichage et vice versa sur la droite OK, nous voulons des états Hova sur les boutons. Je dirais donc d'implémenter états Hova sur tous les boutons et liens Donc oui, le site Web semble peu interactif car rien ne se passe lorsque nous survolons des boutons et des liens avec le pointeur de la souris Et ici, l'écart entre les icônes sur le côté droit de l'en-tête est incohérent. L'écart entre les icônes sur le côté droit de l' en-tête n'est pas uniforme. Je ne sais pas ce qui l'a causé. Et puis cet en-tête en forme de pilule, cet en-tête en forme de pilule sur la page d'accueil doit être placé au-dessus de la première section. Ensuite, je connais un peu de CSS, je vais dire positionnement permanent ou absolu autant de détails que vous pouvez donner ici, je ne suis peut-être pas tout ce que je peux fournir, mais faites de votre mieux. Je pense qu'il nous manque les liens ici pour le FOD. Donc, pour Instagram, je vais simplement mettre instagram.com parce que ce n'est pas une vraie marque, mais l'icône ne sera pas affichée à première vue À moins que nous n'insérions un lien. Je vais donc simplement dire instagram.com. Oui, et comme vous pouvez le voir, cela crée le lien, facebook.com, puis TikTok, qui, je crois, n'est que tiktok.com qui, je crois, n'est que Et puis quand je mets ces liens, les icônes apparaissent. Maintenant, pour ce qui est de la section newsletter, je ne sais pas pourquoi elle contient tout cet espace. Laissez-moi jeter un œil aux designs de Figma ou à quoi ils sont censés ressembler OK, donc je dois dire qu' il y a un grand écart dans le pied de page entre rester au courant et la saisie du courrier électronique Bien, et ensuite ? Le logo est étiré sur le pied de page. Le logo est étiré horizontalement dans le pied de page. OK, ce n'est donc que la page d'accueil. Si je vais sur la page du produit, vous verrez ici, honnêtement, pas si mal que ça. Mais encore une fois, les sections sont un peu en retrait dans la collection pour les produits connexes, je vais simplement les charger, mais elles seront sur la gauche Je dirais donc que s'il y a trois articles ou moins dans la section de la collection en vedette, centrez les fiches produits. Lorsque vous travaillez avec des données dynamiques, il est bon d'avoir des conditions ici n'est pas parce qu'il s'agit de trois articles maintenant qu'il y en aura trois dans le futur. Vous ne voulez donc pas qu'il se casse lorsque de nouveaux éléments sont ajoutés. Et comme je l'ai mentionné, je voulais le bouton d'ajout rapide. Donc, si je rafraîchis ici, le bouton d'ajout rapide sur les fiches produits ne devrait apparaître que lorsque le pointeur de la carte produit passe, et la largeur du bouton doit être de 100 %, ce qui signifie qu'il occupe 100 % de l'espace disponible Nous ne pouvons pas mettre en œuvre avis sans une application d'avis spécifique Nous devons donc d'abord insérer une application d'avis. Voyons maintenant ce qui se passe si nous cliquons sur le bouton de notre compte. OK. Oui, ça a l'air de fonctionner. La recherche nous amène à une nouvelle page. Idéalement, je voudrais que la recherche ouvre un panneau sous l'en-tête. Donc, en cliquant sur l'icône de recherche dans l'en-tête, devriez ouvrir une entrée de recherche directement sous l'en-tête pour capturer le terme de recherche. Et oui, évidemment, dans votre situation, les commentaires peuvent être différents. Je m'y attendrais. De plus, il semble que l'icône du panier et l'icône du compte fonctionnent en face. Je dirais que l'icône du panier fonctionne et que l'icône du compte se trouve de l'arrière au premier plan. De plus, la position est également de l' arrière vers l'avant. De plus, le fait de cliquer sur l'icône CRT devrait toujours ouvrir le tiroir du panier, et non accéder à la page du panier Donc oui, il suffit de passer en revue le thème complet. De toute évidence, le nombre de modifications à apporter sera différent à chaque fois Permettez-moi de passer à la page du produit. Oh, oui, nous y avons jeté un œil ici, n'est-ce pas ? Ouais OK. Et maintenant, jetons un coup d'œil à la page de collection. La page de collection semble correcte. Et puis nous avons notre page de contact avec le formulaire de contact. Je suis totalement d'accord avec ça, et nous n'avons aucun article de blog. La page par défaut ressemble à ceci. Encore une fois, j'en suis plutôt content. Permettez-moi donc de suivre ces commentaires pour le moment. Je vais supprimer le 13e point, puis appuyer sur Entrée. OK, cela a donc pris beaucoup de temps, tellement de temps qu'au bout de 15 minutes environ, j'ai décidé d'aller au gymnase et d'y revenir plus tard. C'est donc terminé. En voici le résumé. J'ai également réduit le chat, ce que vous faites lorsque vous discutez avec des agents de l' IA pour résumer le contexte de temps en temps C'est pourquoi vous voyez ce chat ici, un chat compacté Mais si nous revenons en arrière et que nous voyons ce qu' il a écrit ici sans même que nous le demandions, tous les correctifs sont reportés sur le même thème inédit Il a supprimé toutes les images du dossier des actifs comme je l'ai demandé et a couvert tout le contenu. Revenons donc en arrière et vérifions s'il a réellement fait ce qu' il prétend avoir fait et s'il a résolu le problème. D'accord ? Nous pouvons donc revenir exactement au même thème, et tout de suite, nous constatons qu'il y a une erreur de liquide Vous pouvez donc simplement prendre l'erreur liquide et la coller directement dans le chat, et en général, il sait quoi faire. Pendant ce temps, vous verrez une fois que nous reviendrons sur la page d'accueil que nous avons le SVG standard pour les images où aucune image n'a été définie Revenons donc dans l'éditeur de la boutique en ligne et redéfinissons ces images. Je vais donc aller sur la page d'accueil ici et ajouter notre logo, qui devrait déjà figurer dans notre bibliothèque depuis la dernière fois que nous avons créé ce site Web, et maintenant vous pouvez voir que le logo que nous avons sélectionné se trouve ici. Nous allons entrer dans le héros ici, charger l' image du héros ici. Hein ? Donc, au lieu de les images du dossier du thème, qui n'est généralement pas ce que vous faites, nous nous assurons qu'il s'agit bien de fichiers la boutique Shopper Fi que nous intégrons ensuite dans le thème via les paramètres du thème, d'accord ? Arguments de vente pour chaque texte de présentation, nous allons ajouter l'icône correspondante, qui, je crois, était celle-ci. Et gardons cela et jetons un coup d'œil en arrière. Correction et suppression du bogue. J'espère que cela n'a pas remplacé nos données. On dirait que ce n'est pas le cas de Dieu. Et vous pouvez voir que l' en-tête recouvre le héros sur la page d'accueil du bureau. C'est une bonne chose. Si je clique sur l'icône du panier ici, il semblerait que cela nous amène à la section du compte, et l'icône du compte nous amène au panier, puis nous avons cette recherche ici. Il flotte un peu au milieu de nulle part, donc ce n'est pas l'idéal. Le bouton est désormais survolé, mais il n'est pas parfait, Eva, et les boutons de publicité rapide ne s' affichent qu'au survol C'est bien, mais ils ne s'étendent pas avec. Et à ce stade, si vous avez les connaissances nécessaires en matière de développement, il sera peut-être plus facile de modifier le code vous-même ou de l'inspecter et de donner des instructions plus détaillées. Dans ce cours, je ne présumerai pas que vous savez comment coder ou utiliser le système de développement de thèmes Shopify Bien entendu, si vous voulez apprendre cela, vous pouvez accéder à mes cours précédents sur ces sujets. Mais ici, je vais continuer à charger les images. Je crois que c'étaient Sarah M, Maya K et Ava L. Il est évident ce sont des personnages fictifs, donc cela n'a pas vraiment importance. Appuyez sur Enregistrer là-dessus. Et puis pour le pied de page, chargez le logo. Et il semble que nous ayons perdu les données qui se trouvaient dans la section des icônes sociales, alors je vais simplement les repeupler. Et c'est à cela qu'il faut faire attention. C'est pourquoi j'aime utiliser l'intégration Github, qui est un peu une affaire de développeur, mais l'intégration Github permet de tout synchroniser et de minimiser les risques de pertes de données de ce type Je préfère donc déployer mes thèmes via Github. Vous pouvez voir que cette lacune que nous lui avons demandé de corriger a été corrigée. Passons maintenant à quoi d'autre avons-nous demandé dans notre liste ? Donc, si je reviens au début, au lieu de voir ce qui est dit que c'est fait, laissez-moi voir ce que nous lui avons demandé de faire. OK. Donc oui, il y a beaucoup de journaux ici à passer au crible Oh, on y va. Nous pouvons simplement aller en haut pour obtenir des commentaires. Donc, oui, toutes les images du thème ont été supprimées. Il y avait ce problème avec l' indentation à gauche et à droite. On dirait que c'est complètement réglé maintenant. Dieu merci. Nous voulions que Hovstts apparaisse sur tous les boutons et liens Il existe des Hovstts, mais le style qu'il en a déduit n'est pas particulièrement apprécié, pas particulièrement apprécié, mais c'est ce qu'il a fait L'écart entre les icônes sur le côté droit de l' en-tête est incohérent. Cela a réglé ce problème. L' en-tête en forme de perle de la page d'accueil doit être placé au-dessus de la section. Ouaip. Il y a une grande lacune dans le pied de page. Oui, on règle ça. Le logo est étiré horizontalement dans le pied de page. Ce n'est plus le cas. S'il y a trois articles ou moins dans la section de la collection en vedette, envoyez-les aux fiches produits. D'accord, nous pouvons donc aller page d'un produit dès maintenant, voir si c'est fait. Nous devons donc remplir à nouveau les images. Je vais donc entrer dans mon modèle de produit ici, et ce produit doit en fait être affecté au modèle alternatif. Alors permettez-moi d'y retourner. Il se peut que je doive publier, en fait, ce thème dans l'emplacement principal afin de sélectionner ce modèle. Mais comme il s'agit d'une boutique de développement, elle n'est pas en ligne, ce ne sera pas du tout un problème. Ensuite, pour le set Marcher complet, je vais le configurer. Je vais zoomer ici. Je vais le configurer pour qu'il utilise le modèle de bundle, pas le modèle par défaut. D'accord ? Maintenant, si nous devions simplement revenir à la page d'accueil, puis revenir au modèle de produit par défaut. Il ne devrait plus nous montrer le produit groupé car il se trouve sur un modèle différent. D'accord ? Ici, nous allons à nouveau ajouter ces images et également ajouter les produits connexes. Je vais appuyer sur Enregistrer à ce sujet. N'oubliez pas que nous étions en train de vérifier s' ils étaient alignés au milieu. Ce n'est pas ce qu'il a fait. C'est donc une chose qu'il n'a pas faite. Je vais juste corriger les icônes ici pour les plans de vente. Appuyez sur Enregistrer là-dessus. Je vais maintenant passer au modèle alternatif du bundle. regarde la section principale du produit, cela fonctionne plutôt bien. Ce qui est inclus, il suffit de le changer avec les images. Je vais mettre l'image du Macha haut de gamme dans la première image du fouet, je crois que c'était dans le deuxième article Ouaip. Et puis le troisième article, qui se trouve uniquement dans l'éditeur de la boutique en ligne, sera, comme on peut s'y attendre, le bol. Voilà. Et 100 % de ce contenu est modifiable et lisible dans l'éditeur de la boutique en ligne, et c'est ce à quoi on peut s' attendre Encore une fois, pour ce qui est des arguments de vente, je crois que c'est le dernier endroit où cela apparaît. Il ne reste donc qu'un seul endroit pour le faire. OK, je les ai mis de l'arrière vers l'avant. Cliquez sur Enregistrer dessus et rendez-vous sur notre page de collection. Nous avons donc juste une collection par défaut. Pour le moment, je vais ajouter l'image du paysage. Donc, en regardant les images de notre site Web Shopify ici, des photos d'une version 2 de sourcing T fields, je pense que c'était celle que nous recherchions Cliquez sur OK et nous pouvons personnaliser le titre ici pour autre chose. Si nous le voulons. Sinon, le titre de la collection sera utilisé par défaut , comme on pouvait s'y attendre Et puis voici notre grille de collecte. Je vais cliquer sur Enregistrer à ce sujet. Et quoi d'autre ? Nous avons notre page par défaut. Je ne pense pas qu'il y ait eu de problèmes avec cela et avec notre page de contact, que nous n'avons pas vraiment eu de problèmes avec Eva. À moins que nous ne voulions mettre du contenu ici, mais je vous laisse le soin de décider. D'accord ? Maintenant, je vais tout regarder sur mobile preview. Donc oui, ce n'est pas parfait à 100 %. Nous pouvons certainement améliorer certaines choses, mais je ne vois rien de vraiment cassé ici. Si je clique sur le tiroir de navigation, il s'ouvre avec succès. Maintenant, si je vais sur la page du produit, vous verrez qu'il n'a pas vraiment reçu la bonne commande que nous avons spécifiée. Je crois au design, nous avions le titre et le prix ci-dessus. Nous devrions donc également faire part de ces commentaires à Claude . Modèle de collection. Oui, tu peux voir où je veux en venir. Je suis juste en train de vérifier les différentes pages. Et au fur et à mesure que vous avez des commentaires, vous pouvez littéralement les réinsérer dans Claude et lui demander de les corriger. Je vais juste corriger les erreurs évidentes de cette vidéo. Donc, par exemple, je vais parler de commentaires supplémentaires. Premièrement, section du formulaire de contact, comment s'appelle-t-elle ? La section du formulaire de contact doit être empilée sur mobile plutôt que flexible. Je vais donc considérer cela comme un véritable bogue. Qu'y avait-il d'autre ? Le plus important, c'est que si je m'en sortais, celui-ci , sans entrer dans le milieu, n' est pas un gros bug. Je n'en ferai pas toute une histoire. Mais il y a un gros bogue quant à savoir pourquoi l'icône du compte déclenche le panier et l'icône du panier déclenche le compte. Je dirais donc que l'icône d'en-tête du panier déclenche lien du compte et que l'icône des comptes déclenche le tiroir du panier. Cela devrait être le contraire. Permettez-moi de vérifier la fonctionnalité d'ajout réel au panier. Donc, si je voulais ajouter rapidement ce bol à mon panier, l'interaction était agréable, mais cela n'a pas ouvert le tiroir du chariot. Oh, et je viens de me rappeler que cela n' indique pas vraiment le chariot ici. En fait, il l'a mis au mauvais endroit. Mais comme vous pouvez le constater, nous avons ce joli petit tiroir qui se met à jour. Le seul problème est que nous avons dû le rafraîchir pour le voir. Je vais donc écrire ça. Après avoir été ajouté au CRT, le tiroir du panier devrait se mettre à jour et s'ouvrir automatiquement Et l'indicateur sur l'icône devrait également apparaître de manière synchrone Je ne sais pas comment épeler exactement un synchrone. C'est un mot dur. Je vais juste le taper dans Google pour le corriger automatiquement. Je vais donc l'envoyer. En fait, je vais juste vérifier la page du produit. Cliquez sur le fonctionnement de l'option Ajouter un panier à ce sujet. Ouais Encore une fois, il semble que nous devions actualiser notre page pour voir la carte mise à jour, ce qui n'est pas idéal. Je vais donc simplement l'envoyer. Je pense que la version 0.3 concerne les deux situations où nous avons le panier d'ajout rapide et la carte publicitaire sur la page du produit. Vérifions-nous simplement que notre galerie de produits fonctionne. C'est le cas, mais lentement, nous pouvons donc certainement optimiser cela. Mais je vais simplement les examiner, et le principe principal que je veux que vous en retiriez le principe principal que je veux que vous est que tout ne sera probablement pas parfait, et que votre solution pour y parvenir est simplement de continuer à répéter avec Claude ce qui doit être corrigé En tant que développeur sur Shopify depuis 2019, je sais évidemment comment écrire le code manuellement, mais je parle même à Claude maintenant au lieu de coder moi-même Je recommande donc d'adopter cette approche. Plus vous aurez de connaissances techniques et meilleures seront les descriptions que vous pourrez donner, bien évidemment, pour améliorer vos résultats. Mais faites de votre mieux, et la plupart du temps, il devrait comprendre de quoi vous parlez. Il ne suffit pas de continuer à faire des allers-retours jusqu'à ce que ce soit le cas. Je vais donc attendre maintenant, j'espère que cela ne prendra pas encore 20 minutes, et je vous recontacterai quand ce sera fait. OK, au bout de quatre minutes de plus, nous avons compris. Alors, passez au thème en direct. Cela signifie que Sans matre est désormais le thème inédit en direct. Devons-nous y introduire ces changements ? Il me pose cette question car évidemment, s'il s'agissait d'un site en ligne, ce serait assez risqué. Je vais d'abord m'assurer qu'il ne supprime pas nos données. Je vais donc en faire d'autres, et je vais dire oui, push to live, mais j'ai apporté quelques modifications éditeur de la boutique en ligne que j'aimerais que vous mainteniez. N'effacez pas mon travail dans les fichiers JSON. Donc, pour ceux d'entre vous qui ne connaissent pas toutes ces informations, toutes les valeurs de l'éditeur de boutique en ligne se trouvent dans ces fichiers JCN C'est pourquoi je dis de ne pas effacer mon travail dans les fichiers JCN J'espère qu'il suivra cette instruction et qu'il sera capable de fusionner les modifications de code avec les modifications JSON sur le site Web lui-même. OK, donc on dirait que c'est fait. Regardons ce qu'il a dit. trois problèmes sont corrigés, vérifiés en direct et repoussés avec le seul indicateur, de sorte qu'il ne fait que modifier les fichiers liquide et SVG Aucune des modifications JSON modifiées par votre thème n'a donc été modifiée. OK. L'essentiel était donc l'icône dans l'en-tête. OK, alors maintenant il semble que ce soit la bonne icône. C'est juste une mauvaise position. vrai, mais au moins les icônes sont maintenant associées au bon endroit. Et maintenant, j'espère que je vais les retirer du panier, comme vous pouvez le voir. Et puis si je clique sur Ajouter au panier, oui, le panier sera automatiquement mis à jour, tout comme le numéro. Vérifions sur la page d'accueil que Quick Add fait la même chose. Oui, j'aimerais être un peu plus une animation lorsque le tiroir du chariot entre et sort. Mais cela fonctionne. Et comme je l'ai mentionné plus tôt, il y a aussi cette page Notre histoire, qui est actuellement vide dans ce thème actuel. Je vais laisser ce champ vide pour le moment. Si vous avez suivi ce cours en utilisant la même marque, Sans Macha, avec les mêmes modèles, je vous laisserai la page Notre histoire comme projet supplémentaire à poursuivre Ajoutez quelques cadres supplémentaires pour ordinateur de bureau et mobile pour la page Notre histoire. Ensuite, vous pouvez imiter ce qui a été créé ici dans le thème prestige de cette page en particulier Toutes les images du dossier du projet avec la copie correspondante. Vous pouvez donc essayer de le créer dans Figma en utilisant l'IA ou non, puis de l'implémenter dans une boutique Shopify Mais pour ce qui est de la version finale de notre design personnalisé, je vais en rester là. De toute évidence, il reste encore du travail à faire. Mais, encore une fois, il s'agit simplement de faire des allers-retours avec Claude pour régler le problème. Et évidemment, en tant que développeur Shopify moi-même, je peux être assez détaillé et entrer dans le vif du sujet Mais en général, vous pouvez voir que nous avons créé notre propre thème personnalisé depuis la phase de planification jusqu'à un thème fonctionnel pour une véritable boutique Shopify en utilisant les données réelles de la boutique ici Et ce qui est beau, c'est que c'est à 100% notre propre thème. Contrairement au thème précédent, le thème prestige, où si nous voulions lancer ce thème, nous devions acheter le thème, ce qui, je pense, coûte entre 300 et 400$ Alors oui, bien que nous ayons dépensé un tas de jetons dans Cloyd pour un plan de site Web et créer un thème totalement personnalisé, ce thème est désormais le nôtre, et nous économisons de l'argent sur tout autre développement personnalisé que nous pourrions avoir à obtenir, qu' il s'agisse d' engager un développeur ou de payer pour un thème standard C'est donc ici que nous allons essentiellement terminer le voyage pour ce cours. Dans la dernière vidéo, nous allons résumer les choses et je vais vous donner quelques détails sur votre projet de classe. 10. Bonus : code du thème terminé: Avant de passer à la conclusion, je voulais juste inclure une petite vidéo bonus ici. Entre deux vidéos, j'ai mis à jour le thème, je l'ai nettoyé. Comme vous pouvez le voir ici, cet en-tête de recherche avait besoin d'un peu plus de travail, mais maintenant il est beau. Je me suis rendu compte qu'il n'était probablement pas nécessaire de rechercher un magasin qui ne propose que quatre produits, mais voilà. Encore une fois, toutes ces données proviennent du magasin lui-même. Donc les produits et le menu ici et aussi le menu ici bas. Mais si je voulais que ce thème corresponde exactement à la vitrine, je mettrais bien sûr à jour les données de la boutique Les menus, bien sûr, se trouvent dans le magasin, pas dans le thème. Et comme nous n'avons pas créé de page O story, je vais simplement la supprimer du menu principal et du menu alimentaire. Donc, si je devais y retourner maintenant, vous verrez que cela changera les choses sur notre thème. J'espère donc que vous comprenez maintenant que certaines des modifications que vous apporterez votre boutique Shopify se situent au niveau de la boutique modification d'éléments tels que les menus, les produits, les collections, etc. se fait donc au niveau du thème. Et ce que je veux dire par là, c'est que lorsque vous êtes sur votre thème, ces différents paramètres réorganisables, comme c'est le cas dans tous les thèmes Shopify Le thème devrait donc être suffisamment flexible en théorie pour fonctionner sur n'importe quel magasin contenant des données, d'accord ? dans cet esprit que j'ai consacré est dans cet esprit que j'ai consacré tout mon travail à ce dépôt GitHub ici, juste au cas où vous voudriez accéder au code du thème final de l'endroit où je me suis retrouvé Ceci est disponible sur mon compte GitHub de Christopher Dodd, l'adresse que vous pouvez trouver ici si vous avez besoin du lien direct Si vous deviez créer ce thème en tant que thème que vous souhaitez vendre sur la boutique de thèmes, par exemple, qui devrait fonctionner sur n'importe quel thème, vous devez le tester sur différents magasins et voir comment il fonctionne. Dans cette vidéo, nous construisions un bâtiment spécifique à ce magasin de poudre Sans Marcher en particulier. est donc à vous de choisir dans quelle mesure vous souhaitez rendre le thème flexible. J'ai travaillé pour une entreprise, par exemple, qui n'avait aucune donnée de section. Vous entreriez dans l'éditeur de la boutique en ligne, et il n'y aurait aucune section . Ce ne serait qu'un code. Et donc, bien sûr, vous pouvez également le faire, ou vous pouvez le rendre hautement personnalisable afin que quelqu'un puisse utiliser ce thème sans écrire de code tout étant en mesure de le personnaliser autant qu' il en a besoin. Oui, je voulais juste créer cette vidéo supplémentaire pour vous donner accès au code du thème final sur lequel j'ai atterri. Ce n'est certainement pas la fin. Vous pouvez entrer ici, partir de ce code de thème et utiliser le code Claude ou tout autre agent d'IA de votre choix pour ensuite l'itérer, l' améliorer et le créer selon vos besoins Et c'est la meilleure partie de tout ce processus. Nous utilisons le même processus de développement standard que dans le monde réel. Nous utilisons simplement l'IA pour planifier et automatiser une grande partie du travail de base. Cela étant dit, je vous verrai dans la conclusion. 11. Conclusion et projet de cours: Ceci conclut ce cours sur la conception automatisée de sites Web Shopify par l' IA Pour votre projet de classe, je vous encourage à créer le design Web votre boutique Shopify Figma en utilisant les techniques abordées dans ce cours, en élaborant le plan de vos wireframes, en utilisant le planificateur de magasin, puis en créant les maquettes haute fidélité Lorsque vous avez terminé votre conception, téléchargez-la dans la section des projets de classe pour partager votre travail avec d'autres étudiants ou pour obtenir mes commentaires. Si vous avez apprécié ce cours, assurez-vous laisser un commentaire positif et consulter certains de mes autres cours ici sur skillshare.com, où j'approfondis des concepts tels que le développement Web, Shopify et d'autres outils Merci, comme toujours, de votre attention, et à bientôt.