Développement de thèmes Shopify : Créez et personnalisez votre propre boutique en ligne

1. Introduction: Bonjour et bienvenue sur Shopify Theme Development : Comment créer ou personnaliser votre propre boutique en ligne. Je suis Chris, je suis un des meilleurs professeurs ici sur SkillShare.com, couvrant des sujets tels que le développement web et le freelance en ligne. Et dans le cours d'aujourd'hui, je vais vous guider dans un processus efficace de création et de personnalisation de boutiques en ligne à l'aide de la plateforme Shopify. Shopify est l'une des principales plateformes de commerce électronique au monde avec plus de 800 000 magasins Shopify actifs, et à mon avis, l'endroit le plus idéal pour commencer à construire votre première boutique en ligne. En tant que concepteur ou personne ayant des connaissances de base en développement web, tout ce dont vous avez besoin pour libérer la puissance de Shopify est une connaissance de base de la plate-forme elle-même et de son langage de modélisation appelé Liquid. Et c'est exactement ce que nous allons entrer dans ce cours. Dans les leçons suivantes, nous allons nous concentrer sur la création et personnalisation de votre boutique en utilisant un thème Shopify, qui est fondamentalement comme un modèle qui détermine la façon dont votre boutique en ligne ressemble et se sent. Nous allons en apprendre davantage sur la structure des thèmes, y compris les mises , les modèles, les sections et les extraits, comment modifier votre code efficacement et mettre à jour instantanément votre vitrine, et enfin, comment éditer votre code peut non seulement mettre à jour l'apparence et la convivialité de de votre site Web, mais aussi de fournir des options au sein votre administrateur Shopify pour ajouter et personnaliser dynamiquement du contenu. À la fin de la classe, vous devriez avoir une bonne compréhension de ce que vous pouvez faire avec thèmes Shopify et avoir la confiance nécessaire pour apporter des changements si nécessaire. Que vous souhaitiez vendre vos propres produits ou utiliser ces compétences pour aider les entreprises en tant que freelance ou agence, ce cours vous permettra de commencer sur la bonne voie avec Shopify. Donc, si vous êtes prêt à commencer, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Connaissances et outils nécessaires: Avant de commencer à lancer notre boutique en ligne et à éditer notre thème, il est important de discuter à qui appartient ce cours et des compétences que vous devriez avoir dans ce domaine. Tout d'abord, si vous êtes quelqu'un qui est EVA, qui vend déjà en ligne, sur le point de lancer sa propre boutique en ligne ou de travailler dans un rôle où vous travaillez beaucoup avec la plateforme Shopify ; cela aide certainement à savoir comment votre vitrine est générée, afin que vous puissiez trouver le bon endroit pour apporter des modifications. D' un autre côté, vous pourriez être quelqu'un comme moi qui n'a peut-être pas son propre magasin, mais qui sont enthousiastes à l'idée de répondre aux plus de 800 000 vendeurs sur Shopify, qui auront probablement besoin d'aide pour leur thème à un moment donné. Pour moi, apprendre le développement de thèmes Shopify est une excellente occasion, d'acquérir une compétence précieuse que vous pouvez utiliser pour offrir des services aux vendeurs Shopify. Cependant, comme je l'ai mentionné dans la vidéo précédente, ce cours va bénéficier à ceux qui ont déjà des connaissances et des compétences en HTML et CSS. Si vous êtes complètement nouveau dans ces langues, je vous recommande fortement d'apprendre un peu de ces deux langues d'abord, et en semblant que vous êtes déjà ici sur Skillshare, un bon point de départ est mon cours précédent, Développement Web Fondamentaux HTML et CSS. Autre que cela va aider à avoir une certaine expérience avec un langage de programmation comme JavaScript ou PHP, comme le liquide de langage de modèle de Shopify, utilise des blocs de contrôle et d'itération de base pour afficher le contenu. Je parle de choses simples comme quatre boucles et If instructions, qui devraient être super familières si vous avez fait une programmation dans le passé. Sinon, les boucles et les conditionnels sont assez basiques et particulièrement faciles à comprendre et liquides. Tu ne devrais pas avoir trop d'ennuis. Quelque chose qui est un peu évident mais qui mérite d'être mentionné, est que vous devriez avoir une certaine familiarité avec la plate-forme Shopify elle-même. Que ce soit aussi basique que de savoir ce qu'il est et ce qu'il fait ou mieux encore, certaine expérience avec l'ajout et l'organisation de produits, pages et de billets de blog au sein de l'administrateur. Plus vous êtes familier avec la plateforme bien sûr, plus il sera facile de comprendre ce qui se passe. Shopify rend la gestion de votre boutique en ligne aussi simple que possible, donc vous n'avez pas nécessairement besoin d'avoir travaillé avec Shopify avant d'apprendre les choses que je vais vous enseigner dans ce cours. Enfin, pour couvrir brièvement les exigences technologiques, comme n'importe laquelle de mes classes de développement web, les seuls outils dont vous aurez besoin sont un navigateur Web et un éditeur de code. Vous utiliserez également la ligne de commande un peu dans ce cours, mais c'est un logiciel standard dans n'importe quel système d'exploitation. Maintenant, si l'un de ces problèmes semble déjà déroutant, alors je vous recommande certainement de prendre du recul, apprendre quelques notions de base du développement Web et de revenir à cette classe à une date ultérieure. Un bon point de départ est mon cours ici sur SkillShare.com, Web Development Fundamentals, un guide pour débutants sur le web. Pour résumer rapidement, tout ce dont vous avez besoin, c'est des compétences de base en développement web, avec HTML et CSS, un navigateur web et l'éditeur de code, et vous devriez être prêt à partir. 3. Créer un magasin de développement: Pour commencer à construire et à personnaliser notre propre thème Shopify, nous allons avoir besoin d'un magasin Shopify. Heureusement pour nous, nous pouvons créer une boutique gratuite en utilisant le compte d'un partenaire Shopify. Maintenant, ce compte est complètement gratuit et nous devons rejoindre le programme partenaire pour l'obtenir. Sinon, si vous avez déjà un magasin, cette première partie, où nous nous inscrivons à des partenaires et nous nous connectons à la boutique via le compte du partenaire, ne s'appliquera pas à vous. Mais tout à partir de notre magasin de développement va s'appliquer à vous et à votre magasin. Tout ce que vous devez faire est de vous connecter à votre magasin. Sinon, si vous n'avez pas déjà votre propre magasin, vous pouvez créer un magasin de développement. Qu' est-ce qu'un magasin de développement ? Eh bien, j'ai un article de Shopify à examiner. C' est fondamentalement un thème que nous pouvons faire toutes les différentes choses que nous ferions dans un thème Shopify normal, mais avec quelques limitations ici. L' idée d'un magasin de développement est en tant que partenaire Shopify, tant que personne qui développe des thèmes Shopify ou travaille avec des clients Shopify, vous créerez un magasin, y travaillerez, le développerez, puis le transmettrez au client plus tard, puis cela devient leur magasin, à ce moment-là le client ou le vendeur, qui qu'il soit propriétaire de ce magasin, va payer pour que ce magasin aille de l'avant. C' est une façon de développer des magasins sans avoir encore de compte Shopify ou de plan Shopify. C' est parfait pour nos besoins parce que nous apprenons à développer des thèmes. Nous ne voulons pas nécessairement payer les 30-300 $ par mois à Shopify pour jouer et développer des thèmes. J' ai déjà un compte partenaire Shopify. Tout ce que j'ai à faire est de cliquer sur Connexion. Je ne vais pas passer par tout le processus d'inscription, devrait être assez simple en ce moment parce que je suis un affilié, ça ira dans mes magasins référencés. Mais si je clique sur le dessus ici à Development Stores, vous pouvez voir que nous avons un bouton ici pour créer un nouveau magasin. Je vais cliquer dessus et je vais donner un nom au magasin, Chris Skillshare. Je vais créer un mot de passe en utilisant mon gestionnaire de mots de passe. Celui-ci va faire, le mettre ici, et s' assurer que vous sauvegardez ce mot de passe quelque part. Cela va nécessiter les détails de votre magasin, donc je vais mettre quelques faux détails ici, et je vais choisir un but de magasin. On peut choisir de jouer. Je vais cliquer sur Enregistrer et dès que je clique sur Enregistrer, je vais devoir enregistrer ce mot de passe, bien sûr. Je vais créer un nouveau document n'importe où, vous pouvez l'écrire de toute façon, et je vais noter ce mot de passe, Shopify Store, mot de passe. Regarde comme c'était rapide. Nous avons déjà un magasin, et ce magasin est libre d'utiliser. Nous n'avions pas besoin de créer un plan ou quoi que ce soit. Évidemment, si nous voulions que ce magasin soit légitime, nous devrons payer pour un plan et ensuite probablement obtenir notre propre domaine. Mais maintenant, nous pouvons travailler avec un thème pleinement fonctionnel et apprendre tout ce que nous devons savoir sur le développement du thème Shopify dans cet environnement. À ce stade, si vous aviez déjà un magasin, est à quoi cela devrait ressembler lorsque vous vous êtes connecté à votre magasin. Nous devrions tous être sur la même page en ce moment. Pour nous familiariser avec la plateforme Shopify, je vais vous parler de ces éléments de menu et ce que vous pouvez faire dans Shopify dans une vidéo ultérieure. Mais pour l'instant, l'accent est mis sur les thèmes. Nous pouvons trouver nos thèmes en cliquant sur Boutique en ligne et en allant dans le premier menu intitulé Thèmes, qui est automatiquement sélectionné. Si nous voulons voir notre boutique, nous pouvons cliquer sur Afficher votre boutique ici. Il viendra avec les noms de nos magasins séparés par hyphens.myshopify.com. Comme vous pouvez le voir, nous avons tout de suite un thème pleinement fonctionnel. Ce que Shopify a fait, c'est qu'ils ont chargé dans un thème gratuit pour nous à utiliser. Celui-ci est le thème Début, mais ce ne sera pas nécessairement le cas pour vous. Ceci est sujet à changement, mais peu importe le point de départ avec lequel vous commencez. Tout ce que nous apprendrons à partir de ce point sera le même. Actuellement, vous pouvez voir que nous exécutons le thème Début, et ici nous avons des actions, afin que nous puissions prévisualiser le thème. Nous pouvons renommer le thème, dupliquer, télécharger le thème entier. Nous pouvons éditer le code, et nous pouvons éditer le fichier de langue. Nous pouvons également cliquer ici pour personnaliser et cela nous donne une interface utilisateur que nous pouvons changer les choses sur un site Web sans creuser dans aucun code. C'est vraiment cool. cadre de notre développement de thème, nous allons vous montrer comment créer vos propres options de personnalisation, ce qui est vraiment simple et l'une des grandes choses de Shopify. Nous allons commencer à personnaliser dans une seconde, et je vais vous le montrer. Mais avant d'entrer dans ce domaine, je voulais rapidement couvrir quelque chose qui pourrait vous entraîner et c'est dans vos préférences, vous aurez la protection par mot de passe activée par défaut. Cela signifie que si vous voulez partager le magasin avec quelqu'un d'autre à regarder, ils auront besoin de ce mot de passe. Ce sera l'écran de connexion qui s'affiche et ils devront mettre ce mot de passe pour le voir. Si vous êtes d'accord avec les personnes qui le voient, vous pouvez désactiver la protection par mot de passe. Pour nos besoins, je ne pense pas que nous ayons vraiment besoin de protection par mot de passe, mais elle est là si vous voulez, et elle est activée par défaut. Revenons dans notre section thème et cliquez sur Personnaliser, et je peux vous montrer les options de personnalisation super puissantes dans Shopify. Par défaut, vous personnaliserez la page d'accueil de votre thème, mais vous pouvez cliquer sur cette liste et elle vous donne tous les différents modèles que vous pouvez modifier en fonction du thème que vous utilisez ou du nombre de modèles que vous avez configurés dans votre thème. Cette liste peut être longue, mais pour notre thème de départ, thème Début, c'est tout ce qui est disponible. Pour attirer votre attention sur la gauche, avec le premier onglet sélectionné, nous avons accès à toutes les sections de notre page. Les sections d'en-tête et de pied de page qui sont incluses avec chaque page, donc si je vais dans, disons, Pages de collection, vous verrez l'en-tête et le pied de page sont là aussi. Cela reste standard sur toutes les pages tant qu'il est configuré dans le fichier de thème. Nous allons entrer dans cela, la structure réelle du code dans une vidéo ultérieure, mais voici la représentation visuelle. Si je clique sur l'une de ces sections, j'ai des options personnalisables. Je peux ajouter une image de logo au lieu du nom du magasin. Je peux personnaliser le menu, et tout cela est réglé à partir du code, vous avez accès à ces options de personnalisation, ce qui est vraiment cool. Évidemment, le pied de page est la même chose, mais en bas de la page et ici vous pouvez voir ce qu'on appelle des blocs. Nous allons apprendre à utiliser des blocs dans une vidéo ultérieure, mais essentiellement, nous pouvons ajouter un bloc supplémentaire ici. Je ne sais pas si ça va se mettre à jour tout de suite. Oui, des liens rapides sont là. Si nous supprimons ce contenu, vous verrez que nous avons moins de colonnes ici. Nous pouvons en fait passer, ajouter et supprimer différents bits de contenu. Nous pouvons supprimer la newsletter et maintenant nous avons deux blocs et ils remplissent automatiquement l'espace uniformément, ce qui est vraiment cool. Je vais recharger parce que je ne veux pas que ce changement sauve, et ensuite nous parlerons des sections entre l'en-tête et le pied de page. Maintenant, cette partie ici de nos sections personnalisateur va être différente dans différentes pages. Si nous allons à Pages de collection ou Liste de collections ou à l'une de ces sections, vous verrez qu'il y a une seule section et que nous ne pouvons pas ajouter ou supprimer cette section de la page. C' est parce que cette section est codée en dur dans la page et nous le verrons plus tard lorsque nous examinerons le code. La différence entre à peu près toutes les autres pages de votre site Shopify par rapport à la page d'accueil est que nous avons ce contenu pour la section d'index. Je ne devrais pas utiliser la section des mots parce que je vais vous confondre. Mais nous avons cette partie de la barre latérale des sections que nous pouvons ajouter une section à travers ces différents presets. Disons que nous voulions ajouter une carte. Si cette section est configurée dans notre code, alors nous pouvons l'ajouter et nous avons toutes ces options de personnalisation. On peut réorganiser les sections, pour que je puisse mettre la carte en haut au cas où je veux que ça soit important. Je peux montrer et cacher la section et ensuite je peux la supprimer. Fondamentalement sur la page d'accueil, comment il est configuré est que vous avez votre en-tête, vous avez votre pied de page, puis vous avez une liste de sections qui s'empilent unes sur les autres que vous pouvez personnaliser. Essayons un exemple plus pratique, il n'y a pas de page À propos, mais disons que vous êtes sur une page À propos et que vous vouliez mettre cette carte dans. Vous pouvez certainement insérer cette section, mais vous le feriez à partir du code. Je vous montrerai comment le faire une fois qu'on aura creusé notre code de thème. Je suis un peu inquiet parce que cette vidéo est probablement un peu longue. Mais pour couvrir l'autre onglet, il s'agit de vos paramètres de thème, et nous pouvons également modifier les paramètres qui apparaissent dans cette section ainsi que par le biais de notre code de thème. Mais ces paramètres de couverture qui vont être utilisés dans tout le site Web, donc les en-têtes et les liens, les textes de corps , le prix de vente, quelle couleur des boutons vont être. C' est des choses à l'échelle du site, donc nous pouvons mettre ce que nous voulons ici à travers notre propre développement de thème, mais nous avons quelques options standard ici, et cela affectera tout le côté. Nous avons l'onglet Sections, l'onglet Paramètres du thème. Nous avons ce sélecteur ici pour sélectionner différentes pages à personnaliser. Ici, nous pouvons voir notre site Web sur différentes tailles d'écran. Si nous voulons le voir complètement étendu, nous pouvons cliquer sur ce bouton et il va étendre toute la largeur de l'écran. Le seul problème avec celui-ci est que vous n'avez pas accès à votre personnaliseur. Alternativement, vous pouvez cliquer sur celui-ci et vous pouvez voir à quoi ressemble votre site Web sur mobile. Vous pouvez avoir différentes options de personnalisation pour mobile ou pour ordinateur de bureau Vous pouvez donc les prévisualiser ou voir l'apparence de votre site Web sur mobile. Beaucoup de magasins en ligne, le trafic est plus de 50 pour cent mobile, il est donc très important d'avoir un oeil à cet onglet. Ensuite, lorsque vous avez terminé la personnalisation, vous voudrez cliquer sur Enregistrer. Encore une chose que je n'ai pas couverte, les actions thématiques. C' est le même menu que ce que vous aviez. Si nous revenons là où nous étions auparavant, ce thème actions est le même, ou peut-être un peu moins d'options, mais c'est essentiellement le même que les actions ici. Nous allons cliquer sur Actions probablement dans la vidéo suivante, mais je voulais vous montrer le personnalisateur. Si nous cliquons sur Enregistrer, ces modifications seront en ligne sur ce thème. Mais je ne veux pas faire de changements, donc je vais cliquer sur Recharger et ensuite nous sommes tous au même point de départ. Essentiellement, c'est l'interface utilisateur que vous devez interagir avec votre thème. Maintenant, ce que nous allons faire est de creuser dans le code de votre thème. En combinaison avec ce que vous faites dans votre code et ce que vous faites dans votre personnalisateur, vous avez pratiquement un contrôle total sur l'ensemble de votre thème, votre look et la sensation de votre boutique en ligne. Nous avons passé en revue le personnalisateur dans cette leçon. Plongons dans le code dans les prochaines vidéos. 4. Introduction à la boutique en ligne 2.0: Dans la vidéo précédente, j'ai mentionné que c'est seulement la page d'accueil sur laquelle vous pouvez personnaliser et réorganiser les sections. Ce n'est plus le cas avec les mises à jour de la boutique en ligne 2.0 de Shopify. Vous remarquerez peut-être que mon apparition dans sa vidéo est très différente de l'intro, et c'est parce que cette vidéo, ainsi que quelques autres dispersées dans toute la classe, ont été enregistrées quelques années après la première publication de ce cours. Cela dit, ces vidéos devraient s'intégrer de façon assez transparente dans la structure de la classe et fournir un bon complément aux vidéos existantes. Quelque chose que vous avez peut-être remarqué est que le personnalisateur de thème, maintenant appelé l'éditeur de thème dans la plupart des vidéos de cette classe, sera très différent du vôtre. Si vous regardez cette classe en 2021, par exemple, vous remarquerez que les blocs apparaissent maintenant dans cette arborescence, alors que dans la plupart des vidéos de cette classe, ils apparaîtront comme ceci. Il est important de noter que Shopify change constamment interface utilisateur du personnalisateur de thème, et il n'est pas nécessaire de s'inquiéter immédiatement car les fondamentaux fondamentaux des sections et des blocs sont restés les mêmes au fil du temps. Le grand changement dont les développeurs de thèmes doivent être conscients est quelque chose appelé « templates JSON ». Nous allons approfondir les modèles JSON plus tard dans cette classe, mais pour l'instant comprendre que les modèles peuvent être de deux types, Liquid ou JSON. Cela prend un peu d'avance sur nous-mêmes ici, mais il est important de noter que si vous choisissez d'utiliser des modèles JSON sur des modèles Liquid, vous ne pourrez pas utiliser Themekit, ce que je vais vous montrer dans la prochaine vidéo. Au lieu de cela, vous pouvez utiliser quelque chose appelé Shopify CLI, que je vais utiliser dans la vidéo directement après. Je pense que c'est une bonne idée de savoir comment utiliser Themekit. Si vous travaillez sur des thèmes modernes, ce sont les thèmes créés après le 29 juin 2021, vous pouvez ignorer la vidéo suivante. 5. Configuration de Themekit: Dans cette vidéo, nous allons mettre en place quelque chose appelé Theme Kit afin de développer et d'éditer notre code sur notre propre ordinateur. Si vous avez fait un développement web dans le passé, vous comprenez que l'édition à partir d'un navigateur Web en ligne comme une interface comme nous avons ici, ne sera pas une bonne pratique. Nous pouvons bien sûr, si nous voulions apporter des modifications à notre thème, y aller alors nous avons accès à tous les fichiers thématiques de notre thème et nous pouvons changer les choses. Mais c'est beaucoup plus propre et beaucoup meilleur flux de travail généralement de se développer localement. C' est pourquoi nous allons utiliser Theme Kit. Pour vous avertir à l'avance, Theme Kit nécessite un peu de configuration. Je sais que la configuration est ma partie la moins préférée du développement web. Je suis sûr que vous n'aimez pas ça non plus. Mais juste pour que vous sachiez, c'est une leçon ici sur la mise en place Theme Kit et ensuite nous serons directement dans le développement et la modification de notre boutique en ligne. Pour en savoir plus sur Theme Kit et ce qu'il est, je vais juste taper Shopify Theme Kit dans Google. Le premier résultat si vous avez formulé votre requête correctement, est celui-ci juste ici.Cela nous dira en un mot ce que Theme Kit fait. C' est un outil en ligne de commande pour les thèmes Shopify. Nous venons de télécharger l'application et avec un petit peu de configuration, vous êtes parti pour les courses de création de thème. Juste pour donner un peu de contexte et expliquer pourquoi nous avons besoin d'un outil comme Theme Kit et ce qu'il fait. Essentiellement, nous utilisons un système propriétaire tiers avec Shopify. Lorsque vous développez d'autres applications et sites Web, vous pouvez faire tourner votre propre serveur sur votre propre ordinateur. Ensuite, vous avez votre code en cours d'exécution sur ce serveur et vous pouvez le modifier directement à partir de votre ordinateur. L' endroit où votre code est servi et l'endroit où vous modifiez votre code sont les mêmes. Avec Shopify, vous ne pouvez pas le faire exactement parce que vous ne pouvez pas exécuter un magasin Shopify sur votre propre ordinateur, et par conséquent, vous ne pouvez pas exécuter un thème Shopify sur votre propre ordinateur. Comment ça marche, c'est que nous allons interagir avec le code que je viens de vous montrer dans notre thème Shopify. Afin de voir toutes les modifications que nous apportons au code, nous devons réellement exécuter le thème sur serveurs Skillshare et le voir comme nous l'avons fait au préalable. Dans cet esprit, avant de commencer à jouer avec votre thème et à apporter des modifications à votre code, ce qui pourrait casser votre site Web, vous voudrez le faire dans un thème différent de ce que vous exécutez actuellement. Si vous êtes familier avec la mise en scène et le développement Web, c'est essentiellement ainsi que vous pouvez mettre en scène vos changements avec le développement de thèmes. Ce que je vais faire est au lieu d'éditer ce thème qui est actuellement en direct sur le site, je sais que c'est juste pour la pratique et nous l'utilisons juste pour la pratique et personne ne va voir ce site. Mais disons, par exemple, que vous vouliez éditer un thème qui était déjà en direct. Vous ne voulez pas modifier le code qui est déjà en cours d'exécution, le code de thème qui est déjà en cours d'exécution sur votre site Web. Peut-être que les gens naviguent déjà sur votre site et font des achats. Vous souhaitez créer ces modifications sur un thème distinct, puis les déplacer lorsque vous en avez confiance. La façon dont nous allons le faire, est tout ce que vous devez faire est de cliquer dans les actions, puis de cliquer sur en double. Maintenant, ce qui va se passer, c'est qu'il va créer un thème et il va par défaut copier, le nom du thème. Mais comme ça tourne, on peut le renommer. Je vais appeler ça Skillshare Dev Theme. Je vais renommer ça. Pour voir à quoi ressemblerait notre site Web ou à quoi ressemblerait notre boutique avec ce thème, nous cliquons sur des actions, aperçu, au lieu de voir. Ensuite, quand nous le regardons, l'URL sera la même, ce qui est déroutant. Mais ici, nous savons que nous avons un aperçu notre thème de développement Skillshare parce que nous avons cette barre ici. Donc, si vous voulez partager cet aperçu avec quelqu'un, vous pouvez réellement cliquer, partager l'aperçu et vous obtenez ce lien à partager avec n'importe qui pour les 14 prochains jours. Vous pouvez également masquer la barre, ce que je ne recommande pas sauf si vous le devez parce que, vous ne voulez pas vous confondre sur le thème que vous modifiez actuellement. Vous pouvez également cliquer sur Fermer l'aperçu, ce qui vous ramènera à votre magasin actuel qui exécute le thème en direct. Parce que nous venons de dupliquer le thème et que nous n'avons pas apporté de modifications, il va être exactement le même. Donc, pour revenir à Theme Kit, ce que nous allons faire est d'abord l'installer et ensuite nous allons configurer Theme Kit pour que nous interagissions avec ce thème particulier. Ensuite, nous allons télécharger notre thème sur notre ordinateur et ensuite nous pouvons commencer à l'éditer. Donc, les choses que nous allons avoir besoin pour l'installer sont probablement un gestionnaire de paquets. J' utilise Homebrew sur macOS. Vous utilisez peut-être Windows dans lequel ils recommandent Chocolatey. J' ai déjà installé le Theme Kit, donc je ne vais pas passer par l'installation moi-même. Espérons qu'en passant par ces instructions, vous pouvez comprendre comment installer Theme Kit, mais il devrait être assez simple. J' ai juste exécuté ces commandes et ça a fonctionné pour moi. Maintenant, j'ai Theme Kit installé sur mon ordinateur. Si nous allons dans les commandes, nous pouvons voir la commande configure. En ce moment, si on ouvre notre Terminal. Donc, c'est Terminal sur Mac et Command Invite, je crois sur Windows. Mais essentiellement quel que soit votre outil de ligne de commande, mien est en fait iTerm pas Terminal, mais c'est tout de même. Je vais naviguer vers le répertoire dans lequel je veux que mon thème aille. Je vais faire du code. Je crois que je l'ai en courant personnel. Maintenant, nous sommes dans ce sous-répertoire de mon dossier de code où je mets mes projets actuels personnels. Ce que nous devons faire à partir d'ici est de mettre en place un fichier appelé config.yml avec ces détails afin de dire Theme Kit quel thème nous voulons réellement modifier parce que nous venons de le télécharger. Il ne sait pas encore se connecter avec ce thème. C' est pourquoi nous devons le configurer. Vous verrez ici, nous avons besoin d'un mot de passe, nous avons besoin d'un identifiant de thème, et nous avons besoin de l'URL du magasin. Donc, le premier, votre mot de passe API. Il peut être un peu difficile de se débrouiller en tant que non-développeur, mais essentiellement une API signifie une interface de programmation d'applications. Surtout avec quelque chose comme Skillshare, qui est un système propriétaire tiers, nous allons avoir besoin d'accéder à l'API afin de changer quoi que ce soit sur notre boutique. instant, nous n'avons accès qu'à ce qui se trouve dans ce menu pour éditer notre boutique. Nous n'avons accès qu'aux options que Skillshare nous offre via cette interface utilisateur, via ce tableau de bord back-end. Mais pour apporter des changements en dehors de cela, cela doit être fait via une application. Donc, si je clique sur les applications ici, il y a différents types d'applications. L' un d'eux est une application publique. Tout le monde peut créer une application et la rendre disponible à l'achat ou à l'utilisation sur l'App Store. Vous pouvez voir quelques uns des plus populaires ici. Ceux-ci accèdent à l'API Shopify et peuvent apporter des modifications à votre boutique. Pour nous, nous voulons juste changer notre thème. Nous avons donc besoin de mettre en place une application très basique, qui nous donne simplement la possibilité d'éditer nos fichiers de thème. Si je descends ici et trouve ce lien caché en dessous de ceux, appelé gérer des applications privées, je peux me diriger dans cette interface qui nous permet de créer notre propre application privée. Vous pouvez penser à cette application privée comme l'interface pour nous puissions interagir avec notre code thématique sur notre propre ordinateur. Je vais appeler cela un nom descriptif, connexion Theme Kit parce que c'est vraiment tout ce que nous l'utilisons pour. Je dois mettre un email de développeur d'urgence, même si nous sommes juste en train de jouer. Il ne me laissera pas soumettre le formulaire autrement, et nous devons donner accès à cette application pour permettre l' édition des modèles de thème et des ressources de thème. Sinon, cette application va nous être inutile si nous ne pouvons pas modifier ces modèles de thème. Si je clique sur enregistrer, je verrai ici qu'il m' avertit que si je crée ces informations d'identification d'API, quiconque a ces détails peut entrer et lire et écrire du code de thème. C' est cool. Je comprends. Créez l'application et maintenant nous avons le mot de passe. Les autres détails seront votre identifiant de thème et votre boutique. Le magasin est très simple. C' est juste lorsque vous cliquez sur Afficher le magasin, c'est le nom de celui-ci juste là. L' ID du thème peut facilement être trouvé en allant dans le personnalisateur. Revenons aux thèmes, j'ai trop d'onglets ouverts ici. Rappelez-vous que nous voulons éditer ce thème, pas le thème en direct en ce moment. Donc, nous voulons aller ici et nous voulons cliquer ici et cliquer sur personnaliser. Dans le personnalisateur, vous pouvez voir ce numéro caché dans l'URL, et c'est celui que nous voulons utiliser pour notre identifiant de thème. Comme je l'ai déjà dit, vous pouvez soit créer vous-même ce fichier config.yml ou vous pouvez utiliser cette commande ligne de commande afin de créer automatiquement ce fichier pour vous, compte tenu des détails. C' est à vous de décider comment vous voulez le faire. Je vais utiliser la commande elle-même. Maintenant que je suis dans le répertoire où je veux que mon projet aille, je peux exécuter cette commande. Juste pour vous montrer, nous avons un répertoire vide. Ce répertoire actuel est complètement vide. Une fois que nous exécutons cette commande, il va créer un nouveau fichier pour nous. Je vais te montrer ça dans une seconde. Passons à travers, configuration du thème, passe de tiret est égal. Ensuite, nous allons dans notre application privée, trouver le mot de passe, nous pouvons simplement cliquer copier ici. Collez ça. La variable suivante va être stockée. Vous pouvez cliquer ici, saisir cette adresse de magasin. Le dernier est l'identifiant du thème. Comme je vous l'ai montré dans le personnalisateur, nous pouvons simplement le copier à partir de l'URL. Vérifions notre code pour nous assurer que nous avons tout configuré correctement. Ouais, ça a l'air bien. Maintenant, je vais appuyer sur « Entrée ». Dans quelques secondes, il devrait revenir sans erreur. Si nous regardons notre répertoire, nous verrons que le fichier config.yml est là. Si je l'ouvre avec mon éditeur de code, je pourrai voir le fichier dont nous avons parlé ici est juste là. Maintenant, si j'exécute des commandes Theme Kit dans ce répertoire, il sait à quel thème je veux me connecter. La prochaine étape consiste à télécharger notre thème. C' est vraiment simple. La commande pour cela est le téléchargement de thème. Comme ça marche, je vais te le montrer ici. Dans la documentation, vous pouvez exécuter le téléchargement de thème, puis vous pouvez spécifier des fichiers spécifiques après cela, ou simplement exécuter le téléchargement de thème et il téléchargera l'intégralité du thème. Ici vous pouvez voir qu'il est en train de télécharger maintenant et c'est à 28 pour cent. Allons juste sauter jusqu'à ce que ça finisse. Ça a fini sans erreur. Si nous vérifions le répertoire maintenant, nous pouvons voir les dossiers que nous avons vus. Si je reviens, sur lequel dois-je cliquer ? Il y a tellement de liens différents ici. En fait, nous n'avons plus besoin du mot de passe de l'application privée, donc je peux utiliser cet onglet. Retournez en arrière, cliquez sur « Modifier le code ». Vous pouvez voir que nous avons la même structure. Si je déplace cela sur le côté, vous pouvez voir que nous avons le dossier assets ici, config, locales, sections, tout ce qui était dans le code de thème de développement Skillshare est maintenant ici dans notre répertoire. Une chose que Shopify Theme Kit ne fait pas est de tout mettre dans un nouveau dossier. Je vais appeler ce skillshare-theme, et je vais devoir aller dans mon éditeur de code ici et changer de répertoires dans ce skillshare-theme. Très bien, je devrais aussi mentionner qu'il y a une autre option appelée thème nouveau. Vous pouvez créer un nouveau thème. Au lieu de mettre un identifiant de thème, vous venez de mettre un nom de ce que vous voulez que ce thème soit, et il le créera pour vous. Si vous faites cela, il vous mettra en place un thème de départ qui n'a pas toutes les fonctionnalités de Debut. Je vous recommande de dupliquer le thème qu'il vous donne, puis de modifier celui-ci, plutôt que de commencer un nouveau thème à partir de zéro. C' est ma recommandation. Dans la vidéo ultérieure, nous allons couvrir Slate, ce qui est encore plus complexe que ça. Si vous vouliez réellement construire votre propre thème à partir de zéro, restez certainement autour de la fin de cette classe. Il va y avoir une vidéo bonus sur Slate. Si vous voulez aller au processus complet de développement de vos propres thèmes Shopify, restez certainement autour de cette leçon. Pour ce cours de Skillshare, je voulais vous montrer comment vous lancer le plus rapidement possible. Je ne pense pas qu'il soit nécessaire de tout redessiner, de tout reconstruire à partir de zéro, c'est pourquoi nous utilisons Debut comme point de départ. Comme je vous l'ai montré juste avant, nous avons notre code de thème ici sur notre ordinateur local, et nous pouvons les modifier à notre guise. Ce que je vais faire pour cela est exécuter atom dot, mais cette commande dépend complètement du logiciel que vous exécutez. J' utilise atome, donc je peux juste sélectionner un point atome. Maintenant, j'ai accès à tout le projet. Je peux y aller, cliquer sur différents modèles, et les modifier. Je peux y aller, faire les changements que je veux, mais bien sûr, je vais vouloir voir ce que cela fait à mon thème réel. La dernière chose que je vais vouloir faire est d'exécuter la montre de thème, sorte que chaque fois que j'apporte des modifications à mes fichiers de thème locaux, il va mettre à jour mon thème réel, puis je peux le regarder dans le navigateur et voir quels changements ont été faits. Pour ce faire, tout ce que j'ai à faire est d'exécuter une commande simple, la montre à thème. Comme vous le verrez en une seconde, le dit maintenant, regardant les changements de fichier sur le thème, puis il a l'identifiant là. Faisons simplement un changement simple pour montrer comment cela fonctionne. Je ne m'attends pas à ce que vous sachiez comment naviguer autour des modèles de thème tout de suite car je vais vous le montrer dans une vidéo ultérieure. Mais disons simplement que nous voulons nous débarrasser de ces icônes dans l'en-tête. Vous pouvez aller dans le modèle header.Liquid dans les sections et rechercher cette partie particulière de l'en-tête. On dirait qu'il est juste là. Je vais trouver la balise div d'ouverture et de fermeture et juste supprimer tout cela ensemble. Je vais frapper sur ça. Si nous passons à notre terminal, vous verrez qu'il a commencé à traiter cet en-tête, puis il l'a mis à jour sur notre thème en direct. Si vous ne l'avez pas déjà, vous devez aller dans votre thème sur lequel vous travaillez et cliquer sur Aperçu. Je l'ai ici, et vous pouvez voir que je suis certainement en train de prévisualiser ce thème SkillShare Dev juste ici. Si je rafraîchis la page, nos icônes auraient dû disparaître. Voilà, il n'y a pas d'icônes. Évidemment, c'est un changement que vous ne voudriez probablement pas faire. Nous pouvons revenir en arrière et contrôler Z pour le remettre, puis ces changements vont se mettre à jour assez rapidement. Je suis impressionné par la rapidité avec laquelle Shopify fait ça. Ça ne ralentit pas trop le développement, mais voilà, ils sont de retour maintenant. Maintenant, vous pouvez voir que nous sommes en mesure de modifier le code sur notre ordinateur local, et il est en train de se mettre à jour sur notre thème. C' est le flux de travail. Nous avons notre thème de développement en cours d'exécution, qui est juste un mot fantaisie pour un thème qui n'est pas le thème actuel parce que nous ne voudrions pas modifier le thème actuel s'il s'agit d'un magasin en direct. Nous exécutons notre aperçu, puis nous avons la montre à thème en cours d'exécution, et nous modifions simplement le code et faisons ce que nous voulons. Nous avons un environnement essentiellement mis en place. Maintenant, une dernière remarque avant de passer à la vidéo suivante est que vous aurez toujours accès à entrer ici, et modifier votre code à partir du site Web Shopify. Je recommande contre cela car cela créerait des écarts entre le code que vous avez sur votre ordinateur et le code sur votre thème réel. Vous pouvez entrer et modifier ceci, mais il ne sera pas mis à jour dans vos fichiers locaux sauf si vous exécutez le téléchargement de thème. Pour être clair, ce processus de montre à thème ne se passe qu'une seule façon. Ce n'est que lorsque vous modifiez vos fichiers localement, mais si vous les modifiez sur votre site Web Shopify, il ne sera pas transmis à votre ordinateur local. Je choisirais où vous voulez éditer votre code et m'en tenir. Si vous allez l'éditer sur votre propre ordinateur, ce que je recommande fortement, ne l'éditez pas ici. Si vous le faites, sachez simplement que vous devrez le mettre à jour sur votre propre ordinateur. Maintenant, nous avons notre configuration d'environnement, et nous avons tous les outils dont nous avons besoin pour modifier notre site Web Shopify et personnaliser notre propre thème. Dans la prochaine vidéo, on va faire une pause avec le code réel. Parlez de la plate-forme Shopify elle-même parce qu'il est bon d'avoir une certaine connaissance avec cela, puis dans la vidéo après que nous allons réellement entrer et expliquer tout ce code que nous venons de commencer à regarder. Je te vois dans la prochaine vidéo. 6. Nouvelles commandes dans Shopify CLI v3: Bonjour étudiants. Dans cette vidéo, je vais rapidement décrire les changements survenus en 2023. Ce qui s'est passé, c'est que la CLI de Shopify mise à niveau vers une nouvelle version deux, la version trois, ce qui signifie que certaines des commandes de la vidéo suivante vont être légèrement différentes J'ai expliqué comment migrer et les différents types de commandes par rapport à la version 2 sur ma chaîne YouTube. Vous pouvez donc regarder cette vidéo. C'est une bonne idée en général, si vous voulez rester au courant des modifications de Shopify, car la plateforme évolue beaucoup, de consulter ma chaîne YouTube gratuite et vous pouvez voir ce qui en sort Nouveau, Shopify. Je le mets à jour plus fréquemment que je ne crée de cours ici sur Skillshare Vous allez donc voir certaines des nouvelles commandes de la version 3 de la CLI Si, pour une raison quelconque, vous utilisez la version 2 de la CLI, vous pouvez suivre la vidéo suivante normalement Mais certaines de ces commandes seront différentes dans la version 3, qui est la dernière version au moment de l'enregistrement. Je vais donc m'occuper de moi plus tôt dans l' année pour vous parler de ces commandes afin que vous n'ayez pas de problèmes dans la prochaine vidéo, d'accord ? Une critique de l' un d'entre vous m'a fait remarquer que les commandes étaient périmées. Je voulais donc juste ajouter cette vidéo pour m'assurer que vous réalisez qu' il existe une nouvelle version et que quelque chose commande. J'ai changé. Alors regarde d'abord celui-ci. Si vous utilisez la version 3 de la CLI, maintenant que nous sommes tous passés à la version 3, maintenant que nous sommes tous passés à la version 3, l'étape suivante consiste à comprendre les nouvelles commandes Pour récupérer la liste des commandes du thème. Dans la version 3, nous pouvons soit consulter la documentation officielle soit exécuter la commande Shopify theme depuis la CLI elle-même La première chose que vous remarquerez peut-être est qu'il n'existe plus de commande serve. Cette commande était celle que nous utilisions pour exécuter le code de notre thème localement, mais elle a maintenant été remplacée par la commande dev, qui fonctionne presque exactement de la même manière. La grande différence ici est que vous n'avez pas besoin d'exécuter d'abord une commande distincte pour vous connecter à un magasin. Au lieu de cela, vous ajoutez le drapeau du magasin à la commande avec l'adresse du magasin auquel vous souhaitez vous connecter en appuyant sur Entrée. Et dès que vous serez authentifié, la CLI, nous commencerons à diffuser le code de ce thème Vous pouvez voir cette différence ainsi que quelques autres documentées ici sur le guide de migration officiel. Et vous pouvez voir la liste complète des commandes ici sur cette page. J'encourage tous ceux qui migrent actuellement à simplement consulter le tableau des modifications du flux de travail figurant dans la documentation Et une fois que vous les aurez internalisés, il devrait être facile de vous adapter aux nouveaux changements 7. Shopify CLI pour le développement de thèmes de boutiques en ligne 2.0: Dans la vidéo précédente, nous avons appris à configurer Theme Kit. Mais malheureusement, Theme Kit n'est pas compatible avec le nouveau système de templation JSON présent dans les thèmes modernes. Pour vérifier si votre thème utilise des modèles JSON, vous pouvez vous diriger vers la section thème de votre administrateur Shopify et cliquer sur « Modifier le code » sur le thème que vous souhaitez inspecter. Ensuite, regardez simplement dans le répertoire templates et voyez si vos templates ont .json à la fin d'eux ou .liquid. Ils peuvent être quelques-uns ici qui ont .liquid sur eux dans la section client et peut-être le modèle de carte-cadeau. Mais si vos principaux ont article.json, cart.json, index.json, pageproduct.json, si ceux-ci sont tous .json, alors vous travaillez avec un thème qui utilise des modèles JSON. Dans ce cas, vous voudrez utiliser l'interface de ligne de commande Shopify au lieu de Theme Kit. Voici comment on fait ça. Ce que je vais faire, c'est retourner à la section thématique ici, et je vais ouvrir l'article officiel sur la façon d'utiliser Shopify CLI pour les thèmes. Je vais taper cela littéralement dans Google Shopify CLI pour les thèmes. Vous devriez trouver cet article arrive vers le haut. Cliquez sur celui-ci sur le site officiel du développeur Shopify. Ici vous pouvez lire tout sur Shopify CLI pour les thèmes. Shopify CLI existe depuis un certain temps, mais seulement récemment au moment de l'enregistrement permet également le développement de thèmes. Comme vous pouvez le voir ici, Shopify CLI remplace Theme Kit pour la plupart des tâches de développement de thème. Vous devez utiliser l'interface de ligne de commande Shopify si vous travaillez sur des thèmes Boutique en ligne 2.0. C' est essentiellement des thèmes avec des modèles JSON. Allons vers le bas et regardons comment nous installons Shopify CLI. Je vais juste ouvrir ça dans un nouvel onglet pour garder celui-ci ouvert. Ici vous pouvez voir le guide pour l'installer. Nous n'entrerons pas dans l'installation dans cette vidéo. Voici les instructions ici, selon que vous êtes sur un ordinateur Windows, Mac ou Linux, assurez-vous que Ruby 2.7 ou version ultérieure est installé sur votre ordinateur. Comment vous vérifiez que c'est d'ouvrir le terminal. Pour la plupart des utilisateurs, vous allez utiliser l'application Terminal. Mais j'ai quelque chose appelé Item, qui est mon application terminal. Je vais exécuter la commande ruby-v pour comprendre ma version. Comme vous pouvez le voir ici, je cours Ruby 3.0.2, ce qui est supérieur à 2.7, donc nous sommes bons. Ici vous pouvez voir les instructions sur Mac. J' ai installé Homebrew, donc je viens de passer par ces instructions d'installation et c'était assez facile. Je vais vous donner une seconde pour l'installer, si vous ne l'avez pas déjà fait. Mettez en pause cette vidéo et revenez à elle lorsque vous avez terminé l'installation. Pour vérifier que vous avez installé, vous suffit de taper la version de Shopify et vous devriez récupérer un numéro de version si vous avez installé l'interface de ligne de commande avec succès. Maintenant que nous avons installé l'interface de ligne de commande, fermez cette fenêtre et revenez à notre guide de démarrage. Je vais faire défiler ici jusqu'aux références de commande, comment fonctionne l'interface de ligne de commande Shopify. C' est un peu différent de Shopify Theme Kit dans le sens où Theme kit, vous avez ce fichier de configuration, le config.yamlfile. Vous transmettez dans ce fichier un mot de passe, un ID de thème et le magasin auquel vous souhaitez vous connecter et comment il s'authentifie est via une application privée, où vous placez ce mot de passe de l'application privée dans ce fichier config.yaml. Vous auriez vu tout ça dans la vidéo précédente donc si vous ne savez pas de quoi je parle, revenez à celle-ci. Mais la façon dont Shopify CLI le fait est qu'ils s'authentifient au début. Une fois que vous êtes authentifié, vous pouvez commencer à diffuser des thèmes localement. Comment nous faisons cela, je vais d'abord entrer dans la référence de commande de base de la CLI Shopify. Cliquons sur celui-ci et regardons la connexion. connexion vous authentifie auprès de l'interface de ligne de commande Shopify. C' est la première étape pour faire quoi que ce soit sur Shopify CLI. Une chose importante à noter ici est que vous ne pouvez pas utiliser l'interface avec les magasins de développement si vous n'avez que l'accès des membres du personnel partenaire. Ce que cela signifie, c'est que je vais à partners.shopify, ce que je fais souvent, et que je me connecte à la boutique via mon compte partenaire, donc je vais aller dans les magasins et voir ici, Chris Testing shop. Si je clique sur me connecter via ce lien, je serai connecté via le compte partenaire et je recevrai probablement une erreur lorsque j'essaierai de m'authentifier avec l'interface de ligne de commande Shopify. C' est une chose importante à noter. Si vous travaillez avec un magasin de développement, vous ne pouvez pas utiliser votre identifiant de partenaire. Ce que vous devez vous assurer à la place, si je retourne à mon magasin Shopify ici et que je vais dans mes paramètres, c'est que je suis connecté avec le compte utilisateur administrateur ou magasin. En cliquant sur le plan ici, désolé pas de plan, utilisateurs et les autorisations, vous pouvez voir ici que le propriétaire du magasin est Chris Testing administrateur boutique, et c'est le compte que je suis connecté comme. Cela devrait marcher. En revenant aux thèmes de la boutique en ligne, exécutons la commande de connexion Shopify. Je vais retourner à mon terminal ici, courir clair pour effacer ces commandes précédentes et nous allons lancer Shopify login avec le périmètre du magasin et ensuite nous copions juste l'adresse de mon Shopify du magasin. Je vais aller ici, copier ça. Cliquez sur « Entrée » et il commencera à nous connecter. Maintenant connecté. Habituellement, un onglet séparé est ouvert, je pense que je suis déjà connecté au magasin. Il n'est pas venu avec cet onglet, mais juste pour vous montrer. Donc, si je me déconnecte, Shopify déconnecte, vous pouvez voir que j'ai déconnecté le compte avec succès. Je vais effacer à nouveau et puis exécuter cette commande, Shopify se connecter avec l'adresse du magasin. Appuyez sur cela et vous verrez qu'il ouvre un nouvel onglet pour moi de me connecter. Dans cette liste de comptes ici, je dois choisir celui qui est le propriétaire du magasin, qui je crois est celui-ci et il dit maintenant authentifié avec succès, vous pouvez maintenant fermer cette page. Je vais juste regarder dans mon terminal et vous pouvez voir ici qu'il dit que vous êtes connecté au magasin. Je devrais être prête à y aller maintenant. C' est tout ce dont nous avons vraiment besoin à partir des commandes de base, login, login. Vous pouvez également remplir votre magasin avec des données. Beaucoup de petites fonctionnalités cool de cet outil juste ici. Je vous encourage à consulter la documentation. Mais je vais revenir en arrière et aller dans la référence de commande thème maintenant. Bouton situé sous la référence de commande de base. Allons ici et vous pouvez tout lire sur les différentes commandes. Le premier, le thème Shopify fait essentiellement ce qu'il dit ici clone un dépôt Git votre machine locale et crée également une copie du thème de l'exemple Dawn. Si vous voulez commencer le développement de thème à partir de zéro, c'est une bonne petite commande à utiliser. Mais ce que je vais faire à la place est tout comme nous le ferions dans Theme Kit, je vais me connecter à un thème existant. La façon de le faire est à travers le thème Shopify servir. Mais nous avons besoin du code de ce thème téléchargé sur une machine locale avant de pouvoir le servir. Si je retourne ici, vous pouvez voir même si ce magasin a été créé avant le 29 juin 2021, j'ai installé le thème Dawn. C' est le nouveau thème qui utilise le paradigme de la Boutique en ligne 2.0. Comme nous l'avons vu précédemment, c'est l'un de ces thèmes modernes qui a des fichiers .json dans le dossier templates, comme vous pouvez le voir ici. C' est ce que je vais utiliser comme thème sur lequel je vais travailler avec l'interface de ligne de commande Shopify. Ce que je vais faire est comme nous le faisons avec Theme Kit, je vais trouver l'ID de thème de ce thème, que je peux trouver en allant dans le personnalisateur et en saisissant cette partie de l'URL. J' ai ça dans mon presse-papiers maintenant. Ce que je vais écrire ici est l'une des commandes que vous pouvez voir ici, qui est Shopify thème pull. Pour utiliser cette commande, vous écrivez simplement thème Shopify pull, puis vous mettez dans ce paramètre —themeid, suivi de l'ID du thème. Ce que je vais faire est d'abord de créer un répertoire dans ce répertoire Skillshare. Je peux le faire via la commande sur Mac, MKDIR. C' est la commande pour créer un répertoire. Je vais l'appeler comme le thème, aube main. Maintenant, je dois exécuter le CD de commande dawn-main pour naviguer à l'intérieur de cela. De là, je peux exécuter la commande. Je vais faire Shopify thème pull —themeid égal suivi de l'ID de thème, que je semble avoir perdu ici. Juste aller rapidement saisir à nouveau et appuyez sur « Entrée » sur cela. Vous pouvez voir qu'il tire les fichiers de thème de ce thème particulier. Tirer signifie simplement télécharger. Dans quelques secondes, nous verrons que cela va finir. Je vais avancer rapidement et vous rencontrer à la fin. C' est fini de télécharger maintenant, donc je vais aller dans ce répertoire. Vous verrez dans mon dossier Skillshare ici, il y a un répertoire appelé dawn-main. C' est celui que j'ai créé avec cette commande mkdir dawn-main. À l'intérieur, vous pouvez voir que j'ai tout mon code de thème. Maintenant que nous sommes dans ce dossier, nous pouvons commencer à exécuter la commande Shopify theme servir pour servir ce code de thème localement. Mais avant de le faire, parce que nous allons éditer du code, je vais arrêter d'utiliser iTerm et commencer à exécuter des commandes dans mon application d'éditeur de code. C' est un peu différent, je pense, des vidéos originales de la classe. Mais j'utilise maintenant un outil appelé VS Code fourni par Microsoft. Je vais ouvrir celui-là. Cela aura l'air un peu différent des autres éditeurs de code dans cette classe. Mais quand même, tous les mêmes principes s'appliquent. Nous avons juste ce terminal ici que nous pouvons exécuter dans l'éditeur de code. Je vais effacer ce terminal comme nous l'avons fait sur iTerm et à partir d'ici, ce que je vais faire est d'exécuter la commande Shopify theme serve. Shopify thème servir et pendant que cela se charge, comme vous pouvez le voir ici, je vais aller dans la documentation et parlons de ce que cela fait. Il va télécharger le thème actuel. Où que votre terminal s'exécute, s'il y a du code de thème là-dedans, il va l'exécuter et il va créer un thème de développement. Maintenant, c'est un nouveau concept. Le thème du développement est comme un thème fantôme pseudo. Vous verrez en une seconde qu'il crée un identifiant de thème et nous sommes en mesure de le voir et de modifier le code. Mais vous ne le verrez pas réellement dans la bibliothèque de thèmes de votre boutique Shopify. Tu verras ça dans une seconde. Au lieu de cela, vous obtiendrez un lien vers le thème de développement et un lien vers l'éditeur en ligne comme je viens de le mentionner, ainsi qu'un lien d'aperçu. toutes fins utiles, vous obtenez toutes les mêmes fonctionnalités qu'un thème d'aperçu normal, comme si vous utilisiez et travaillez avec des thèmes sur Theme Kit. Mais celui-ci est généré lorsque vous exécutez le thème Shopify servir et disparaît lorsque vous exécutez la déconnexion Shopify comme il est dit ici. Bien sûr, le code de thème continue de rester sur votre ordinateur et vous pouvez également pousser et publier le code une fois que vous êtes prêt à entrer en ligne. Mais on verra ça dans une seconde. Si je retourne à mon éditeur de code maintenant, vous verrez que le processus est maintenant terminé. Je vais juste ouvrir un terminal pour que tu en vois plus ici. Vous pouvez voir qu'il sert à cette adresse locale que nous pouvons regarder dans le navigateur. Ce qui est intéressant, c'est que vous pouvez voir que nous avons un identifiant de thème. Vous pouvez voir que le lien d'aperçu a cet ID de thème et le lien de l'éditeur de thème a également cet ID. Nous pouvons y aller, nous pouvons personnaliser le thème comme nous le ferions habituellement en utilisant le même éditeur de thème que nous utilisions sur n'importe quel thème, et nous pouvons prévisualiser le thème en utilisant ce lien et le partager avec des gens sur Internet. Si nous partageons ce lien avec eux, ils ne pourront pas le voir car il s'agit d'un lien local. Mais celui-ci est un lien public que nous pouvons partager avec les gens. Comme vous pouvez le voir ici, nous avons ce petit nom de thème étrange, développement suivi d'un petit code. Comme je l'ai déjà mentionné, si nous allons dans notre bibliothèque de thèmes ici, même si nous actualisons la page, le thème n'apparaîtra pas dans notre bibliothèque de thèmes. C' est comme un thème jetable qui a un ID, a un personnalisateur, mais n'est pas stocké sur votre boutique Shopify. Si nous revenons à ce lien de personnalisation de thème, nous pouvons, bien sûr, déplacer quelques trucs ici et éditer ça. Mais ce qui est bizarre dans cet éditeur de thème dans le thème de développement, c'est qu'il ne semble pas que ces modifications soient stockées en dehors de cette session que nous exécutons. Si je passe à mon lien local, vous verrez que le changement se produit. Je parle des changements de l'éditeur de thème ici. Vous verrez que cela se produit, mais lorsque nous poussons nos changements de code de thème vers le magasin plus tard, vous verrez que cela ne va pas réellement pousser vers le magasin. Nous pouvons personnaliser et jouer avec l'éditeur de thème ici, mais cela n'économisera pas une fois que nous pousserons. Soyez très prudent avec cela avec la CLI. Je ne suis pas sûr de ce que la pensée est ici de Shopify, mais je suis allé et je l'ai testé et les données ne changent pas vraiment où elles devraient. Ce ne sont que toutes les données jetées. Je vais fermer ça et je vais fermer ce lien public aussi bien qu'on n'en a plus besoin. Je vais juste rafraîchir notre lien de développement local. Maintenant, la chose cool à propos de Shopify CLI par rapport à Shopify Theme Kit est ce qui se passe avec Theme Kit, c'est qu'il n'exécute pas réellement un serveur du tout. Ce qu'il fait est d'éditer des fichiers directement sur votre boutique Shopify. Ensuite, vous devez, bien sûr, cliquer sur Afficher ou Aperçu sur ce thème afin de voir ces modifications et tout est servi via la boutique Shopify. Shopify CLI change cela maintenant parce que nous pouvons servir ce thème localement et ce que cela signifie est qu'il est mis à jour beaucoup plus rapidement. Laissez-moi vous montrer ce que je veux dire par là, parce que c'est un peu le choix du développeur et pour les débutants là-bas, vous pourriez ne pas comprendre tout à fait de quoi je parle ici. Mais si j'y vais et faisons un montage. Disons qu'on édite cette barre ici. Nous sommes à la recherche d'annoncement-bar__message. Je vais juste utiliser mon éditeur de code pour trouver ce morceau de code. Au lieu de block.settings.text escape, je vais juste mettre dans. Je veux juste te montrer ça côte à côte pour que tu puisses voir ça se passer. Fermez ça, fermez ça. Jetons un coup d'oeil à ce qui se passe lorsque je change ce code. Changons ceci en texte de barre d'annonce, quelque chose de générique comme ça. Je vais frapper Save maintenant et regarder ce qui se passe. Vous verrez que sans que je recharge la page ici, ça change. Il détecte les changements et les met à jour ici sur notre serveur local. Rappelez-vous que ce thème n'existe pas dans notre bibliothèque de thèmes ici. Il existe juste sur notre ordinateur local. Bien sûr, nous avons ces liens ici, nous pouvons partager avec d'autres personnes. Mais nous n'affectons pas réellement le code sur le thème d' un thème qui est stocké dans notre bibliothèque de thèmes ici. Tout cela est juste servi localement. Je dis ça un tas de fois juste pour qu'il s'enfonce. Mais vous verrez avec expérience si cela n'a pas encore tout à fait de sens, ce que cela signifie si vous comparez travailler avec Theme Kit par rapport à Shopify CLI. Je vais faire un autre changement ici. Changons simplement la couleur d'arrière-plan de cette barre d' annonce à quelque chose de aléatoire comme le bleu. Appuyez sur Enregistrer sur ça. Vous verrez que cela se met à jour aussi. C' est un changement assez évident. Ouvrons à nouveau ces en plein écran. Ce que je vais faire, c'est pousser ces changements dans notre boutique Shopify. Retournons à la documentation. Dans nos commandes de thème, vous pouvez voir cette commande ici pour Push. Avant de le faire, cependant, il y a aussi cette commande ici que nous pourrions vouloir exécuter appelée Theme Check. Nous n'avons fait qu'un très petit changement. Mais si nous avons fait beaucoup de changements, peut-être que nous voulons exécuter cette commande qui vérifiera notre thème pour toute erreur. Je vais fermer le serveur parce que nous sommes prêts à faire ce changement en direct. Exécutez la vérification du thème Shopify. Vous verrez ici qu'il y a un tas d'infractions. Une grande partie de cette situation n'est pas particulièrement critique. Évidemment, ces erreurs étaient probablement en cours d'exécution avant même que je fasse ces changements. Je ne suis pas sûr de ce que vous voulez faire avec ça, mais c'est une option. Si vous voulez exécuter Theme Check, je suis sûr qu'il arrive avec des erreurs critiques. Si vous en avez dans votre code, plupart du temps, il est assez clair de voir quand ces erreurs apparaissent dans votre navigateur. Mais ce que je vais faire maintenant, c'est aller pousser et ici vous pouvez voir que nous pouvons télécharger des thèmes locaux sur Shopify, remplaçant le thème distant si spécifié. Nous pouvons mettre un objet d'options ici, ou nous pouvons simplement écrire Shopify. Je pense que je vais recommencer ces code-à-côte, pour que vous puissiez voir. Augmentons la taille de ceci. Je vais faire un thème Shopify, pousser. Ici, si je ne spécifie aucune option, il me demandera réellement où je veux pousser ce code. Je peux le pousser à l'un des thèmes déjà dans ma bibliothèque de thèmes, ce qui est assez cool. Je vais frapper Commande ou Contrôle C pour sortir de cela et ce que je vais faire est de faire Shopify Theme push —unpublished. Cliquez dessus et il va maintenant créer un nouveau thème dans ma bibliothèque de thèmes pour créer une nouvelle version de ce thème avec. Il va pousser le code que j'ai créé mon thème local dans la bibliothèque de thèmes. Je vais l'appeler aube deux, appelons-le comme ça. Maintenant, il va essentiellement déployer ce code un nouveau thème appelé dawn-two dans ma bibliothèque de thèmes sur le magasin auquel nous sommes connectés. Cela prendra un peu de temps à terminer, donc je vous verrai une fois que ça finira. Maintenant, il dit que mon thème a été poussé avec succès et que je peux maintenant le visualiser ou le personnaliser. Mais je peux aussi me rendre dans mon magasin, agrandir mes fenêtres ici et rafraîchir dans le magasin. Vous verrez maintenant que j'ai un nouveau thème appelé aube deux ici. Si je clique sur Aperçu, il a toutes les modifications que nous avons apportées sur le thème de l'aube originale que nous avons fait plus tôt dans cette vidéo. Nous venons essentiellement de créer un nouveau thème de prévisualisation. Dernière étape ici, et ce n'est pas vraiment nécessaire d'utiliser la CLI pour, mais nous pouvons également utiliser la CLI pour publier des thèmes aussi bien. Si je retourne dans mon terminal ici, je vais exécuter Clear, puis exécuter le thème Shopify, publier sans options. Il va me demander lequel des thèmes qui ne sont pas actuellement publiés je veux publier. Je vais sélectionner l'aube deux ici et il m'a demandé, êtes-vous sûr de vouloir faire de l'aube deux votre nouveau thème en direct ? Si j'appuie sur Oui, cela va maintenant terminer ce processus. Si je retourne à la bibliothèque de thèmes et actualise la page, vous verrez que dawn-two est maintenant mon thème en direct, et dawn-main a été renversé à mes thèmes d'aperçu. Voici comment utiliser l'interface de ligne de commande Shopify pour le développement de thèmes. C' est un peu plus compliqué que Theme Kit, je dirais. Mais il a des fonctionnalités plus modernes et il est plus convivial pour les développeurs, alors prenez le temps de vous y habituer. Si vous avez des questions, évidemment, laissez-le dans les commentaires. Mais c'est l'interface de ligne de commande Shopify. Dans les prochaines vidéos, nous allons en apprendre davantage sur un administrateur Shopify basique, puis entrer dans notre structure thématique. Après avoir parlé de notre structure de thème, nous parlerons plus en profondeur de ces nouveaux modèles JSON. Je te vois dans la prochaine vidéo. 8. Organisation des produits, variantes et personnalisation: Avant de plonger dans ce code et d'apprendre comment tout est mis en place, il y a une chose d'autre magasin qui manque, c'est les produits. Une boutique en ligne sans contenu n'est pas très bonne, et le contenu principal que vous auriez sur une boutique en ligne par sa nature est les produits. Ici, vous pouvez voir qu'au moins, Shopify vous donne des détenteurs de places, mais si vous cliquez dessus, ne sont pas des produits réels avec lesquels vous pouvez interagir. Ce dont nous aurons besoin, ce sont des produits. Maintenant, si vous développez votre propre thème Shopify et que vous suivez ce cours pour en savoir plus sur la façon dont vous pouvez personnaliser votre thème. Peut-être que vous avez déjà quelques produits. Peut-être que maintenant est le bon moment pour ajouter des produits dans votre magasin. Mais si vous êtes juste là pour apprendre le développement de thèmes Shopify, et que vous n'avez pas de stockage ou de travail en ce moment, vous aurez besoin de produits de démonstration. Si chanceux pour nous, Shopify propose un petit ensemble de produits de démonstration à travers leur thème bois. Si nous allons chercher Shopify bois ou Shopify thème bois dans Google, ce devrait être le premier lien qui apparaît. Je vais cliquer dessus pour vous donner un peu de contexte, le bois est des archives maintenant il n'est plus utilisé, mais c'était ce qui est maintenant Slate. C' était ce thème de départ fourni par Shopify, maintenant ils utilisent Slate, que maintenant ils utilisent Slate, j'ai mentionné précédemment, mais nous allons entrer plus en détail sur Slate et dans la vidéo plus tard. La raison pour laquelle je vous amène ici au dépôt Git du thème timbre est qu' ils l'ont toujours et qu'ils ont ce fichier CSV pour importer certains produits dans votre site Web. Si nous téléchargeons ce fichier CSV, je l'ai déjà téléchargé là, donc je ne vais pas le télécharger à nouveau, puis nous retournons à notre boutique en ligne. Nous allons dans notre menu de produits et nous cliquons sur Importer, juste en dessous des produits. On peut prendre ce dossier. Cliquez sur Charger, cliquez simplement sur Démarrer l'importation. Cela peut prendre un peu de temps pour exécuter cela, mais quand cela sera fait, vous verrez maintenant des produits importés, et vous avez un tas d'exemples de produits, tous, essentiellement des chaussures. Si nous allons dans l'un de ces éléments, nous pouvons cliquer sur Afficher. Il ouvrira un nouvel onglet dans lequel nous pouvons voir la page du produit avec ce produit particulier chargé dans. Nous avons déjà une page de produit assez agréable parce que nous utilisons un duplicata du premier thème, mais vous pouvez modifier cela autant que vous le souhaitez. Vous pouvez avoir la mise en page différente. C' est à vous de décider, vous avez accès à l'ensemble du code du thème maintenant. Une chose que nous avons est la rupture d'entrée avec la variance. Nous allons devoir revenir ici, et en baisse dans la variance, nous allons juste supprimer toute variance. Lorsque vous exploitez une boutique en ligne, les produits sont au cœur de votre boutique. Cette vidéo va se concentrer principalement sur les produits. Ici, dans la page de vos produits dans l'administrateur Shopify, vous avez la possibilité de dupliquer la vue et la promotion. Vous pouvez modifier le titre, la description. C' est là que vous ajoutez les images de vos produits. Assez simple, assez explicite, mettre votre prix, mais les parties de votre page de produit que je veux entrer et discuter plus dans cette leçon sont la variance et l'organisation, donc le type de produit, le fournisseur, les collections et les tags. Tout d'abord, la variance. Une variante est fondamentalement les différentes variations du produit. Vous commencerez à voir ce que je veux dire par là dans une seconde. Si je clique sur Ajouter une variante, cela me donne la possibilité de définir un nom d'option et une liste de valeurs possibles. Un assez standard est la taille, et il est certainement pertinent pour un produit comme celui-ci, tout le monde ne va pas vouloir la même taille de sneaker. Ce que nous pouvons faire, c'est mettre dans différentes valeurs séparées par une virgule, et vous verrez ce qui se passe quand je mets la virgule. Si j'appuie sur 8, 9, 10, 11, 12, vous pouvez voir que j'ai cette taille d'option et j'ai cinq valeurs possibles. Je dis donc que ces chaussures sont disponibles dans ces cinq tailles. Si vous allez ici, une table de variance a été créée. Parce que je n'ai qu'une seule option, et j'ai cinq valeurs d'option, je reçois juste cinq écarts parce que vous ne pouvez commander la chaussure que dans cinq variantes possibles. Mais si je devais ajouter une autre option, disons pour la couleur. Disons que je peux obtenir toutes les tailles en rouge ou en noir. Puis soudain, ma liste de variance s'élargit et double. C' est parce que nous avons besoin de multiplier le nombre de valeurs dans un champ d'option avec le reste des champs d'option, ce qui vous donnera le nombre total de variations possibles étant donné que nous sommes capables d'avoir le rouge dans neuf, le noir dans huit. Toutes ces différentes options combinées créent une variance différente. Nous pouvons en ajouter un troisième ici, dit matériau par défaut. Je ne sais pas de quel matériau les chaussures sont faites. Allons juste avec un coton de matériau commun. Cela ne va pas augmenter la quantité de variance que nous avons ici parce qu'il n'y a qu'une seule valeur possible, l' encontre du but de l'utilisation de la variance si elle va juste être une valeur, donc nous devons en mettre plus. Disons, Lycra, n'a probablement aucun sens pour les chaussures. Mais je viens juste avec des trucs sur le dessus de ma tête. Trois options sont le maximum dans Shopify. Si j'ajoute plus de valeurs à tous ces, il peut commencer à se multiplier et sortir de la main assez rapidement et en fait Shopify limite à vous trop 100 écart possible sur chaque produit. Cela dépend évidemment si j'ai toutes les combinaisons possibles en stock, et que ce produit disponible, ai-je le coton rouge taille huit baskets et rouge-noir 10 sneakers. C' est à moi de comprendre quelles variables ou quelles variations j'ai dans mon propre magasin, et de les mettre dans. Ce n'est pas pertinent, donc je vais supprimer ça. Avec ces différentes options, il va créer 10 variantes pour nous. Le point que je veux traverser ici, et ce qui m'a fait trébucher, c'est sont les écarts ici. Ce sont vos options. D'accord. Ce sont des écarts, ceux-là. Si je clique sur Enregistrer, vous verrez que nous obtenons cette belle petite table ici et nous pouvons mettre à jour SKU ici ou ajouter des images de variantes pour une variance spécifique. Nous pouvons également filtrer les sélections en cliquant sur une valeur d'option. Allez ici et vérifiez simplement ceux que nous voulons éditer et les éditer en bloc. Mais pour voir à quoi cela ressemble sur le front end, ce que je vais faire, nous avons déjà appuyé sur Enregistrer, donc nous pouvons cliquer sur Afficher, et nous pouvons voir à quoi cela va ressembler pour l'utilisateur. Comme vous pouvez le voir ici sur l'extrémité frontale, l'utilisateur obtient juste deux options, et je le veux en taille neuf, et je les voulais noirs. Ensuite, ils vont ajouter au code. Pour nous, afin de répondre aux besoins du client qui peut avoir ces options, nous allons avoir besoin de toutes ces chaussures en noir et toutes en rouge, donc j'aurai besoin de 10 chaussures différentes au total. Mais pour l'utilisateur, il suffit d'avoir plus d'options de personnalisation. Espérons que cela clarifie la variance et le rend assez clair. Il y a une autre chose que nous pouvons faire pour offrir une meilleure expérience client, à savoir l'utilisation d'images de variantes. J' ai une photo aléatoire de chaussures noires sur mon bureau. Ce que je vais faire est de cliquer sur Noir, et je vais mettre à jour les images pour toutes les chaussures noires. Je clique sur Ajouter une image, et j'ai ces baskets Nike ici qui sont de couleur noire. Il va les télécharger. Tu vas juste devoir ignorer le fait que ce ne sont pas exactement la même chaussure. Si j'enregistre la page et clique avec le bouton droit sur « Afficher » et sélectionnez « Noir », vous verrez qu'il passe automatiquement à l'image du produit qui représente cette variante. La taille va ressembler à peu près la même, donc cela n'a pas de sens, mais la couleur est un parfait exemple de lorsque vous changez cela, vous voulez que vos images de produit changent. Ça ne marche qu'à un sens, j'ai oublié de mettre ça sur Red, donc ça marche à l'envers aussi, mais tu comprends le point, ok ? En fait, je vais juste y aller et le faire maintenant juste pour être minutieux, mettre à jour les images de tout le rouge, et définir cela comme l'image de variante. La prochaine chose est Organisation et les principaux ici sont Collections et Tags. Ce sont là les options les plus importantes de loin de votre organisation. Il s'agit d'options d'organisation supplémentaires que vous avez pour le type de produit et le fournisseur. Vendor est un bon endroit pour classer votre stock par marque, alors peut-être que vous voulez faire le vendeur de ce, Nike, et Type de produit, vous pourriez vouloir mettre dans des chaussures. D' après mon expérience, ce que j'ai trouvé est Collections et Tags sont les principaux moyens de catégoriser votre contenu. En parlant de la catégorie de mots, vous pouvez penser à Collections comme des catégories, mais contrairement aux catégories dans certains autres types de plates-formes comme WordPress, par exemple, avec lesquelles j'ai travaillé dans le passé, vous ne pouvez pas imbriquer collections. Vous devez être plus stratégique quant à la façon dont vous imbriquez vos produits dans différentes catégories. Tout en haut de la structure de votre organisation devrait être Collections. Si je vais dans mon magasin ici, assurant que je suis en prévisualisation, et que je tape dans mes collections d'URL, vous verrez qu'il y a une collection qui vient par défaut avec la plate-forme Shopify et c'est la collection all. Vous n'avez pas besoin de le configurer dans votre backend, vous ne le verrez pas réellement dans votre backend, mais si vous allez dans les collections/tout sur un site Web Shopify, vous verrez tous les produits qui sont publics sur ce site Web. Vous pouvez passer par et les vérifier. Ceci, en passant, montre votre modèle de collection, donc nous y entrerons quand nous entrerons dans le code. Mais si vous allez dans vos modèles ici, le code que vous définissez ici, il est lié à une section, alors laissez-moi juste entrer dans cette section, c'est le code qui s'exécute chaque fois que vous appuyez sur une page de collection. Maintenant, évidemment, les produits et autres fonctionnalités peuvent changer, mais c'est dynamique en fonction du code que vous mettez dans ce fichier de modèle et cette section. Désolé, en sautant un peu en avant, je voulais juste noter que chaque fois que vous affichez une collection, vous l'affichez dans un modèle de collection. Comme je viens de le mentionner, il s' agit d'une page de collection automatique par défaut que vous obtenez avec chaque thème Shopify. Mais si nous voulons créer notre propre collection, nous pouvons le faire en allant dans le menu Produits et en cliquant sur « Collections ». Nous pouvons aller créer une collection et appelons celui-ci, produits en vedette. Nous pouvons ajouter une description si nous le voulons, puis nous sélectionnons le « Type de collection ». Vous pouvez soit ajouter manuellement les produits un par un, et vous pouvez le faire soit dans le produit lui-même, soit ici, après avoir enregistré, soit vous pouvez le rendre automatique en fonction de certaines conditions. Vous pouvez utiliser l'étiquette du produit, prix, le fournisseur, le type, la comparaison au prix, le poids, pour créer votre filtre personnalisé, puis le placer dans une collection. Vous pouvez utiliser le prix pour afficher tous les produits qui sont en vente pour moins de 10$ et peut-être, c'est une collection que vous voulez créer. Mais pour nos besoins, je vais juste aller avec Manuel et je vais cliquer sur « Enregistrer » et cela va rafraîchir la page afin que nous puissions ajouter certains produits. Vous pouvez l'utiliser pour effectuer une recherche ou vous pouvez cliquer sur « Parcourir ». Je veux sélectionner ceux-ci à la fin, j'ai certainement besoin de sélectionner « Gnarly Shoes », mon Dieu, Good Old Shoes, oh ouais. Je veux les chaussures folles, mon Dieu, ça sonne bien. Nous avons nos cinq produits différents dans notre collection, et il semble que cela soit automatiquement sauvegardé. Si je vais cliquer sur « Afficher » maintenant sur cette collection, nous obtiendrons une page similaire à ce que nous avons vu auparavant, mais maintenant il a notre nom de collection personnalisé, et il a les chaussures ou les produits que nous avons ajoutés à cette collection nous-mêmes. Maintenant, juste ici, vous avez trier par et cela vient assez standard avec la plupart des thèmes, mais nous pouvons filtrer à nouveau en utilisant des balises. Revenons à notre sneaker et au lieu de mettre Nike, qui semble être la marque, avec cette Nike cochée là, au lieu de mettre ça dans Vendor, ce qui serait un bon endroit pour mettre une marque, Disons simplement que nous voulons qu'il s'agisse d'un tag parce que c'est plus facile à filtrer et que les balises sont très puissantes comme vous le verrez tout au long de votre parcours Shopify. Mettons Nike comme une étiquette. Je vais cliquer sur « Enregistrer » dessus. Maintenant, je veux que vous remarquiez ce qui arrive à cette barre quand nous actualisons la page. Vous verrez maintenant, nous pouvons filtrer par balise, et cela est intégré dans notre thème. On peut aller ici, filtrer à nouveau, et l'autre chose que je veux que vous remarquiez est notre URL. Rappelez-vous avant d'aller sur les collections/tous, maintenant nous sommes sur les collections/produits caractéristiques, qui est le nom de notre collection, et puis après cela, nous avons Nike. Nous pouvons réellement mettre le nom de la balise dans l'URL. Si je partageais ça avec quelqu'un, alors ils verraient le même filtre. C' est une façon assez cool de filtrer vos produits et construire essentiellement presque comme des collections imbriquées. Bien que ce titre indique toujours les produits en vedette, il est filtré par Nike ici, sorte que vous pouvez voir ces commentaires là-bas, mais c'est une façon de filtrer à partir de vos plus grandes collections. À la fin de la journée, nous pourrions également créer une nouvelle collection pour Nike en vedette. Nous pouvons aller dans Collections, Créer une collection et disons, nous appelons que les chaussures ou les produits Nike en vedette. Disons, dans notre esprit, que c'est une catégorie imbriquée de cette autre collection. Eh bien, malheureusement, comme je l'ai mentionné, les collections ne peuvent pas imbriquer, mais ce que nous pouvons faire est de fixer une condition que l'étiquette de produit doit être égale à Nike et ensuite nous pourrions mettre en place une autre condition et étiqueter tous ces produits dans la collection en vedette avec une autre étiquette qui dit en vedette, disons. Faisons ça maintenant. Je n'ai pas encore ça, donc je vais juste sauver la Nike. Oh, on y va, on doit enlever ça. Cela va juste montrer tous les produits qui ont Nike en eux, et vous pouvez voir ici que c'est autopeuplant, mais disons simplement que nous voulons tous ces produits. Encore une fois, ce n'est pas super propre, mais si je suis allé dans tous ces produits, puis leur a donné une étiquette de vedette. Si, je vais juste me précipiter à travers cette partie. Maintenant que j'ai ajouté l'étiquette en vedette à tous les produits en vedette, je peux aller dans les produits Nike en vedette, ajouter une autre condition pour l'étiquette de produit a présenté. Appuyez sur Sauvegarder. Maintenant, nous pouvons voir que les baskets impressionnantes vient à travers parce qu'il est en vedette et il est Nike. Pour revenir en arrière et appliquer cette même logique à nos produits en vedette, peut-être que nous voulons faire cela automatique. Heureusement, nous l'avons déjà réglé manuellement. On devrait aller supprimer celui-là. Créons un autre qui s'appelle Featured Collection. Lorsque l'étiquette est présentée, nous inclurons tous ces produits dans la collection en vedette. Maintenant, nous pouvons aller dans Featured Collection que nous avions auparavant, mais maintenant c'est automatique basé sur des tags. Et nous pouvons filtrer par Nike. Ou si nous voulions avoir du contenu personnalisé, comme avoir une description ou nous voulions que ce titre change, nous pourrions aller à la façon, je pense que c'était, revenons en arrière et nous pouvons juste le voir à partir d'ici, Produits Nike en vedette. Comme vous le verrez, c'est similaire à cela, mais il est juste mis en place d'une manière légèrement différente. Si nous avons une collection, il y a plus d'options à notre disposition pour montrer le titre qui apparaît. Nous avons également accès à l'objet de la collection, ce qui nous permet de saisir tous les produits de cette collection. Encore une fois, ça prend un peu d'avance sur moi. Mais vous pouvez voir tout en haut, collections sont un moyen d'organiser votre magasin. Vous pouvez toujours organiser votre magasin avec des tags seuls, comme c'est possible. Mais la plupart des thèmes, ils ont une page de collection, puis vous filtrez par balise, qui est la façon standard shopify de le faire. C' est essentiellement comme ça que vous organisiez habituellement vos produits. Comme je l'ai dit, vous pouvez également organiser par type de produit et par fournisseur, mais ce n'est pas particulièrement important pour nous. Juste une autre façon que vous pouvez filtrer et d'autres variables auxquelles vous avez accès dans votre code de thème. J' ai passé beaucoup de temps sur la page produit. Il y a d'autres éléments de menu ici dans le tableau de bord shopify, évidemment. commandes qui n'ont pas vraiment de sens jusqu'à ce que quelqu'un commande un produit. Les clients sont les détails des personnes qui ont passé une commande avec vous et analyses que vous pouvez consulter et voir qui utilise votre magasin et combien de ventes vous avez faites, marketing. Tout cela se rapporte au fonctionnement quotidien de votre magasin. Pas nécessairement lié à votre thème. Mais ce que je voulais faire était d'aller dans les produits parce que les produits en quelque sorte, c'est comme le contenu de votre site Web. Cela concerne beaucoup le développement de thèmes et c'est pourquoi je voulais creuser un peu plus dans les produits et les collections. revenant à notre boutique en ligne ici, vous pouvez voir que nous pouvons également créer d'autres contenus dans la manière des articles de blog et des pages. Maintenant, nous allons ajouter une page plus tard dans cette classe et un billet de blog si vous avez utilisé un autre type de plate-forme qui fait des blogs. Un billet de blog est essentiellement une page avec un horodatage dessus, puis il est mis dans un flux qui affiche l'article le plus récent en premier. Vous êtes familier avec un blog. Techniquement, c'est vraiment la même chose qu'une page, mais a juste un but différent. Vous pouvez également entrer ici, et c'est là que vous mettez à jour votre navigation, qui dans votre code est appelée une liste liée. Vous pouvez y aller et ajouter un menu. ne sais pas si on va y aller dans cette classe. Mais en ce moment, vous pouvez voir que nous sommes en cours d'exécution, quel menu je vais courir, le menu principal ici. Donc, dans notre personnalisateur que nous avons défini, c'est de tirer dans le menu principal. Si nous allons dans la navigation ici, nous pouvons voir qu'il a Accueil et Catalogue, qui est ce que nous avons là-bas. Ça correspond. Domaines, préférences. Préférences que nous avons vu avant lorsque nous avons désactivé le mot de passe pour le site. Il y a d'autres choses ici que vous pouvez mettre dans le code Google Analytics ou modifier vos données SEO. Mais la dernière chose que je voulais terminer dans cette leçon particulière et la partie de votre magasin qui se rapporte le plus au thème, bien sûr, va être votre personnaliseur de thème. Nous avons déjà passé brièvement en revue ce personnalisateur dans une leçon précédente. Je ne veux pas passer trop de temps à examiner les mêmes détails. Mais essentiellement, nous avons mentionné la page de collection avant. Vous pouvez entrer et modifier ici, il est par défaut de proposer des produits Nike. Mais on peut y aller, changer la grille. Nous pouvons montrer les vendeurs de produits et il va montrer les tets. Je ne sais pas ce qu'est les tets, mais c'est la joie des produits de démonstration. Vous pouvez montrer l'image de la collection, que nous n'avons pas pour cette collection. Tout cela est configuré dans une section appelée Pages de collection ou dans notre back-end, il s'appelle Modèle de collection. Je vais vous montrer que toutes ces options passent par un schéma que nous avons écrit ici. C' est juste pour vous donner un aperçu de ce qui va venir dans ce cours. Je pense que c'est une assez bonne vue d'ensemble de votre back-end Shopify. Évidemment, les produits sont la principale chose que votre site va promouvoir et la principale chose avec laquelle vous allez interagir, avec votre code, ce sera votre personnalisation de votre magasin va généralement être autour de présenter vos produits de la meilleure façon avec les meilleures options, en filtrant d'une manière qui est logique pour l'utilisateur. Puis avoir une bonne navigation, ce qui est assez explicite. Configurer de bonnes pages pour cette navigation vers laquelle lier. Si vous avez une page À propos ou une page Contactez-nous. Mais oui, ce genre de couvre un aperçu de l'expérience de la boutique en ligne Shopify du point de vue du vendeur. Maintenant, dans les prochaines vidéos, nous allons creuser votre code de thème. C' est donc là que nous entrons dans le développement du thème ou la personnalisation du thème Shopify parce que nous ne développons pas quelque chose à partir de zéro. Mais nous allons entrer dans le code et comment vous pouvez fondamentalement éditer quoi que ce soit sur votre thème et en fait où trouver le code que vous voulez aller et éditer. Je te vois dans la prochaine vidéo. 9. Code du thème - Actifs, configuration et langues: Bienvenue à tout le monde. Dans cette vidéo, nous allons enfin plonger dans notre code thématique et parler de ce qui se passe. Ouvrons notre éditeur de code, ou si vous voulez suivre dans la section de code d'édition de votre thème, l'un ou l'autre est bien. Comme je l'ai mentionné précédemment, je vous recommande de faire toutes vos modifications ici. Mais juste pour regarder le code, vous pouvez le regarder ici si vous préférez. Je vais juste le regarder dans l'éditeur de code parce que c'est là que nous allons éditer, mais vous verrez ici que si je contracte toutes ces tables parents, nous avons des actifs, config, layout, locale, sections, extraits et modèles. Modèles, extraits, sections et mise en page sont les dossiers principaux de votre thème. Ce sont ceux que vous allez modifier pour modifier l'apparence de votre site Web, ce que vous attendez d'un thème. Mais il y a d'autres dossiers de support importants ici : assets, config et paramètres régionaux. Dans cette leçon, nous allons les couvrir d'abord, puis nous allons aller dans les principales, les décomposer dans les deux leçons suivantes. Pour commencer avec les actifs. Assets, si vous êtes nouveau dans le développement Web, choses comme des images, des feuilles de style et des fichiers JavaScript. C' est vraiment ce que nous avons ici. Nous avons des images que nous utilisons dans le thème, nous pouvons mettre ici. Nous avons des fichiers JavaScript. Celle-ci est pour quand vous faites des cartes-cadeaux. Nous avons des fichiers SCSS et vous pouvez voir qu'il y a un liquide à la fin. Le plus important dans votre fichier assets serait probablement votre theme.scss.liquid. Quelque chose que vous ne connaissez peut-être pas est une technologie appelée SAS. SAS est essentiellement un langage de compilation CSS. Il vient essentiellement avant CSS et nous permet d'appeler des choses comme des fonctions, et des variables, et l'imbrication. Ce qu'il fait, c'est qu'il compile ou se transforme en CSS régulier lorsque nous choisissons de le compiler, ou, et c'est la grande chose à propos de Shopify, est que SCSS est compilé pour nous. Lorsque vous voyez un fichier SCSS, vous pouvez essentiellement mettre le CSS que vous voulez là-dedans. CSS est rétrocompatible avec SCSS, mais c'est essentiellement votre feuille de style de votre thème entier. Maintenant, la raison pour laquelle il est got.liquid à la fin, c' est parce que nous sommes capables de le mettre dans des variables liquides. On va aller dans le liquide dans une vidéo plus tard, mais je peux chercher ça ici. Vous pouvez voir ici que nous chargeons dans certaines variables SAS avec des variables qui sont définies dans notre personnalisateur. Nous allons aussi regarder cela dans une seconde dans notre config. Mais les paramètres ici, l'objet de paramètres globaux, sont ce que sont nos paramètres de thème. Si on y retourne, ça va un peu trop vite, mais on y arrivera. Si nous allons ici, donc nous allons à la partie personnalisateur de cela, alors nous allons dans les paramètres du thème. Ici, aux paramètres du texte de couleur, qui va être en couleurs, et ce sera probablement l'un de ceux-ci, probablement le corps du texte. C' est essentiellement mettre la sélection que vous avez ici dans votre customizer à l'intérieur d'une variable SAS. Ensuite, ce que vous pouvez faire au lieu d'appeler une couleur spécifique, vous pouvez appeler ceci. Vous pouvez rechercher les utilisations de cette variable. Comme vous pouvez le voir ici, c'est assez normal CSS en dehors des variables SAS. Si vous n'êtes pas familier avec SAS, je vous recommande de le rechercher. Ce n'est pas trop compliqué d'apprendre si vous connaissez déjà CSS. Si vous êtes submergé par cela et que vous ne vous attendiez à apprendre SAS ni à apprendre le développement Shopify, ne vous inquiétez pas du tout, vous n'avez pas à utiliser SAS. Vous pouvez jeter dans CSS régulier ici. Si vous voulez considérer cela comme votre fichier CSS principal, vous pouvez aller de l'avant et le faire. Ne vous inquiétez pas trop de SAS si vous êtes nouveau. Mais si vous êtes familier avec SAS ou que vous voulez l'apprendre, c' est génial que Shopify compile SAS et vous permet de faire des choses comme je vous ai montré où, voyons si je peux le retrouver, c'est trop difficile à trouver, mais essentiellement où vous pouvez définir une variable dans vos paramètres de thème à une variable dans votre feuille de style, puis l'appeler dans votre feuille de style. Très cool. L'autre est votre theme.js. Maintenant, cela pourrait facilement être theme.js.liquid, mais avec ce thème, il semble qu'il n'y a pas de variables liquides qui vont être insérées dans ce fichier. C' est juste theme.js, et cela vaut pour ici aussi. Si vous n'y insérez pas de liquide, vous n'avez pas à mettre de liquide à la fin. Cela va contenir tous vos thèmes JavaScript. Si vous n'êtes pas trop familier avec JavaScript, cela pourrait devenir un peu gaineux aussi. Mieux vaut laisser ceci à moins que vous ayez besoin de creuser dans le JavaScript. Ici, vous avez d'autres bibliothèques JavaScript. Lazysizes est quelque chose que beaucoup de thèmes Shopify utilisent pour optimiser la taille des images sur différents écrans. Encore une fois, vous n'avez pas trop à vous inquiéter de ce qui se passe ici. Ce que vous devez savoir, c'est que le dossier assets est là, et c'est là que vous trouverez votre feuille de style, que vous allez probablement modifier, et votre fichier JavaScript. En passant, nous avons un autre dossier ici appelé config. Config est intéressant parce que vous savez comment nous avons parlé de la façon dont ce texte de couleur a été défini dans votre personnalisateur, dans settings.colortext. Eh bien, vous pouvez réellement rechercher cette valeur dans votre setting_data. Si nous devions le faire, découvrez ce que ça appelle du texte en couleur. Si je copie cela et que je vais dans nos données, je peux vraiment trouver où cela est réglé. Ici, vous pouvez voir qu'il y en a treize. Jetons un coup d'oeil. Courant. Ici, sur courant, qui est ce que nous utilisons en ce moment, vous pouvez voir que le texte de couleur est défini sur cette valeur spécifique. Mais si nous devions entrer et le changer ici, il va se mettre à jour dans ce thème settings_data.json. Toutes les données dans Shopify sont configurées au format json, c'est donc J-S-O-N. Encore une fois, si vous êtes nouveau dans le développement web, cela peut être quelque chose que vous n'êtes pas familier, mais c'est assez simple, vous imbriquez dans ces crochets bouclés. Dites par exemple, vous vouliez accéder à actuel .colortext, aller dans courant, aller dans le texte en couleur, et là vous l'avez. Des trucs assez simples. Dans settings_schema, c'est la couche qui se trouve en dehors des données que vous avez ici. Vous avez ici la valeur pour le texte couleur, mais dans votre schéma, vous définissez cette valeur comme une valeur que les utilisateurs peuvent modifier dans le personnalisateur. Comme vous pouvez le voir ici, paramètres, Id, color_text, c'est ce qui le définit comme une option de personnalisation, et le type est une sélection de couleur. Pour vous montrer, si nous devions supprimer complètement cette option, vous verrez qu'elle n'apparaît même plus dans le personnalisateur. Appuyez sur Enregistrer sur cela. Je vais regarder la montre à thème. Au fait, si vous avez fait des erreurs, ça devrait venir ici. Certainement garder un oeil sur ça. S' il y a des erreurs, il ne compilera pas et n'enverra pas au magasin. Mais si je veux rafraîchir l'éditeur ici et aller dans mes paramètres de thème, aller dans les couleurs, vous pouvez voir que la couleur a disparu, et ce n'était pas en fait le corps du texte, c'était celui au-dessus. Je ne me souviens pas comment celui-ci a été appelé, mais si nous ramenons cela, vous pouvez voir que l'étiquette était des en-têtes et des liens. Si je sauvegarde cela, ce que j'ai fait, il va à nouveau télécharger. Actualisez la page, le thème, les paramètres, les couleurs, et là vous allez, cette option est à nouveau là. C' est une première introduction aux schémas pour nous. Nous avons essentiellement un schéma géant qui se trouve au-dessus de l'ensemble du thème avec un tas de paramètres différents, et cela reflète ce que nous avons dans nos paramètres de thème. C' est comme la représentation JSON backend développeur de toutes les données que nous avons ici. Je pourrais même le changer ici, et il sera mis à jour ici dans notre thème actuel. Ou je peux le changer ici, et cela va mettre à jour dans notre thème ici. Les deux sont liés ensemble. Maintenant, quand j'ai supprimé ceci avant et que je l'ai ramené, vous remarquerez qu'il a toujours cette valeur. Maintenant, c'est probablement la valeur par défaut qui est définie ici. Mais même si ce n'était pas le cas, même s'il n'y avait pas de valeur par défaut, les données enregistrent toujours. Si vous allez dans votre schéma et supprimez quelque chose comme nous l'avons fait, il ne supprime pas réellement les données aussi, et peut-être que vous voulez supprimer cela. Mais généralement, lorsque vous faites du développement de thème, ceci est spécifique au magasin et vous ne voulez pas nécessairement modifier ces choses. En général, je laisserais ce truc tranquille. Il est utile lorsque vous migrez peut-être un magasin et que vous avez apporté quelques modifications aux paramètres, vous pouvez copier les paramètres qui sont tous répertoriés ici lorsque vous apportez ces modifications. Si c'était un peu accablant ou que ça s'est passé un peu au-dessus de la tête, ne vous inquiétez pas trop. La principale raison de savoir à propos de ces choses est, disons, par exemple, si vous vouliez créer votre propre paramètre. Si vous voulez créer votre propre paramètre, vous pouvez venir ici, peut-être vous voulez créer un autre type de texte couleur. Vous pouvez simplement jeter cela là-dedans, renommer l'ID, changer l'étiquette, et puis soudainement vous auriez cela dans votre liste d'options ici et puis dans votre code, vous pouvez le référencer comme nous l'avons fait dans notre exemple ici. Vous pouvez référencer cette nouvelle variable que vous définissez n'importe où dans votre modèle. C' est le véritable avantage d'avoir le schéma ici pour le modifier. Vous pouvez créer des paramètres de thème à partir de ce fichier, puis celui-ci stocke simplement vos données. Vous ne devriez probablement pas avoir besoin de changer quoi que ce soit ici à moins que vous vouliez faire une migration et vous ne vouliez pas avoir à passer par et à mettre à jour toutes ces différentes valeurs vous-même via le Customizer. Finale, puis nous passerons à la réelle comme les fichiers de mise en page est Locales. Dans Locales, ce sont essentiellement vos langues. Si nous retournons dans notre boutique en ligne et dans la section thème, cliquez sur les actions et éditer les langues, nous pouvons voir une interface utilisateur pour nous permettre de changer toutes les options de langue. Maintenant, quelles sont ces options de langue ? Eh bien, si nous regardons à travers notre code, donc allons juste entrer, allons juste choisir l'en-tête et nous pouvons voir ici un tas d'entre eux déjà. On peut voir {layout. navigation.search} et puis nous pouvons voir ce symbole de pipe ici avec un «  T » Le 'T' dit fondamentalement, filtrer par langue. Pourquoi c'est important, au lieu de coder en dur les valeurs ici, nous pouvons les configurer dans des langues et ensuite nous pouvons les traduire. Espérons que cela aura du sens, je pourrais fournir un exemple plus tard dans la classe, mais regardons un exemple plus évident, juste à des fins de démonstration. Une langue courante est la langue du panier. Si je clique sur je vais le faire avec mon client, je pourrais aussi bien le faire ici. Si je vais ici et que je vois votre chariot sur le modèle de lit. Permettez-moi d'aller dans les modèles, panier et il lie directement à une section appelée modèle de panier. Je vais aller dans cette section. Si j'essaie de trouver votre panier, il n'est pas là, je ne peux pas le trouver et la raison est que votre panier est défini dans les paramètres de langue, donc vous voyez ici votre panier. Si nous voulions changer cette étiquette, nous pourrions aller ici, trouver où se trouvent les variables linguistiques. Je pense que c'est celle-là {chariot. Général. Titre}. Allons juste changer ça. Je vais me débarrasser de cette étiquette liquide et juste mettre, > c'est le chariot <. Je vais enregistrer cela, vérifier que tout fonctionne bien avec le kit de thème, puis [inaudible]. Laissez-moi simplement cliquer dessus d'ici, en m'assurant que nous sommes sur le bon thème. Ce n'est pas celle-là, donc nous avons évidemment édité le mauvais, mais je peux trouver ce que c'est [inaudible] ici. Ceci est le fichier de langue anglaise et nous sommes en cours d'anglais pour le moment comme vous pouvez le voir et si je devais aller pour trouver le titre. Laissez-moi chercher le panier et ils auront le titre général, votre panier. Je dois trouver le titre général du panier. Un titre de produit, désolé, il y a quelques utilisations du mot titre ici. Il semble que nous modifiions le bon, mais nous n'avons tout simplement pas d'articles dans notre panier, c'est pourquoi cet en-tête ne s'affiche pas réellement. Ajoutons simplement quelque chose à notre panier pour le démontrer, sorte que nous n'avons pas encore de produits entiers sur une page d'accueil, mais nous pouvons aller à l'ancienne collection. Ajoutons simplement ceci à notre panier. Maintenant, nous sommes dans notre page de panier et comme vous pouvez le voir, le texte que nous avons mis dans, c'est le panier qui s'affiche. Nous pouvons évidemment les valeurs de code de panier dans notre projet ici. Juste pour montrer ceci est le panier pour le rendre clair, comme je suis en train d'éditer cette page particulière. Je l'édite ici, nous ne voulons pas le faire et la raison pour laquelle c'est, si nous changeons pour dire, par exemple, allemand et nous offrons ce site en allemand aussi et nous voulons avoir une certaine langue qui soit facilement traduit dans cette langue à venir et être dans cette langue, va venir avec ce est panier alors que tout le reste a été traduit. C' est pourquoi nous utilisons des langues. Si disons par exemple et que vous pouvez ne pas vous soucier d'autres langues, peut-être que vous êtes seulement de la publicité sur le marché unique. Peut-être que nous ne nous soucions pas du tout des langues, mais même quand même, c'est une bonne pratique d'utiliser ces variables. Je vais entrer ici et Au lieu de changer cela dans le code ici, je vais mettre à jour la variable. Au lieu de votre panier, mettez dans, c'est panier. Je suis juste en train de rendre évident que nous changeons ça. Parce que personne ne dirait que c'est un chariot, de toute évidence. Si nous actualisons la page, il viendra avec ceci est panier. Essentiellement le même résultat, mais juste une meilleure pratique d'avoir tous ces mots communs dans un fichier dans vos paramètres régionaux, puis d'appeler cette variable dans votre modèle. Vous verrez ici que nous utilisons beaucoup de langage standard et cela pourrait vous faire monter un peu si vous ne saviez pas propos de ces fichiers de langue parce que vous pourriez entrer et être comme, eh bien, je veux changer ce texte. Rafraîchissons à nouveau, retournez à votre panier. Vous savez, ça pourrait vous faire monter si vous voulez continuer, eh bien, je veux changer ce mot dans mon thème Shopify. Laissez-moi rechercher votre panier dans le modèle de panier. C' est quoi, je ne peux pas le trouver. Comment je vais changer ça ? C' est pourquoi nous devons parler variables linguistiques parce que si vous voulez changer quelque chose comme ça, vous allez devoir le changer ici. Tout codé en dur, comme je l'ai dit, le codage en dur n'est pas une meilleure pratique. Si vous voulez changer de langue comme ça, cette norme à travers le thème, changer ici et si jamais vous à l'avenir, quand je le traduis dans une langue différente, vous avez ces autres fichiers ici. Vous pouvez voir le titre général du panier et c'est ce qu'il est en anglais. Si nous allons dans ce qui je crois est allemand, vous pouvez aller panier titre général et cette valeur sur un allemand [inaudible] va être ce mot à la place, que je ne vais même pas essayer de prononcer parce que ça a l'air dur et je ne parle pas allemand. C' est des paramètres locaux, c'est config et c'est des actifs. Peut-être que je me suis précipité un peu à travers cela parce qu'il y a beaucoup à couvrir avec les thèmes Shopify, mais essentiellement, c'est là que vous stockez des variables liées à la langue. C' est là que vous stockez des données de schéma ou des données de paramètres généraux similaires , et c'est là que vous définissez les options disponibles dans votre schéma, qui se traduisent directement vers votre Customizer. Enfin, pour examiner les actifs. Assets est l'endroit où vous mettez votre feuille de style, fichier JavaScript et toutes les images ou autres fichiers que vous devez appeler dans les actifs Frontend qui aideront votre magasin à fonctionner. Mais encore une fois, vous ne devriez pas avoir à modifier aucun de ces éléments, c'est juste un thème. SCSS. liquide qui est le plus important parce que inévitablement vous allez vouloir changer quelques CSS sur votre page. Vous pouvez le faire en utilisant du liquide, vous pouvez le faire en utilisant SAS. Mais vous pouvez aussi simplement mettre en simple vieux CSS qui fonctionnera à, toutes ces options sont disponibles pour vous. Dans la vidéo suivante, je suis heureux d'entrer dans les autres parties de votre modèle de thème. J' ai hâte de vous voir dans la prochaine vidéo. 10. Code du thème - Mise en page et modèles: Pour nous préparer pour les deux prochaines leçons sur l'édition de notre code de thème, j'ai fermé un tas d'onglets et maintenant j'ai juste mon magasin, mon compte partenaire et ce diagramme que je prépare pour décomposer ce qui se passe avec notre thème. Maintenant, cela peut sembler nul, mais cela devrait fournir un bon aperçu de la façon dont tout fonctionne. Essentiellement, nous avons ces boîtes colorées et elles représentent plutôt les quatre grandes sections dont nous allons parler. Si nous revenons dans notre code, sections, extraits, modèles et mise en page. Tout en haut, c'est le point d'entrée. Quiconque entre sur notre site, il va avoir la mise en page. Ensuite, dans la mise en page, vous pourriez avoir des extraits, c'est pourquoi vous avez cette ligne qui descend ici. Vous pourriez avoir des sections en fait, vous êtes très susceptible d'avoir des sections. Dans le contenu de la mise en page, qui se trouve au milieu de votre mise en page, vous obtiendrez un modèle. Ces lignes montrent le flux de la structure de gabarit. En bas, vous avez des sections ici, puis les sections coulent dans ce modèle, mais elles peuvent également circuler dans la mise en page, elles peuvent également circuler dans le contenu pour l'index. Ensuite, vous avez ce modèle qui se jette dans la mise en page. Donc la mise en page se trouve en haut. Essayer de trouver un autre mot que la mise en page, mais c'est essentiellement la structure qui se trouve en haut de chaque page. Ensuite, vous êtes servi le modèle, puis les sections sont des morceaux de code dynamiques vraiment cool, sections dynamiques que nous pouvons mettre dans notre page d'accueil, jeter dans notre mise en page, jeter dans notre modèle, puis sont juste des bits de code réutilisables que nous pouvons fondamentalement lancer de toute façon. Maintenant, j'ai ces nuages ici aussi. J' en ai fait un nuage parce que c'est un contenu dynamique. Nous ne pouvons pas réellement modifier un modèle de thème pour le contenu de l'en-tête ou le contenu de l'index. Il relie différentes parties de votre thème avec cette double ligne. La double ligne est juste pour signifier un lien dynamique. Dans votre mise en page, il s'agit d'un lien vers le contenu de l'en-tête, qui, parce qu'il est désigné par un Cloud communique que nous ne pouvons pas réellement modifier ceci spécifiquement, mais qu'il s'agit d'une couche de sortie. La même chose pour le contenu de l'index. En fait, cette ligne ici ne devrait probablement pas être là. Ceci est seulement sur un modèle spécifique, la page d'accueil. Donc, je pourrais supprimer ce lien. Mais comme vous le verrez bientôt, et quelque chose que j'ai brièvement abordé est que le contenu pour l'index est la chose qui se trouve sur votre page d'accueil et vous pouvez ajouter dans des sections dynamiquement. Ce diagramme pourrait sembler un peu nul au début, mais après ces deux leçons, j'espère que la relation entre toutes ces parties devrait avoir un sens assez clair. Dans cette vidéo, nous allons parler de mises en page et nous allons parler de modèles, puis nous allons le diviser, donc dans la leçon suivante nous parlons de sections et d'extraits. Commençons par le point d'entrée. Allons juste prévisualiser notre thème. Lorsque l'utilisateur vient à notre magasin, il est présenté avec ce qui est un mélange de tout ce que nous avons ici. Tout d'abord, il va frapper un fichier de mise en page. C' est pourquoi la mise en page, si nous revenons au diagramme, se trouve en haut. On va aller dans notre photo de mise en page. Habituellement, vous n'avez qu'une mise en page et c'est theme.liquid. Comme vous le verrez dans cette vidéo, nous sommes en mesure de créer nos propres mises en page, mais la mise en page standard est theme.liquid. Si vous n'avez pas défini de mise en page personnalisée, il va aller à theme.liquid. Supposons simplement que vous n'avez pas défini de mise en page personnalisée. Ça va aller Thème.Liquide. C' est le code qui va générer ce que vous voyez ici. Cela vaut non seulement pour la page d'accueil, mais pour presque toutes les pages qui n'ont pas de mise en page alternative. Il s'agit de l'habillage qui s'exécutera sur chaque page de votre site Web. Mais comme nous le verrons, il y a quelques bits dynamiques de contenu ici. Nous avons des étiquettes liquides comme vous pouvez le voir ici, qui sont désignés par les deux crochets bouclés se terminant en crochets bouclés. Il y a un autre que vous pourriez voir qui a au lieu de deux crochets bouclés, des crochets bouclés et un, nous y allons. Crochets bouclés, signe de pourcentage, et un tiret pour éliminer les espaces blancs, nous allons aller dans le liquide et comment cela fonctionne dans une vidéo ultérieure. Mais je voulais juste passer par et nous allons voir où cette page liens vers d'autres parties de notre thème. Nous avons une logique liquide ici. Ne vous inquiétez pas trop pour ça. Ce que je cherche est ce premier contenu de balise pour l'en-tête. Fondamentalement, en mettant le contenu pour l'en-tête ici juste avant la balise de tête de fermeture, ce qu'il dit est de prendre tout ce que nous avons et de le mettre ici. Encore une fois, apparemment ne peut pas l'éditer, il peut être difficile de comprendre ce qui se passe réellement ici, et c'est pourquoi j'ai écrit cette boîte ici. Selon la documentation de Shopify, le contenu de la tête de variable doit être placé entre les balises d'ouverture et de fermeture. Il insère les scripts Shopify nécessaires dans la tête, qui inclut des scripts pour Google Analytics, Shopify Analytics pour les applications Shopify et plus modifiables dans les préférences. Cela répond à la question de savoir où aller pour éditer cela ? Pour que je puisse y aller, cliquez sur Préférences. Donc, des choses comme le code Google Analytics. Si j'avais du code Google Analytics, je le collerais ici. Cela irait dynamiquement dans le contenu de l'en-tête. Puis avec cette étiquette liquide, contrôlant essentiellement où il va dans notre disposition liquide. Mais c'est quelque chose que tu ne devrais pas vraiment t'embêter. Je te dis juste que c'est là que ça s'insère. Ça n'a pas vraiment de sens de le déplacer parce qu'il doit être dans cette étiquette de tête. En descendant la page, nous pouvons voir ce mot inclure et inclure suivi d'une chaîne ici. Ce que ça fait, c'est inclure un extrait. Si je vais dans le dossier Mes extraits, nous ne couvrirons pas les extraits de cette vidéo, mais vous pouvez voir si je cherche la recherche d'icônes en bas, il y a beaucoup d'icônes différentes ici. Juste là, c'est. C'est juste un fichier SVG, mais je peux fondamentalement l'inclure partout où je veux sur mon thème entier. Retourner au thème. Liquide. Laissez-moi faire défiler à nouveau en mettant include, puis le nom de l'extrait. Pour revenir au diagramme, vous pouvez voir que nous pouvons inclure des extraits n'importe où dans notre code de thème, notre mise en page, notre modèle ou nos sections. C' est pourquoi la ligne est liée à ces trois. Si nous faisons défiler la page vers le bas, nous pouvons voir un autre mot-clé ici, qui est section. Tout comme include, nous pouvons apporter dans la section d'en-tête en utilisant le mot de section. Donc Inclure pour apporter un extrait, section pour apporter une section. Si nous allons dans notre dossier de sections, il devrait y avoir un fichier appelé header.liquid. Rappelez-vous que nous n'avons pas besoin d'utiliser le .liquid pour appeler un extrait de section ou un modèle, nous avons simplement mis dans le mot sans .liquid. Liquid sait ce que vous essayez de faire. Comme vous pouvez le voir, nous avons une autre section ici, et entre les deux, nous avons cette autre balise liquide dynamique appelée contenu pour la mise en page. Pour revenir à mon diagramme ici, nous pouvons lire quel est le contenu pour la mise en page. Le contenu de la variable de mise en page doit être placé entre la balise de corps d'ouverture et de fermeture. Il génère du contenu dynamique généré par tous les autres modèles. Index.liquide, produit.liquide et ainsi de suite. Comme vous pouvez le voir, j'ai cette boîte entre la mise en page et le modèle. C' est parce que c'est là que le modèle entre en jeu. Si nous allons dans nos modèles ici, le code de ces modèles sera chargé ici. Vous vous demandez peut-être, comment savons-nous quelle page charger ici ? La réponse est, cela dépend de l'URL dans laquelle vous êtes. Si je suis ici et que je vais à Collections.all, comme nous l'avons déjà fait. Je suis toujours sur la mise en page du thème. Je suis toujours sur ce fichier de mise en page. Mais une fois que j'appuie sur le contenu pour la mise en page, il voit que je suis dans une page de collections. Chargez le modèle de collection. Nous sommes dans le modèle de collection en ce moment. Comme vous le voyez, il n'y a à peu près rien d'autre qu'une section. Nous donnerons plus de détails ou plus de raisons pour lesquelles cela est dans la prochaine vidéo. Mais essentiellement la raison principale pour laquelle, et si nous creusons brièvement dans cette section, est que nous voulons rendre toute la section personnalisable en utilisant un schéma. Nous pouvons définir un tas d'options ici, et ensuite nous pouvons l'utiliser dans le code. Si jamais vous êtes curieux de savoir pourquoi vous auriez un fichier modèle et soudainement vous l'avez lié à une section, pourquoi est-ce le cas ? C' est pour ça. Parce que dans nos modèles, nous n'avons pas de schéma pour modifier quoi que ce soit. Comme je vous l'ai montré avant, si nous allons dans le personnalisateur, donc je vais sortir des préférences et je vais cliquer sur personnaliser sur notre thème. Je vais aller à la page de la collection. Vous pouvez voir ici que nous avons ce bloc de section ici. Nous sommes donc en mesure de modifier les paramètres de cette collection. Nous pouvons également ajouter une section aléatoire si nous le voulions, ce que nous ferons juste en une seconde, ou nous pouvons supprimer cela complètement et il n'y a pas de contenu dans le fichier modèle. Mais juste pour démontrer si je devais me débarrasser de cette section et juste peut-être mettre un div aléatoire. Peut-être que j'apporte toujours le contenu de la collection parce que nous sommes dans le modèle ici. Pour que je puisse apporter une collection. Je ne vais pas le faire, je vais juste taper bonjour. Juste pour démontrer. La montre à thème fonctionne bien. Je vais prévisualiser le thème afin que vous n'ayez pas besoin de quitter le personnalisateur. Allez à cette page à nouveau, collections.all. Maintenant, vous pouvez voir que nous avons juste Bonjour. Vous allez bien, c'est logique, mais maintenant si nous allons dans les pages de collection dans notre personnalisateur, vous verrez qu'il a juste du contenu de collection. n'y a pas de petite section ici pour que nous puissions entrer et modifier les paramètres. Espérons que cela rend un peu plus clair pourquoi il est juste lié directement à une section. Cela nous donne la possibilité d'aller dans un onglet juste ici et non seulement d'avoir notre contenu là-dedans, mais aussi d'avoir des options pour le modifier à partir d'ici aussi. Cela couvre à peu près la mise en page. Si on retourne au liquide. Vous pouvez le lire ici dans le code lui-même ou vous pouvez jeter un oeil au diagramme, mais les principales balises liquides que vous avez sont le contenu de l'en-tête, contenu pour la mise en page ici et tous les extraits ou sections que vous voulez inclure dans votre mise en page également. Je vais montrer des mises en page alternatives en seulement une seconde, mais parlons plus des modèles. Nous avons montré un exemple rapide de la page de collection, mais ce que je veux faire est de créer un modèle pour la page À propos. Allons dans nos modèles ici et comme vous pouvez le voir, nous avons page, nous avons mot de passe, produits, recherche. Peut-être que je veux créer une nouvelle page. Laissez-moi entrer dans mon backend ici, cliquez dans les pages, ajoutez une page et cela devrait sembler assez familier. C' est assez similaire aux produits, c'est juste le titre et le contenu. Je vais mettre à propos de nous et je vais générer du Lorem Ipsum juste pour le remplir. Je vais juste chercher un générateur Lorem Ipsum aléatoire, juste prendre un tas de texte factice à mettre dedans. Je vais cliquer sur Enregistrer et ce que je veux que vous remarquiez ici, car c'est une page, nous avons le suffixe de modèle de page, c'est par défaut. Si nous allons et cliquez sur Afficher la page, vous pouvez voir ici qu'une fois de plus, il charge notre mise en page de thème, ce qui va se produire sur chaque page sauf si nous spécifions le contraire et puis parce que c'est une page, il charge ceci. Ensuite, ici, nous avons notre contenu dynamique, que nous venons de mettre en place dans notre backend ici, un titre et un contenu. Vous pouvez voir ici entre les balises h1 est le titre et dans notre div ici est le contenu. On pourrait changer ça, on pourrait structurer ça comme tu le veux. Peut-être que nous voulons prendre ceci ici et la première ligne que nous voulons dire, c'est la page pour Sauvegarder cela et nous revenons ici et vous pouvez voir que c'est la page pour À propos de nous et ensuite il continue avec le contenu. Pas très pratique, mais vous pouvez voir ici, nous pouvons prendre ces deux variables et nous pouvons les utiliser comme nous le voulons, c'est totalement personnalisable. Mais je veux vous montrer un exemple plus pratique, et c'est de pouvoir inclure une section dans ce modèle. Pour cela, je vais créer mon propre modèle personnalisé. Je peux le faire en allant, Nouveau fichier, et voici comment vous créeriez un modèle de page alternatif. Vous faites la page, puis vous placeriez un point après cela, puis vous mettez le nom de votre suppléant. Le mien va être à propos et puis bien sûr, vous devez finir avec .liquid. Si une page sur, je vais copier exactement le même contenu que la page, mais je vais faire un changement et c'est, je veux apporter une section de carte. Si nous regardons dans nos sections ici, nous avons cette section appelée carte. Comme je vous le montrerai dans une vidéo ultérieure, les sections sont géniales parce que nous pouvons les extraire dans n'importe quelle zone de notre site Web à travers des modèles. Je vais ajouter dans une section comme nous l'avons vu auparavant, la carte de section, appuyez sur Enregistrer et voir si cela a fonctionné. Maintenant, il va y avoir un processus en deux étapes pour changer cette page en modèle À propos de nous. C' est ce que vous attendez à ce que le comportement soit. Vous pourriez vous attendre à être en mesure d'entrer ici et juste changer votre About. Tu l'as dans ton code de thème. Vous devriez être en mesure d'aller ici et de mettre à jour ce suffixe de modèle. Eh bien, le gotcha ici et quelque chose que vous allez juste devoir vous rappeler de faire si jamais vous êtes pris sur cette étape, est que le modèle alternatif doit réellement être sur le thème en direct aussi bien. Ce n'est pas un problème, c'est juste une étape supplémentaire. Si nous allons dans notre thème actuel, cliquez sur actions, cliquez sur modifier le code. Nous pouvons créer un modèle du même nom et il n'a pas besoin d'avoir le même contenu. Il doit juste avoir le même nom pour que nous puissions le sélectionner dans cette zone d'administration. Je sais que cela semble stupide, mais c'est ce que vous devez faire dans Shopify, parce que ce menu de page ici, c'est pour tout. Cela ne change pas les pages, les billets de blog que vous avez sur votre site en fonction du thème que vous avez. Cela répond à la question de savoir pourquoi il n'est pas lié au thème que vous avez publié car il va extraire les modèles du thème publié. Encore une fois, je pense qu'il devrait avoir tous les modèles qui sont disponibles dans tous les thèmes, mais ce n'est tout simplement pas comme Shopify fonctionne. Quoi qu'il en soit, juste un peu d'un gotcha et la façon dont nous pouvons contourner qui est de créer la même chose, mais nous utilisons cette interface utilisateur ici sur le site Web Shopify et ce que nous pouvons faire est juste de choisir la page et le alternatif est appelé à propos, puis Shopify vont le créer avec le nom correct, page.about.liquid. Une fois cela fait, nous pouvons actualiser la page et nous pouvons venir ici pour le suffixe de modèle et nous avons cette page.about. Je vais cliquer dessus, cliquez sur Enregistrer. Maintenant, quand nous retournerons à notre page À propos de nous, nous aurons une section de carte en dessous. Regarde ça, n'est-ce pas génial ? Maintenant, ce que nous aurons aussi parce que nous voulons être en mesure de personnaliser cela. Malheureusement, nous ne pouvons pas personnaliser la section cette page à partir de nos pages parce que nous ne pouvons éditer que le titre et le contenu, mais ce que nous pouvons faire est de trouver ce modèle dans notre personnalisateur de thème en cliquant ici. Malheureusement, ce n'est pas là, nous allons juste rafraîchir la page. Cliquez là à nouveau et comme vous pouvez le voir, nous avons cette nouvelle section ici pour les pages avec À propos de nous. Maintenant, nous pouvons entrer et nous voyons cette section ici, nous pouvons réellement entrer et éditer la section. Store est le magasin Skillshare ou tout ce que vous voulez appeler sur Fake St. Toronto, Canada et vous pouvez y ajouter une image ou tout ce que vous voulez faire. C' est un excellent exemple de peut-être que vous voulez insérer une section dans une certaine page. Vous ne voulez pas que cela se produise dans toutes les pages, vous créez un modèle alternatif et vous pouvez ensuite appeler ce modèle alternatif sur n'importe quelle page. Maintenant rappelez-vous, j'ai dit que je parlerais aussi de mises en page alternatives parce qu'à quoi sert d'avoir ce fichier de mise en page ici dans un dossier si vous n'êtes pas capable de changer la mise en page ? La façon dont nous le faisons est également dans le modèle de page. Nous devons utiliser un peu de liquide au début du modèle. Nous allons utiliser un peu de liquide au début de notre modèle pour appeler la mise en page que nous voulons utiliser. Comme je l'ai dit, par défaut c'est theme.liquid, mais nous pouvons en choisir un autre si nous le choisissons. Ce que je vais faire, c'est que je peux le faire dans l'un ou l'autre ordre. C' est probablement l'ordre inverse de le faire, mais ce que je peux faire, c' est que je peux d'abord écrire la balise, puis créer la mise en page. Je vais appeler ça nu, et la raison pour laquelle je vais enlever un tas de trucs du thème standard. Je vais créer un duplicata de cela et au lieu de theme.liquid, je vais l'appeler naked.liquid et je vais supprimer l'en-tête et le pied de page. Ne me demandez pas pourquoi je fais ça. Je le fais juste à des fins de démonstration. Si j'appuie sur Enregistrer, si je retourne ici, pas d'erreurs et je rafraîchis la page parce que rappelez-vous que nous utilisons déjà ce modèle. Vous verrez que l'en-tête et le pied de page ont disparu et c'est parce que j'ai signalé ce modèle particulier pour utiliser la disposition de nu. Ici, nous définissons une mise en page alternative basée sur le thème .liquid, qui est la mise en page standard. Supprimez l'en-tête et le pied de page de cela. Maintenant, nous sommes en mesure de mettre à jour la mise en page sur ce modèle particulier. C' est essentiellement les principaux points avec les modèles de thème et les mises en page de thème. En terminant sur le diagramme ici, j'espère que ce diagramme commence à avoir un peu plus de sens maintenant. Nous avons le contenu de l'en-tête qui provient des préférences et d'autres zones entrant dans notre mise en page. Nous avons le contenu pour la mise en page, qui apporte le modèle, puis nous pouvons coller des sections dans le modèle ou la mise en page et nous pouvons également coller des extraits partout. Dans la vidéo suivante, nous allons aller plus loin dans la chaîne ici, parler de sections et d'extraits. Les extraits sont assez simples, mais les sections sont vraiment excitantes et puissantes. Je pense qu'on peut les couvrir tous les deux dans la prochaine vidéo. Je suis heureux de vous le montrer et de terminer cette section sur le code du thème. Je te vois dans la prochaine vidéo. 11. Code du thème - Sections et extraits: Dans cette leçon, nous allons passer en revue les sections et les extraits. Évidemment, nous avons déjà abordé un peu les sections et les extraits dans les leçons précédentes. En effet, il va y avoir un certain chevauchement dans toute cette structure, mais plongons plus profondément dans la discussion plus spécifique sur les sections et les extraits de cette leçon. L' un des modèles que je ne vous ai pas montrés dans la leçon précédente était le modèle de la page d'accueil, ce qui est intéressant. Si je retourne dans ADAM et que vous pouvez voir ici, collection utilise ce modèle de collection de sélection. J' ai dû accidentellement mettre ça là-dedans, laisse-moi sauver ça. Si vous allez dans beaucoup d'entre eux soit ils ont un tas de leur propre contenu personnalisé ou ils ont juste un lien vers une section telle que la page de collection, juste des liens vers le modèle de collection, la page de blog va juste au modèle de blog. Comme nous le découvrirons bientôt afin que nous puissions utiliser les fonctionnalités des sections qui comprennent la personnalisation dans le personnalisateur. Nous avions regardé cela un peu, mais je veux vous montrer d'abord le modèle index.liquid. C' est le modèle qui se charge sur notre page d'accueil et il inclut ce contenu de balise dynamique pour l'index. Si nous revenons à la structure du thème Owl, j'avais ce modèle lié au contenu de l'index, mais je l'ai supprimé au début de deux leçons il y a. C' est parce qu'il n'est pas lié à chaque modèle, mais il apparaît dans un seul modèle, et c'est le modèle de page d'accueil. Mais vous savez quoi, je pourrais me tromper parce que peut-être nous pourrions mettre du contenu pour l'index dans chaque modèle. Laissons cette expérience maintenant et honnêtement, je n'ai jamais essayé cela avant, donc je ne sais pas si ça va marcher, mais voyons si nous pouvons juste le mettre dans l'un de nos modèles. C' est le modèle de collection. Si je vais dans mon customizer. Soyez intéressant de voir ce qui se passe avec cette balise dynamique. Des erreurs dans notre montre à thème ? Non. Allons dans la liste des collections. Désolé, c'est le mauvais. Nous voulons des pages de collection. Fait intéressant, nous avons ici cette section qui a été codée en dur dans la collection. Mais nous avons aussi la sélection que nous avions sur le contenu de notre page d'accueil pour l'index, ce qui nous permet d'ajouter, supprimer et commander dynamiquement des sections. Plutôt cool. Je n'ai jamais essayé cela auparavant et je ne sais pas si c'est trop pratique, mais comment c'est configuré par défaut. Je vais revenir à ce que c'était avant. Est sur la page d'accueil, vous avez ce contenu pour l'index. Peut-être que j'ai besoin de remettre ce truc dans mon schéma. Vous avez accès à cette balise super génial appelée content for index, qui vous permet d'avoir une liste dynamique de sections et s'il est logique pour vous de mettre sur une autre page que la page d'accueil. N' hésitez pas à le faire, mais sur la page d'accueil, par défaut, vous avez du contenu pour l'index. Maintenant, bien sûr, vous pouvez aller et faire ce modèle comme n'importe quel autre modèle. Ce modèle est là pour vous de l'utiliser ne doit pas simplement être contenu pour l'index, mais le contenu pour l'index est cool parce que nous pouvons, comme je l'ai mentionné précédemment, ajouter des sections. Maintenant, nous allons aller plus loin dans les sections dans une vidéo ultérieure en créant notre propre section et ensuite vous allez vraiment apprendre le pouvoir des sections. Mais pour l'instant, plongons dans le code de l'un d'eux. nous y sommes déjà allé un peu, mais si nous allons dans modèles et regardons un modèle pour le panier, tout est contenu dans une section. Si nous allons dans la section ici pour le modèle de panier, alors nous avons tout ce qui apparaît dans notre page de panier avec un schéma pour l'édition. C' est essentiellement la partie qui sépare les sections de tout autre fichier dans le code de thème Owl. Le schéma peut sembler un peu intimidant au début, mais c'est une façon incroyable d'ajouter des options personnalisables que nous utilisons dans tout notre code ici et nous permettons à l'utilisateur de les éditer. Comme vous pouvez le voir ici, il y a un tas de données linguistiques différentes et cela convertit l'étiquette ou le nom du schéma en fonction de votre langue. Mais vous n'avez pas à le faire, vous pouvez simplement vous débarrasser de cet objet tous ensemble. Si vous voulez le faire dans une langue, vous pouvez avoir coupé la page. La plupart des thèmes sur lesquels je travaille sont comme ça. n'y a pas tant d'options différentes pour les langues. Je vais juste me débarrasser de cet objet et le simplifier et vous pouvez voir ici, nous avons le niveau supérieur de notre schéma. Nous avons le nom de cette section, les paramètres, puis dans nos paramètres, nous avons tous les différents paramètres que nous pouvons modifier. Tout comme nous l'avions ici dans notre settings.schema, nous pouvons créer un schéma pour chaque section individuelle et ensuite appeler ces options lorsque nous en avons besoin. Il fonctionne de la même manière que le schéma dans notre schéma de réglage, c'est pour l'ensemble du thème. Si nous passons à une section spécifique, qu'avons-nous avant ? Nous avions un modèle de collection, n'est-ce pas ? Quoi qu'il en soit, ça n'a pas vraiment d'importance. Ils sont tous similaires dans leur mode de fonctionnement. Ce n'était pas celle-là, mais jetons un coup d'oeil à celui-ci aussi. Nous avons un nom, des pages de collection, et voici nos paramètres. Nous avons différents types d'entrée ici, et les différents types d'entrée que nous avons à notre disposition, nous pouvons passer en revue dès maintenant. Je vais juste aller dans la documentation. Il suffit de taper dans Google, types d'entrée Shopify, la configuration des paramètres de thème. Permettez-moi de jeter un coup d'oeil et de voir si c'est le document que nous recherchons. Paramètres d'entrée si je clique dessus, ici nous allons. Maintenant, nous avons dans la documentation, les différents paramètres d'entrée. Vous pouvez créer différentes entrées selon que nous allons utiliser des textes, si nous allons sélectionner une image, si ce sera une sélection booléenne vraie ou fausse comme l'un ou l'autre, si ce sera une sélection , plage de cases à cocher. Nous pouvons voir cela fonctionner si nous allons dans notre customizer et nous pouvons regarder la riche gamme de différents types d'entrée que nous avons ici. Ça va être une image. Si je vais ici, ça va être un sélecteur d'images. Je retourne à mon personnalisateur, ce sont des sélections. Si j'entre ici, c'est un texto. Il s'agit d'une zone de texte, et il s'agit en fait d'un champ de lien ou d'URL. Laissez-moi vérifier le nom sur celui-ci pour voir s'il s'agit d'un lien ou d'une URL, d'une liste de liens. Il y avait une URL. Donc, le type d'entrée pour celui-ci, qui ressemble majoritairement à un manuel standard, mais ce n'est pas le cas. Si vous cliquez dessus, certaines options apparaissent et nous pouvons le définir en utilisant le type d'URL d'entrée. D'accord ? Alors regardons le diaporama, d'accord ? Parce que c'est un bon exemple. Si je vais ici et que je trouve cette section dans notre code de thème. Et j'ai regardé vers le bas le schéma. Ce schéma représentera directement ce qui se passe ici. Donc, si je regarde les choses en haut, il doit avoir un nom et il doit avoir des paramètres. Donc, le nom est diaporama, et c'est ce qui arrive ici. La classe, est pour définir des classes CSS sur la section réelle. Donc on ne peut pas le voir ici, mais c'est là-dedans. Et puis nous allons dans nos paramètres. Ok, ce sera notre premier réglage. Et c'est sélectionner la hauteur idéale du diaporama et l'étiquette est la hauteur du diaporama. Donc si on va ici, il est là, hauteur de glissement. Et puis qu'est-ce qui définit ces options ici ? Eh bien, c'est aussi dans le schéma. Et nous pouvons descendre dans ce champ appelé Options. Et puis vous avez une liste d'options ici. Encore une fois, vous avez tellement d'informations linguistiques qui rendent les choses confuses. Donc, je vais juste supprimer une partie de tout ça pour juste le rendre plus simple pour vous les gars. On parle tous anglais ici. Donc, vous serez toujours en mesure de comprendre ce qui se passe ici sans le définir à tant de langues différentes. Très bien, donc première option, l'étiquette est adapter une première image et la valeur quand ils sélectionnent cela, va être adapter. D' accord ? Adapter à la première image. Et puis il va définir cette valeur que l'utilisateur ne voit pas. Mais c'est la valeur que nous obtenons à regarder dans nos modèles. Donc, si je cherche adapter maintenant, je peux voir que si nous cherchons, ce n'est pas un bon exemple. Mais nous devrons jeter un oeil à l'endroit où cela est utilisé. Cherchons juste hauteur du diaporama car il ne sert à rien de le définir si elle n'est pas utilisée dans le code. Donc, cela devrait être ailleurs dans le code. Et vous pouvez voir ici, nous pouvons appeler cette option en l'appelant d'abord section objet, puis en allant dans les paramètres, puis en cherchant la hauteur du diaporama. Et en fait, il y avait un adaptateur juste là. Donc, il est dit que si la hauteur du diaporama est réglée pour s'adapter, cette option que nous avons examinée auparavant. Ici, adaptez-vous. Alors on veut faire tout ça, d'accord ? Nous utilisons donc la valeur que nous avons définie dans notre schéma, que l'utilisateur peut modifier ici. Et nous mettons directement ça dans le code. Alors j'espère que vous pouvez commencer à voir que c'est vraiment puissant. Vous pouvez créer un tas de personnalisations dans votre nouveau code qui, une fois construit, vous pouvez réellement entrer ici et utiliser une interface utilisateur avec laquelle interagir. Et ça va être bon pour si vous développez un site Web pour un client par exemple. Et ça va être bon, même pour toi. Vous le construisez une fois et vous n'avez plus à entrer dans le code. C' est une option que vous pouvez personnaliser. Peut-être que vous voulez le changer de temps en temps, c'est une option pour vous de le faire. Donc, je sais que le schéma pourrait sembler un peu déroutant et honnêtement une fois que vous commencez à être imbriqué dans des niveaux plus profonds, commence à devenir encore plus difficile à lire. Mais avec le temps, vous devriez commencer à relier ce que vous voyez ici, à ce que vous voyez ici. Et il devrait être facile de créer plus d'options. D'accord ? Donc, à titre d'exemple, qu'est-ce que nous pouvons ajouter à ce diaporama en tant que personnalisation ? Peut-être que nous voulons changer la taille du texte. C' était mon idée, mais maintenant je vois que c'est déjà fait. Ouais, tout ce que vous voulez fondamentalement changer sur tout ou nous donner une option de personnalisation dans le personnalisateur, vous pouvez configurer dans votre schéma et ensuite référencer dans votre code de section. Bon, donc juste pour résumer comment on peut utiliser les sections. Nous pouvons soit les sélectionner dans le contenu pour l'index. Nous pouvons les glisser spécifiquement dans le code dans un modèle, ou nous pouvons faire glisser la section dans un laboratoire. Et bien sûr, l'en-tête et le pied de page, pourquoi ils apparaissent sur chaque page est parce que ce sont des sections incluses dans la mise en page. Ces en-têtes et pieds de page seront sur chaque page à moins bien sûr que nous y sommes allés. Et disons que nous avons supprimé l'en-tête de section de theme.liquid. Nous actualisons la page. Après avoir confirmé que la page est mise à jour, nous rechargeons la page. Nous allons maintenant voir que l'en-tête est parti et il est parti pour chaque page qui utilise ce modèle, qui, comme je l'ai mentionné précédemment, pour theme.liquid est standard. Ainsi, même l'en-tête et le pied de page que vous incluez dans la mise en page du thème est également une section. Pour revenir au diagramme, vous pouvez insérer des sections dynamiquement dans le contenu pour l'index, dans les modèles en les codant en dur ou dans les mises en page en les codant en dur. Et juste pour résumer comment on fait ça, c'est juste avec cette étiquette liquide ici. Les crochets bouclés, la section de signe de pourcentage, puis le nom de la section. Donc, j'espère que vous obtenez maintenant que les sections sont assez puissantes et qu'elles sont en quelque sorte au cœur de votre thème. Maintenant, comme je l'ai dit, nous allons construire notre propre section, et ça va vous faire revenir cette théorie un peu plus pour vous. Donc, vous allez acquérir de l'expérience avec cette section et vraiment apprendre la puissance et comment vous pouvez développer vos propres sections personnalisées. Mais on a encore une chose à faire, c'est des extraits. Donc, des extraits, vous pouvez penser comme presque comme une section stupide. Fondamentalement juste un morceau de code que vous voulez réutiliser sur différentes parties de votre site. Donc, d'habitude, il n'y a rien de trop fantaisie qui se passe ici. Tout ce qu'il fait, c'est apporter, disons que ce sont des produits. Comment s'appelle celui-là ? Prix du produit.liquide. Donc, si je veux aller chercher dans mon thème, rechercher dans le dossier pour le prix du produit, il va me montrer toutes les références et je peux voir ici où cet extrait a été inclus. Donc, je peux aller dans Collection.Liquide. Et vous pouvez voir ici, j'inclut cet extrait. Donc, si je voulais éditer le contenu ici, je devrai plonger dans l'extrait et éditer ce code dans l'extrait. Juste pour vous montrer fondamentalement créer notre propre extrait basé sur le contenu que nous avons déjà. Disons simplement que nous voulions réutiliser une section ici et qu'il était juste plus logique de l'avoir comme extrait. Donc, disons juste que nous voulons que ce tiroir de recherche soit un extrait. Donc je pourrais juste prendre tout ça, l'enlever. Mettez dans une étiquette liquide. droite. Inclure le tiroir de recherche. Donc je vais l'appeler tiroir de recherche. OK, sauvegardez ça et assurez-vous que vous avez ce code enregistré dans votre presse-papiers. Ou vous pouvez simplement Ctrl + Z pour le récupérer. Et ce que je vais faire, c'est d'aller de l'avant et de créer cet extrait maintenant. Donc, je vais l'appeler par le même nom que j'ai mis à côté de l'inclusion. Rechercher drawer.liquid. N' oublie pas le liquide, et je le mets là-dedans. Donc, maintenant si nous revenons à notre site Web. Je me demande si cela utilise toujours le nu, que l'on utilise toujours la mise en page nue. Mais si nous retournons à notre page d'accueil, nous aurons un en-tête à nouveau. Et le tiroir de recherche est ce qui apparaît lorsque vous cliquez sur ce que je crois. Vérifions ça. C'est là-haut. Chercher tiroir est cette chose qui vient en haut. Et vous pouvez voir, même si le code n'est plus là, nous l'incluons toujours d'une autre source. Donc, comme vous pouvez le voir, vous pouvez vraiment vous en sortir sans extraits, mais c'est une très bonne pratique de les utiliser si vous prévoyez de réutiliser du code ou peut-être que vous voulez juste nettoyer ce fichier et ne pas avoir autant de composants différents là-dedans. Peut-être que ça se lit un peu mieux pour toi. Donc, vous allez dans votre theme.liquid, vous voyez tout comprend tiroir de recherche, puis il va dans l'en-tête. Ok, cool. l'autre côté, cela signifie que vous allez devoir aller chercher plus de fichiers si vous utilisez plus d'extraits. Donc, c'est l'échange avec l'utilisation d'extraits. Est-ce que vous arrivez à les mettre dans un joli petit endroit que vous pouvez réutiliser plus tard. Mais il va falloir que tu rentres et que tu trouves cet extrait, ce que j'essaie de faire maintenant. Et tu vas devoir l'éditer là, cool. Donc, cela couvre à peu près tout dans ce diagramme. Donc, nous avons parlé de mise en page, nous avons parlé de ces balises liquides dynamiques, du contenu d'en-tête et du contenu pour l'index. Nous avons parlé du contenu pour la mise en page. Et nous avons parlé de la façon dont les quatre principaux domaines de votre thème, mise en page, de vos sections de modèles et de vos extraits interagissent tous ensemble. Et une fois que vous commencez à jouer avec Shopify, il commence vraiment à comprendre pourquoi il est créé de cette façon. Et il vous donne une bonne structure pour vraiment faire tout ce que vous voulez avec votre thème. Donc c'est vraiment cool. La seule chose qui aurait pu vous confondre à travers tout ça, c'est bien sûr le liquide. Donc, nous avons vu beaucoup de ce langage de modélisation appelé liquide. Voici un bon exemple, beaucoup de liquide ici. Dans la prochaine vidéo, nous allons plonger profondément dans le liquide. Donc, ne vous inquiétez pas, nous allons couvrir ce qui se passe avec ce code liquide. Peut-être pas spécifiquement sur ce modèle, mais nous allons parler de liquide dans la prochaine vidéo. Donc, je suis excité de continuer sur ce voyage et je vous verrai dans la prochaine vidéo. 12. Code du thème - Modèles JSON: Dans cette vidéo, nous allons parler des modèles JSON. Les modèles JSON sont une alternative plus récente aux modèles Liquid qui offrent une plus grande flexibilité dans l'éditeur de thème, ce qui nous permet de créer des sections réordonnables dans l'administrateur non seulement pour la page d'accueil, mais aussi pour les autres modèles. Si nous regardons le fichier d'index dans le thème par défaut précédent de Shopify Debut, vous verrez le contenu de la balise pour l'index. Cette balise génère dynamiquement notre page d'accueil en fonction d'une liste de sections. Cette liste de sections que nous pouvons à la fois éditer dans l'admin, ainsi que dans le fichier settings_data.json. Si vous consultez le fichier settings_data.json, vous verrez ici la liste des sections de la page d'accueil sous l'objet actuel. Si je fais défiler jusqu'au contenu pour l'index, vous pouvez voir qu'il s'agit de la liste des sections qui apparaît sur la page d'accueil de ce thème particulier. Notez que si nous revenons au fichier index.liquid ici, il n'y a pas de code liquide dans ce fichier à part ce contenu de balise singulier pour l'index. Et si au lieu de cette balise ici, nous stockions la liste des sections que nous avons trouvées sur settings_data.json dans ce fichier à la place ? C' est essentiellement ce que Shopify a fait dans son nouveau thème, Dawn. Si je navigue sur le thème Dawn que j'ai stocké ici, cliquez sur Modifier le code, vous verrez que le modèle d'index est maintenant un fichier JSON. Tout comme notre fichier settings_data.json dans notre thème Debut, vous pouvez voir que des données similaires existent maintenant dans le modèle lui-même. Voici l'ordre des sections, tout comme nous l'avions dans le contenu du tableau d'index sur le thème précédent que nous avons examiné. Le modèle d'index est maintenant un fichier JSON qui stocke la liste des sections tout comme le modèle de produit , le modèle d'article, le modèle de page , etc. C' est ce qui permet maintenant des sections réordonnables dans tous nos modèles, pas seulement dans le modèle de page d'accueil. La conséquence est que vous aurez besoin de tout le code liquide qui peut avoir été stocké dans ces modèles pour être déplacé dans des sections à la place, même si vous prévoyez seulement d'avoir une section dans votre modèle. Jetons un regard plus approfondi sur le code qui va dans ces modèles JSON. Ici, j'ai le thème de l'aube deux que j'ai mis en place plus tôt dans cette classe. C' est exactement la même chose que le thème principal Dawn avec une modification mineure, mais apparemment il est publié et c'est juste ici, je vais éditer celui-ci. Si je vais dans Modifier le code et que je clique ici pour ajouter un nouveau modèle, vous verrez qu'il y a maintenant une option ici pour créer votre modèle en tant que modèle Liquid ou modèle JSON. Laissons l'option JSON sélectionnée ici, et au lieu de l'article, je vais passer ceci au produit. Nous avons product.json, et je vais le laisser avec ce nom par défaut d'alternative. Créons cela et tout comme nous avons vu il y a quelques vidéos sur les modèles, nous pouvons également créer des modèles alternatifs avec JSON. Je vais vous montrer comment cela apparaît dans le dernier personnalisateur de thème en seulement une seconde. Maintenant, comme toujours, ce que j'aime faire est d'ouvrir la documentation et nous l'avions juste sur notre écran il y a une seconde. Revenons-y maintenant et ce que je vais faire, c'est les mettre côte à côte. Mettez ça à gauche et je vais fermer ça, mettre ça à droite, et zoomer sur notre code. Malheureusement, il semble que je ne peux pas me débarrasser de ça alors je vais juste bouger ça, et on y va. Lisons à propos des modèles JSON. Comme il est dit ici, les modèles JSON vous permettent de contrôler l' apparence des différentes pages de la boutique en ligne en utilisant des sections, et ce sont maintenant des fichiers de données qui stockent la liste des sections à rendre plutôt que des modèles qui contiennent Code liquide. Je vous encourage à tout lire sur cette page, mais faisons défiler vers le bas jusqu'aux choses importantes, la structure du modèle. Les modèles JSON doivent être des fichiers JSON valides, la racine doit être un objet avec les attributs suivants, donc nous en avons ici qui sont obligatoires et d'autres ici qui ne sont pas obligatoires. Évidemment, nous allons avoir besoin d'avoir les champs requis remplis dans notre objet ici. Mais pour ceux qui ne sont pas obligatoires, nous n'avons pas nécessairement besoin de les mettre dans l'objet, mais nous le pouvons si nous le voulons. Comme vous le voyez ici, il est déjà rempli avec l'objet d'une section et un tableau d'ordres. Ce qui manque, c'est la chaîne de nom ici, donc je vais l'ajouter maintenant. Nom, et je vais l'appeler modèle alternatif parce que je ne peux pas trouver autre chose en ce moment. Allons appuyer sur Enregistrer, assurez-vous que nous n'avons pas de problèmes. On y va. Les sections ne peuvent pas être vides et l'ordre ne peut pas être vide, donc il vous donnera ceci quand il démarre. Mais alors, si vous essayez d'économiser dessus, cela arrivera avec une erreur. Afin de corriger ces erreurs, ce que nous allons devoir faire est de remplir cet objet et ce tableau. Je vais ouvrir cet objet et à l'intérieur, ce que nous allons devoir faire est de créer un objet de section. Ce que nous devons faire avant de faire c'est décider dans quelle section nous allons charger parce que nous avons besoin d'au moins une section, et dans le thème Dawn, nous avons une section appelée produit principal qui va également dans le modèle de produit principal. Utilisons ça, et je vais juste appeler ça principal. Ouvrons un objet pour cette section principale et ici, ce que nous faisons est de faire défiler vers le bas et de regarder les données de section. Encore une fois, nous avons cette table des différents champs qui sont requis, et fondamentalement, tout ce qui est nécessaire dans cette section elle-même, sauf si nous entrons dans des blocs est le type de section. Comme il est dit ici, c'est le nom de fichier de ce fichier de section à rendre sans l'extension. C' est très simple. Tout ce que nous avons à faire est de mettre le produit principal ici sans le .liquide. Nous avons le type et ensuite le type à l'intérieur, nous avons le produit principal. Maintenant, bien sûr, l'autre erreur que nous devons corriger est que l'ordre ne peut pas être vide, donc vous devez mettre même s'il n'y a qu'une seule section, nous devons mettre ce qui est ici, le nom tel que nous avons défini ici à l'intérieur de l'objet de section, nous devons mettre cela dans notre tableau d'ordres. Si j'appuie sur Save, on ne devrait pas avoir d'erreurs. Nous sommes tous bons, et maintenant si je vais à Personnaliser le thème, ouvrez cela, je vais l'ouvrir au complet, minimiser un peu, puis cliquez ici pour choisir le modèle que nous éditons. Je vais aller dans Produits. Ici, vous pourrez voir le modèle alternatif que nous venons de créer et que nous avons simplement nommé alternatif. Si je clique sur celui-ci, vous verrez maintenant que nous avons cette section d'informations produit qui est en fait principale. Nous avons maintenant notre section ici et nous pouvons commencer à y ajouter de nouvelles sections. Il est important de noter que toutes les modifications que nous effectuons ici seront maintenant stockées dans le modèle lui-même car ce modèle JSON stocke la liste des sections et il stocke également les paramètres. Maintenant, nous n'avons plus ce besoin de tant de données à stocker dans ce fichier JSON unique. Les données de chaque modèle individuel et ses personnalisations sont stockées dans le modèle lui-même. Même si nous cliquons sur settings_data.json, vous verrez que cet objet actuel est complètement vide car ces données ont été déplacées dans le modèle de produit spécifique. Ce que je vais faire ici est d'ajouter une section supplémentaire ici, et vous verrez cela reflété dans le personnalisateur. Je vais juste copier cet objet ici et que devrions-nous ajouter ? Ajoutons dans une section newsletter. Nous allons juste appeler cette newsletter et ensuite dans le type, rappelez-vous que nous devons utiliser le nom du fichier réel moins le fichier .liquid. Newsletter.Liquid, retirez le .IIquid et il y a notre type juste là. Bien sûr, nous devons ajouter cela à notre commande ici donc je vais ajouter une virgule et ensuite je vais mettre la newsletter. Je vais frapper sur Save. Maintenant, passons à notre personnalisateur et actualisons, nous assurant que nous sommes sur le modèle alternatif, et ici vous pouvez voir que nous avons des informations sur les produits et l'inscription par e-mail. N' oubliez pas que j'ai dit que tous les changements que nous apporterons ici seront également reflétés dans notre dossier. Vous venez de voir que nous avons fait une modification ici au fichier lui-même et ces changements ont été reflétés dans l'éditeur de thème. Eh bien, cela fonctionne dans les deux sens en ce sens que si nous changeons l'ordre de ceux-ci ou ajoutons des blocs, cela sera également reflété dans le fichier. Si j'appuie sur Enregistrer, réorganisez l'inscription par e-mail au-dessus des informations du produit. Tout est cassé de toute façon, mais nous allons rafraîchir ici, et comme vous pouvez le voir, nous avons maintenant la newsletter première et la deuxième principale dans notre ordre, et nous avons également eu quelques paramètres par défaut ajoutés à notre objet ici. Je vais taper la newsletter que nous avions avant. Il est maintenant en haut et nous avons quelques paramètres par défaut remplis dans cet objet de paramètres. Comme je l'ai mentionné, nous avons une liaison de données bidirectionnelle ici donc si je devais changer cela ici, cela refléterait dans le personnalisateur. Si je monte à l'inscription par e-mail, vous pouvez voir tous ces jeux de couleurs, arrière-plan un, arrière-plan aussi. Je vais supposer que l'ID du second est background-2, donc je vais changer cela dans le fichier lui-même. Appuyez sur Enregistrer sur cela, retournez dans l' actualisation du personnalisateur et vous verrez que l'arrière-plan 2 est maintenant stocké. Encore une fois, je peux changer cela en arrière-plan 1 , revenez ici et vous verrez que ce paramètre est stocké dans le fichier. Le changement de paradigme est le suivant. JSON contient des données, alors que les fichiers .liquid contiennent du code liquide. Ici, vous pouvez voir que le nouveau système de modèles a des modèles comme données, pas Liquid. Ce qui nous permet de les rendre plus dynamiques et de les rendre plus dynamiques afin que nous puissions modifier nos données de section et l'ordre de section dans le personnalisateur, ce qui nous permet de le faire sur chaque modèle maintenant parce que nous avons des données de modèle stockées sur le lui-même. Maintenant, ce que nous avons ce sont des données stockées dans des modèles plutôt que Liquid, et ce qui nous permet de faire est d'avoir une personnalisation sur chaque page, alors que précédemment nous avions l'habitude de coder en dur dans balises de section dans différentes parties du code Liquid pour dire mettez la section ici. Maintenant, il ne s'agit que de données et c'est beaucoup plus dynamique. Une autre chose à noter ici est les données de bloc, et je ne recommande pas d'essayer de le faire manuellement dans le fichier. Il suffit d'aller directement dans votre customizer ici, Ajouter bloc. Disons que nous voulons avoir un titre ici, abonnez-vous à notre email. Ce sont tous les paramètres par défaut et le mettre sous forme d'e-mail. Appuyez sur Enregistrer et regardons simplement comment cela affecte notre objet JSON. Rafraîchissant la page ici, vous verrez que tout comme il est dit dans la documentation avec les blocs et etc Laissez-moi déplacer ceci. Vous pouvez voir que nous avons un ID de bloc pour le bloc. Nous avons le type de bloc qui est arbitraire. C' est juste quel que soit votre code répond, puis nous avons un objet de paramètres pour stocker les paramètres à l'intérieur de ce bloc. Toute la documentation est ici, et notre documentation peut être difficile à lire pour certains débutants, donc, pourquoi je suis ici pour fournir ce tutoriel. Mais essentiellement, les principaux points à comprendre ici sont que nous stockons des données, pas du code Liquid dans nos modèles lorsque nous utilisons JSON. C' est ainsi que nous allons de l'avant afin que nous puissions avoir le plus de flexibilité pour nos administrateurs puissent entrer ici et modifier ce qu'ils veulent et réorganiser les sections sur différents modèles. Cela a été une grande frustration des utilisateurs de Shopify depuis longtemps avoir une page d'accueil où ils peuvent réorganiser des sections comme cette fonctionnalité est disponible depuis longtemps sur la page d'accueil, mais il n'a pas été disponible sur d'autres modèles jusqu'à présent, jusqu'à ce que les modèles JSON et c'est la technologie qui le permet. Bien sûr, vous pouvez continuer à utiliser des modèles Liquid si vous le souhaitez. Mais nous avons ces modèles JSON maintenant et vous commencerez à voir que plus souvent avec le temps, c'est la façon moderne de le faire. Par conséquent, pourquoi j'ai ajouté cette section à la classe. Toutes les questions, évidemment, les laissent dans les commentaires, et dans la prochaine vidéo, nous allons plonger un peu plus profondément dans le liquide Shopify. 13. Liquid : le « langage de programmation » de Shopify: Très bien les gars, bienvenue. Dans cette leçon, nous allons tout parler de Liquid. Dans les leçons précédentes, nous avons regardé notre code de thème et nous avons parlé de la structure, et je vous ai montré ce diagramme, mais tout au long de notre code de thème, si nous allons à l'une de nos sections de modèles ou des extraits, nous allons inévitablement voir un peu de liquide. Regarde celui-là, par exemple. Modèle de tiret de produit. On a des lignes et des lignes de Liquid. Vous devriez être familier avec HTML. Vous pouvez voir ici, il y a du HTML, mais il y a beaucoup de liquide autour et il y a aussi du liquide à l'intérieur. Liquid est comme le langage de modèle de votre thème Shopify. C' est un peu comme un langage de programmation stupide qui, comme il est dit ici, vous donne une logique de programmation qui indique à un modèle ce qu'il faut faire. Les balises sont enveloppées dans ces caractères sauf lorsque nous sortons juste une variable simple. Au lieu d'utiliser le signe de pourcentage, nous avons sorti un deuxième crochet bouclé. Si vous vous demandez quelle est la différence entre ceux qui commencent et se terminent par deux crochets bouclés et celui qui commence par un crochet bouclé et un signe de pourcentage, c'est quand nous effectuons la logique, et c'est quand nous sortons juste une variable à l'écran. Ce tiret ici aussi, j'ai récemment appris que, qui supprime les espaces. Donc, si je supprime simplement cela de chaque côté, il va enregistrer une nouvelle ligne dans votre code et donc vous allez obtenir des espaces. Cela n'affecte pas réellement la logique, cela va toujours fonctionner, mais vous verrez dans votre fichier de sortie, si vous n'utilisez pas ces tirets, que vous obtiendrez beaucoup d'espaces et cela pourrait ralentir la charge de votre site. Juste comme une note d'accompagnement. Comment allons-nous briser cette section ? Évidemment, il y a beaucoup à couvrir avec Liquid. Nous allons parler des balises variables, des balises de thème, des balises de flux de contrôle et des balises d'itération , d'une sorte de large niveau, et si vous voulez aller plus loin dans l'un de ces éléments, inévitablement, vous allez devoir le faire plus loin, vous allez dans le développement de thèmes, c'est l'endroit que vous voudriez regarder. Il y a aussi une référence rapide appelée la feuille de triche liquide Shopify. Si je tape juste une feuille de triche liquide, je peux attraper ça. C' est l'original, je crois, mais il est maintenant cassé, donc celui qui est sur le site de Shopify, ça va probablement être mieux. Maintenant, vous pouvez voir la feuille de triche, qui a fondamentalement toutes les différentes options et ce qu'ils font. Par exemple, si j'appuie simplement sur Commande-F ou Ctrl-F sur Windows, je peux maintenant rechercher la page et peut-être que je veux trouver le titre d'un produit. Je vais taper, titre des points produits, puis je peux en apprendre plus sur ce qu'il fait. Retourne simplement le titre du produit. Je me disais, peut-être que c'est un nom de produit, recherche qui, ça ne vient pas, titre. C' est le mot clé que je dois utiliser ou peut-être que j'irai juste au produit et voir quelles variables j'ai disponibles sur l'objet produit et puis, je vois, c'est celui que je cherche. La feuille de triche est vraiment précieuse. Certaines personnes recommandent de l'imprimer et de l'avoir sur votre bureau, mais vous avez ce lien ici à tout moment et vous pouvez au moins rechercher si c'est dans votre navigateur. J' aime toujours garder la feuille de triche à portée de main, mais heureusement, ce n'est qu'une courte recherche Google loin. Référencez certainement ceci comme une référence rapide, puis vous avez votre documentation Shopify pour des apprentissages plus approfondis. Ce que je vais faire, c'est commencer de bas en haut. Je vais d'abord cliquer sur les balises variables, et nous allons en apprendre davantage sur nos balises variables. Comme vous pouvez le voir ici, il y a un résumé et nous pouvons aller à chacune de ces différentes façons d'interagir avec les variables. Le principal sera Affecter. Si vous avez fait une programmation dans le passé, vous devriez être familier avec l'affectation. Dans Liquid, nous avons juste besoin d'utiliser le mot assign, puis un nom de variable, puis le signe égal, puis la valeur que nous voulons lui attribuer. Comme vous pouvez le voir ici, un exemple très basique, assigner des pommes à la nourriture préférée, puis quand nous utilisons la syntaxe double des crochets bouclés, nous pouvons simplement sortir la valeur de cela, et ensuite votre sortie sera celle-ci. Si nous allons dans notre code, nous pouvons voir ici beaucoup de signes pour le produit, tableau de bord, modèle. affectations nous permettent de dire plus facilement, par exemple, que nous avons une valeur que nous voulons utiliser plusieurs fois sur la page, peut-être que c'est une bonne idée de l'assigner comme une variable haut et ensuite vous pouvez la changer à un endroit ou peut-être vous ont une chaîne très longue comme ce point de produit sélectionné soulignement ou soulignement en premier, ainsi de suite, ainsi de suite. Vous ne voulez pas avoir à écrire cela à chaque fois, donc vous pouvez le mettre dans un nom de variable plus petit qui est peut-être plus descriptif. Ici, nous avons une déclaration de cas à laquelle nous arriverons dans une seconde, où j'attribue la valeur des choses en fonction de différents cas. Si je prends ceci, c'est évidemment là qu'il est assigné et je le cherche pour un autre code. C' est évidemment là où il est produit. Vous pouvez assigner des variables vous-même, mais plus probablement vous utiliserez des variables qui se trouvent sur des objets. Si nous revenons à notre référence, et que nous allons dans notre feuille de triche thématique, nous pouvons descendre et regarder les différents objets et quelles variables sont disponibles pour eux. Donc, nous avons un objet pour la coupe, nous avons un objet pour la caisse, objet pour article, objet pour adresse. Tant d'objets différents. Les plus évidents, les produits font l'objet ici. Lorsque nous travaillons avec les produits, nous voulons pouvoir accéder à toutes ces variables au sein d'un produit. Nous avons l'objet de la page juste ici. La grande chose à propos de Shopify est qu'il est tout à fait logique dans le sens que si je suis dans le modèle de page, j'ai accès à l'objet page. Si je suis dans le modèle de produit, j'ai accès à l'objet produit. Juste en vous montrant comme un exemple, nous avons regardé le modèle de page avant. Si je vais à celui-ci juste ici, vous voyez que nous sommes dans un modèle de page en ce moment. Nous avons accès à l'objet page, puis nous pouvons appeler une variable de l'objet page ici en allant titre point. Vous pouvez voir ici, je n'ai pas attribué de titre à la page. n'y a pas d'affectation dans le code lui-même. Ce qu'il fait, c'est qu'il regarde la page sur laquelle nous sommes actuellement et trouve le titre, comme nous l'avons dit dans notre zone d'administration des pages. C' est probablement plus commun, au moins au début, que d'assigner vos propres variables, vous allez regarder les variables qui viennent sur l'objet que vous traitez et vous allez soit sortir eux ou faire d'autres opérations avec eux. Cela couvre les « balises variables ». Évidemment, il y en avait quelques autres là-dedans. Désolé, je vais y retourner. Vous voudrez peut-être regarder « capture », « incrément », « décrément », mais « assigner » est le principal. Je vous recommande certainement de revenir en arrière et de lire cette documentation, mais nous allons passer à travers cela dans cette leçon parce que ce n'est qu'une leçon pour passer en revue l'intégralité de Liquid. D' accord. Donc, en allant dans notre section de balise « theme », ce sont des choses comme « include », « layout » que nous avons vu avant, « section », donc chaque fois que nous avons inclus un « extrait ». Si je vais à « theme.liquid », nous allons probablement voir le meilleur exemple de toutes ces choses. Rappelez-vous donc que nous avons créé cet « extrait » plus tôt qui est considéré comme une balise « thème ». Et évidemment, si nous descendons, nous avons des « sections » et ensuite « layout » était celui que nous avons utilisé dans notre « page.about ». Nous avons décidé d'utiliser une « mise en page » alternative que nous avons définie dans notre « dossier de mise en page », ok ? On a quoi d'autres ici ? Nous avons aussi « Commentaire ». Donc, si nous voulons faire un commentaire dans le code, nous pouvons le faire en utilisant la balise « commentaire » assez commune dans n'importe quel langage de programmation. « Inclure » pour « extraits ». Nous pouvons également envoyer des variables à l' « extrait de code ». Si j'inclue ce nom d'extrait, il va évidemment inclure le contenu de cela, mais alors il va aussi donner à cet « extrait » l'accès aux variables que je lui ai envoyées. D' accord. De plus, si vous créez un « formulaire » au lieu d'utiliser une balise « form » standard en HTML, vous pouvez utiliser une version plus intelligente dans Liquid en utilisant les balises « form » et « endform ». D' accord. Nous allons briser sur cela parce que nous pourrions être pris sur des « formes » pendant un certain temps en soi. Il y a un tas de « formes » différentes à Shopify. Et si nous utilisons cette syntaxe, nous pouvons profiter de certaines de la logique intégrée de Shopify. D' accord. « Layout » nous avons utilisé avant. « Pagination. » C'est vraiment cool parce que « pagination » peut être une douleur dans le cul pour vous programmer, mais dans Liquid, c'est assez simple. Nous avons juste besoin de « envelopper » la chose que nous voulons « paginer » dans ces balises « paginate » et « fin paginate ». D'accord. Ensuite, nous pouvons « paginer » par cinq ou quelle que soit la valeur que nous voulons. « Raw » nous permet d'éteindre Liquide sous forme brute. Je ne sais pas pourquoi vous auriez besoin de faire ça. « Section » nous avons vu et nous pouvons utiliser « style » pour sortir certains styles dans un modèle réel. La raison pour laquelle vous pouvez le faire est que cela nous permet d'effectuer des mises à jour de couleurs en direct à partir de l'éditeur de thème sans actualiser la page complète. Donc, si vous avez vu avant quand nous travaillions avec notre « customizer » et nous avons édité quelque chose et puis il est apparu « live ». Comme si nous avons changé une couleur et juste à côté de lui dans l'aperçu, il a mis à jour instantanément. C' est parce que nous utilisons ces balises « style liquide ». Je suis à peu près sûr que si vous mettez vos propres balises « style » qui ne sont pas liquides, donc si vous mettez juste dans les HTML standard qui ressemblent à ceci, cela ne sera pas mis à jour automatiquement, mais cela fonctionnera toujours. Il vaut mieux juste l'utiliser parce que vous obtenez des commentaires instantanés. balises « Theme » sont pratiques. Ils sont utilisés tout au long de votre thème. Ce sont ceux qui sont plus des « types de programmation » que vous verrez dans n'importe quel langage de programmation. « Contrôle-flux et itération ». Allons les voir maintenant. Le « flux de contrôle » est essentiellement conditionnel. Donc, si vous avez déjà fait une programmation, vous auriez vu une instruction « if then ». Donc, ici, il est dit « si le titre du produit est égal à des chaussures impressionnantes » alors il sortira cela. Si c'est le cas, vous aurez ça. Sinon, vous n'obtiendrez rien, sauf si c'est le contraire de « si ». C' est fondamentalement la même chose que « si le titre du produit n' est pas égal à des chaussures impressionnantes » alors vous obtenez cela. Vous pouvez également ajouter un « else if ». Si elle frappe ceci et ce n'est pas le cas, alors allez celui-ci, et si elle correspond à cela, alors sortez ceci. Mais si ce n'est pas le cas, alors vous pouvez aller à un « autre » et ensuite vous terminez le « si ». C' est assez standard dans n'importe quel langage de programmation. Aussi une déclaration « cas ». Si vous avez une variable et que vous voulez vérifier la valeur sur cela pour une variable différente. C' est une façon plus agréable d'écrire conditionnel plutôt que d'avoir à faire « if », « else-if » et sur et sur et sur. Si vous voulez avoir plusieurs conditions, vous pouvez utiliser les mots-clés « and » et « or » ce qui est bon parce que c'est juste un langage standard. Ce n'est pas une pipe ou un autre genre de personnages bizarres. Cela se lit plutôt bien. « Si line_item.grams est supérieur à 2 mille et customer_address.city est égal à Ottawa », alors il affichera ce code entre ces balises. Cela se lit très bien. C' est juste logique en anglais de le lire. Sur le revers, vous pouvez utiliser « or ». Nous allons jeter un coup d'œil à quelques exemples dans une seconde. Allons enfin dans les balises « Iteration ». C' est des trucs comme des boucles. Le principal que vous allez voir encore et encore dans le liquide est « pour ». Le langage pour « pour » dans le liquide est assez explicite aussi. Vous allez parcourir chaque produit dans « collections.products » et vous allez saisir cet objet produit particulier en utilisant ce mot. Ce mot pourrait être tout ce que tu veux. Il est préférable d'utiliser un mot descriptif. Pour le produit dans « collection.products » vous avez accès maintenant dans ce cycle de boucle au produit particulier, à cet objet particulier, et ensuite vous pouvez faire des choses avec cela. Je sais que c'est vague, mais il y a beaucoup de choses que vous pouvez mettre ici, mais c'est un excellent exemple de vous allez vouloir parcourir une collection de produits à un moment donné. C' est assez standard dans Liquid et n'importe quel langage de programmation d'ailleurs. Vous pouvez également mettre une instruction « else » dans un « for ». Vous pouvez casser la boucle si elle correspond à la condition sonore. Vous pouvez également ignorer un cycle de la boucle si quelque chose correspond à une certaine condition et vous pouvez limiter le décalage, définir une plage de choses différentes avec « for ». Mais en général, c'est aussi simple que cela ici, juste en passant par une liste d'objets et en sortant la même chose pour chacun de ces objets dans cette collection d'objets. Comme je l'ai dit, il est probablement plus logique de le voir. Jetons un coup d'oeil à un code Liquid aléatoire maintenant et voyons ce qui se passe. En fait, avant de le faire, il y a une autre chose que nous devons examiner avec Liquid qui va vous faire monter si vous ne savez pas, et c'est les « filtres ». Rapidement, nous allons juste jeter un oeil aux « filtres » avant de plonger dans le code. « Filtres » est une sorte de chose unique à Liquid. Si vous êtes familier avec d'autres langages de programmation, vous utiliseriez généralement des fonctions ou des méthodes pour obtenir le même résultat que ce qu'un « filtre » fait dans un liquide. Une fois que vous vous habituez aux « filtres liquides », vous trouverez qu'ils sont en fait assez simples et qu'il est assez facile de « filtrer » le contenu qui a vraiment du sens. Regardons un exemple ici. Nous avons le titre du produit que nous voulons juste afficher à l'écran. Mais maintenant, nous avons un « filtre » qui dit « majuscule ». Ce que ça fait, c'est que ça prendra tout ce qui est ici et le rendra en majuscules. Votre sortie va être, si le titre du produit était « chaussures géniales » ce qu'il est ici, il va créer une version majuscule de cela, puis le sortir à l'écran. Il y a, bien sûr, beaucoup de « filtres » différents. L' un d'eux est « enlever ». Ce filtre supprimera « génial » de la « product.title » afin que vous ayez juste des chaussures. Vous pouvez également « chaîner » plusieurs filtres ensemble. Vous avez « titre du produit » « majuscule » et « supprimer ». Nous allons « majusculer » le « product.title » , puis après cela, nous allons supprimer « génial » de celui-ci. Ensuite, vous obtenez juste des « chaussures » en majuscules. Jetons un coup d'oeil à quelques autres. Évidemment, nous ne serons pas en mesure de les traverser tous. Oui, en fait, il y en a beaucoup trop à regarder. Permettez-moi de jeter un coup d'oeil à certains que nous pourrions voir souvent. balise « Image » est une bonne. Nous pouvons juste mettre le nom de l'image et nous pouvons saisir l' « URL de l'actif » de cela. Nous pouvons également « envelopper » cela dans une balise « image » et donc vous obtiendrez ceci, ce qui est assez cool. C' est un exemple où les balises sont vraiment utiles, au lieu d'essayer de trouver l'adresse de cette image et d'avoir à mettre des balises autour d'elle, vous pouvez littéralement définir le nom de l'image dans vos actifs, puis trouver l'URL « asset » envelopper cela autour de cela, puis trouver la balise « image », envelopper cela autour de la sortie de ceux-ci et vous avez ceci. Vous pouvez « enchaîner » un tas d'entre eux. Parfois, vous voulez mettre un deux-points et quelques options. D' autres fois, vous venez de mettre dans le « filtre » par lui-même, mais sans aller profondément dans tous les différents « filtres », c'est essentiellement ce qui se passe quand vous voyez un « tuyau ». Vous verrez un morceau de « contenu », puis vous verrez un « tuyau », puis un nom « filtre ». Si vous ne savez pas ce qui se passe, tout ce que vous avez à faire est de le regarder. Si je cherche ceci dans notre feuille de triche. Je peux aller ici et voir qu'il retourne l'URL d'un fichier dans le dossier assets d'un thème. Très descriptif, et il nous montre un assez bon exemple ici. Donc, c'est la dernière chose. Nous avons nos tags, et nous avons parlé d'objets et de filtres est également important, mais les filtres vont assez profondément. Plongons dans le code maintenant et voyons quelques exemples, parce que je pense que c'est là que cela va avoir le plus de sens et frapper le plus à la maison. Ok, donc ici, nous avons un modèle vraiment basique. J' aime montrer le modèle de page, car il est assez basique, mais nous allons inévitablement obtenir ceux sont un peu plus compliqués. Si je vais dans le modèle de tiret de produit dans les sections. Vous verrez ici que nous avons un tas de variables que nous assignons. Ensuite, nous avons une déclaration de cas, et l'instruction de cas est de déterminer ce que nous allons affecter à ces variables en fonction de la taille de l'image définie dans nos paramètres de section. Maintenant, rappelez-vous, lorsque nous voyons les paramètres de point de section, qui est défini dans le schéma ci-dessous. D' accord, nous allons plonger plus profondément dans les sections de la prochaine leçon. Nous allons donc avoir un peu plus d'exposition aux sections, donc vous en apprendrez un peu plus sur ce qui se passe ici et comment l'utiliser. Ici, nous pouvons voir une boucle for. Et ceci pour la boucle, comme nous pouvons probablement le dire en la lisant, il sort l'image des images du produit. Pour chacun d'eux, il fait un tas de choses parmi juste afficher l'image. Si vous vous demandez ce que tout cela est, c'est ainsi qu'il fait des images réactives. Au lieu de simplement faire une image SRC, c'est comme une chose HTML New Age où nous pouvons produire beaucoup d' images différentes en fonction de la taille et de la résolution de l'écran. Juste une note pour ceux qui ne sont pas familiers avec les images réactives, d'accord ? Nous pouvons voir tout au long de notre modèle, nous obtenons juste des variables que nous voulons produire dans différentes sections de HTML, et nous pouvons voir que la boucle se termine ici. Maintenant, nous pouvons voir une étiquette if ici. Donc, si les produits, tailles d'image de point, taille de point. C' est essentiellement si la longueur des images de produit ou le nombre d'images de produits il y a, si c'est supérieur à un, alors nous faisons tout cela, et si c'est supérieur à trois alors nous voulons activer les vignettes. Donc, beaucoup de logique ici. Vous ne serez pas en mesure de vous contourner tout de suite sur quelque chose d'aussi complexe que celui-ci. Mais, nous verrons bientôt quand nous travaillons avec des blocs dans une section de la leçon suivante, vous commencerez à voir que for-boucles, des déclarations de cas, si les déclarations sont très courantes et alors pas si effrayant. C' est juste dans celui-là, on voit beaucoup de tout ça ensemble. Ici vous pouvez voir un filtre. Voici un exemple de filtre que vous allez voir tout au long de votre projet, est celui de traduire. Celui-ci est spécial car il recherche cette variable dans notre fichier de langues, et il sort le texte en fonction de la langue dans laquelle nous sommes. Un filtre plus commun, regardons, évadons. En utilisant ce que je vous ai montré avant, si nous voulions comprendre ce que ce filtre fait. Évidemment, nous produisons une valeur, mais nous voulons voir ce que fait l'évasion. Allons à notre feuille de triche et tapons l'évasion. On y va, des filtres à cordes. Évasion. Échappe une chaîne. C' est un mauvais exemple parce que fondamentalement ce que nous faisons est, nous prenons la chaîne et nous voulons réellement sortir les balises HTML. Cherchons un autre. Un autre filtre. On y va, pipe Json. Bon, alors regardons ici. Nous pouvons voir les filtres généraux. Alors, que fait le filtre json ? Il convertit une chaîne en format json. Encore une fois, pas le meilleur exemple parce que c'est un peu compliqué, mais nous prenons un morceau de chaîne ici, convertissant en json et vous verrez ici que nous obtenons cette version json de l'objet. Essayons de trouver un filtre plus simple, parce que je ne veux pas vous submerger avec ces filtres fous et vous pensez juste qu'ils sont trop durs ou trop compliqués. Nous pouvons voir l'URL de l'image ici. Nous prenons le logo que nous avons défini dans nos paramètres de section. Nous l'exécutons à travers un filtre d'URL d'image, avec l'argument d'un par un. Regardons celle-là dans la feuille de triche. URL de l'image. Cliquez sur celui-ci, retourne l'URL d'une image, accepte la taille de l'image comme paramètre. Donc, si on met un par un, il va mettre une image un par un. Vous vous demandez peut-être pourquoi on met un par un. Eh bien, nous sommes en train de le remplacer à nouveau par une largeur dynamique. Probablement un autre exemple compliqué, mais nous allons essayer d'utiliser des filtres plus simples dans une vidéo ultérieure. En voici un qui est un peu plus simple, ajouter. Si nous recherchons append, il ajoute juste un caractère à une chaîne. Donc, les ventes ajoutent JPEG, il suffit de l'ajouter à la chaîne. Donc, celui-là est simple. On prend juste ça et on ajoute un X à la fin. C' est assez simple, finissons sur celui-là. Pour revenir à notre documentation, si vous avez besoin d'examiner plus sur le liquide, je vous recommande certainement d'aller et lire plus. Probablement la façon dont vous allez mieux apprendre, c'est d'entrer dans le code et d'essayer de le comprendre. Commencez par les modèles moins compliqués d'abord, et si vous voyez un filtre que vous ne reconnaissez pas, qui sera à peu près tous d'entre eux si vous êtes nouveau à cela. En fait, allez le chercher dans la feuille de triche, ou dans la documentation. Parfois, vous pourriez avoir besoin de plus d'informations. La feuille de triche est bonne, car si vous cliquez sur en savoir plus, elle vous mènera à cette partie de la documentation. Mais les feuilles de triche une bonne référence parce que vous avez tout sur une page et vous pouvez simplement le rechercher. Évidemment, il y a beaucoup sur cette page et il y a beaucoup de documentation, nous n'avons pas toujours à parcourir toutes les options dans le liquide. Mais je pense que c'est une bonne idée de faire tout ce que vous pouvez quand vous développez votre thème. Et chaque fois que vous vous heurtez à quelque chose, regardez la feuille de triche, regardez la documentation, et espérons que vous pouvez commencer à comprendre quelle étiquette liquide vous avez besoin ou quelles balises liquides qui sont déjà sur votre projet font. Donc, c'est liquide. Dans la section suivante, nous allons apporter nos connaissances sur la structure de notre code de modèle et ce que nous venons d'apprendre avec liquide pour construire notre propre section personnalisée, puis nous allons l'inclure sur un modèle. Donc, je suis excité de cravate et de ce que nous avons déjà appris et de vous montrer la puissance passionnante des sections dans la prochaine vidéo. Alors je te verrai là-bas. 14. Comment créer une section personnalisée: Pour cette leçon, j'ai fermé notre documentation liquide et notre feuille de triche, et j'ai ramené notre boutique en ligne parce que dans cette leçon, nous allons apprendre comment développer notre propre section Shopify spéciale pour notre thème personnalisé ici. J' ai l'impression que les sections sont le meilleur endroit pour nous pour aller et faire du développement personnalisé parce que les sections sont vraiment le centre de votre thème entier. C' est l'endroit où vous pouvez réellement mettre des schémas afin que vous puissiez avoir ces options de personnalisation dans vos pages et vos modèles. Donc, comme un bon petit projet pour cette classe particulière, ce que je veux faire est en fait créer une section membre de l'équipe dans notre page à propos. D' accord. Donc, si nous revenons à ici, cliquez sur Personnaliser. Je vais l'ouvrir dans un nouvel onglet. Nous allons à la page À propos de nous que nous avons créée précédemment. Rappelez-vous que nous avons codé en dur dans une section pour la carte. Je veux remplacer cela par notre propre section pour les membres de l'équipe parce que sur notre page À propos, nous pourrions vouloir avoir une section sur les différents membres de l'équipe travaillant, disons que nous sommes une entreprise ou une entreprise ou un magasin, évidemment étant un Boutique Shopify. Peut-être voulons-nous mettre en évidence certains membres clés de l'équipe ou les personnes qui travaillent pour notre entreprise. Tout d'abord, je vais me débarrasser de cette balise de mise en page parce que je ne pense pas qu'il soit logique de ne pas avoir d'en-tête et de pied de page. Je vais aller au point de page sur, supprimer cette balise de mise en page, enregistrer cela. Je vais aussi me débarrasser de la carte de section et je vais la ramener à fondamentalement, exactement la même chose que la page régulière. D' accord. Actualisez la page sur notre personnalisateur. Vous pouvez voir ici nous avons un modèle de page standard et entre l'en-tête et le pied de page, nous avons juste le contenu de la page. Le contenu de notre page, bien sûr, nous sommes en mesure de changer dans nos pages élément de menu ici. Ensuite, cliquez sur la page. C' est là que nous éditons ce contenu. D' accord. Donc, ce que je vais faire, c'est retourner dans l'éditeur de code. Dans les sections, je vais créer une section avec le nom de la section que nous voulons. Je vais appeler ça les membres de l'équipe point liquide. Vous pourriez l'appeler « Staff Dot Liquid », ce que vous pensez être un bon nom. D' accord. Maintenant, afin de construire cette section des membres de l'équipe, je vais référencer d'autres zones de notre code et nous pouvons copier une structure qui existe déjà. Pour nous faire démarrer, ce dont nous allons avoir besoin, c'est une sorte de div où nous allons mettre dans notre code. Ensuite, nous allons avoir besoin d'un schéma. Maintenant, rappelez-vous ce que le schéma est, est les options dans notre personnalisateur. Pour cela, nous n'avons pas encore de section dynamique ici, mais vous avez vu dans d'autres pages, comme la page produit, nous avons ici une section personnalisable. Tout ceci est défini par le schéma. Espérons que cela a déjà été martelé à la maison. Pour revenir à la page À propos de nous, nous allons mettre dans notre propre schéma ici, comme tel. Ensuite, nous avons besoin d'une balise de schéma de fin. Dans ces balises de schéma d'ouverture et de fermeture, ce que nous voulons mettre est un objet JSON. D' accord. Maintenant, vous ne connaissez peut-être pas JSON, mais comme je l'ai dit dans les leçons précédentes, c'est assez simple. Il commence avec des crochets bouclés, et maintenant nous devons définir quelques attributs de notre schéma. Je vais réellement référencer la documentation dans cette leçon parce que parfois il est bon de rafraîchir la mémoire et j'oublie tout le temps quels attributs nous avons besoin pour notre schéma. Laissez-moi juste chercher des thèmes, schémas et Shopify. Sections thématiques. Passons à ici, schéma dans la partie des sections de thème. D' accord. Les sections doivent avoir un nom. Alors mettez un nom et nous allons l'appeler membres de l'équipe. De quoi d'autre a-t-il besoin ? Nous pouvons mettre dans une classe, et c'est la classe CSS qui ira dans la div. Nous allons lui donner une classe de membres de l'équipe section. C' est la classe que nous pouvons référencer dans notre CSS. Ensuite, bien sûr, les paramètres. Maintenant, nous pouvons écrire les paramètres probablement avant même d'écrire n'importe quel code HTML réel. Afin de définir nos paramètres qui vont être un tableau, nous devons ouvrir et fermer des crochets, puis nous pouvons ajouter d'autres objets JSON. Pour chacun des paramètres, nous avons besoin d'un ID, d'un type et d'une étiquette. Il y a d'autres choses que nous pouvons mettre comme une valeur par défaut, mais nous allons avoir besoin d'un ID, type et d'une étiquette pour chaque paramètre de section. Le type est le type d'entrée que nous avons parcouru dans une leçon précédente juste brièvement. L' étiquette est ce qui apparaît dans le personnalisateur et l'ID est la variable que nous allons utiliser dans notre code afin de référencer ce que l'utilisateur a mis dans ce champ ou la valeur par défaut dans le cas où il n'y a rien mis dedans. Vous verrez que tout cela se passe au fur et à mesure que nous construisons. La première chose dont nous aurons besoin, ID et le premier paramètre que je veux pour la section des membres de notre équipe est un titre de section. Je vais appeler ça le titre. Pour le type, ce sera du texte et l'étiquette sera le titre de la section. Vous pouvez configurer cela comme vous voulez, cela doit juste avoir du sens. Le type doit certainement être du texte car ce sera le type d'entrée qui apparaît dans le personnalisateur. Tout ce que vous pouvez régler sur ce que vous voulez. Cette variable peut être appelée autre chose. Tout ce qui apparaît à l'utilisateur sur le front end, cela peut être ce que vous voulez aussi. Il suffit de noter ça. Temps nécessaire pour ajouter un autre objet. C' est là que je définirai les blocs. Ce que je veux faire, c'est nous n'avons pas vraiment beaucoup regardé les blocs dans ce cours déjà. En fait, on a à peine abordé ça. Ce que les blocs nous permettent de faire, et je vous ai montré dans la section diaporama, c'est nous permet d'ajouter du contenu dans des blocs. Je ne sais pas comment le dire autrement, mais cela nous permet essentiellement d'ajouter des blocs de contenu que nous pouvons soit supprimer, soit ajouter plusieurs. La limite du nombre de blocs que nous pouvons ajouter est définie par nous. Je pense que les blocs ont du sens dans la section d'un membre d'équipe parce que le numéro un, nous allons avoir plus d'un membre de l'équipe le plus probable. Numéro deux, il se peut que nous devions ajouter ou supprimer des membres de l'équipe à l'avenir. Je pense qu'il est tout à fait logique d'utiliser un bloc. Revenir à A propos de nous. Je ne sais pas pourquoi je continue de cliquer dessus parce que nous n' avons pas encore de section importée. Faisons ça maintenant. Ce n'est pas encore complètement formé, mais je vais aller de l'avant un peu et jeter cette section ici parce que quand il sera prêt à partir, il sera juste à l'intérieur de ce modèle, prêt pour nous à personnaliser. Cette section s'appellera les membres de l'équipe. mot se rapporte à ce que nous avons étiqueté notre section dans notre fichier de sections, évidemment sans le liquide de point. Je vais réellement créer une valeur par défaut pour cela de sorte que dès que nous lançons la page, nous allons obtenir une valeur sans que nous ayons à écrire quoi que ce soit. Je vais juste dire, c'est rencontrer notre équipe, notre équipe dans les capitales. Ce sera la valeur par défaut. Mettons-nous en pause ici pendant une seconde avec le schéma. Fermez cela avec un seul paramètre et utilisez réellement ce paramètre maintenant afin que nous puissions réellement le voir passer dans le personnalisateur. Ce que je vais faire pour cela, c'est que je vais voler la structure d'une autre section de notre section. Trop de sections. Permettez-moi de trouver un bon exemple ici. Peut-être, collection en vedette, colonnes de fonctionnalités. Vous pouvez voir ici que si le titre de la section n'est pas vide, nous voulons le mettre à l'écran et nous voulons utiliser cette structure HTML parce qu'il y a déjà CSS associé à cela, nous allons obtenir des styles automatiques tout de suite la porte. Faisons ça. En fait, utilisons également ce conteneur de largeur de page. Cela va s'assurer que le contenu que nous avons est conforme à la largeur de la page. Nous avons déjà la balise div de fermeture pour ça là-bas. Je viens d'ajouter la largeur de page de la classe. Ensuite, à l'intérieur, j'ai si le titre du point des paramètres de section n'est pas vide, alors nous le mettons et nous échappons à tout HTML qui est mis là. Parce que nous avons étiqueté notre titre comme ID du titre, c'est en fait tout ce que nous devons faire. Nous n'avons pas besoin de changer le nom de la variable. Si je sauvegarde cela, double-vérifier que nous n'avons pas fait d'erreurs avec la montre à thème, nous sommes tous bons, et je rafraîchis cette page dans le personnalisateur, ce que vous verrez maintenant est une section de membre de l'équipe disponible pour nous personnaliser entre l'en-tête et le pied de page. Si je clique dessus, vous pouvez voir notre seule option que nous avons définie pour le titre de section. Au lieu de rencontrer l'équipe, peut-être que je pourrais dire notre équipe. Cette mise à jour dynamique juste devant nos yeux. C' est cool ? Je suis content de Meet the Team. Maintenant, je veux définir quelques blocs. Allons regarder ici et chercher des blocs. Rendu des blocs de section. Ce n'est pas nous qui cherchons. Des blocs. On y va. Les sections peuvent définir des blocs dans leurs schémas et leurs conteneurs de paramètres et de contenu qui peuvent être ajoutés, supprimés et réorganisés dans une section. C' est une bonne explication d'une phrase de ce que j'essayais d'expliquer plus tôt. Un bloc doit avoir un nom et un type, puis vous lui donnez des paramètres, comme vous le feriez, généralement, la même façon que nous l'avons fait pour nos paramètres de section. Après nos réglages ici, après ce petit carré, ce que nous allons vouloir faire est de mettre en blocs. Cela fonctionne de la même manière que les paramètres. Nous devons mettre dans un tableau et donc nous allons utiliser des blocs carrés à nouveau. Au fait, je viens d'étendre et de contracter ça juste pour nous rendre les choses plus faciles, mais je vais l'étendre à nouveau. A l'intérieur des blocs, nous avons un objet. Dans cet objet, comme il est dit, nous avons besoin d'un nom et d'un type. Le nom va être membre de l'équipe car il s'agit d'un seul membre de l'équipe. En fait, on peut juste l'écrire en anglais lisible. Ensuite, nous allons devoir définir le type et le type est ce que nous voulons qu'il soit, parce que c'est un bloc. C' est à nous de définir nos propres types. Je vais l'appeler profil personnel. Maintenant, nous définissons les paramètres. Tout comme nous l'avons fait ici avec les paramètres, nous allons mettre dans les paramètres pour chaque bloc. Nous allons ouvrir un crochet carré et nous allons avoir besoin de nouveau du type d'identification et de l'étiquette. Le premier paramètre sera le nom du membre du personnel. Je vais appeler ça le nom du personnel. Le type de cela va juste être un champ de texte. L' étiquette sera le nom. Parce que tout le monde, le nom de tout le monde va être différent, il ne sert à rien d'avoir une valeur par défaut. Alors option suivante, je vais mettre comme titre du personnel. C' est leur rôle au sein de l'entreprise. Faites-le taper en tant que texte. Label va être le titre du poste. Faites défiler vers le bas pour nous donner plus d'espace. Nous allons lui donner un cadre de plus et ce sera bio. On l'appellera staff-bio. Cette fois, nous allons utiliser la zone de texte au lieu du texte et la raison pour laquelle nous utilisons la zone de texte, c'est la même pensée que dans le HTML normal, ce sera une bio multi-ligne, très probablement. Nous ne voulons pas vraiment avoir texte parce que cela va juste nous donner une entrée d'une ligne. Nous voulons un peu d'un espace pour nous pour écrire la bio. Maintenant que nous avons ces attributs, ce que nous allons vouloir faire est de le mettre en HTML ici. Ce que je vais faire est d'utiliser la boucle for que nous avons vu plus tôt. Ce que nous allons devoir faire, c'est parcourir les blocs de cette section, puis les mettre tous dehors. Je vais faire pour le bloc dans la section.blocks, je crois, et puis je vais mettre fin à ma boucle. Cet objet ici dans le schéma, si vous suivez le long, est la section elle-même, puis ici les choses que nous pouvons référencer. Le nom du point de section, la classe point de section, les paramètres de section, les blocs de section. En fait, une chose que je vais changer est de lui donner un nom plus descriptif. Je vais l'appeler personnel dans la section.blocks. Parce que nous n'avons qu'un seul type de bloc et c'est un profil de personnel et nous savons que tous ces blocs vont représenter un membre du personnel. Je l'appelle juste personnel. En fait, le personnel peut être pluriel, alors peut-être que je dirai juste membre. Encore une fois, vous pouvez nommer ce que vous voulez, juste ce qui le rend plus logique pour vous et plus lisible. Ce que je vais faire est de mettre dans un div pour chaque membre de l'équipe et à l'intérieur de ce div, je vais sortir ces trois variables que nous avons définies ici. Ce que je vais faire pour ça, c'est un h3 pour le nom du membre du personnel. Je vais faire une travée pour le titre des membres du personnel et ensuite je vais mettre une balise de paragraphe pour leur bio. Ici, c'est là que nous mettons nos étiquettes liquides et nous voulons juste sortir tout ce qui est dans les paramètres du bloc. Donc, je vais prendre l'objet de membre, qui est ce que nous avons ici, passer par ses paramètres et sélectionner le nom du personnel. Je vais copier ceci parce que la seule chose que nous avons besoin de changer est la partie finale et au lieu du nom du personnel, je vais mettre le titre du personnel n'a probablement pas besoin de mettre dans le personnel au début de celui-ci. En fait, je pourrais entrer et changer ça maintenant. Ça n'a probablement pas de sens de l'avoir. Je vais juste aller se débarrasser du personnel parce qu'on n'en a pas vraiment besoin. On peut juste faire le nom, le titre et la bio. Maintenant, nous devrions en avoir assez pour une fonction deux. Nous allons devoir faire quelques changements supplémentaires, mais au moins pour le faire sortir à l'écran, regardons après que nous sauvegardons. n'y a pas d'erreurs dans notre montre à thème. Nous devrions être doux et si nous allons à notre page dans les personnalisations, rafraîchir la page. Maintenant, si je vais dans les membres de l'équipe, vous verrez qu'on peut ajouter un bloc. Je vais ajouter un membre de l'équipe. Je vais donner le nom du membre de l'équipe, donnons-lui juste mon nom. Développeur Web. Comme vous pouvez le voir, ça sort tout de suite. Je vais ajouter un peu Lorem ipsum, il suffit de le copier du haut ici comme l'acheteur et là vous allez. Nous avons du contenu inséré dans la page. Si j'ajoute un autre membre de l'équipe, disons que c'est encore Christopher Dodd. Je n'ai pas trouvé d'autres noms de membres du personnel en préparation, donc vous allez devoir vous occuper de voir mon nom deux fois. Mais comme vous pouvez le voir, il ajoute un autre div avec tout le contenu que nous avons défini ici. Il traverse les blocs, puis ajoute à ce contenu. Très cool. Je vais cliquer sur « Enregistrer » même si ça ressemble à de la merde. Faisons un peu de style. Nous pouvons profiter du système de grille dans notre thème. C' est une légère chose qui se produit sur presque tous les thèmes qui utilisent lumière pour être construit ou les thèmes gratuits Shopify utiliseront la grille légère. Ce que je peux faire, c'est envelopper cela dans une grille. Je vais mettre un div autour de cela, appeler ça grille. Pour ce div, je vais lui donner une classe d'élément de grille, et je vais aussi ajouter une classe pour définir des colonnes. Il y a quelques tailles d'écran développées dans le système de grille. Si vous voulez en savoir plus sur la grille d'ardoise, laissez-moi simplement voir s'il y a des informations disponibles. Grille d'ardoises. Il peut y avoir des informations disponibles sur Google. Voici les styles avec du liquide. Non. Laissez-moi sortir de la légère documentation. Cliquez sur « Exemples CSS ». On y va. Ici, nous avons nos points d'arrêt CSS, moyen, grand, large, gouttière est l'espace entre les éléments de la grille. Si je fais défiler ici, vous pouvez voir quelques exemples du système de grille. Par exemple, si nous voulions que la colonne occupe la moitié de la page sur les tailles d'écran qui sont moyennes et supérieures. C' est la classe que nous utiliserions. En fait, c'est exactement la classe que je veux utiliser pour notre section des membres de l'équipe. Je vais mettre ça là-dedans. Comme vous pouvez le voir, c'est similaire à ce qu'ils ont défini ici, ils ont une grille, puis ils ont des éléments de grille, puis ils ont la spécification de colonne. Vous pouvez les empiler avec un petit tiers, un sixième. Vous pouvez le faire modifier la largeur de la colonne en fonction de la taille de l'écran. Mais pour nous, moyenne, une moitié devrait aller bien. Aller à mon thème, regarde tout doux. Je vais retourner ici, rafraîchir la page. Maintenant, vous verrez que la section des membres de notre équipe est dans cette belle grille à deux colonnes. Si je devais ajouter un troisième membre de l'équipe, disons que c'est encore mon nom. Vous pouvez voir. Qu' on a une autre section ici. Il y a évidemment des problèmes d'espacement ici. Un moyen facile de corriger cela est simplement en donnant une marge supérieure à tous ces éléments de grille. Encore une fois, nous devrions probablement le faire en CSS, mais juste dans l'intérêt du temps, je vais juste le mettre ici en ligne. Je vais lui donner une marge supérieure de 15 pixels. Sauve ça. La montre à thème est heureuse, rafraîchissez la page et maintenant nous avons un peu plus d'une marge. Nous pouvons augmenter cette marge de tout ce que nous avons prévu ici. Peut-être qu'on le veut à 30 à la place, pas une grosse affaire. C' est à vous de décider ce que vous voulez faire de votre style. Pour revenir à notre section sur nous, il y a une autre chose dont je pense que les profils de membres de l'équipe ont besoin, et c'est une image. Maintenant, j'ai laissé l'image à perdre parce que c'est un peu plus compliqué que d'ajouter un champ de texte. En regardant nos options d'entrée. Je ne suis pas sûr s'il y a des options d'entrée ici, laissez-moi jeter un oeil. Types d'entrée. Je suppose que nous sommes sur la mauvaise page pour les types d'entrée. Si je recherche la documentation, est-ce celle-ci ? Types de paramètres d'entrée de base ? On y va. Ici vous pouvez voir que nous pouvons utiliser un sélecteur d'images pour les téléchargements d'images. Il y a deux parties à cela, évidemment, je dois ajouter l'option dans notre bloc et ensuite je dois l'ajouter dans notre HTML réel. Je vais le mettre en fait au-dessus du nom. Je vais créer un nouvel objet ici et à l'intérieur, je vais avoir l'identifiant de la photo, type va être ce que je vous ai montré avant le sélecteur d'image, et l'étiquette est photo. On peut dire ce qu'on veut. Je sauvegarde cela et maintenant nous avons cette option dans nos paramètres. La prochaine étape consistera à le mettre dans notre contenu réel. Je vais mettre une étiquette d'image ici et la façon dont je vais le faire est d'utiliser un filtre que nous avons vu plus tôt. Je vais ouvrir une ouverture de crochets bouclés, et je vais récupérer les paramètres des membres. Était-ce une image ou une photo qu'on appelait ? Photo. Photo des paramètres des membres. Ensuite, je vais l'exécuter à travers le filtre d'URL de l'image pour obtenir l'URL de cette photo. Ensuite, je vais l'exécuter à travers la balise image pour obtenir la balise à sortir sur l'écran. Si je garde ça, vérifiez si j'ai fait des erreurs, regardez si bien. Sur la montre à thème, actualisez la page. Tu verras ici qu'on a un tas de No Image. Ce que nous devrions faire en fait, c'est d'abord vérifier s'il y a une image. Sinon, on va avoir cette horrible « No Image ». C' est une étape facultative, mais ça va le rendre plus agréable. Nous allons mettre un conditionnel ici, membre, paramètres, photo. Nous le mettrons et sinon, rien ne viendra. Sauve ça. Voyez si on a des erreurs de Liquid , non, on est tous bons. Actualisez la page. Maintenant, vous ne pouvez voir aucune image apparaître, jusqu'à ce que nous les ajoutons nous-mêmes. Si je vais dans cette section, je vais dans un bloc. Vous pouvez maintenant voir que j'ai cette entrée photo. Je peux en fait explorer les images gratuites via la base de données de Shopify, ou je peux sélectionner ma propre image. Ce que je vais faire, c'est trouver une image de moi-même et le télécharger. On y va. Une fois qu'il est dans, il ira dans le contenu. Si je vais ici et ajouter des images pour les autres sections. Ajoutons juste le même. Vous verrez qu'il vient ici dans le bloc réel aussi, ce qui est assez cool. Vous pouvez identifier les différents membres de l'équipe plus facilement. Vous verrez maintenant que j'ai la photo, le nom, le titre et un acheteur. Maintenant, bien sûr, nous voulons réparer ce rembourrage et cet espacement. Nous pouvons le faire en CSS, mais ce n'est pas le but de cette leçon. Le but est de vous montrer ces blocs, et comment nous pouvons construire nos propres paramètres dans le customizer à travers notre code. Maintenant, il y a un autre problème que nous avons avec cela, et que la taille de l'image est très petite. C' est parce que si vous utilisez l'URL de l'image sans aucun paramètre, elle va apparaître avec une image qui, je crois, est une 100 par 100, assez petite. Ce que nous allons faire pour finir, c'est ajouter un paramètre ici, qui va dire à Liquid combien nous voulons l'image. Je vais dire 500x. Cela fera une image avec 500 par 500. Enregistrez cela, actualisez la page, et maintenant vous pouvez voir que nous avons une image 500 par 500 sur chacun des membres de notre équipe. C' est en fait un peu trop grand, donc je vais l'échelle jusqu'à 300, et je vais ajouter un autre membre de l'équipe, qui va juste être moi à nouveau, juste pour vous montrer l'étendue de la grille. Christopher Dodd, Job Title : Web Developer, Bio, nous allons juste copier des autres. Voilà, tu y vas. Sauvegardez cela, et maintenant vous pouvez voir que nous avons cette grille à deux colonnes avec les membres de notre équipe. Nous pouvons entrer, nous pouvons supprimer des blocs, nous pouvons les réorganiser, ou nous pouvons ajouter de nouveaux membres de l'équipe et tout cela sans utiliser de code. Comme vous pouvez le voir, nous l'avons configuré une fois dans le code. Nous avons mis en place nos options. Nous avons mis en place l'endroit où nous voulons que les valeurs que nous avons définies apparaissent dans notre code, et nous avons développé notre propre section. Maintenant, il y a une autre chose que je veux vous montrer, et c'est l'ajout d'un préréglage, afin que nous puissions utiliser cette section dans notre balise de contenu pour index. Revenons à notre documentation ici, et peut-être qu'on le trouvera ici, des presets. Non, donc on va devoir retourner à la page sur laquelle on était avant. Configuration des paramètres de thème, c'est ça ? Sections thématiques. On y va. Préréglages. On y va. Si nous cliquons sur « Presets », nous pouvons voir cette section, que nous pouvons définir un nom et une catégorie pour que nous puissions utiliser sur notre contenu pour la section index. Si nous allons dans notre page d'accueil où le contenu pour l'index est en cours d'exécution, et nous cliquons sur « Ajouter une section », voyons. Il y a du contenu personnalisé. Ce n'est pas ce qu'on cherche. Textes riches, Carte, Newsletter. Vous voyez, nous n'avons pas vraiment la section des membres de notre équipe ici. Si nous voulions l'ajouter comme une de nos sections dans le contenu pour l'index, nous avons juste besoin d'ajouter un préréglage. Je vais prendre ceci comme un exemple juste pour gagner du temps. Va ici. Fermez les blocs pour le rendre un peu plus facile à lire, et mettez en préréglages. Maintenant, nous n'avons pas besoin de blocs parce que cela va juste définir un préréglage sur nos blocs, ce que nous pouvons faire si nous le voulons, mais pas nécessaire. Tout ce que je veux faire est de lui donner un nom et une catégorie, afin que nous puissions l'utiliser dans notre contenu pour l'index. Cette catégorie devrait correspondre à l'une de ces catégories ici. Je pense que le plus approprié peut-être stocker des informations. Allons-y avec ça. Je vais l'appeler Store Information, et parce que c'est dans les capitales, je ne sais pas exactement si je devrais mettre les miennes capitales ou non. Je vais juste voir comment ils le font avec le modèle de carte. En descendant à la carte et en faisant défiler vers le bas pour voir le préréglage, nous pouvons voir le nom est Carte et la catégorie est Informations de magasin. Tout comme on l'a écrit. Catégorie, informations de magasin, et le nom va être Membres de l'équipe. Appuyez sur « Enregistrer » dessus. On a eu les erreurs ? Non, nous ne l'avons pas fait. En fait, nous le faisons. Nous avons un JSON non valide. C' est parce qu'on n'a pas fermé ça, et on n'a pas fermé le carré non plus. Comment on démarre ça ? Espérons que nous n'avons pas d'erreurs JSON maintenant. Mise à jour. Maintenant, si je rafraîchis notre page d'accueil dans le personnalisateur, cliquez sur « Ajouter une section ». Maintenant sur les informations du magasin, je ne sais pas pourquoi ça arrive deux fois, mais au moins nous l'avons ici. Nous pouvons ajouter notre section Rencontrez l'équipe. En bas, nous pouvons ajouter des membres de l'équipe comme nous l'avons fait avant, et ça va apparaître dans une jolie petite grille. Au fur et à mesure que nous mettons à jour le contenu, il apparaîtra automatiquement, et nous pouvons réorganiser cette section, dans toutes nos autres sections. Voilà, tu y vas. À quel point c'est bon ? En fait, je ne vais pas enregistrer cela parce que je ne veux pas rencontrer cette section Équipe sur ma page d'accueil. Mais cela conclut à peu près le démarrage de votre propre section Shopify. Maintenant, comme je l'ai déjà dit, vous voudrez le coiffer un peu différemment. Vous voudrez ajouter des styles en ligne ou aller dans votre theme.scss.liquid, et ajouter certains styles en utilisant des classes pour cibler ce que vous avez mis dans cette nouvelle section. Peut-être mettre en classe de membre de l'équipe, soulignement, nom de soulignement, et ensuite faire la même chose pour votre titre et votre biographie. Ce serait un bon moyen de disposer votre CSS en utilisant BEM, Block Element Modificateur est ce que cela signifie. Si vous voulez en savoir plus sur la raison pour laquelle nous utilisons le soulignement, soulignement ici et la raison pour laquelle il est utilisé tout au long du FEM, BEM est ce dont vous avez besoin pour effectuer des recherches. Mais c'est en dehors du champ d'application de cette classe, malheureusement. Ce que je viens de faire ici est mis dans certaines classes que nous pouvons aller et cibler dans theme.scss.liquid. Ce n'est pas spécifiquement une classe CSS, donc je n'entrerai pas là-dedans. Mais oui, c'est tout. C' est votre section personnalisée construite. Espérons que cela vous montre la puissance des sections. J' ai travaillé avec d'autres plates-formes dans le passé, et je n'ai rien vu comme celui-ci où vous pouvez simplement définir un tas d'options dans un bloc JSON, et puis soudainement vous êtes capable de l'utiliser directement au-dessus et avoir une telle interface utilisateur agréable pour la personnalisation. Si nous revenons à cette page À propos de nous, où nous avons codé cette section en dur. Nous sommes en mesure d'utiliser cette belle interface utilisateur qui met à jour ce que nous avons ici dans l'aperçu en direct. C' est vraiment cool. J' espère que vous avez aimé apprendre à faire ça. Dans les prochaines vidéos, nous allons terminer ce côté, vous montrer comment l'envoyer à un client ou à un magasin approprié où vous allez payer un plan si vous le souhaitez. Reste dans le coin pour ça. Je te vois dans la prochaine vidéo. 15. Comment aller plus loin dans votre apprentissage: Donc, dans ce cours, nous avons appris comment faire tourner rapidement un magasin de développement Shopify, comment modifier le code du premier thème qui est venu avec le magasin et dans le processus, nous avons appris comment les thèmes fonctionnent et les options disponibles pour personnaliser pratiquement tout à voir avec notre ami boutique en ligne. Maintenant, cette connaissance seule peut suffire à satisfaire vos besoins de base Shopify. Mais inévitablement, vous allez devoir apporter des changements au-delà du cadre de ce cours. Maintenant, dans la prochaine leçon bonus, je vais vous présenter une façon beaucoup plus complexe de développer des thèmes Shopify, à partir de zéro. Mais avant cela, je vais supposer que le premier thème ou tout autre thème qui prend votre fantaisie, fournit une bonne base pour la façon dont vous voulez que votre site fonctionne. Et c'est certainement ce que je recommande à tous ceux qui développent des thèmes Shopify. Il y a beaucoup de grands thèmes là-bas et surtout quand je travaille avec des clients, j'utilise généralement un thème existant comme point de départ. N' a pas toujours de sens de réinventer la roue à moins que vous ayez vraiment besoin de quelque chose de personnalisé. Et c'est pour ça que nous allons parler d'ardoise dans la leçon bonus. Nous allons également discuter, après cette leçon, façon de mettre votre site en direct. J' ai déjà mis cette leçon avant, celle-ci, parce qu'une fois que vous transférez la propriété de votre magasin, vous risquez de perdre l'accès à celle-ci. À moins que la personne ou le compte auquel vous avez transféré la propriété commence sur un plan payant. Donc, si vous êtes prêt à bénéficier d'un plan payant, vous pouvez certainement apprendre comment déplacer votre site sur votre plan Shopify réel dans la prochaine vidéo. Mais pour l'instant, ce dont je voulais parler brièvement, c'est de savoir comment passer à l'étape suivante pour apprendre ce que vous voulez faire avec votre thème Shopify. Alors plongons dans notre thème et parlons un peu de certaines personnalisations que nous aimerions faire. Maintenant, la première personnalisation que vous pourriez vouloir effectuer est un changement de style. Et c'est très normal et cela va probablement se produire à un moment donné avec votre thème. Vous voudrez peut-être changer la marge entre ce titre et ce juste ici. Vous allez donc dans votre section et vous recherchez cette option dans votre customizer et vous n'avez pas d'option dans votre customizer pour modifier la marge ici. Donc vous avez deux choix. Vous pouvez soit entrer et simplement créer la modification, soit vous pouvez créer une option dans votre code de section pour vous permettre de le faire dans votre personnalisateur. Donc, si c'est un changement de style et que vous voulez juste l'appliquer à côté sans en faire une option personnalisable, ce que vous pouvez faire est juste de le jeter dans votre theme.scss.liquid. Prenons l'exemple dont je viens de parler. Voyons ce que c'est. Nous sommes donc dans l'image avec la section de superposition de texte, et malheureusement nous ne pouvons pas le rechercher par le nom du modèle. Nous allons devoir chercher dans le dossier et trouver l'image avec superposition de texte. Donc image avec superposition de texte et puis ici nous pouvons voir où cela apparaît et ce nom apparaît dans le schéma de cette section juste ici, point de héros liquide. C' est donc la section que nous examinons actuellement. Si nous le regardons ici, peut-être que ce n'est pas clair lequel de ces divs se rapporte réellement à ce que nous voyons sur la page. Donc, nous pourrions vouloir inspecter et c'est quelque chose que je fais souvent. Grâce à nos outils de développement, nous pouvons voir ce que c'est. Et comme vous pouvez le voir ici, c'est cette div avec une classe de sous-titre de tableau de bord R-T-E, sous-titre tableau de bord méga, tiret, tiret, grand. Donc, en regardant mon code ici, je peux rechercher un méga sous-titre. Je peux déjà le voir, mais juste pour être clair. Donc nous avons un méga sous-titre, et un méga titre. On y va. On l'a dans quelques endroits différents, mais c'est celui qu'on cherche. Donc, si nous voulions en faire une option dans le personnalisateur, ce que nous pourrions faire est d'ajouter un style en ligne et de définir la marge supérieure et nous le définirions peut-être comme, donc nous allons dans les paramètres des points de section et peut-être que nous l'appelons marge supérieure. Maintenant, nous aimerions également vérifier si nous avons réellement défini la marge supérieure en premier. Donc, nous voudrions mettre une déclaration if autour de cela. Mais disons simplement que nous voulons changer la marge supérieure à l'échelle du site. Donc, nous allons dans notre thème point S-C-S-S point liquide, défiler tout le chemin vers le bas. C' est un très gros fichier et créons une règle pour le sous-titre méga tiret. Et ici, nous allons mettre la marge en haut à quelque chose de ridicule, juste pour que nous puissions voir que ça marche. Donc, je vais appuyer sur la sauvegarde. Vérifiez que nous n'avons pas fait d'erreurs. Oui, il est mis à jour maintenant et si je rafraîchis cette page, vous pouvez voir maintenant que nous avons ce top de marge ridicule qui affecte n'importe quel élément avec une classe de sous-titre méga tiret, qui devrait être seulement cette section dans cette section ou dans le texte de cette section. Donc je viens de supprimer ça. Il a mis à jour notre code. Si je rafraîchis la page à nouveau, nous reviendrons à la normale. Donc c'est un scénario. Peut-être que vous voulez mettre à jour le style. Donc, vous pouvez le faire avec CSS. Peut-être que vous voulez mettre à jour quelque chose qui se passe avec JavaScript. Donc je ne suis pas sûr de combien d'ajax on a ici. Si je mets cela jusqu'à trois, on dirait que le premier thème n'est pas lourd sur le JavaScript. Je dois cliquer sur mettre à jour ici lorsque la quantité est mise à jour. Mais cela pourrait être une option de personnalisation. Au lieu d'avoir à cliquer sur Mettre à jour, peut-être que nous voulons que cela soit mis à jour chaque fois que nous cliquons dessus. Et parce qu'il s'agit d'un changement de page en direct, nous voudrions le faire avec JavaScript. Donc, vous cherchiez comment faire cela et ensuite vous iriez, et probablement vous le mettez dans votre thème dot js. Donc, disons que nous voulons faire ça, comment pourrions-nous dire ce problème ? Ouvrez un nouvel onglet et recherchez dans Google, faites le prix de mise à jour de la quantité automatiquement, et puis bien sûr, nous devons mettre dans quelle plate-forme nous utilisons ; Shopify. D' accord. Donc il y a un tas d'articles différents ici. Je n'ai pas vraiment cherché cela avant, mais c'est le processus que j'irais trouver la réponse. Donc, ce n'est pas le meilleur fil. Vous ne trouverez pas toujours la réponse parfaite lors de votre première recherche. On y va. Voici quelque chose qui semble juste. Donc, à en juger par ma connaissance de JavaScript déjà, et bien sûr, ce n'est pas un cours JavaScript, donc si vous voulez approfondir JavaScript, j'ai aussi un cours sur JavaScript ici sur skillshare.com. Mais vous allez vouloir configurer un écouteur d'événement ici pour vérifier quand cela change, puis nous allons devoir mettre à jour ces parties ici, plutôt que de les mettre à jour lorsque vous cliquez sur le bouton Mettre à jour, que vous pouvez voir ici est rechargement de la page entière. C' est donc une personnalisation que vous pourriez vouloir faire. Bien sûr, avant de personnaliser quoi que ce soit avec du code, vous devriez vérifier si vous pouvez réellement le personnaliser en utilisant les entrées que vous avez déjà dans votre personnalisateur de thème. Je veux dire, c'est pourquoi ils sont là pour vous d'utiliser sans avoir à creuser dans votre code. Et comme note de côté, si vous creusez dans votre code et que vous créez quelque chose que vous voudrez peut-être changer plus tard, faites-le une option dans votre schéma et de cette façon, vous pouvez le modifier ici et le retourner sans toucher le code. C' est l'une des raisons pour lesquelles il faut utiliser ce schéma. Donc, cela pourrait être un changement de style, pourrait être un changement que vous pourriez facilement corriger avec votre schéma, pourrait être des trucs JavaScript dynamiques. Mais il est probable que vous allez affronter quelque chose que vous ne savez pas déjà faire. Encore une fois, comme je l'ai mentionné dans ce cours, nous n'avons que suffisamment de temps pour faire un tour d'horizon. Donc, vos meilleurs endroits où aller trouver des réponses, si vous êtes d'accord avec la lecture de la documentation, revenons à la documentation Shopify et allons aux thèmes. Voici où vous allez pouvoir rechercher toutes les informations que Shopify met à votre disposition pour développer des thèmes. Donc, si nous voulons en savoir plus sur les sections, recherchez des sections dans la documentation. Cliquez sur les sections Thème. Et puis vous pouvez en apprendre davantage sur le schéma. Vous pouvez en apprendre davantage sur l'inclusion des feuilles de style JavaScript, des blocs de section de rendu, toutes sortes de choses. Donc, la documentation sur le thème devrait être votre Bible, devrait être votre manuel sur ce sujet. Et puis aussi la feuille de triche Shopify, que nous avons regardée plus tôt. Donc, si vous allez et cliquez sur le premier lien, c'est comme une version résumée de la documentation, et que vous avez pu utiliser la commande F ou Control F sur un Windows pour rechercher quelles sont les différentes variables sur un objet particulier comme produit. Donc ce sont les deux principaux endroits que vous pourriez vouloir regarder. Évidemment, il y a deux autres cours sur Shopify, sur cette plateforme, skillshare.com. Ils sont un peu dépassés et l'un est assez basique, et l'autre va très vite très avancé. Alors je suppose que tu as choisi ta direction avec ça. Mais sinon, je pensais vraiment créer un cours Shopify de début à fin. S' il y a assez d'intérêt, si vous voulez apprendre cela, faites-le moi savoir dans la boîte de discussion ci-dessous et si vous avez des problèmes ou des personnalisations que vous voulez faire dans Shopify que vous êtes luttant pour comprendre, laissez-le certainement comme un commentaire dans la boîte de discussion ci-dessous et je ferai de mon mieux pour vous pointer dans la bonne direction. Donc, comme je l'ai mentionné dans la vidéo suivante, nous allons parler de prendre votre site en direct et ensuite dans la vidéo après ça, nous allons faire un bonus sur Slate. Donc, Slate est si vous voulez être vraiment sérieux sur développement de thème et commencer à partir de zéro, c'est là que vous voulez regarder. Donc deux leçons de plus et on va finir. J' espère que vous appréciez le cours. Je te vois dans la prochaine vidéo. 16. Comment mettre votre site en ligne: Bon, donc pour cette leçon, j'ai encore fermé ces onglets et je nous ai ramenés à notre magasin. Nous avons également l'onglet de notre compte Partenaires Shopify toujours ouvert. Ce que je vais faire dans cette leçon, c'est vous montrer comment mettre votre site en direct ou le migrer. Ou préparez-le à devenir un thème en direct sur Internet. Pour faire entrer les utilisateurs, utilisez le thème sur un véritable front de magasin. Il y a donc un éventail de façons différentes que nous ferions. Donc, le premier scénario, disons, est qu'il s'agit d'un magasin existant. Donc, le magasin de compétences de Chris est un magasin qui fonctionne. Il y a des commandes qui arrivent, il y a déjà des produits ici, des clients. C' est un magasin en direct. D' accord, donc nous avons fait notre développement sur un thème distinct, qui n'est pas en direct, ce qui est la façon dont nous devrions le faire. Si nous sommes prêts à ce que ce thème soit mis en ligne, tout ce que nous avons à faire est de cliquer dans Actions, puis de cliquer sur Publier. Maintenant, si vous travaillez dans un magasin existant, vous voulez faire attention aux choses que vous modifiez, ce ne sont pas le thème lui-même. Donc, si vous rédéveloppez un site Web et que vous ajoutez des pages, ces pages seront en ligne sur le site dès que vous les créez. Mais ce n'est pas si important à moins que vous ayez vraiment besoin de ces pages pour être privées parce que vous n'allez pas être lié à ces pages très probablement. L' autre chose, la navigation. Vous devrez donc peut-être créer de nouveaux menus. Dans votre thème, vous allez créer un lien vers ces menus. Ces menus seront là avec les menus existants qui sont dans le magasin en direct tous au même endroit. Donc, des choses comme les blogs, les pages, la navigation et les produits sont dans votre magasin lui-même. Très bien, ils ne sont pas spécifiquement liés au thème, donc nous devons être prudents avec cela aussi. Donc, le scénario numéro deux, vous travaillez avec un magasin client, mais vous développez votre thème sur un magasin de développement. Maintenant, vous voudrez peut-être le faire pour cette raison particulière que je viens de mentionner, parce qu'ils ont leurs propres produits, pages de blog et navigation déjà configurés et que vous voulez créer quelque chose qui est complètement séparé. Donc, ce que vous allez vouloir faire est peut-être emballé ce thème. Alors téléchargez-le, puis téléchargez-le vers l'autre magasin, puis migrez les autres éléments que vous souhaitez rencontrer, comme les produits, les billets de blog, les pages et la navigation. Ce serait le moyen le plus long et le plus manuel de le faire. Donc, d'habitude, vous essayez d'éviter ça. Donc, un bon mélange entre ces deux scénarios est de développer sur un magasin réel. Mais attention à ce que vous créez dans les produits, blog et les pages, et si possible, peut-être les cacher ou les masquer ou ne pas les avoir liés à n'importe où sur votre site actuel. S' ils sont encore en développement et qu'ils ne sont pas prêts à être mis en service, vous voulez vous assurer qu'ils sont presque invisibles pour le public. Mais si c'était votre magasin et que vous n'êtes pas encore parti en direct, vous avez développé votre thème. Vous venez de cliquer sur Publier. Aussi simple que ça. Donc, disons le scénario trois, vous n'avez que le compte de votre partenaire et vous venez développer ce magasin en tant que magasin de développement et maintenant vous voulez que ce soit un vrai magasin où vous pouvez accepter des commandes et devenir fondamentalement un magasin légitime de son propre domaine. Ou peut-être que vous voulez transférer ce magasin à quelqu'un qui va le faire. Alors peut-être que vous avez développé ceci pour un client et vous pouvez transférer ce magasin sur son compte afin qu'il puisse commencer à payer pour Shopify. Maintenant, ils ont un duplicata du magasin que nous venons de créer sur leur propre compte. C' est donc vraiment pour cela que les thèmes de développement sont construits. Ils sont conçus pour que nous puissions développer un thème, le préparer pour le client. Que ce soit une autre personne ou que ce soit juste nous. Préparez le thème, puis il passe à un plan Shopify payant. Donc, un avertissement avant qu'on démo ça, dès que tu feras ça, ça va être transféré. Il y a une chance que vous perdiez l'accès. En fait, je suis en fait assez sûr qu'une fois que vous transférez ce magasin de développement de votre liste de magasins de développement sur le plan d'un client, alors aussi longtemps qu'ils prennent pour arrêter de payer ce plan, aucun de vous n'aura accès à ce site. Donc, avertissement, ne migrez pas ou ne transférez la propriété d'un site tant que quelqu'un n'est pas prêt à payer pour Shopify. Donc, si [inaudible] hors du chemin, passons par le processus. Donc je vais fermer le magasin et je vais aller au compte des partenaires. Actualisez simplement cela car les liens expirent réellement. Nous voulons donc nous assurer que nous avons la page la plus récente. Comme vous pouvez le voir ici, nous avons le magasin de compétences de Chris sous les magasins de développement. Maintenant, pour en faire un vrai magasin, nous voulons transférer la propriété à quelqu'un. Donc ici, ça nous avertit ce qui va se passer et ce point d'intérêt ici est l'avertissement que j'ai donné juste avant. Le magasin n'est pas accessible tant que le nouveau propriétaire n'a pas sélectionné un plan. Bon, alors on va y aller. heure actuelle, nous ne pouvons pas sélectionner de nouveau propriétaire car ce que nous devons faire est d'ajouter un compte personnel. Donc, je vais cliquer sur « Ajouter un compte personnel » et ça va nous ramener à notre magasin. Je vais donc me créer en tant que compte personnel, Freelancer.com. Ce compte personnel aura des autorisations complètes. Je vais donc cliquer sur Envoyer une invitation. Je l'ai déjà fait. Voyons donc si je peux trouver un autre e-mail pour le faire dans. J' ai quelques emails différents, heureusement. Maintenant, j'ai envoyé l'invitation. Donc, vous pouvez voir ici le propriétaire du compte est l'administrateur du magasin de partage de compétences de Chris, qui est notre compte partenaire, mais maintenant nous avons ce compte de trucs. Donc, si je vais dans ma boîte de réception, je peux accepter cette invitation. Laisse-moi faire ça maintenant. Ici, nous allons de l'avant, il a fallu un peu. Mais maintenant c'est là et ça me demande de créer un compte personnel. Je vais donc créer un compte personnel. Je vais devoir mettre un numéro de téléphone et un mot de passe. Permettez-moi de générer un nouveau mot de passe avec mon application de gestion de mot de passe. Je vais juste utiliser le même que nous l'avons utilisé pour le magasin. Ensuite, je vais cliquer sur Créer un compte. Maintenant, je suis connecté au magasin. Mais comme vous pouvez le voir ici, je m'appelle Christopher Dodd et pas le magasin de compétences de Chris. Donc même magasin, utilisateur différent connecté. Maintenant, j'ai des autorisations complètes pour accéder au magasin. Je peux faire ce que je veux. Mais le problème avec ceci est que je suis toujours dans un magasin de développement. Donc, si je veux prendre ce magasin en direct, je vais devoir retourner sur le compte partenaire. Donc sortir de ces magasins et je vais rafraîchir la page que nous avons couru avant. Maintenant, je devrais avoir cette option de transfert. Donc si je vais dans la boîte Select maintenant, je peux voir Christopher Dodd, ok ? Donc, je peux cliquer sur Christopher Dodd, Transférer le magasin et c'est là que je vais perdre l'accès à l'ensemble du magasin. Bon, donc vous pouvez voir ici que le magasin de compétences de ce Chris. Si je retourne dans les magasins de développement, ce n'est plus là. En fait, ça va aller pour gérer les magasins. En fait, c'est juste là. J' ai fait un test avant. Comme vous pouvez le voir, il est inactif. Mais si je clique sur Connexion, on dirait que je pourrais toujours y accéder. Non, donc je ne peux pas y accéder maintenant. Que va-t-il se passer ? Comme il l'a dit, dans l'avertissement avant, je vais devoir attendre le compte que je l'ai transféré à commence à payer pour un plan. D' accord ? Donc, si je rafraîchis la page maintenant sur ce compte, j'ai été connecté en tant que Christopher Dodd. Nous allons essayer de revenir dans le magasin. Heureusement, ça ne me laisse pas. C'est pratique. Mais laissez-moi revenir en arrière et taper ce nom de magasin explicitement [inaudible]. D' accord, donc on a ça. Reviens bientôt. Je vais cliquer sur Se connecter. Peut-être que c'est parce que je suis connecté dans deux comptes différents. Je vais ouvrir une fenêtre privée. magasin de compétences de Chris. C' était le magasin de compétences de Chris ? Oui. Cliquez sur Se connecter ici. Espérons que cela nous permet de nous connecter. Oui. Maintenant, nous pouvons nous connecter avec ce compte partenaire que nous avons créé et j'espère que mon mot de passe est toujours enregistré dans le presse-papiers. Non, ce n'est pas le cas. Je vais juste prendre ça de mon édition de texte. Je l'ai maintenant. Maintenant, il me connecte. Ce que vous allez voir arriver à ce point, c'est choisir votre plan. C' est pourquoi je vous ai prévenu de le faire jusqu'à ce que vous soyez prêt à commencer à payer un plan parce qu'il n'y a pas d'autres options une fois que vous vous connectez à ce compte personnel, que de commencer à payer un plan. Donc, vous choisiriez et vous examiniez les motions et établissez votre facturation et tout cela. Donc, du point de vue du partenaire, donc je suis connecté dans le compte partenaire ici. Il s'agit d'un magasin géré auquel je ne peux pas me connecter ou accéder tant que ce compte personnel, la personne ou le compte qui va prendre le magasin et aller vivre avec lui, choisit un plan et commence à payer pour Shopify. C' est ce qu'est cette boîte. Mais supposons simplement que le client, vous-même ou toute personne à qui ce compte est associé, choisisse un plan et commence à le payer. Eh bien, maintenant, vous pouvez accéder à la boutique dans votre compte partenaire toujours en cliquant sur login. Donc, il va passer comme il l'a déjà fait, magasins de développement à la gestion des magasins. Ensuite, vous pouvez commencer à le gérer comme un devis, unquote, partenaire Shopify. Donc, cela est tout à fait logique si vous développez un magasin pour un client, vous l'avez transféré, vous leur avez dit, commencez à payer pour Shopify. Votre site est sur le point de passer en direct. Ils font ça. Ensuite, comme vous êtes le développeur ou le partenaire qui travaille avec eux, vous pouvez toujours vous connecter, collaborer et travailler sur leur site Web. C' est ainsi que cela fonctionne avec les magasins de développement. Encore une fois, comme je l'ai mentionné, et nous n'aurons plus accès au magasin. Sommes-nous ? Ouais, donc on a été totalement enfermés maintenant. Mais comme je l'ai déjà dit, malheureusement, je ne peux pas te montrer parce que je suis déconnecté au magasin. Mais comme je vous l'ai déjà montré, nous pourrions simplement télécharger le fichier thème lui-même et le télécharger sur un autre côté. Si nous ne voulions pas passer par tout ce transfert de propriété, une partie de l'ensemble du processus. Il y a donc plusieurs façons de le faire, mais c' est essentiellement ainsi que vous prendriez votre site en direct. Étape numéro un est que vous devez réellement tourner ce thème en direct. Ensuite, vous devez commencer à payer pour un plan si vous ne l'êtes pas déjà. Ensuite, vous avez un magasin Shopify entièrement fonctionnel. Donc, cela conclut à peu près tout le processus de tourner un magasin Shopify avec un thème par défaut, entrer, d'explorer le code, créer une section personnalisée, personnaliser autant que vous le souhaitez, et enfin, le transférer lorsque vous êtes prêt sur un autre compte pour commencer à payer Shopify et commencer à gérer votre boutique. Donc c'est tout le processus. Dans la vidéo suivante, nous allons vous montrer un processus différent, en commençant par Slate. Donc si ça vous intéresse, restez dans le coin, sinon, je vous verrai dans la conclusion. Merci beaucoup d'avoir regardé les gars. J' ai hâte de vous voir dans la prochaine vidéo. 17. Bonus : Ardoise partie 1: Dans la prochaine vidéo, nous parlerons plus en profondeur d'un outil de développement à la vieille école que Shopify a mis fin au support en janvier 2020. Je parle de quelque chose appelé Slate. Depuis janvier 2020, il est clair que Shopify s'est éloigné de Slate, et maintenant avec l'annonce que l' interface de ligne de commande Shopify a été étendue pour permettre le développement de thèmes aussi, je vois peu ou pas pourquoi quelqu'un devrait commencer un nouveau projet Shopify utilisant Slate. Cela dit, j'ai laissé la vidéo suivante en tant que tutoriel pour tous ceux qui ont forcé à l'utiliser. Certains thèmes plus anciens peuvent toujours utiliser Slate, et donc cette connaissance n'est pas complètement obsolète. Si vous avez le choix en la matière cependant, je recommande certainement d'utiliser le dernier outil pour le travail, et cet outil est actuellement l'interface de ligne de commande Shopify. 18. Bonus : Ardoise partie 1: Bienvenue les gars. Dans cette leçon, j'ai fermé tous ces autres onglets, j'ai fermé mon éditeur de code, et j'ai fermé mon terminal qui faisait tourner la montre à thème, parce que nous allons en apprendre davantage sur Slate dans cette leçon, ok ? Donc, si vous avez déjà utilisé Theme Kit dans ce cours, et Theme kit est génial parce qu'il nous permet d'éditer des thèmes à la volée, et Slate fait quelque chose de similaire, mais il a aussi un autre élément à cela, et c'est, il crée un tout nouveau thème pour nous. En fait, nous pouvons faire la même chose dans Theme Kit. J' ai probablement mentionné thème, nouveau comme l'une des commandes pour Theme Kit. Il crée un thème qui est, en quelque sorte, un thème Stata. Donc, vous ne pouvez pas faire quelque chose de similaire dans Theme Kit. Mais si vous êtes très sérieux au sujet du développement d'un thème Shopify personnalisé, vous allez vouloir utiliser Slate, et Slate est un peu plus compliqué. La structure des dossiers va être un peu différente et il faut un peu plus d'efforts pour mettre en place. Mais c'est pourquoi il s'agit d'une leçon bonus dans ce cours Shopify. Je ne pensais pas pouvoir faire un cours de développement de thème Shopify sans au moins parler de Slate. Donc, nous allons parler un peu de Slate, installer sur votre ordinateur et si vous voulez en savoir plus à ce sujet, vous pouvez me le faire savoir dans la boîte de discussion ci-dessous, d'accord ? Alors regardons Slate maintenant. Donc, si je vais magasin/ardoise, nous avons déjà parcouru la documentation et regardé, la grille. Il y a deux liens ici. Laisse-moi jeter un coup d'oeil. C'est le repo GitHub. Mais ce que je veux chercher, c'est le site Web réel, pour Slate, qui est juste ici. L' information ici n'est pas la meilleure, surtout pour commencer, donc je vous recommande de suivre cette classe plutôt que de suivre les instructions ici, parce que j'ai appris comment commencer avec Slate à travers une vidéo, sur la chaîne YouTube de Shopify. Donc, si je tape dans la vidéo YouTube Shopify Slate, peut-être que ça arrivera, oui. Donc, ici, vous pouvez voir une vidéo du compte YouTube du partenaire Shopify, et c'est en fait comme ça que j'ai appris les étapes de l'installation de Slate. Donc vous pouvez aussi vous référer à ceci ou vous pouvez juste m' écouter dans cette leçon ici, ok ? Donc, tout d'abord, il y a en fait une diapositive dans cette vidéo, qui parle de l'histoire de l'ardoise, et elle vient en fait de Timber, alors rappelez-vous que j'ai mentionné Timber avant, et ils ont une diapositive dans ici pour dire pourquoi c'est maintenant Ardoise. Le cadre du bois était trop opiniâtre et c'est comme un mot de programmation, ce qui signifie que, il a décidé trop de choses pour les développeurs à l'avance, alors ils l'ont dépouillé encore plus loin et ils ont créé, Slate, ok ? Donc Timber est maintenant Slate, et l'ardoise est en fait le point de départ que Shopify utilise eux-mêmes pour tous ses thèmes Shopify qu'ils développent. C' est aussi le point de départ pour beaucoup de thèmes que vous trouverez sur le Theme Store, et en fait, j'ai travaillé avec des thèmes avant qu'il ait développé à partir des développeurs du parti, pas nécessairement Shopify, qui utilisent toujours le Slate responsive grille. Il est bon de connaître un peu de Slate même si vous voulez partir et développer d'une manière différente, probable que vous allez probablement utiliser Slate si vous voulez développer des thèmes personnalisés, parce que c'est essentiellement ce que Shopify recommande et ce qu'ils utilisent eux-mêmes. Comme je l'ai dit, vous avez la documentation ici, et bien sûr, ce sera une bonne référence, mais en termes d'installation de Slate, je vous recommande de suivre ces étapes, que j'ai trouvé plus facile que ce qu'il dit ici. Donc, la première étape est que vous avez besoin du gestionnaire de paquets Node pour ceux qui ne savent pas, Node est un environnement de développement JavaScript, donc nous recherchons un nœud. C' est techniquement un environnement d'exécution JavaScript, d'accord ? Tu n'as pas besoin de savoir ce que c'est. Tout ce que vous devez savoir est que vous avez besoin de Node et que vous avez besoin de Node Package Manager, afin de commencer à utiliser Slate ou à installer Slate. Donc, téléchargez et installez Node, alors vous voulez, télécharger et installer Node Package Manager, qui est juste npm pour court, et je ne vais pas vraiment passer par et vous montrer comment installer Node et npm parce que je l'ont déjà sur mon ordinateur. Vous devriez être en mesure de trouver des instructions assez détaillées sur la façon de le faire à la fois pour leurs sites Web, et beaucoup d'articles, en ligne à ce sujet aussi. Ensuite, une fois que vous avez installé Node et Npm, vous allez chercher le paquet pour Slate CLI donc je vais, cliquez sur la première option ici. Vous pouvez voir celle-ci qui n'est pas la bonne, je ne sais pas ce que c'est. Je pense que nous devons, être un peu plus précis et dire Shopify Slate, et comme vous pouvez le voir ici, nous cherchons celui qui a @Shopify en face de lui, alors peut-être que je vais juste, taper comme je sais, Shopify, Slate, là nous sont, correspondance exacte. Je ne sais pas pourquoi ça n'est pas venu dans la boîte de recherche. Ici, vous avez Slate CLI et si vous n'êtes pas sûr si vous êtes sur le bon, vous devez être sur celui qui dit @Shopify /ardoise, ok ? Donc c'est ça, c'est celui que vous devez installer et vous avez des instructions d'installation juste ici. Donc, vous utilisez une commande npm pour installer Shopify Slate et c'est pourquoi vous avez besoin de npm, car vous devez installer npm pour installer ce paquet ici. Maintenant, comme je l'ai mentionné précédemment, j'ai déjà Slate installé, donc je n'ai pas besoin de le faire, mais disons simplement que vous exécutez cette commande et maintenant vous avez Slate installé. La prochaine chose que vous voudrez faire est tout comme nous l'avons fait avec le kit de thème, naviguez jusqu'au répertoire dans lequel vous voulez démarrer votre nouveau projet Slate, puis exécutez une commande particulière. Donc je vais ouvrir mon terminal à nouveau, et je vais naviguer là où je veux que ça soit. Donc, je vais à icd, code/personnel/courant, et maintenant que je suis en cours, la commande que je vais exécuter va être dans une documentation Slate donc, ce devrait être un élément de menu ici pour les commandes qu'il y a, et ce que nous voulons faire est de créer un nouveau projet avec Slate. Donc, je ne l'ai pas ici, c'est pourquoi. J' ai l'impression que la documentation n'est pas si géniale. Peut-être qu'il est là-dedans. Thème ardoise, non. D' accord. Eh bien, cette commande que tu cherches est Slate, thème. Ensuite, le nom du thème que vous souhaitez créer. Je vais l'appeler Clean Slate, ai trouvé ce nom tout seul, et il va télécharger le thème de l'ardoise et tout configurer pour que vous l'utilisiez. Cela peut prendre un peu, donc je vais vous attraper à la fin de l'installation. Maintenant, il est fini de télécharger l'ardoise, et la raison pour laquelle il a fallu si longtemps à configurer est parce qu'il télécharge aussi un tas de dépendances. Si nous allons dans notre dossier actuel maintenant, j'ai le thème Skillshare ici, et maintenant vous pouvez voir dans le répertoire aussi bien que j'ai une ardoise propre. Je vais cliquer dessus, et ouvrir cela dans ma fenêtre du Finder ici, mais ce que je vais faire est également changer dans ce répertoire par ici. Maintenant que je suis dans ce répertoire, je peux exécuter Atom dot parce que je cours atom, et je peux ouvrir ce répertoire, ce projet dans mon éditeur de code. Très bien, alors contractons certains de ces dossiers ici, et vous pouvez voir que la structure des dossiers au niveau supérieur est assez différente. Nous avons ce fichier config.ylm que nous devons également configurer, mais comme vous pouvez le voir, nous avons un dossier en haut avec des modules de noeud. C' est une longue liste de dépendances et c'est pourquoi il a fallu beaucoup de temps à télécharger, je pense que pour moi cela a pris peut-être une minute, ce qui est assez long. Ensuite, vous avez ce dossier src, qui à l'intérieur vous devriez reconnaître certains des dossiers. Vous avez des actifs, config, icônes, mise en page, paramètres régionaux, scripts, sections. Il y en a quelques autres comme les styles, les scripts et les icônes qui sont allés dans le thème que vous avez développé auparavant, mais c'est essentiellement dans le dossier src, c'est essentiellement votre thème où vous apportez vos modifications. La grande différence avec l'ardoise est que nous ne téléchargeons pas cela sur votre site, ce qu'il fait est, compile tout cela et nous allons créer une version différente de ceci et ensuite cela ira dans votre thème. On verra comment ça marche en une seconde. Ce que nous allons avoir besoin maintenant, c'est d'un magasin réel sur lequel gérer ce thème, et malheureusement, nous avons déjà transféré ce magasin de développement, donc je vais devoir créer un nouveau magasin. Ce n'est pas biggy cependant, je vais utiliser le même mot de passe et je vais appeler ceci, le Thème Slate Skillshare, si ce nom est disponible. Oui, et je vais utiliser le même mot de passe qu'avant. Mettez une adresse aléatoire et puis nous pouvons dire que c'est pour tester une application ou un thème, cliquez sur Enregistrer. Tout cela devrait être assez familier, nous l'avons déjà fait avant, c'est la création d'un magasin. Maintenant, nous devons passer par un processus similaire à ce que nous avons fait auparavant. Maintenant, parce que nous allons créer un nouveau thème et que nous allons le télécharger sur le magasin, nous n'avons pas besoin d'un identifiant de thème, ce dont nous avons besoin c'est le nom du magasin, que nous pouvons trouver ici, ainsi que le mot de passe de l'API. Comme nous l'avons fait plus tôt dans la classe, nous devons aller dans Apps, Gérer les Apps Privées, Créer une nouvelle App Privée. Désolé, je vais un peu plus vite cette fois parce qu'on l'a déjà fait. Je vais l'appeler Slate Connection. Évidemment, il doit mettre dans un e-mail de développement d'urgence, et nous devons lui donner le même accès en lecture, en écriture que nous l'avons fait auparavant aux modèles de thème et aux actifs de thème. Autre que cela, nous sommes bons pour enregistrer, Je comprends, Créer l'application. Maintenant, nous avons deux des ingrédients dont nous avons besoin pour réellement configurer l'ardoise. La raison pour laquelle j'ai besoin d'un mot de passe API pour le magasin et le nom du magasin est parce que nous allons exécuter une commande similaire, une montre de kit de thème, qui est ardoise watch. Nous le faisons à l'avance, mais nous n'en avons pas encore besoin, ce que nous devons faire est en fait construire notre thème et ensuite le télécharger dans le magasin. Je vais cliquer avec le bouton droit ici, donc nous avons toujours accès à notre mot de passe pour référence plus tard, et dans nos commandes ici, vous pouvez voir la commande pour construire, et il va construire une version prête à la production de la en compilant les fichiers dans le dossier dist. C' est des choses qui se passent dans les coulisses avec le kit de thème, mais pour l'ardoise, ça se passe juste devant vos yeux et ce que je veux dire par là, c'est que vous verrez bientôt que nous avons nos actifs, nos styles, divisés en plusieurs fichiers. Vous pouvez voir des états vides, des formulaires, la grille, rappelez-vous avec notre thème précédent, nous n'avions qu'un seul fichier css ou fichier scss qui contenait tout. Eh bien, l'ardoise est un peu plus modulaire, c'est un peu plus complexe, c'est un moyen plus évolutif de faire des thèmes shopify parce que vous séparez ce qui serait un gros fichier css, qui est ce que vous voulez quand vous l'exécutez sur votre site Web réel, mais en termes de développement, il est plus agréable d'avoir des dossiers différents et des fichiers différents, mais ce que vous voulez est tout ce que vous voulez est compilé en CSS JavaScript dans un seul fichier, ok ? Donc, vous pouvez voir ici beaucoup de scripts différents et dans nos styles, beaucoup de styles différents. Donc, l'une des choses qui va se produire lorsque nous exécutons slate build va compiler tout cela dans une feuille de style ou un fichier JavaScript, et nous verrons que cela se produit une fois que nous exécutons la commande build, donc encore une fois, c'est juste outils d'ardoise construire, pense en fait que nous pouvons utiliser le mot ardoise sans outils, voilà, qui s'est passé assez vite. Si nous allons dans notre éditeur de code maintenant, vous pouvez voir un dossier appelé dist, et dans dist nous pouvons voir les actifs et maintenant nous pouvons voir theme.scss.liquid et theme.js, qui est ce à quoi nous sommes habitués. Donc il a pris tous les styles de toutes ces feuilles de style différentes et les a rassemblés dans ça, et il a fallu tous nos scripts et les a réunis dans ça, d'accord ? Donc ça fait partie de ce qu'il fait quand il est en train de compiler. C' est donc là que nous voulons développer, mais c'est là que nous voulons télécharger dans le magasin. Donc, nous pouvons réellement compresser ce fichier, le faire dans un zip et ensuite le télécharger dans le magasin, mais nous avons en fait une commande dans l'ardoise où nous pouvons le faire automatiquement. Donc je vais appeler Slate Zip, et maintenant nous avons un dossier de téléchargement avec slate.zip propre, ok ? Comment les marchandises ? Bon, alors revenons dans notre magasin et comme vous le voyez, c'est protégé par mot de passe donc nous pourrions vouloir désactiver le mot de passe, mais ce que je vais faire est de cliquer, Télécharger le thème. Je vais avoir cliquer, choisir le fichier, aller dans mon répertoire où j'ai ce fichier zip, Télécharger le dossier, cliquer sur slate.zip propre ou tout ce que vous avez appelé le vôtre, télécharger ce fichier. Il va commencer à tourner vers le haut, puis je vais cliquer sur « Actions », « Aperçu », pour voir à quoi ressemble notre thème. Maintenant, c'est un thème ardoise. C' est super nus, peu près pas de style, mais c'est un thème pleinement fonctionnel. Donc, si je voulais mettre des produits dans mon magasin, je pourrais en fait les sélectionner, ajouter à un panier et les acheter, croyez-le ou non, dans ce terrible magasin, ok ? Maintenant, c'est tout le point sur Slate et la raison pour laquelle je vous recommande de partir d'un thème existant, sauf si vous voulez développer vos propres thèmes personnalisés que vous allez peut-être vendre sur la plateforme Shopify, ou vous avez peut-être un client ou avez besoin d'un très particulier, vous ne voulez probablement pas partir de ce point de départ. Mais, pour ce faire, tu as Slate ici pour que tu l'utilises, ok ? Donc maintenant vous avez votre thème Slate sur votre boutique en ligne, mais comme nous l'avons fait avec Theme Kit, nous allons vouloir être en mesure de modifier ce thème via notre propre ordinateur, comme nous l'avons avec nos fichiers de code ici, ok ? Nous ne voulons pas l'éditer ici pour des raisons que nous avons mentionnées précédemment, ok ? Donc, tout comme Theme Kit, nous pouvons soit mettre à jour le fichier config.yml, donc nous pouvons aller ici et y mettre les détails, ou nous pouvons exécuter la commande configure qui est assez similaire à notre Theme Kit ou theme configure. Donc encore une fois, je ne vois aucune documentation sur configure, alors faisons-le dans l'autre sens. Mettons-le juste dans notre fichier de configuration réel. Alors découvrons le nom de notre magasin, qui est juste ici. Choisis ça, mets ça ici. ID de thème, en fait faisons le mot de passe suivant. Mettez le mot de passe là, puis rappelez-vous comment nous trouvons l'identifiant du thème. Nous allons juste dans notre customizer et puis dans notre customizer, nous pouvons le choisir hors de l'URL. D' accord. Donc maintenant, nous avons notre projet pointant sur ce thème que nous avons téléchargé. Donc maintenant, ils sont essentiellement configurés pour se connecter les uns aux autres, ok ? Et comme vous pouvez le voir, nous pouvons toujours personnaliser même ce thème nu en utilisant notre section de personnalisation de thème ici, ok ? Dans les paramètres de thème, il devrait être assez nu, ce qui est, parce qu'il n'y a pas beaucoup de règles CSS mises en place, mais c'est à nous de décider ce que nous voulons mettre dans ces paramètres de thème, ok ? Maintenant, si nous le voulons, nous pouvons exécuter slate deploy, et toutes les modifications que nous faisons localement à notre thème, parce que nous avons configuré avec config.yml pour pointer vers ce thème particulier sur ce magasin particulier va télécharger tous et les déployer sur notre site Web. Mais comme nous venons de le voir, tout ce que nous avons fait c'est zip le thème original et nous avons déjà téléchargé, donc maintenant les deux versions de notre thème, celle que nous avons sur notre propre ordinateur et celle sur la boutique en ligne actuelle devrait être exactement la même chose. Donc, ce que nous pouvons faire pour détecter les changements locaux est exécuter « Slate Watch ». Donc, je vais le faire maintenant, « Slate Watch », et si notre fichier config.yml est configuré correctement, cela devrait commencer à regarder les changements. Maintenant, la différence entre Slate et Theme Kit est qu'il crée en fait une adresse locale pour nous de regarder le thème aussi. Et il y a en fait quelques étapes ici dans la documentation pour créer un certificat SSL auto-signé, mais cela peut être un peu lourd et ennuyeux à faire, donc un moyen de contourner cette erreur de confidentialité est juste de dire que vous l'acceptez et que vous allez passer à l'hôte local. D' accord. Alors fermons maintenant et nous pouvons entrer en utilisant le mot de passe. Donc, nous n'avons pas désactivé la protection par mot de passe, donc plutôt que de l'éteindre, je vais juste savoir quel est le mot de passe dans nos préférences. Il vous donne un mot de passe vraiment basique par défaut. Je vais mettre ça ici pour accéder à notre thème, et voilà. Vous avez le thème, tout comme vous le feriez en allant dans vos thèmes ici, et en cliquant sur « Aperçu », nous avons la même chose, mais sur une adresse locale, ce qui est un peu trompeur parce que nous sommes toujours en cours d'exécution la plateforme Shopify qui n'est pas vraiment locale, mais qui crée ce petit environnement ici pour nous, donc au moins nous savons que nous travaillons avec Slate sur le thème du développement. Donc juste pour conclure son travail et qu'il surveille réellement les changements, modifions en fait quelque chose. N' oubliez pas que nous allons dans le répertoire SRC pour éditer notre thème, et faisons un changement de base. Donc je fais n'importe quoi pour démontrer. Examinons cet élément et voyons ce que c'est, c'est le logo du site. Alors supprimons ça. Cela va probablement être dans la section d'en-tête, donc je vais aller ici, chercher un logo de site, voici, et supprimons tout cela, une balise. Je pense que je vais appuyer sur « Enregistrer » sur ça. Jetons un coup d'oeil à ce qui se passe dans notre terminal. Vous pouvez voir ici, il y a des choses qui se passent, le rechargement des navigateurs, le changement de fichier est réussi, synchronisation pour stocker et maintenant si nous actualisons cela, nous devrions voir que ce logo du site, qui était juste du texte, est maintenant disparu, et si nous le ramenons, appuyez sur « Enregistrer », il devrait enregistrer que les changements de fichier synchronisés avec succès pour stocker. Désolé, c'est une torsion de langue. Et actualisez la page. C' est de retour, d'accord ? Donc, je ne vais pas passer par la façon dont vous allez mettre en place ce thème pour le rendre présentable parce que ce serait un cours en soi, mais cela devrait vous fournir un bon point de départ pour peut-être prendre votre Shopify les connaissances au niveau supérieur. Donc, en apprenant comment réellement personnaliser cela et changer cela en un thème pleinement fonctionnel. Bien qu'il fonctionne pleinement, mais je veux dire que c'est juste une expérience utilisateur terrible. Ça a l'air terrible. Si vous pouviez transformer cela en un magasin vraiment cool, alors vous allez vraiment connaître la plateforme Shopify. Et peut-être que c'est quelque chose que tu veux faire. Peut-être que vous voulez créer un magasin personnalisé entier. C' est à vous de décider. C'est pour ça que j'ai mis dans cette petite section sur l'ardoise à la fin. Si vous avez des questions, laissez-les bien sûr dans la boîte de discussion [RIRE] ci-dessous. Merci beaucoup d'avoir regardé les gars. Je vous verrai dans la conclusion. 19. Conclusion: Cela conclut à peu près cette classe sur le développement du thème Shopify. Pour votre projet de classe, je veux que vous créiez votre propre magasin et le partagiez avec le reste des étudiants dans la section des projets de classe ci-dessous. Bien sûr, ne vous inquiétez pas si votre magasin est juste pour la pratique car nous sommes tous là pour apprendre des compétences. Assurez-vous simplement de partager le mot de passe ou de supprimer entièrement la protection par mot de passe, afin que les autres étudiants puissent le consulter. En termes d'apprentissage complémentaire, il y a beaucoup d'informations sur les différents aspects des thèmes liquides et Shopify sur le site officiel de Shopify. De plus, vous pouvez accéder à Partner Academy via votre compte partenaire en cliquant sur le lien Éducation. Cela dit, si vous avez besoin de conseils ou de conseils, oubliez pas de laisser un commentaire dans la boîte de discussion, et je ferai de mon mieux pour vous orienter dans la bonne direction. Bref, les gars, merci d'avoir regardé et j'espère vous revoir dans certains de mes autres cours.