Principes fondamentaux de Shopify pour les développeurs web : de la configuration du magasin aux thèmes personnalisés

1. Introduction: Je suis Kurt Elster, propriétaire d' agence chez Ethercycle, et expert Shopify à temps plein. des deux dernières années, tout ce que j'ai fait, c'est de travailler , de manger, de dormir, de respirer, de parler , d' écrire et de gagner ma vie à temps plein en travaillant sur la plateforme Shopify en tant qu'expert Shopify. Vous êtes probablement, soit vous êtes un concepteur Web ou un développeur Web, vous êtes un freelance dans cet espace numérique et peut-être vous avez des compétences de développement front-end. HTML, CSS, peut-être JavaScript, mais vous n'en avez pas nécessairement besoin. Si vous possédez ces deux compétences, la seule chose qui vous empêche d'avoir une carrière réussie sur Shopify est de connaître la plateforme. C' est ce que nous allons essayer de faire avec ce cours. Je vais vous aider à sauter et à atteindre voie la plus rapide vers les profits quotidiens dans le programme d'experts Shopify. cours de route, je vais vous donner quelques bonnes pratiques que j'ai apprises pour mettre en place un excellent stockage de conversion qui vous aidera. Une fois que nous aurons fini, nous allons plonger dans les thèmes car en tant qu'expert Shopify, vous pouvez être designer, développeur, photographe, peu importe. Mais la demande la plus courante que les propriétaires de magasins ont est, puis-je changer x sur mon thème ? Donc, si vous pouviez l'apprendre, c' est une excellente source de revenus. Donc, c'est là qu'on va commencer. Pour ce faire, nous allons apprendre les os du thème ou ce qui va dans un thème Shopify, ces pièces. Ensuite, nous serons en mesure de faire nos propres modifications de thème. C' est notre dernière tâche, c'est le tremplin vers la conception et le développement de vos propres thèmes. 2. Premiers pas dans la vente en ligne: Shopify a commencé sa vie comme un panier en ligne. Elle s'est rapidement transformée en une plateforme complète pour le commerce électronique, cette solution de bout en bout, mais aussi en une communauté. Avoir cette communauté avoir ce marketing de croissance est ce qui a vraiment stimulé la croissance de Shopify en tant que plateforme excellente. Mais cela fait aussi partie d'une tendance plus large. Donc, il y a quelques choses qui ont alimenté la croissance explosive du commerce électronique en général. Je pense d'abord et avant tout est mobile. Si nous regardons les statistiques de nos magasins en ligne, je serais surpris si un magasin existe encore qui a moins de 50 pour cent de leur trafic est mobile, et surtout avec les magasins qui ont un public plus jeune, c'est va biaiser encore plus vers le mobile. C' est parce que nous avons ces appareils avec nous tout le temps. Ceux-ci sont toujours connectés, toujours connectés, toujours avec ces appareils, téléphones, tablettes et même smartwatches. Si vous y pensez, les derniers achats que j'ai faits étaient sur mon iPhone couché au lit. Mais quelle est la chose que nous faisons le plus avec nos smartphones ? C' est probablement vérifier Facebook. C' est une habitude terrible et nous le faisons probablement tous. Lorsque vous consultez Facebook, c'est là que beaucoup de marques nous rejoignent. Mais une marque me disant d'acheter quelque chose n' aura jamais un dixième de la même valeur qu'un ami. C' est ce qui est merveilleux dans les médias sociaux. Si quelqu'un achète un produit, il l'adore, il en est fier, et il le partage sur Facebook, je suis beaucoup plus susceptible de cliquer sur un site Web mobile et de l'acheter quand un ami le fait. Les médias sociaux, combinés avec le mobile, sont devenus un moteur de découverte de produits sociaux incroyable. Dans Shopify, tous les thèmes fonctionnent sur mobile. Ils sont tous entièrement réactifs et ils s'intègrent également incroyablement bien avec Facebook, Twitter, Pinterest. Ces intégrations sociales y sont intégrées. Donc, je pense que maintenant plus que jamais, c'est un moment incroyablement excitant de s'impliquer dans l'espace e-commerce. Prenez un moment et demandez-vous : « Pourquoi êtes-vous là ? » Vous pourriez dire que c'est d'apprendre Shopify, d'être un designer Shopify. Mais je pense que tu es vraiment là parce que c'est un moyen d'arriver à une fin. Je pense que tu es là pour gagner plus d'argent, et c'est génial. Shopify, c'est un excellent moyen de gagner un revenu en tant que designer. Il y a plusieurs façons de le faire. Le premier est le moyen direct très littéral, et c'est de vendre des designs sur Shopify. Vous pouvez créer votre propre boutique Shopify et vendre des modèles de T-shirt. Il y a eu des gens très réussis qui ont fait ça. ugmonk.com, par exemple, en est un très bon exemple. Ou vous pourriez vendre des ebooks. A Book Apart en est un excellent exemple. Une fois que vous aurez cette expérience de faire cela, vous pourriez peut-être passer à la vente d'un thème Shopify. Si vous construisez un thème Shopify, vous pourriez très réaliste faire cinq mille revenus impulsifs par mois à partir de ces ventes de thème. Ces ventes de thèmes, naturellement, ces personnes pourraient tendre la main à vous et devenir des clients lorsqu'ils demandent des modifications de thème ou des personnalisations ou du soutien en général. La raison pour laquelle on est très lucratif est parce que c'est aussi difficile. Shopify est très strict sur la qualité des thèmes. Donc tu ne peux pas claquer quelque chose ensemble. Ce doit être un thème généralement bon, et c'est une bonne chose. Cela signifie qu'il y aura moins de thèmes pour vous de rivaliser, et si vous devez choisir un thème pour un client, un thème prêt à l'emploi, vous pouvez toujours assuré en sachant qu'il sera de grande qualité. Il y a la troisième voie, le modèle traditionnel et ce que nous faisons, ce qui n'est que le travail des clients. Dans le travail client, vous facturez ce que vous voulez. Vous construisez par l'heure ou le prix fixe, fixez la portée. Mais alors, Shopify nous donne un moyen de surcharger ces revenus. Si vous êtes celui qui migre le client vers Shopify et que vous faites tourner le magasin pour eux, ils vous donneront une part d'affiliation de 20 % de tout ce que le client paie à Shopify. Donc, quoi qu'ils paient, la fin du mois, vous obtenez une part de revenus de 20 pour cent sur ça, PayPal droit à vous. Ça continue pour toujours. Ainsi, vous configurez un magasin une fois, créez un portefeuille de magasins Shopify, de clients Shopify, et très rapidement vous découvrez que vous gagnez des centaines, voire des milliers de dollars par mois grâce à ce revenu passif Shopify en plus de votre part de revenus. Donc, cela nous a donné toutes sortes de façons pour les designers de choisir ce qui nous convient et de gagner de l'argent en faisant ce que nous aimons, ce qui est un excellent design. Je t'ai dit pourquoi tu devais embrasser Shopify en tant que designer. Mais si vous êtes concepteur, vous pouvez être sceptique à l'égard de Shopify en tant que plateforme d'hébergement, parce que vous voulez le plus de liberté. Je préférais toujours avoir mon propre serveur, un FTP, télécharger tous mes propres fichiers, faire ce que je veux. Donc, j'ai besoin que tu saches une chose. n'y a aucune limitation dans Shopify et ce que vous pourriez faire avec HTML, CSS, JavaScript. Amusant et sage, il va vraiment être tout aussi flexible que si vous aviez votre propre serveur, mais sans quelques maux de tête. Ainsi, lorsque vous passez à Shopify en tant que plateforme d'hébergement, vous ne vous inquiétez plus de la mise en place de serveurs. Vous n'avez pas à configurer un serveur, vous inquiétez du piratage du serveur. Tout ça disparaît. Vous n'avez plus à jouer ce rôle informatique parce que Shopify va s'en occuper pour vous. L' autre chose qui effraie les concepteurs propos de Shopify est qu'ils peuvent avoir à apprendre un nouveau langage de programmation, ou peut-être que vous connaissez déjà un langage de programmation et que vous ne voulez pas en apprendre un autre. C' est ce qui est génial avec Shopify. Il utilise du liquide. Liquide est incroyablement facile à utiliser. Il est légèrement moins puissant qu' un langage de programmation traditionnel, mais beaucoup plus facile. Donc, il est écrit dans un langage naturel, c'est très clair et concis et le meilleur de tous, c'est vraiment bien documenté. Donc, n'importe quelle question que vous avez, vous pouvez rapidement le google. Vous y trouverez de la documentation Shopify, c'est ce que je fais. Nous allons parcourir certaines de ces ressources. Mais si vous êtes astucieux, vous pouvez réaliser, oh non ! Je renonce à ce chiffre d'affaires d'hébergement web. Ce que vous rendez, c'est le mal de tête de l'hébergement Web et vous gagnez le revenu de la part d'affiliation. Donc, comme je l'ai mentionné précédemment, si nous faisons tourner notre compte partenaire Shopify, Shopify nous paiera 20 % de la part d'affiliation des clients que nous migrons vers la plateforme Shopify. C' est ce que nous allons faire ensuite. Dans quelques minutes, nous allons créer notre propre compte partenaire Shopify et je vais vous guider dans ce dossier. Pour ce faire, je vais partager mon écran avec vous dans la prochaine vidéo. 3. Introduction à votre compte de partenaires: Donc, la première étape lorsque vous voulez devenir partenaire Shopify : première étape en tant que concepteur s'impliquer avec Shopify, développeur s'impliquer dans Shopify. Quoi que vous fassiez, si vous vous impliquez avec Shopify, vous souhaitez commencer par le programme Partenaire Shopify. Le programme de partenariat Google Shopify ou c'est shopify.com/partners, ne peut pas être plus simple. Lorsque vous rejoignez le programme partenaire, ce n'est pas une chose vérifiée, vous venez de vous inscrire, il n'y a pas de véritable processus de qualification ici. Cela arrivera plus tard si vous choisissez de faire le programme Experts. C' est un tremplin vers ça. Donc, ici, on a ça... c'est cool, l'arrière-plan vidéo, à quel point c'est cool ? Mais ici, ils ont ce titre. Nous aidons les pigistes et les agences à se développer. Hé, c'est nous. Donc, nous sommes au bon endroit. Mis à part la part des revenus, l'accès pour pouvoir faire tourner les magasins de développement facilement et avoir tout ce genre de choses en un seul endroit, ils vous donnent aussi quelques belles ressources gratuites pour le marketing. Ils vont vous donner des logos que vous pouvez utiliser, du matériel marketing. Il y a une super newsletter qu'ils envoient. J' en tire tout le temps du matériel. Souvent, je vais utiliser cela comme médias sociaux FOTA, me fait gagner du temps. Votre documentation vit ici. Ils vous donneront des webinaires, des ateliers qui se produisent ; et ils ont contacté, nous en avons organisé quelques-uns. C'est amusant. Et il y a un forum privé que Shopify gère, et il y a d'autres grands non officiels là-bas aussi que vous découvrirez en cours de route. Donc, et bien sûr, nous obtenons un revenu mensuel continu, ce que nous voulons. Vous obtenez cette part de revenus de 20 pour cent, ce qui est gentil de n'importe quel client que vous amenez, juste pour obtenir des gens à s'inscrire. C' est fantastique, et c'est pour toujours. Et comme nous l'avons déjà discuté, vous pouvez également vendre des thèmes, où ils vous donneront 70 % ; puis, il y a aussi l'App Store. chiffre d'affaires moyen des applications est de 2000 par mois. Et selon l'endroit où se trouve votre ensemble de compétences, si vous êtes un concepteur, vous voulez probablement vous en tenir aux thèmes et si vous êtes un développeur, vous serez probablement plus à l'aise avec les applications. C' est ce que vous êtes à l'aise et peut-être que vous êtes une licorne, vous pourriez faire les deux. Dans ce cas, il y a plein de gens. C' est génial. Alors, d'accord. Retournons en arrière. Nous y voilà. Il vous suffit de cliquer sur Inscrivez-vous maintenant pour rejoindre le programme partenaire, et nous ouvrons notre compte partenaire gratuit. Très simple. On a le nom de notre société. Voici votre lien de parrainage, et votre lien de parrainage est excellent si vous parlez simplement de Shopify n'importe où, incluez votre lien de parrainage et si vous obtenez de la chance que quelqu'un s'inscrit. Cela va être ajouté à votre compte partenaire et vous obtiendrez à nouveau cette part de chiffre d'affaires de 20 %. Nous pourrions exprimer nos intérêts. Nous avons reçu des informations de connexion, des informations de contact de base ; et les choses importantes, notre compte PayPal pour qu'ils puissent nous payer. Nous l'acceptons, devenez rapidement un partenaire Shopify. Cela ne pouvait pas être plus simple. Alors, regardons un. Voici donc le tableau de bord de mon magasin ou de mes partenaires Shopify. Donc, nous pouvons voir - je le fais - dans les services à la clientèle, je n'ai pas d'applications là-bas, je n'ai pas de thèmes. J' ai des magasins affiliés. Donc, vous pouvez voir que je reçois ces paiements réguliers de centaines de dollars. Il y a des mois où... et vous obtenez un pourcentage comme, je crois que vous obtenez des pourcentages du revenu total. Il y a un mois où j'aurai un paiement de 500$. Nos prochains paiements, 362$. C' est génial, vraiment parce que c'est passif. Je n'ai rien à faire pour avoir ce revenu, ça arrive. Ensuite, si vous cliquez sur les affiliés, vous pouvez voir votre historique d'affiliation, vous montrera quels magasins vous avez, où ils sont, ce qui se passe avec eux. C' est sympa, et vous pourriez le chercher pour trouver un magasin spécifique, voir quel plan ils sont sur, savoir ce qui leur est arrivé. C'est sympa. Ensuite, l'important, les magasins de développement. Ainsi, les magasins de développement sont les magasins gratuits que vous pouvez créer pour un client ou vous-même pour tester des choses. J' ai trouvé que c'est le moyen le plus simple d'intégrer des clients dans Shopify. Je ne leur envoie pas le lien de référence et j'espère qu'ils s'y inscriront, je vais un peu plus loin, je crée un nouveau magasin de développement pour eux et je dis : « Hé, j'ai créé un compte gratuit pour vous. Voici votre mot de passe de connexion. » Et ils peuvent le changer, ou je les ajoute en tant que membre du personnel et ensuite en faire un propriétaire de magasin, mais nous allons couvrir cela aussi. Ensuite, bien sûr, si vous avez des applications dans l'App Store ou des thèmes, vous pouvez accéder à ceux ici. Ici, nous avons quelques applications privées qui étaient en train de jouer avec. Thèmes, vous pourriez créer un thème, le mettre ici. Paramètres, c'est fondamentalement juste les trucs que vous avez mis en place sur votre partenaire truc. Tu pourrais le changer ici. Et puis, qu'est-ce qu'on a ici ? Ressources partenaires. ressources des partenaires sont agréables. Il y a de la documentation, des tutoriels (ce centre d'apprentissage), la feuille de triche liquide. Certainement, si vous faites une programmation, j'adore cette chose. J' ai fait imprimer ça. Je le garde sur mon bureau, très utile. Newsletter, et pour les clients. Si vous commencez, vous voulez faire du marketing, il y a des trucs géniaux ici, comme le kit de remise des marchands. J'adore ça. Ça te donne vraiment l'air professionnel, fantôme plus loin. C' est un PDF, nous avons donc le guide de référence rapide Shopify. C'est PDF. Et puis, ici, vous pouvez aller de l'avant et le modifier. Donc, on pourrait dire, « Vraiment, Kurt. » Et de cette façon, il est personnalisé, on dirait que c'est de vous, et ensuite vous devez passer par et y mettre des URL. D' accord. Revenons à nos partenaires Shopify. Donc, une fois que nous avons créé notre compte partenaire Shopify et que nous avons parcouru toutes nos ressources marketing, la première chose que nous voulons faire et la chose qui nous préoccupe, dans le cadre du cours Skillshare, est la mise en place d'un magasin. Créer un nouveau magasin de développement, travailler avec un thème, éditer un thème. Donc, vous voudriez créer un magasin de développement. Très simple. On l'appellera notre démo de Skillshare. C'est une boutique en ligne. Vous pouvez également faire magasin de détail en ligne, qui donc par défaut, il va avoir le système de point de vente activé ainsi que la boutique en ligne ou vous pouvez faire juste point de vente pur. Dans ce cas, nous allons nous en tenir à la boutique en ligne, mais si vous pouvez maîtriser la boutique en ligne, l'add-on point de vente est très simple, très explicite. Donc, nous allons ajouter notre mot de passe ici, et je manque tapé, pour créer le magasin de développement, travailler ; et boom, c'est fait. C' est déjà filé, ça ne peut pas être plus simple. Donc, comparez cela pour essayer de faire tourner un environnement de production de magasin de test, environnement de développement, un serveur de transit, ce genre de choses. C'est une grosse douleur. C' est beaucoup plus facile. Et maintenant que nous l'avons fait, nous allons dans nos magasins de développement, voici et nous cliquons dessus. Haha. Tapez les trucs, mettez souvenez-vous de moi, connectez-vous et boum. Donc, si tu traverses ça, c'était comme 90 secondes ? Vous pouvez passer de rien à un partenaire Shopify avec un magasin de démonstration en cours d'exécution. Très simple, ou un magasin de démonstration soit pour vous-même ou pour un client. C' est utile, j'aime ça. Donc, et on va dire non, faire tomber ça. On y va. 4. Démo DEV: Donc, nous avons un tout nouveau magasin, rien n'a été mis en place, et ça va commencer à nous guider. Cela nous incite à configurer nos paiements, nos paramètres d'expédition, les taxes, l'ajout de produits, la personnalisation du magasin, ce genre de choses. Mais une fois que ces choses disparaissent, elles mettent beaucoup de contenu utile ici. Donc, du côté du regard, nous pouvions voir comment va notre magasin, voir une activité récente sur quel utilisateur a fait quoi, puis, ils ont quelques suggestions ici, comme du contenu utile. Voici quelques exemples de courriels de panier abandonnés, ou voici une chance de montrer vos produits. Donc, la première chose que nous voulons, c'est des ordres. Les ordres signifient qu'on est payés. Vous pouvez créer une commande manuellement si vous en avez pris une par téléphone, ce qui est une nouvelle fonctionnalité, c'est sympa. Votre première commande apparaîtra ici. Il nous montrera également les checkouts abandonnés, ce qui est cool. Mais jetons un coup d'oeil à un exemple de magasin. Donc, nous avons, c'est un de mes clients, des groupes Everest, des horloges Everest. Donc, ici, j'ai cherché mon nom. Vous pourriez voir qu'une fois que vous avez tout un tas de commandes, vous pourriez les trier par commandes impayées, non remplies, ouvertes, toutes les commandes. Je me suis fouillé ici, et c'était un ordre de test. Nous avons vu qu'il est marqué, remboursé et non rempli, ce qui est logique. Alors si nous l'ouvrons, nous sommes ici et ça va nous montrer à quoi sert la commande, un aperçu du client, mon adresse,c'est un aperçu du client, mon adresse, mon adresse de bureau, laissez-moi tranquille. Ensuite, vous pouvez ajouter une note au client, si le client a laissé une note sur la carte, il apparaîtra là, puis vous pouvez l'étiqueter. Donc, si vous avez beaucoup de commandes et que vous voulez des moyens faciles de les rechercher, vous pouvez les étiqueter avec des choses. L' exemple que je vous ai donné est en gros, c'est assez utile pour pouvoir différencier vos commandes en gros de vos commandes régulières. Retournons à notre magasin de démonstration. Ensuite, nous avons des produits, et les produits sont plus que des produits. Nous devons ajouter nos produits ici, nous pouvons les importer, les ajouter, les exporter en nous pouvons les importer, les ajouter, les un coup d'œil si vous utilisez Shopify pour garder une trace de stock, ce qui est une option dans laquelle nous allons entrer, ici, vous pouvez voir tout votre stock ici. Et plus important encore, nous avons des collections. Les collections sont ce que Shopify appelle les catégories, et c'est l'une des distinctions entre Shopify et d'autres plateformes de commerce électronique. Tous les autres les appellent catégories, et ils vous permettent de devenir un peu fou dans les catégories de nids. Une chose qui attire les gens, est que dans Shopify, il n'y a pas de catégories imbriquées ou de collections. Il vous suffit de créer des collections, puis il existe différentes façons d'organiser votre navigation. Certaines personnes pensent d'abord que c'est une limitation, je vous promets que ce n'est pas le cas, cela va faire de meilleures histoires dans l'ensemble, mais quelque chose à garder à l'esprit. Ensuite, regardons un exemple sur le magasin en direct, tête dans les produits et assez sûr, il nous montre tous nos produits. Ici, nous ne suivons pas l'inventaire, mais si vous le faisiez, cela vous montrerait. Nous avons un fournisseur de type, garde les choses très organisées, très sympa, et ensuite nous pouvons exporter, importer des produits, et pour les mettre à jour, nous pourrions les filtrer. C'est génial. Allons vers les clients. Les clients sont formidables, vous pouvez importer vos anciens clients si vous déménagez de quelque chose d'autre, ou lorsque les clients achètent ils apparaissent ici, ou vous pouvez ajouter un client. Alors, ce qui est bien à ce sujet, est-ce que vous pouvez filtrer, quand les gens vérifient, il leur demandera  : « Hé, voulez-vous accepter le marketing de notre part ? » Je recommande par défaut que, « oui ils veulent accepter le marketing de votre part », puis vous pouvez exporter tous ceux qui acceptent le marketing dans une feuille de calcul. Faites ce que vous voulez avec elle, téléchargez-le sur Facebook, ajoutez-le à Mail Chimp en utilisant une intégration Mail Chimp, toutes sortes de choses amusantes que vous pourriez faire ici. Mais nous commençons à voir, c'est une solution à part entière et faite. C' est tout ce dont vous avez besoin pour vendre en ligne. Ensuite, nous avons des rapports. Les rapports sont une fonctionnalité. Ce n'est pas dans le plan de base, il n'est pas dans le plan le moins cher, il apparaît dans le prochain plan supérieur, et selon le client, cela pourrait être utile. Si vous vendez un produit ou que vous ne vendez pas beaucoup, peut-être que vous n'avez pas besoin de rapports. Mais avec le temps, à mesure que les gens grandissent, nous constatons qu'ils veulent et ont souvent besoin de ces rapports. Mon rapport préféré, les ventes brutes par titre de produit. Je peux l'utiliser pour voir rapidement quel est le produit le plus rentable ? Quel est le produit le plus vendu ? Ensuite, cela informera la publicité, ventes, ce genre de choses. Vous pouvez également l'utiliser pour obtenir un rapport de vos taxes de vente. Si vous vendez en ligne, des biens physiques que vous avez une taxe de vente de fichier, cela rend beaucoup plus facile. Ensuite, nous avons des réductions. Le moteur d'escompte. Si vous vendez en ligne, à un moment donné, vous finirez par proposer des ventes. Donc, essayons d'ajouter un code de réduction. Nous pouvons en faire un, SHOPIFYRULES, ou j'aime un peu ça pour qu'ils aient l'air uniques, génèrent un, et vous pourriez juste faire des codes de réduction aléatoires toute la journée. Il vous permettra de les limiter, toutes sortes de réglages amusants. Il est assez puissant et il y a plus d'un, vous pouvez faire une réduction d'un montant fixe, réduction d'un pourcentage, offrir la livraison gratuite. Et puis nous pouvons aussi le faire pour tout, des commandes supérieures à un certain montant. Si vous dites, dépensez 50$, obtenez la livraison gratuite, faites-le sur une collection de marchandises ou un produit spécifique, ou vous pourriez le faire pour un client. Vous pourriez dire, hé, nous vous avons identifié en tant que client VIP, donc nous vous offrons un rabais spécial, ou comme moyen d'offrir en gros, c'est une bonne façon de le faire. Nous avons notre boutique en ligne. La boutique en ligne est l'endroit où les choses spécifiques à votre boutique en ligne sont en direct. Cela confond un peu les gens, c'est parce qu'il y a plus d'un canal de vente en cours. Je considère cela comme une indication claire qu'il pourrait y avoir de nouveaux canaux de vente à l'avenir. heure actuelle, les deux principaux sont Boutique en ligne et Point de vente. C' est là que des trucs vraiment spécifiques au site vont vivre. Ici, nous avons notre aperçu. Dans un magasin en direct, la vue d'ensemble aurait le taux de conversion des visiteurs, ces numéros amusants. Mais ici, nous pouvons faire à nos billets de blog en direct, nous pourrions faire plusieurs blogs, nous allons parler de cela, pages, et voici vraiment où il devient clair qu'il s'agit d'un système de gestion de contenu complet. Nous pouvons ajouter des pages, et si nous l' ouvrons, nous pouvons voir cet éditeur wysiwyg, nous avons des options SEO ici, nous pourrions définir une date de publication spécifique qui est cool, vous pouvez écrire un morceau de contenu maintenant, faites-le publier à l'avenir, mettez les choses sur le pilote automatique, ce qui est très agréable. Et puis nous pouvons même avoir des modèles de page différents, et nous y plongerons plus tard aussi. Navigation. C'est génial, la navigation. Navigation dans Shopify fait référence à, ouvrons un exemple de magasin. On a ces gars. Voici notre liste de liens principale, c'est ceci, et puis ces listes déroulantes sont aussi des listes de liens, et puis si nous descendons au pied de page, c'est une liste de liens. C' est juste une façon très facile de penser à la navigation. Ici, vous pouvez modifier cette liste de liens, voici notre liste de liens de pied de page, ajouter une autre, et regarder cela. Comme nous avons choisi le produit de collection, il le rend très facile. Nous allons dire, Je veux l'envoyer à mon blog, et le blog de nouvelles appellera blog, enregistrer. Mettre à jour la navigation n'a jamais été aussi simple. Ensuite, nous avons des domaines. Donc, c'est l'une des très rares limitations dans le magasin de développement. Vous ne pouvez pas ajouter un domaine au magasin tant que vous n'êtes pas sur un plan payant, vous devez le mettre à niveau. Et c'est bon. Ce n'est pas une terrible limitation, ça n'arrête vraiment aucun type de test. Mais regardons-le rapidement avec les groupes Everest, quoi ça ressemblerait dans un magasin en direct. Vous pouvez acheter un nouveau domaine via Shopify, ce qui le rend extraordinairement facile et c'est bon prix, 13$ par an, très agréable, ou, vous pouvez ajouter un nom de domaine que vous possédez déjà, auquel cas c'est aussi simple que, vous cliquez, ajouter un domaine existant, vous le tapez ici. Je vais le faire sur un magasin en direct. Ensuite, il ne s'agit que de deux enregistrements que vous devez changer dans votre DNS, un pour A name, un pour C name, pas un gros problème. Ensuite, nous pourrions choisir notre nom de domaine principal si nous voulons faire des redirections, tout y aller, nous pouvons activer ou désactiver cela, et ensuite il vérifie aussi ce petit type de statut. Ça dit : « Hé, as-tu configuré le DNS ? » et c'est sympa et pratique, ça met ça en place ici. Qu'est-ce qu'on a d'autre ? Donc, j'ai dit qu'ils font plusieurs canaux de vente, et bien sûr, regardez ça, nous avons Pinterest, Facebook ici, c'est aussi là que notre point de vente apparaîtrait. Il est juste en panne. C'est pratique et agréable. Section de l'application. Boom, il nous montre toutes les applications installées. Nous pourrions voir que ce magasin particulier a plusieurs applications installées. Très commun pour les magasins de faire des applications, et ils peuvent être des choses simples. Klaviyo, tout cela fait est de déplacer clients qui acceptent le marketing dans une liste de courriels à Klaviyo. C' est génial, c'est simple, permet d'économiser beaucoup de temps, ou quelque chose de fantaisie, Shipwire, qui fait l'exécution des commandes, la gestion des commandes pour eux. Ensuite, bien sûr, il y a un méchant garçon, Settings. Il y a des tonnes de différents paramètres que vous pouvez jouer avec, configurer le magasin comme vous voulez. Je ne les traiterai pas tous. On les retrouvera plus tard. Mais ils sont disposés d'une manière simple. Ils ont du sens, et nous avons toutes vos coordonnées ici. Plongons dans ce type. Oui, fermons votre démo. Boum. Paiements, où nous choisissons nos options de paiement, nos paramètres de paiement qui sont cool, peut-être que vous voulez offrir des comptes sur votre magasin, peut-être que vous ne le faites pas. Vous pouvez choisir à quel point vous êtes strict lorsque les gens sont en train de vérifier. Le plan mis à jour a même abandonné les e-mails de notification de paiement intégré, ce qui est très agréable. Ici, nous pourrions choisir si les gens acceptent le marketing par e-mail. J' aime le définir par défaut, mais l'option non-mal est de le définir pour ne pas être d'accord par défaut. Si vous effectuez le suivi du taux de conversion sur la page de remerciement, ce petit extrait nous donne un endroit pour le déposer. C'est génial. Ensuite, ici pour notre page de paiement, nous avons une politique de confidentialité de remboursement des conditions de service, et si vous ne voulez pas vraiment y penser, regardez cela, ils génèrent des échantillons. Cependant, je ne suis pas avocat et ce ne sont pas des conseils juridiques, et en les utilisant, vous acceptez une clause de non-responsabilité de Shopify. Mais c'est un bon début. Certainement lisez-les, réécrivez-les, envisagez de les revoir. Mais ça aide beaucoup d'en avoir là. Expédition. Nous pourrions choisir nos paramètres d'expédition ici, ce qui est phénoménal, et même faire l'expédition en temps réel par transporteur. J'adore ça. Ensuite, plongons dans la boutique en ligne. Boutique en ligne, nous venons de laisser tomber notre Google Analytics ici. Puisque nous avons un magasin de démonstration, nous pourrions le protéger par mot de passe ; titre de la page d' accueil, meta description de la page d'accueil, toutes sortes de choses géniales ici. D'accord. C' est une bonne démo de notre back-end, de notre magasin d'administration, des différents trucs là-dedans. Je l'ai traversé un peu rapidement parce que nous allons y plonger plus dans les sessions ultérieures, mais en ce moment, la première étape de notre magasin devrait toujours être, choisir un thème. Nous avons notre boutique en ligne, des thèmes. Par défaut, ils ont installé une application appelée Launchpad-Star. C' est gratuit, c'est parfaitement bien, cependant, il y a plus de 100 thèmes gratuits et premium si nous visitons le magasin à thème, et l'un d'eux pourrait être le vôtre. Vous pouvez créer des thèmes personnalisés, vous pouvez choisir l'un de ces thèmes et le modifier. Vous pouvez utiliser un thème gratuit, thème premium, tout ce que vous voulez faire, vous avez beaucoup d'options. Et il n'y a vraiment pas un mauvais choix ici pour les thèmes. Ils sont tous assez bons à faire défiler tout ça. Vous pourriez voir qu'ils sont très beaux, et c'est là que les clients ont besoin de votre aide. Ils peuvent être dépassés, ils ne savent pas ce qui est un bon thème, ce que je choisis, ce qui correspond à ma marque, et ensuite comment puis-je le configurer ? Il y a beaucoup d'options. Les paramètres du thème peuvent obtenir très fidèlement. C' est important à choisir. Un thème populaire très commun, est parallaxe, alors recherchons cela. Voici les résultats pour parallaxe, et tout est livré avec, cela confond les gens, il est livré avec plusieurs styles. Parallax est disponible en quatre styles. Ce n'est pas évident à première vue, si vous achetez l'un des styles, vous obtenez en fait les quatre, donc vous avez une certaine variété là-dedans. Les thèmes sont très flexibles en termes de couleurs, de polices, de mise en page, de contenu. Ils ne vont pas avoir l'air emporte-pièce. En tant qu'expert de Shopify, je peux voir et reconnaître des thèmes assez souvent, mais pour la plupart, quand vous y mettez votre propre image de marque, ils ne seront pas identiques. Prochaine étape, il va être, de choisir un thème. 5. Produits et variantes: D' accord. Commençons par ajouter un produit et apprendre quelques choses techniques qui nous aideront à comprendre Shopify. Donc, nous allons ajouter un produit. Je suis dans mes produits de tableau de bord admin de démonstration, ajouter un produit et il nous donne cet éditeur WYSIWYG incroyable. Donc, je vais juste taper T-shirt à manches courtes et ma description est, c'est super doux. Pour le moment, je ne vais pas télécharger une image juste pour nous éviter quelques tracas. Fixons un prix dessus, 19.90. C' est un produit physique, donc nous allons facturer des taxes sur ce produit. Supposons que nous les imprimions à la demande afin de ne pas faire le suivi de l'inventaire. Mais si nous le voulions, nous pourrions dire que nous en avons 10 et même choisir si nous voulons que les gens puissent les commander ou non. Mais pour l'instant, nous allons dire que nous ne suivrons pas l'inventaire. Si vous le souhaitez, vous pouvez ajouter du poids, si vous voulez faire l'expédition basée sur le poids. C' est un produit physique, il nécessite donc l'expédition et nous pourrions faire des chemises de type. Cela nous aidera à le trier plus tard et notre fournisseur sera Nike. Comme nous avons de la chance d'avoir Nike. Ici, nous avons des étiquettes. Les tags peuvent être affichés au client, mais pour la plupart, vous les utilisez pour trier les collections et nous en parlerons un peu. Donc, nous allons dire vintage coton été. On y va. Enregistrer le produit. Nous pourrions ajouter un autre produit ou le consulter sur notre boutique en ligne. Voyons dans notre boutique en ligne et si nous faisons défiler vers le bas, nous avons notre thème par défaut, et sûr assez T-shirt à manches courtes, 20 dollars, ajouter au panier. C'est super doux. Donc, comme la magie, ce truc que j'ai entré dans le CMS en tant que produit est apparu ici. La plupart des gens vont être satisfaits de ça. Mais jetons un coup d'œil à la façon dont cette magie s'est produite. Donc on va plonger dans le thème et on va choisir... on va aller directement technique. Sur notre page de thèmes, nous avons deux options : personnaliser, prévisualiser ou éditer HTML/CSS. C'est ce qu'on fait. On va grand tout de suite. Mettons-nous à... donc une note rapide sur les thèmes. Thème. Liquide. C' est votre fichier maître pensez ceux-ci comme au lieu de le faire - si vous avez utilisé des inclusions avec PHP, au lieu de faire comme un pied de page d'en-tête include, vous faites tout dans theme.liquid, puis déposez votre contenu dedans. Voyons si nous pouvions trouver où ça arrive. Juste ici. Commencez le contenu, et il y a notre contenu de commande liquide pour la mise en page. Parlons de ce qui se passe ici. Lorsque Shopify rend cette page, la page SkillShareDemo ou cette page T-shirt ShirtSleeve, ce qu'il fait est d'abord exécuté par theme.liquid qui contient notre en-tête et notre pied de page. Et puis en fonction du type de page, il va déposer le contenu pour la mise en page. Dans ce cas, ici maintenant, nous pourrions voir des modèles, descendre à produit.liquid. Boum ! Ici, c'est très simple. Il est juste inclure le produit. Alors, qu'est-ce que ça veut dire ? Inclut nos extraits. Si vous êtes familier avec PHP ou vraiment n'importe quel langage de programmation, vous avez vu des inclusions. Alors, ouvrons notre dossier d'extraits, continuons vers le bas et il y a product.liquid. Les extraits imbriqués peuvent devenir déroutants, mais l'avantage est que vous utilisez une méthodologie sèche, être sec ne vous répète pas. Donc, s'il y a quelque chose que vous devez utiliser plus d'une fois plutôt que de l'avoir partout. Il suffit de le mettre dans un extrait ou de l'utiliser et de cette façon, vous n'avez qu' un seul endroit où vous devez le maintenir et le mettre à jour. Ça rend la vie facile. Donc, ici nous avons, c'est le HTML qui est déposé dans notre page produit et je vous l'ai dit avant, il n'y a pas de limitations sur HTML/CSS que vous pourriez faire ce que vous voulez. Mais voyons comment cela se passe dynamiquement. On sait qu'il est en train de regrouper ces extraits. C'est un exemple. On a un T-shirt à manches courtes. Eh bien, comment ça est arrivé là-dedans ? Nous devons trouver une chose assez simple : le produit. et ce que vous pouvez voir ici, c'est que vous pouvez utiliser TextMe et GitHub et configurer des workflows fantaisie. Mais en fait, la norme, l'éditeur de texte qui est inclus dans Shopify, c'est assez fantastique. Bien sûr, regardez cela, produit fort et audacieux. Alors, qu'est-ce que vous remarquez à ce sujet ? Nous avons ces accolades de chaque côté qui nous dit que c'est liquide, qu'il s'agit d'une section de langage programmatique que Shopify doit exécuter sur le côté serveur avant de le mettre au client, au navigateur Web. Donc, ce qui se passe ici, c'est que ce sont des objets canoniques. Le produit est un objet canonique dans Shopify. Il fait référence à la page sur laquelle nous sommes, puis il est ajouté le titre de point. Le titre de point est une variable là-dessus. Une façon amusante de penser aux objets canoniques ou aux objets en liquide, dans Shopify, ils sont comme des super variables. Ces choses sont des variables sur les stéroïdes, et cela a du sens. Il y a un langage naturel, produit. Nous savons ce que c'est, titre de point. Si je ne vous l'avais pas expliqué, vous auriez pu deviner exactement ce que cela fait et il crache juste notre titre de produit, T-shirt à manches courtes. Assez simple. Pour le prouver comme une démo, disons simplement que nous allons ajouter la langue ici, title : save. D' accord, et inversons ça. C' est un bon moyen de le tester. Ecoute, c'est en fait dans la chapelure, c'est ce que je regardais. Title shirt shirt manches courtes. En fait, c'est un moyen assez rapide que j'ai utilisé pour tester des choses. Il suffit de taper un peu de langue et de chercher où cela change. Tu sais quoi ? J'aurais dû comprendre ça parce que regarde ça. Ils ont été utiles commenté, commencer chapelure et chapelure. Sauvegardons cela et assurez-vous que faire des changements là-bas. Rafraîchissez et ici il le laisse tomber. Donc c'est une autre chose sympa. Si vous modifiez en direct comme ça et que vos modifications se produisent très rapidement. Que se passe-t-il si j'ai foiré ce changement ? Vérifie ça. Les versions plus anciennes, actuelles, aujourd'hui. Regarde ça. Ce qu'ils font, il y a en fait une gestion de versions intégrée ici. Je t'ai dit que ce truc est sympa. Nous avons un éditeur de texte en ligne avec une gestion de versions intégrée. C' est fantastique. Regarde ça. Il n'y a que des références de variables géniales à liquides. Donc, je suis sûr, comme vous l'avez peut-être soupçonné, il y a plus d'options dans les produits que ce que je vous ai montré et pour vraiment en avoir un bon exemple, nous avons quelques photos ce qui est facile. Nous pouvons les glisser et les déposer et les tirer de l'URL ou nous allons les ajouter à l'ancienne façon. Dans mes téléchargements, j'ai deux images que j'ai tirées d'un T-shirt noir et d'un T-shirt. Nous allons les télécharger et boum ! Ici, ils apparaissent. Nous pouvons les éditer, y ajouter tout le texte. Idéal pour les gens SEL et changer l'ordre et quelle que soit la première image devient votre image par défaut. En ce qui concerne le redimensionnement, tout thème correctement configuré va redimensionner ces images à la volée pour vous. Alors voyons ce qu'on a là. En bas, il y a des variantes. Les variantes sont comme des options de produit. Dans le cas d'un T-shirt, je voudrais choisir la taille et la couleur. Donc, essayons d'ajouter des variantes. Le premier que nous avons la taille, par défaut, grand et nous devons ajouter nos options. Je vais dire petit. Ils sont séparés par des virgules. Donc, dès que votre virgule l'ajoute juste moyen, virgule L pour grand, virgule. Nous avons des petites, moyennes, grandes. Puis une autre option, la couleur. Dans notre cas, nous avons noir et rouge, et là nous avons nos options. Vous pouvez modifier le prix par option. Assurez-vous d'avoir différents SKU ou codes à barres si vous avez configuré un système d'inventaire, mais que ce sont des champs obligatoires. Dans notre cas, ils vont être le même prix et le même tout au long. Alors gardons ça et voyons ce qui se passe. Il crée une table vraiment agréable pour nous et ce que j'aime, il le rend facile à mettre à jour. Donc, disons que je voulais changer les prix sur les petits T-shirts peut-être qu'ils coûtent plus cher à faire. Donc, nous sélectionnons S et regardons cela. Il montre de petits T-shirts et même ont des actions en vrac. Cool. Je pourrais changer les prix pour faire ces 18 dollars. Ils coûtent plus cher à faire. Les 21 dollars maintenant. Boum ! Regarde ça. Mais il y a quelques mises en garde avec des variantes. Ici, nous avons petit, moyen, grand, noir et rouge qui a abouti à 1, 2, 3, 4, 5, 6 options. Vous ne pouvez pas avoir plus de 100 options. Une centaine est la casquette et puis elle barbe. Ça vous arrêtera. Il ne vous laissera plus créer. Combinaisons totales de choses peut-il avoir plus de 100. Donc, c'est une limitation. Maintenant, il y a des applications et divers shenanigans de programmation que vous pouvez faire pour contourner , mais sur la boîte, c'est la limitation. Donc une chose à garder à l'esprit. En plus de cela, nous nous limitons également à quatre options. Donc, si je veux ajouter une autre option, je pourrais faire du matériel, je veux dire économiser du coton et éditer les options. C' est ça. Je suis désolé, j'ai dit que c'était quatre. C' est trois options. Vous ne pouviez faire qu'avec trois options. C' est très bien. Donc nous avons notre matériel ici. Regardons cela comme vous le voyez dans la boutique en ligne. Voyez, se décompose en différentes boîtes de dépôt et tous les thèmes ne le font pas. Vous pouvez les afficher de différentes manières, leur dire quoi que ce soit. Mais quand nous changeons le noir au rouge, nous changeons la taille ou les changements de prix. Cool. Quand on change de noir en rouge, ça ne change pas ici. Il y a un moyen de le faire. C' est ce qu'on appelle des images variantes. Donc, nous allons sélectionner, notre noir est par défaut ici, sélectionnons rouge, Action en vrac, Mettre à jour l'image, cliquez sur ce gars, enregistrer. Regardez ce qui se passe ici. Rafraîchissons notre page. On a une bonne couleur noir, rouge. Oh, c'est vrai. C'est fantastique. Ça change et bien sûr, on voudrait le faire pour le noir aussi. Donc même affaire. Cliquez là, sélectionnez noir, mettez à jour les images. Boum ! Ensuite, nous pourrions voir ce sont de très nouvelles images et nous allons tester. Noir, rouge, noir. C'est cool. L' avantage ici est que le client sait exactement, cela leur confirme qu'ils achètent la bonne chose. Surtout si nous faisons des trucs de fantaisie, l'image ou le produit peut être inclus dans l'e-mail, peut être inclus sur la page du panier et cela va juste pour les rassurer que oui, je reçois le bon produit. J' ai choisi le noir, j'ai une chemise noire. C' est un joli ajout à inclure là-dedans. 6. Collections: Donc, une fois que nous avons ajouté des produits à notre magasin, nous avons besoin d'un moyen de trier ces produits. Voilà Dodocase. Dodocase a des tonnes de produits. Si nous voyons tous leurs produits à la fois, nous obtenons cette chose inutile sans fin, 88 pages de produits. Donc, nous devons les mettre dans quelque chose. Vous pensez probablement bien, nous pourrions les mettre dans des catégories ou la version de Shopify des catégories est plus intelligente. On les appelle des collections et il y a un point clé. Si vous avez utilisé d'autres plateformes de commerce électronique lorsque vous pensez à des collections, vous pensez pouvoir les imbriquer pour les organiser. Shopify a réinventé cela et ils les appellent collections. Et vous n'imbriquez pas de collections, c'est juste un regroupement logique de produits. Donc, c'est un peu différent et vous entendez qu'ils ont... dans le manuel de Shopify, nous parlons de collections. Ils vous donnent quelques exemples de la façon dont vous pourriez le faire, mais quelques notes. Une collection peut être triée manuellement où vous venez de mettre des produits, ce qui est façon dont vous attendez des catégories similaires à la façon dont les catégories et d'autres choses fonctionnent, elles peuvent être intelligentes. Donc il y a toutes sortes de façons de l'arranger, ce qui est amusant et nous allons y entrer. Les produits peuvent apparaître dans différentes collections, cela fonctionne bien. Alors, jetons un coup d'oeil à Dodocase et voyons comment ils l'ont fait. Ici, Dodocase vend des étuis pour iPhones et iPads et ils les regroupent par l'appareil qui est intelligent. Mais si on descend au pied de page, on peut voir qu'ils les ont également regroupés, ici on l'a répété à nouveau. Si on fait le tour, ils les ont regroupés par matériau. Voici donc le cuir, la toile de cire, un guide cadeau, un guide pour la rentrée scolaire. Ce sont probablement des pages de destination ou des efforts de référencement. Mais toutes les façons intelligentes de regrouper logiquement ces produits en fonction de la façon dont les gens magasinent. Alors, jetons un coup d'oeil à l'endroit où ils vivent dans notre administrateur. Si nous nous dirigeons vers notre administrateur Shopify et passons aux produits. Et ici, j'ai importé 10 échantillons de produits si vous voulez les utiliser dans les tests, vous pouvez saisir le CSV du bois GitHub. Donc, nous allons rapidement chercher ça pour que vous sachiez de quoi nous parlons et que vous puissiez suivre. Le bois est un cadre, c'est un thème de démonstration que vous utiliseriez si vous construisiez des thèmes personnalisés. C'est très gentil. Et si on descend, ils ont des produits de démonstration ici. Ainsi, les magasins de démonstration pour un ensemble de produits de démonstration à utiliser pendant le développement, téléchargez le fichier CSV et importez-le. Et c'est ce que j'ai fait ici. Donc, si vous voulez suivre et faire de même, vous téléchargez ce fichier, cliquez sur importer ici et vous pouvez ajouter le fichier et il apparaîtra une minute plus tard. Mais d'accord. Une fois que nous sommes dans les produits, dirigez-vous vers les collections, puis voici où vivent les collections. Donc, maintenant que nous avons vu et expliqué ce que les collections font et à quoi elles servent, essayons d'en faire quelques exemples pratiques. Ici vous pouvez voir mon inventaire J'ai ajouté quelques exemples de produits afin que nous ayons des choses à trier. Nous avons une collection de chaussures, elles ont des titres différents et puis sous type, nous les avons tous étiquetés « Kicks », nous allons appeler nos chaussures « Kicks » et ensuite comme ça si nous commençons à vendre des chaussettes, nous les appellerions de type chaussettes ou chemises type chemises. Et puis sous le fournisseur, ils sont tous Shopify sauf que le premier est tetes. Maintenant, passons sous deux collections. Donc, ici, nous avons une première page est une collection par défaut. Il est utilisé pour que vous puissiez ajouter des produits en vedette à la première page de votre magasin et si nous cliquons dessus, il devrait s'agir d'une collection manuelle. Très bien, donc, il a juste que vous savez que le manuel est très traditionnel et très typique. Vous pouvez ajouter des produits manuellement. Les seuls produits qui y apparaissent sont ceux qui ont été sélectionnés manuellement depuis qu'ils sont présentés. Et puis tu pourrais choisir comment ils trient. Donc, la meilleure vente est très cool car elle s' optimise de manière à ce qu'un produit se vend mieux, il est déplacé vers le haut de la liste et il continuera à se vendre bien. Alphabétiquement ascendant descendant du cours et date tous ascendant descendant ou manuellement. Lorsque nous sélectionnons manuellement, nous obtenons cette belle petite poignée et ensuite nous pourrions le choisir comme ça, ce qui le rend facile et ensuite nous pouvons aussi ajouter que vous savez que nous avons notre titre et notre description et notre image. Alors, sauvegardons cela et ajoutons notre propre collection. Ajoutons une collection de menus. On dira les chaussures préférées de Kurt. D'accord. Je pourrais faire manuellement sélectionner des produits et aussi il ne dira rien tant que je n'ai pas enregistré. Maintenant, je peux ajouter mes produits. Donc, dès que vous cliquez dessus, vous obtenez cette belle astuce d'outil qu'il vous montre vos produits ou vous pouvez filtrer. Si je veux seulement voir les chaussures étiquetées cool surgit là-dedans. Alors ajoutons ces chaussures et deux autres, on y va. Donc, vous pouvez voir que c'est Ajax, c'est dynamique, c'est rapide, c'est très facile pour les clients à utiliser super facile pour vous d'utiliser. Description, cela rend très facile de faire des pages de destination. Vous pouvez ajouter votre titre, ajouter votre description. Donc vous pourriez dire, « Hey, guide cadeau pour chaussures pour hommes guide cadeau pour 2015 », ajoutez votre titre, votre description, une belle image si le thème le supporte. Mettez vos produits là et vous avez une page de destination. Ensuite, définissez-le sur best-seller et nous avons une page de destination auto-optimisée. Vous savez donc que c'est très traditionnel, très typique de la façon dont vous vous attendez à ce que les collections fonctionnent ici. Mais il y a une meilleure façon de le faire. Alors, ajoutons une autre collection. Pour cela, nous dirons : « Chaussures de moins de 200$. » Ensuite, nous dirons nos baskets préférées sous 200$. D'accord. En fait, nous dirons que nos coups de pied préférés sont à moins de 200$. Conditions automatiquement en tant que valeur par défaut. Ensuite, nous avons des produits doivent correspondre à toutes les conditions, n'importe quelle condition. Depuis qu'on a dit que c'est pour les chaussures de moins de 200 ans. Nous avons quelques variables différentes que nous pourrions choisir ici. Le titre, le type, le fournisseur, le prix, l'étiquette, les balises sont un bon moyen de trier les produits dans collections ou pour les clients de voir si vous l'affichez dans la collection. Mais pour la plupart, je les utilise juste pour obtenir un tri plus facile. Nous allons plonger dans une autre utilisation pour les tags avec filtrage prix comparé, comparer prix est PDSF, poids, stock de stock, titre de variance. Donc, faisons dans ce cas, nous avons dit que c'était moins de 200$, donc nous dirons que le prix est inférieur à... Nous avons tous ces grands opérateurs de lingots de moins de 200$. Si nous cliquons sauver la collection là, nous allons, ce sont toutes nos chaussures qui sont moins de 200$. Ensuite, nous pouvons voir que cela fonctionne si vous voulez le tester disons est supérieur à 200 sauver aha ! Donc, ils disparaissent tous. Donc, revenons à est inférieur à et comprenons la différence entre tout ou n'importe quelle condition. Ajoutons donc que nous avons le titre du produit. Nous allons changer en contenant et nous dirons génial, Sauvegarder. Donc, ce qui se passe ici, c'est que ça va seulement montrer les chaussures qui sont intitulées génial et sont moins de 200$ contre si nous l'avons changé à n'importe quelle condition et frapper sauver. Il va énumérer toutes nos chaussures parce que toutes sont moins de 200 ans et on dit génial. Donc, c'est la différence là-bas. Tu peux rendre ça, tu peux te rendre fou. Mais vous pouvez les rendre assez compliqués et granulaires. Mais l'avantage ici encore, c'est qu'il est automatique. Ainsi, vous n'avez pas besoin d'ajouter manuellement des produits à chaque collection. C' est utile car vous commencez à trier les choses de différentes manières selon la façon dont les gens magasinent. Donc, vous pourriez le faire si vous vendiez des chemises, vous pourriez vouloir le regrouper selon le sexe des hommes par rapport aux femmes. Mais alors aussi le faire par des collections. On pourrait dire le type de chemise, manches courtes ou manches longues. Le même produit apparaîtrait dans plusieurs catégories et vous ne voulez pas avoir à l'être- chaque fois que vous mettez à jour l'inventaire, essayant de vous souvenir de l'ajouter à plusieurs collections et collections, les collections automatiques font tout ce qui possible. Alors bien sûr, nous pourrions trier ici mais jeter un oeil à ce que cela ressemble sur notre site en direct montre qu'il y a le titre de la collection, la description des collections, les produits apparaissent et puis ce thème est agréable. Il supporte l'affichage des filtres de tri qu'ils ne font pas tous cela, mais il est par défaut celui que nous avons montré ici. Ok, donc, nous sommes de retour dans nos chaussures à moins de 200$ collection et si vous êtes astucieux, vous avez peut-être remarqué cette nouvelle barre latérale ici cette boutique par. Donc, je suis à l'intérieur d'une collection et je pourrais choisir de magasiner par couleur ou par matériau. Donc, ici je vais choisir le noir et je suis toujours dans ma collection, mais il ne montre que des chaussures noires. C' est fantastique. C' est un excellent moyen de trier les produits, de faciliter la vie. Mais vous savez une des choses que j'ai mentionnées plus tôt qui dérange parfois les gens est que collections ne sont pas comme des catégories spécifiques que vous ne pouvez pas imbriquer les collections, ce qui crée initialement des problèmes pour les gens parce qu'ils sont habitués à ces collections imbriquées. Mais nous avons une meilleure option et c'est filtrer par balise. Et ici, je suis passé à fournir le thème, c'est un thème gratuit dans le magasin à thème et nous en parlerons plus tard aussi. Mais il a ceci a une fonctionnalité intégrée dedans. Ce filtre par tag chose. Alors, regardons comment on a mis en place ça. J' ai mes produits ici et vous devez trouver une taxonomie cohérente que vous allez utiliser et vous ne pouvez pas simplement ajouter des balises au hasard parce que ce thème est automatique. Il crachera toutes les étiquettes sur un produit. Donc, vous devez être cohérent. Alors, nous allons choisir notre paire de chaussures cool kicks et voici la chaussure. Une taxonomie assez typique que j'aime utiliser est le matériau de couleur quand vous avez affaire à des vêtements qui est très facile. Ces chaussures sont noires. Donc, je les ai déjà marqués en noir et ils ont aussi peut-être qu'ils ont du gris en eux. Vous pouvez faire plusieurs balises afin que nous puissions dire gris et l'une des choses qui aide à garder cette taxonomie cohérente est que Shopify vous suggère des choses que vous avez déjà utilisées. Donc, ici je peux voir que les chaussures sont en cuir. Je vais commencer à taper mon matériel. Regarde, le cuir apparaît comme une suggestion. Cliquez dessus et maintenant je peux vous si je sélectionne filtre par cuir, il va apparaître. Alors, sauvegardons et je reviens, nous allons rafraîchir cette page et nous allons choisir des chaussures en cuir aha ! Il y a comme des coups de pied cool cuir noir et rouge qui est vraiment agréable. C'est très utile. Chaque fois que nous pouvons rendre plus facile pour les clients d'explorer vers le bas pour trouver ce qu'ils veulent il est plus facile pour le propriétaire du magasin d'être en mesure de trier et d'apparaître comme génial. Il y a une autre chose que nous pouvons faire avec les tags aussi. Voyons voir les collections. Donc, disons que je voulais faire une collection appelée chaussures en cuir chaussures en cuir, nous l'appellerons chaussures en cuir et nous dirons des baskets en cuir véritable. Maintenant, nous allons dire de sélectionner automatiquement produits en fonction des conditions, car il s'agit d'une collection intelligente. Les produits doivent correspondre à toutes les conditions, mais puisque nous ne choisissons qu'une seule, cela n'a pas d'importance pour le moment. Et nous pourrons toujours le réviser plus tard. L' étiquette du produit est égale au cuir, même auto le complète pour moi. Donc, nous cliquons sur enregistrer et maintenant sans vraiment beaucoup d'effort de ma part, je devrais avoir une collection de chaussures en cuir qui se met à jour automatiquement avec toutes mes chaussures en cuir. Alors, jetons un coup d'oeil. On y va. Trois chaussures, toutes en cuir, ça marche. Très cool et vous pouvez également trier dans la navigation de cette façon dans les recherches et les collections. Et même pour... ça ne doit pas nécessairement être pour le client. Si je filtrais des produits dans mon propre magasin, je pourrais le faire par tagué avec. Donc, je pourrais utiliser une taxonomie interne pour cela. Ça rend la vie facile. Mais encore une fois, la clé ici est juste d'être cohérent, de trouver un système que vous utiliserez pour vos produits. Ça va changer selon le magasin. 7. Pages et blogs: D' accord. Donc, une chose courante dont chaque site a besoin sont les pages, c'est sur quoi l'Internet est basé, pages. J' avais mentionné que Shopify est, en soi, un système de gestion de contenu, mais pas seulement pour les produits, pour le contenu aussi, le contenu, le contenu. Ici, nous avons une page À propos de nous. Chaque magasin a, peut conduire à la page À propos de nous, FAQ, politiques d'expédition, politiques de retour, une page de contact. Ce sont des pages de contenu. Donc, si nous nous dirigeons vers notre administrateur, et nous cliquons sur boutique en ligne, pages, les voici. Donc, nous avons déjà modifié notre page À propos de nous, et regardez cela, titre À propos de nous. Notre grande page À propos de nous aide à construire la confiance, en effet, elle le fait. Donc, nous allons la mettre à jour, appelons-le About Us Demo, et ensuite nous allons ajouter ou remplacer cette ligne, et nous dirons appelez-nous avec n'importe quel, si je peux épeler, appelez-nous pour des questions, sauvegardez. C' est facile, je veux dire, l'éditer, c'est très simple. On peut voir que c'est le même éditeur WYSIWYG. Nous pouvons y ajouter des images, insérer des images. Il va récupérer des images de produit ou peut en charger de nouvelles, telles que l'image du produit. Il redimensionne également les images à la volée, ce qui est très pratique. Donc, je veux ajouter une image moyenne, l' insérer, et puis ce qui est cool aussi, si je double-clique dessus, j'ai beaucoup un bon éditeur CMS et WYSIWIG. Nous pouvons ajouter notre texte alt pour SEO. Réglons notre contenu autour de lui. Regarde ça, il flotte à gauche. C' est très sympa, alors sauve-le. Jetons un coup d'oeil à ce qui se passe là-bas. Exactement ce que vous attendez, comment vous vous attendez à ce que ça marche. Ensuite, nous avons la description de notre moteur de recherche. Toutes nos pages ici, faisons ça. Nous pourrions sélectionner, produits faire cela, blog post faire cela, et nous avons, vous pouvez choisir un titre de page séparé pour SEO ou méta description. Sinon, il va simplement remplir automatiquement cela dynamiquement en fonction de votre contenu. Ensuite, vous pouvez même définir le handle d'URL. Nous parlerons de gestionnaire d'URL plus tard, lorsque nous parlons de certains éléments de thème. Donc, nous pouvons également définir, c'est très cool, visible versus caché. Donc, je pourrais le mettre à caché, disons que c'était une vente et je pourrais dire une date de publication spécifique, et je pourrais choisir une date et une heure dans le futur, puis à ce moment-là, il sera automatiquement publié, ce qui est très agréable. Pas quelque chose que vous utilisez terriblement souvent, mais quand vous le faites, c'est agréable d'avoir. Alors, nous allons nous assurer qu'il est toujours là, très bien. Regardons l'ajout d'une page. Si je clique sur Ajouter une page sur l'écran des pages, comme vous le pensez, FAQ. Mettons un peu dans un échantillon de contenu. Acceptez-vous les retours ? Non, je ne sais pas. Vous pouvez aussi, si vous vous sentez froggie, vous pouvez faire du HTML droit là-dedans. Vous pouvez voir qu'il rend juste propre joli HTML sémantique. C' est très bon, pour autant que les éditeurs WYSIWYG vont. Alors, sauvegardons cette page et visualisons-la. Assez sûr, comme la magie, il apparaît. C' est très agréable, très facile, incroyablement facile, et rapide à faire. Maintenant, la seule mise en garde avec les pages, et c'est mineur, est que les pages et les blogs sont différents. Cela peut parfois confondre les gens. Donc, une page est vraiment n'importe quel élément de contenu statique qui n'est pas un produit et pas une collection. Un blog est différent. Donc, nous avons, encore une fois, fonctionne exactement comme vous le pensez. C' est juste nos messages avec des dates. Vraiment, la différence fondamentale ici est juste qu'il nous donne cette page d'index, où il crée ces extraits de messages. Parce qu'une fois que vous affichez un message complet, il est très similaire à une page standard. Une chose cool ici, vous l'éditez dans les billets de blog, et c'est exactement la même chose. Ajouter un billet de blog, la différence ici, nous pourrions spécifier notre extrait. Donc, cette partie ici est l'extrait. Si vous ne le faites pas, il va en fait simplement le tronquer pour vous, faire automatiquement, tout comme vous penseriez qu'une bonne plate-forme de blogs devrait fonctionner. Ensuite, vous pouvez également choisir l'auteur et ce sont personnes qui sont d'autres utilisateurs dans le magasin, d'autres membres du personnel. Ensuite, nous pouvons également utiliser des pages en ligne, nous pouvons ajouter des balises, et puis cela peut être utilisé pour filtrer rapidement à travers elle ou dans de nombreux thèmes, il s'affichera dans la barre latérale, qui apparaîtrait par les articles récents dans ce thème. Vous pouvez réellement créer plusieurs types de blogs. Donc, ici, on a des nouvelles. Je pourrais en créer un autre appelé ventes, sorte que nous pourrions séparer un blog, que l'un est des annonces de produits et l'autre pourrait être juste des ventes. Ensuite, choisissez ceci, nous pourrions faire que les commentaires sont désactivés, les commentaires sont autorisés, en attente de modération, et les commentaires sont autorisés, et sont automatiquement publiés si vous voulez vraiment vivre dangereusement. Donc, nous dirons que les commentaires sont autorisés, en attendant la modération. Dites billet de blog. Donc, maintenant, nous avons géré les blogs, nous avons des nouvelles et des ventes. Donc ici, nous avons deux blogs différents que nous pouvons lancer sur le magasin. Probablement très peu de magasins vont utiliser plusieurs blogs, mais il est agréable de savoir que cette option est là. Ensuite, nous avons des pages. Donc, c'est là que notre contenu statique, où la plupart de notre contenu et quand nous créons initialement le magasin va vivre, puis mises à jour au fil du temps sur de nouveaux produits, annonces, ce genre de choses, nous allons probablement continuer à vivre dans des blogs. D' accord. Parlons de deux parties simples, faciles mais incroyablement importantes de notre magasin de commerce électronique et c'est le panier et la caisse. Donc, ici, nous regardons le magasin merveilleux appelé Tattly qui vend des tatouages temporaires de créateurs fantaisie. Certaines de ces entreprises que je trouve sur Shopify sont phénoménalement cool et c'est l'une d'entre elles. Donc, ici, nous avons notre page produit, J'ajoute au panier, maintenant, voyons ce qui se passe. Nous ajoutons au panier et il nous emmène directement au panier, ce qui est un comportement par défaut agréable dans de nombreux thèmes. Pour autant que je sache, cela améliore la caisse. Donc, cela fonctionne exactement comme vous vous y attendez. Sa convention très conventionnelle, et c'est bon, dans le commerce électronique est bonne. Donc, nous avons quelques choses ici. Nous avons une liste de nos articles. Donc, ici, nous avons celui et nous avons un petit aperçu, le thème de la variante par défaut, notre prix, notre quantité, nous pouvons le supprimer et notre total. Ici, ils ont fait une personnalisation, ils ont ajouté cette note. Nous faisons de notre mieux pour le traiter, juste très gentil. Ensuite, ils ont également un emballage cadeau, qui est une modification et l'option confettis, alors ajoutons, cliquez sur emballage cadeau et voyons comment cela fonctionne. Donc, il y a des modifications communes qu'ils ont faites ici. Ils ont ajouté, il ajoute juste un autre produit à elle. On va l'éteindre. Oh, regarde ça, ça fonctionne très bien. Ensuite, donc, à part cela, il s'agit d'un panier standard. Nous avons notre panier ici, montre notre quantité, nos boutons de contrôle de mise à jour, le total, et le champ de notes, toutes les demandes spéciales pour votre commande. Si quelqu'un le remplit, il apparaîtra sous la forme d'une note sur l'ordre, et tous les thèmes y ont par défaut. Alors, d'accord. Voyons ce qui se passe lorsque nous cliquons sur la caisse. Nous emmène à cette page. Il y a une note importante ici. Si vous remarquez ce qui s'est passé, le nom de domaine a changé, nous sommes maintenant sur Shopify, checkout.shopify.com. Il génère une URL unique et c'est bien. L' URL unique enregistre le retrait de la personne en tant que session. C' est sécurisé, c'est SSL et c'est vraiment pourquoi il fait cela, pourquoi vous changez le nom de domaine. Si vous le souhaitez, vous pouvez utiliser une boutique Shopify Plus et Shopify Plus utilisera un nom de domaine standard. Mais pour tout le reste, pour la majorité des magasins, il va aller à checkout.shopify.com. Une des bonnes choses à propos de Shopify est que le processus de paiement est basé sur des données, des études et un excellent design de tous ces différents magasins. Donc, vous savez qu'il se convertit bien et c'est un processus de paiement très simple. Ensuite, vous le modifiez simplement, sorte que la marque correspond à votre magasin. Vous pouvez ajouter, ils ont ajouté une image de bannière, le logo, puis vous pouvez définir les couleurs et les polices. Alors comme ça, vous savez que ça tue cette dissonance cognitive, quand on finit sur checkout.shopify.com. Même si le nom de domaine est changé, je sais toujours que c'est très clairement la même marque, le même magasin. Nous avons des cartes-cadeaux ou des codes de réduction ici, ce qui est agréable, fonctionne parfaitement. Donc, tapez quelques informations et voyons ce qui se passe. On va mettre quelques choses ici, Kurt Elster, adresse. Si vous voulez envoyer un e-mail, c'est ma vraie adresse de travail. Si vous voulez m'envoyer un cadeau, n'hésitez pas. Donc, c'est la première étape du panier. Continuez à la méthode d'expédition et voici l'étape deux du panier. Donc, nous avons nos méthodes d'expédition ici et c'est intelligent. Je recommande aux gens de le faire comme une pratique exemplaire. Ils ont mis le temps estimatif du vaisseau là-dedans. C' est une chose courante. Tout le monde veut savoir à quelle vitesse je vais avoir mes affaires, je suis excité. C' est ainsi que les gens font le jugement s'ils doivent se mettre à jour. Si je ne peux vraiment pas attendre trois à six jours pour obtenir mes tatouages temporaires, je paierai le supplément 7,50 et j'irai avec la priorité USPS. Ensuite, je clique sur Continuer à la méthode de paiement. Donc, ici, je pourrais mettre mes infos de carte de crédit dedans. Il existe plusieurs processus de paiement que vous pouvez utiliser ou les paiements Shopify traiteront les cartes de crédit pour vous, et ensuite ils ont également PayPal intégré ici. Bien sûr, même que l'expédition, même que la facturation, abonnez-vous à notre newsletter. Ensuite, si je remplis ceci et que je clique sur la commande complète, cela me conduirait à une page de confirmation et ce serait tout, mais c'est un checkout unifié standard qui crée convention, tradition, et finalement booster les conversions, mais cela fonctionne très bien, je l'ai beaucoup aimé. Maintenant, cette page, vous avez vraiment très peu de contrôle sur, à moins, bien sûr, que vous êtes sur le plan Shopify Plus. Vous pouvez choisir si vous souhaitez modifier cette page. Vous ne pouvez vraiment pas le faire au-delà des couleurs, des polices, ce genre de choses par rapport au panier. Ceci fait partie du thème, vous pouvez vraiment, si vous le souhaitez, vous pouvez modifier modifier cette façon que vous avez vu en forme, HTML ou CSS résistant. Mais dès que vous cliquez sur la caisse, et que vous vous retrouvez sur cette page, checkout.shopify.com, vous n'avez pas, encore une fois, sauf si vous êtes sur le truc Shopify Plus, vous n'avez pas accès au modèle liquide pour cela. D' accord. Puis, là où j'ai pris commande pour eux, ils recevaient des notifications, puis ça apparaîtra dans les ordres ici. Donc, c'est ainsi que l'achat de choses fonctionne et la solution SSL hébergée qu'ils utilisent. 8. Thèmes et Liquid expliqués: D' accord. Nous allons parler de ce qui peut être la partie la plus importante du magasin pour les designers, pour le client, pour tout le monde, les Thèmes. Et Shopify est créé pour nous, ce type Timber. Et Timber, disons que vous pouvez penser à ça comme Twitter bootstrap pour Shopify. Il s'agit d'un cadre, d'une ressource sur les pratiques exemplaires à utiliser lors de l'élaboration d'un thème pour travailler avec lui. Vous pouvez l'obtenir, c'est gratuit de Shopify.github.io/Timber qui est sur GitHub, donc ils le mettent à jour régulièrement c'est une ressource utile. Donc, je l'ai déjà installé dans notre Theme Store, et il y a deux façons d'ajouter des thèmes à un Theme Store. Vous pouvez visiter Theme Store, le Theme Store officiel, choisir un thème ici et cliquer sur Installer le Theme, et Shopify le fera automatiquement pour vous, ou si vous avez un fichier zip, vous pouvez simplement zip votre thème vers le haut, téléchargement rapide thème et téléchargez-le. Ceci est valable si vous avez un thème personnalisé, vous modifiez un thème ou si vous l'avez exporté en tant que sauvegarde et que vous le réimportez. Il y a plusieurs raisons pour lesquelles vous téléchargez le thème directement dans votre boutique. Donc ici, j'ai Timber et je voulais vous faire découvrir ce qu'il y a dans un Thème. Donc, du point de vue de l'utilisateur final, du point de vue du client, c'est à quoi cela va donner l'aspect du magasin. Donc, nous avons pu voir que voici l'aperçu, ici le front en direct et le rendu de cette chose, et le panneau des paramètres du thème. Panneau des paramètres de thème sont des options, ils sont comment quelqu'un peut facilement choisir son logo, dans l'en-tête par exemple, et même modifier les couleurs et les éléments qui apparaissent dans le processus de paiement. C' est ce qui va dans le thème, si vous êtes l'utilisateur final. En tant que développeur de designer, si nous cliquons sur ce gars, ce bouton représentant des points de suspension et choisissez Modifier HTML/CS, nous allons voir l'intérieur du thème. Et il le décompose en ces dossiers, et nous n'avons pas le contrôle sur les dossiers, et c'est bien, parce que chaque thème quand vous entrez dans un magasin, ce sera le même. Allons de haut en bas avec. Le premier est Layout, il y a Theme.liquid. Et theme.liquid est notre point de départ, tous nos autres fichiers vont être rendus à l'intérieur de ce fichier, ce sera souvent notre pied de page d'en-tête puis le modèle ou le contenu rend à l'intérieur de celui-ci. Et je n'ai jamais vu un thème qui a plus d'une mise en page ici, c'est toujours juste theme.liquid.. Iquid est notre extension, ce qui signifie que ce sont des fichiers qui vont être exécutés côté serveur avant qu'ils ne soient transmis à l'utilisateur final. Donc, .liquid est équivalent to.php. Et puis nous avons des modèles. Les modèles se réfèrent au contenu, à la page qui va être rendue dans notre fichier theme.liquid en fonction de ce qu'il est. Et faisons défiler vers le bas dans theme.liquid si nous pouvions le trouver, recherchez la ligne de contenu 296, contenu pour la mise en page. Ainsi, lorsque vous effectuez un rendu, une page est demandée à Shopify, elle saisit theme.liquid, puis insère le modèle approprié dans cet espace contenu pour la mise en page. Nous avons des modèles différents en fonction de ce que nous faisons. Et ils sont assez clairs, assez évidents ce qu'ils sont, comme 404 évidemment, est pour le fichier non trouvé, article pour les articles, forum pour blog, liste de collection de panier, voyons, vous pouvez voir tout pour montrer collections/tous. Ensuite, si vous avez autorisé la création de compte, vous avez le compte client, création de leurs adresses de compte, clients enregistrant la commande, etc., page de carte-cadeau et nous avons index.liquid, c'est notre page d'accueil, liste des collections qui est une liste de collections, et ici nous avons des collections et des produits, celui-ci est facultatif. Pas nécessairement tous les modèles qui sont ici sont nécessaires. Page et page.contact, nous allons entrer dans ce que c'est, produit.liquid, bien sûr notre page produit, et la page de recherche ou de recherche. Ici vous écrémé et voir nous avons page.liquid qui est une page, et la page.contact. Ce qui est, est un modèle alternatif, ils ont des pages ou une page standard. Et puis, si nous regardons page.contact, il s'agit d'une page requise par Shopify pour avoir une page de contact. Mais ce n'est qu'une variation sur une page avec un formulaire de contact coincé dedans. Et pour le blog, pour la page d'article de blog, le produit, la collection, vous pouvez avoir plusieurs modèles pour ces pages, donc, vous n'êtes pas limité à une seule chose, et vous choisissez cela sur la page particulière ou, vous pouvez définir quel modèle qu'il utilise manuellement. Ensuite, nous passons à Snippets. Les extraits sont cool, ils sont inclus. Si vous avez le morceau de logique, morceau de contenu, HTML quoi que ce soit, vous mettrez cela dans un extrait, puis vous pouvez appeler cela à plusieurs reprises sur les pages. affichant un groupe de produits, vous pouvez le faire sur les produits de fonctionnalité sur la page d'accueil, certainement sur une page de collection, éventuellement dans un panier vide ou une page 404. Vous voudriez mettre la logique pour cela dans un extrait ici, et vous pouvez simplement appeler cela comme une inclusion à plusieurs reprises. Et puis de cette façon, si vous devez le mettre à jour, au lieu de le mettre à jour à cinq endroits différents, vous le mettez à jour une fois et ensuite il est mis à jour partout. Très pratique. Et cela fait partie de l'utilisation d'une méthode sèche, être sec, ne vous répétez pas. Ensuite, nous passons à Actifs. Assets est très simple, ce sont les images, JavaScript, les fichiers individuels CSS que le thème va utiliser. Si vous avez une logique qui doit être rendue, il peut s' agir de fichiers liquides, mais ils n'ont pas besoin de l'être. Ici, nous avons juste modernzr, nous avons juste une minute de fibre à la moderniszr ici, et cela va juste être servi comme est intact. Mais alors, nos fichiers d'actifs réguliers, nous avons quelques graphiques vectoriels ici, même dans un fichier HTML, et il semble que nous utilisions une police d'icônes. Très cool. Ici, nous avons un timber.scss, donc, Shopify va compiler, rendra avec Sass, ce qui est pratique donc, vous pouvez l'utiliser. Sass est compilé sur le serveur Shopify, vous n'avez pas besoin de jouer avec elle et il fait quelques bonnes choses. Si vous voulez vous faciliter la vie, vous voulez utiliser des variables d'aide, vous pouvez utiliser les paramètres de thème, c'est pratique. Très bien, fermons ce dossier d'actifs. Obtenir plus simple ici la configuration, les données des paramètres, puis la définition du schéma. Donc, si nous regardons ce gars, c'est cette page personnalisée que je vous ai montrée, ici personnaliser le thème. C' est ce qui va être rendu ici pour l'utilisateur final à utiliser, et c'est aussi là que nous allons stocker ces choses. Maintenant, voici un préréglage coincé ici. Nous avons donc un préréglage appelé par défaut, et il est stocké là-dedans. Ensuite, nous avons enfin des locales, locales est la façon dont vous gérez l'internationalisation. Donc, comme vous l'avez deviné, ce thème vient en allemand, anglais, français, et je crois portugais, mais certainement c'est ici, regardant c'est son propre environnement, qui rend la vie facile. Vous pouvez construire le travail sur le thème de l'utilisateur entièrement ici. Très bien, jusqu'à maintenant, choses ont tous été amusants et jeux, en cliquant autour et facile à utiliser l'interface. Le système CMS simple, un bon éditeur WYSIWYG dans la sélection des thèmes. Nous avons parlé un peu de ce qu'il y a dans un thème, et maintenant il est temps de se salir avec Liquid. Liquid est un langage, basé sur Rubis, que Shopify a écrit, il est là-bas, c'est dans d'autres choses maintenant, et en fait ce n'est pas effrayant au moindre. Alors regardons, ici, nous avons notre page produit de notre thème ici. Il rend, mais comment s'est-il passé ? Donc, si nous regardons dans notre thème, nous avons produit .liquid, ce n'est pas compliqué et nous savons que produit.liquid est notre fichier produit. Chaque fois que nous appelons la page produit, Shopify recherche products.liquid. Dans ce fichier, si nous faisons défiler et le regardons, c' est juste du HTML, il n'y a rien de fou que nous n'avons pas vu auparavant, juste du HTML. Mais alors, on se demande  : « Hé, la description est entrée ici ? » Regardez, ligne 116, nous avons ce type, Product.description, et je suis sûr que vous pouvez deviner ce que ça fait. C' est la variable qui met dans le produit, mais pour le diable, commentons-le, sauvegardons et actualisons la page produit. Et bien sûr, et c'est cool. Ceci est juste l'éditeur de texte régulier construit à l'intérieur de Shopify, fonctionne très bien. Fonctionne immédiatement, c'est génial et ensuite si nous décommentons produit.description et l' enregistrons, notre description revient. Donc ici, vous pouvez voir que nous avons produit .description et il est enveloppé dans ces deux accolades. Cela nous dit, « Hey, c'est une variable Liquid », et généralement tout ce qui est avec les accolades doubles signifie que c'est un morceau de contenu. Il va sortir le titre, la description, le prix, ce genre de choses, alors que ceci, si vous observez attentivement, nous avons aussi ces gars, où c'est frisé accolade 100 pour cent. Ceux-ci signifient généralement que c'est logique ou c'est quelque chose qui doit être proche de comme un commentaire, mais si les instructions l'utiliseront, boucles l'utiliseront. Mais ça t'aide en un coup d'œil à voir ce qu'il fait et c'est sympa. Même ici dans ce, la logique si alors, c'est très simple. Si la collecte et puis se termine si, c'est exactement ce que vous attendez de cela, il n'y a rien de fou ici. Vous savez qu'il n'y a pas de syntaxe étrange, c'est facile à utiliser. Ici, nous avons vous savez product.liquid, mais il est juste ce modèle. Nous l'avons mentionné plus tôt, ce qui se passe, c'est à chaque fois qu'une page est chargée, Shopify passe à travers theme.liquid, alors allons-y, et encore une fois juste la tête normale. Nous avons déjà vu ces choses avant, nous connaissons HTML, ce n'est pas difficile. Mais quand nous faisons défiler vers le bas, à travers le fichier, à travers notre fichier theme.liquid, nous trouvons ce gars, contenu pour la mise en page, et le contenu pour la mise en page, il va être quel que soit ce modèle correct, va être déposé dans ici. Donc, quand nous chargeons notre page produit, il saisit theme.liquid et passe à travers elle, et quand il arrive au contenu pour la mise en page, il insère product.liquid dedans, et il continue sur son chemin à travers le reste de ce fichier, ce qui est pratique. C' est génial. Alors c'est tout. Je veux dire qu'il n' y a vraiment rien, il n'y a rien de plus difficile à atteindre. Donc il n'y a aucune raison d'avoir peur de Liquid, et nous allons entrer dans nos filtres et quelles sont ces autres options. Donc, si nous regardons ici, comme vous le savez ici le titre de la page, c'est juste du contenu , il tombe en regard, nous avons une déclaration if la laisse dedans. Si on fait défiler vers le bas, et qu'on a toutes sortes de bonnes choses ici. Permettez-moi de trouver un bon exemple d'If, alors nous y allons. Si vous connaissez le client qui signifie que c'est, le client a été activé ici, ils afficheront le client connecté et si, c'est génial. Très simple. L'autre chose à savoir sur Liquid est qu'il n'y a pas d'URL, donc ici vous pouvez voir que nous avons moderniser.min.js, tag script, asset_url. Nous n'avons pas à nous soucier des fichiers 404s perdus, il les laisse tomber, et il le fait même avec le code HTML correct, donc c'est une balise de script par rapport ici sur notre CSS, stylesheet_tag, asset_url, timber.CSS, et bien sûr il fait référence à asset_url ou fait référence à un actif. Nous faisons défiler vers le bas jusqu'à notre dossier d'actifs. Elle est Timber.scss.liquid, et ensuite je vais juste le déposer là-dedans. Cela fonctionne, plus de 404, plus de souci à propos de ce truc quand les URL changent, Shopify s'en occupe pour nous via Liquid, qui une fois que vous avez cette syntaxe, cela rend la vie très facile. Voici un bon exemple, super facile à comprendre, notre favicon. Donc, si settings.favicon_enable, donc cela fait référence à notre fichier de paramètres de thème, et c'est tout. S' il est allumé, alors il va fonctionner. Il va juste afficher ce morceau de HTML intact, mais pour notre, href là-dedans, nous nous référons à favicon.png et asset_url. C' est ça, super simple, super facile. Ce n'est pas le cas, c'est tout ce que vous avez vu avant. C' est très facile à intuiter, mais en même temps, je garderais aussi à portée de main et je le fais avec la documentation Liquid et la feuille de triche Shopify Liquid. Ici, nous avons, juste ici, il vous montre, la référence de variable liquide. Donc on va ouvrir ce type, et ici en un coup d'œil, tu pourrais fouiller, trouver tes affaires. C' est très facile. C' est notre intro, je vais emménager, devenir un peu plus compliqué dans la prochaine. 9. Dispositions, modèles: D' accord. Parlons de Layout. Nous avons vu dans notre thème, il est juste en utilisant du HTML régulier, rien de fou à ce sujet. Mais, la mise en page peut ne pas être ce à quoi nous sommes habitués. Nous avons cette structure de fichiers assez différente où nous n'utilisons même pas d'URL. Ce qui se passe, c'est que nous utilisons ce dossier Layout, et en cela, nous avons theme.liquid. Quatre-vingt-dix pour cent du temps, vous n'aurez qu'un seul fichier de mise en page, theme.liquid. Chaque page est rendue en utilisant theme.liquid, et c'est ceci, c'est ce que vous attendez à voir. Il s'ouvre avec notre fichier HTML, doctype. Il a une tête, et si nous faisons défiler tout le chemin vers le bas, assez sûr qu'il se ferme. Il a un pied de page. Donc, cela devient notre page universelle, notre format universel. Cela nous évite de beaucoup de travail d'avoir à utiliser le pied de page d'en-tête inclut, bien que vous pourriez si vous le vouliez. Cela nous évite d'avoir à écrire ces trucs sur chaque page, c'est pratique. Ils sont faciles à utiliser. Donc, nous avons Theme.liquid ici, et il y a tout ici, tous nos besoins de base. Ça a l'air très familier, mais il y a quelques choses qu'il doit avoir. part comme, c'est votre seule page maître ou mise en page principale, et tout est rendu dans ceci, puis basé sur la chose que nous rendons, basée sur l'URL vraiment. Il insère l'un de ces modèles dans le contenu du fichier de page ou du contenu de la variable de page. Il est là, contenu pour la mise en page, 296. Ça laisse tomber ce truc là-dedans. Le contenu de la page se trouve dans ce fichier de mise en page. C' est notre principale chose qu'on doit avoir là-dedans. Il y a un autre mineur, mais c'est important que nous devons avoir ici, trouvons-le. Il est là. C' est ce qu'on appelle le contenu de l'en-tête là-haut sur 34. Le contenu de l'en-tête permet à Shopify d'y insérer des éléments. Donc, il pourrait s'agir principalement de plugins. Si vous installez des applications, et que l'application doit ajouter du JavaScript au site, elle va le faire par là. Ça rend la vie facile. Si vous supprimez l'application, vous n'avez pas ces trucs restés là-dedans. Si vous avez l'application, vous n'avez pas à jouer avec HTML nécessairement tant qu'il peut être déposé là, ce qui est pratique. Très gentil. L' autre chose que nous remarquerons, nous ne l'avons pas dans ce fichier mais sont une sorte d'extraits d'inclusion. Donc, ici, nous avons quelques extraits. Si nous le voulions, nous pourrions le faire y compris theme.liquid et parfois je le fais juste pour le nettoyer afin qu'il n'ait pas l'air si désordonné. Ici, nous allons trouver un bon exemple. Nous avons commencé mobile nav et si nous faisons défiler vers le bas, nous y allons. Il y a la fin du mobile-nav. Alors, coulons-le. On a ce type. Donc je vais juste laisser ça là pour qu'on se souvienne où ça va, et ajoutons un extrait. Nous allons créer un nouvel extrait appelé mobilenav. Apparaît, et nous allons coller notre contenu là-dedans. Voici donc le contenu mobile de cette page. Ça s'appelle mobile-nav.liquid. Sauvez-le. Retournez à theme.liquid et écrivons ceci là-dedans. Inclure mobilenav et fermons cette accolade bouclée. Sauver. Rafraîchissons ça. C' est la page devrait paraître bien, mais nous allons trouver mobile-nav ici, et juste là. Boum. Commencez la navigation mobile. Il est là, et il y a tous nos trucs de navigation mobile, toujours dedans clos. Mais que se passe-t-il si on tue cette ligne ? Donc, eh bien, ici, nous allons juste le supprimer entièrement. Sauve ce gars, et rafraîchissons notre source. Maintenant, toutes ces lignes ont disparu. Donc, depuis ce fichier modèle, il est donc presque toujours vous n'auriez que le seul fichier .liquid thème, et il apparaît dans chaque page. n'y a vraiment pas une bonne raison d'utiliser des inclusions à l'intérieur de theme.liquid autre que peut-être qu'il nettoie, ou que vous avez l'intention d'utiliser plusieurs fichiers de mise en page. Mais, inclut avoir du sens à l'intérieur des modèles. Donc, en général, la façon dont je le fais, vous le feriez est à thème .liquid. Donc, votre fichier de mise en page d'abord, puis votre fichier de modèle par exemple product.liquid, puis à l'intérieur, vous feriez votre inclusion. Donc, dans product.liquid, il peut s' agir de boutons de partage social et vous avez une inclusion pour cela. Ça aurait du sens. Cela couvre nos fichiers de mise en page, nos modèles et nos extraits. Maintenant, nous allons parler d'une partie spécifique de liquide que vous devez utiliser tout au long de votre truc, mais un très facile à utiliser, et c'est des variables. Variables liquides, également dans la documentation Shopify, appelées objets liquides. Ainsi, les objets sont des variables. Les variables ont été enracinées en moi. Donc, c'est probablement comme ça que je vais continuer à l'appeler, mais ils sont interchangeables. Donc, ce sont ces gars, les choses à double accolade nous disent que c'est un peu de contenu, un peu d'information. C' est une variable, et il sort. Il produit nos informations comme nous l'avons vu lors d'une démonstration antérieure comme product.description. Dans les objets, il y a deux sortes. Il y a des objets globaux qui peuvent être utilisés partout sur le site. Si nous nous dirigeons vers la documentation Shopify, ça va être des trucs comme le panier. Le panier doit apparaître partout. Ou page en cours, renvoie le numéro du pager sur. Eh bien, si vous êtes dans le contenu paginé, donc en fait cela ne fonctionne pas nécessairement partout partout. Si la personne est connectée en tant que client, afin que vous puissiez faire une logique comme la connexion, la déconnexion. Donc, si vous faites défiler cette documentation liquide, nous avons nos différents objets pour global, comme les titres de page sont un bon exemple qui apparaît partout, et nous avons le titre de la page. Alors, faisons juste une démo rapide. Ici, je vais copier le titre de la page, puis revenons à notre produit .liquid. Donc, ici, nous avons une description du produit et en dessous, ajoutons une nouvelle information. Je vais écrire une balise de paragraphe, et dire, « C'est la page de titre. » Mettons ça. Sauvez-le. Maintenant, nous allons charger notre produit. Voilà, d'accord. Beaucoup de produit, faites défiler vers le bas, et regardez cela. Donc, nous avons notre description comme nous nous y attendons, et juste en dessous, voici la page Hip Shoes. Donc, il vient de charger le titre de la page. Maintenant, c'est un global. Objet global, variable globale qui va fonctionner sur chaque page. Mais qu'en est-il de ce qui est spécifique à une page ? Donc, dans ce cas, un excellent exemple est ce produit.description. La description d'un produit ne peut apparaître sur cette page particulière qu' en référence à ce produit spécifique ou au prix. Mais tu te rends folle si tu essayes de comprendre ce que chacun est. Donc, c'est là que la feuille de triche Shopify est utile. C' est de Mark Duncan Lee qui est designer chez Shopify, et il a tout éclaté comme ça, ce qui est génial. Donc, ici si nous allons sous les variables de modèle, et oui, il les appelle des variables pas des objets. Donc, ici, on a blogué du liquide. Ici, il a une liste de toutes les choses spécifiques que nous pouvons utiliser sur une page de blog. Encore une fois, ce n'est pas comme en un coup d'œil, c'est très évident ce qu'ils sont, blog ce titre, c'est le titre du blog. Mais quand on essaie de penser à ce que c'est, c'est plus difficile. Donc, c'est très agréable d'avoir cette feuille de triche devant vous. Si vous cliquez dessus, il vous donne toute la description, et il sera également lié directement à la documentation, ce qui est très agréable. Donc, nous sommes sur notre page produit, et ici, nous avons tous ces trucs pour notre produit, ce qui est génial. Oui, et on a, voyons des modèles, des produits de liquide, donc on va ramener ce gars dehors. On ne veut pas ça. Donc, c'était le sous-titre de la page. Cela apparaîtra sur chaque page. Donc, au lieu de faire cela, trouvons quelque chose de spécifique à un produit que nous pouvons produire. Allons à travers les produits qui liquides et en trouver un, un qui est juste. Donc ici, notre produit n'affiche pas son type. Donc, nous avons produit .type. Alors, faisons un meilleur exemple. Disons que nous pouvons ajouter ça ici. Donc, je vais écrire, je vais le mettre en gras. J' écrirai type, puis nous allons changer ceci produit.type et voir ce qui se passe. Product.Tapez, enregistrez, retournez là-bas, et ils sont là, rafraîchissez. Regardez ça, tapez, kicks page, on y va. Où était ma page et moi étions là-dedans. Save, d'accord, inversons ça. Tapez des coups de pied, et c'est parce que le type de ce produit a au moins été défini sur des coups de pied. C' est une modification courante. Vous voudrez peut-être dire aux gens, « Hé, de quel genre est-ce ? » C' est comme ça que tu ferais. Parlons de modèles, droit Donc, nous avons à l'intérieur ou thème, nous avons ce concept de micro modèles. Ce n'est pas une page complète. Ils sont juste le contenu de cette page, et c'est ce qui se passe dans le dossier templates. De plus, passons d'abord par la façon dont ils sont choisis, parce que quand je suis arrivé à Shopify, cela me perturbe d'abord aussi. C' est fait en fonction de l'URL. Alors, jetons un oeil à eux. Allons à notre magasin, et on va charger ce type. Très bien, il est restauré. Donc c'est vrai, celui-ci est facile. Exécutez la page d'accueil, donc barre oblique, qui chargerait notre index.liquid, et nous allons descendre. Il y a Index ce liquide, et ici donc charger cette première chose là-dessus. Nous voyons chacune deux sections de la page d'accueil. Prenons du sens. Jolie, assez simple. On y va. Il y a notre collection de pages d'accueil, et juste pour le prouver, juste pour montrer que, c'est ce que c'est, nous allons ajouter. Nous allons ajouter du texte ici. Comment économisez-vous ? Actualisons cette page, et regardons cela, elle apparaît. Donc, c'est joli. Celui-ci est facile, c'est clair quant à la façon dont ce contenu fonctionne. Mais encore une fois, la collection que vous choisissez est basée sur l'URL. Donc, cliquez sur À propos de nous, et About Us vit sur une page. Nous le savons, si vous regardez l'URL, /pages. Donc, alors si nous nous dirigeons vers, nous nous attendrions à ce que cela charge page.liquid. Ici, nous avons le titre de la page H1. Même affaire, nous allons ajouter la page de texte là, enregistrer, rafraîchir la page de démonstration à propos de nous. C' est comme ça que ça fait. Parcouvrons tous les modèles qui sont ici. Ce n'est pas très grand nombre, et nous discuterons rapidement de ce que chacun fait. Quatre cent quatre, qui est l'article de la page Fichier non trouvé. Ceci est le contenu d'un blog. Donc, article de blog à ne pas confondre avec page.liquid. Blog, c'est l'index des articles sur un blog. Panier, il s'agit de votre page de panier, pas de la page de panier de paiement. Collection, l'initié, juste standard une page de collection catégorie. Collection.list, celui-ci est un peu différent. Laisse-moi te montrer celle-là. C' est une liste de collections. Donc, si vous allez dans /collections, il charge cette liste de toutes les collections, qui est en fait différente de collection/all, qui est une liste de tous les produits dans un magasin. Donc, alors si nous descendons, donc ce sont les collections toujours collections.list, et puis nous avons toutes ces pages clients. Donc, il y en a beaucoup ici, ceux-ci ne sont utilisés que si vous avez des comptes clients activés sur le magasin, et pour la plupart, lorsque le client est connecté. L' activation du compte consiste à vérifier la vérification de l'e-mail. Adresses est l'endroit où ils gèrent leurs adresses enregistrées. Page de connexion, le login bien sûr. Ordre, ils peuvent voir leurs commandes passées, la page d'enregistrement, réinitialisation du mot de passe. Jolie, les noms sont simples. Voyons ce qu'on obtient ici. Carte-cadeau, celle-ci est différente. Lorsqu' une personne achète une carte-cadeau, elle reçoit un lien pour la carte-cadeau par courriel. C' est ce qui est rendu lorsqu'ils cliquent sur ce lien. Donc, si j'achète la carte-cadeau, c'est la page qui s'affiche. Vous pouvez faire des cartes-cadeaux fantaisie ou ajouter des instructions, ce genre de choses. Index.liquid que nous avons appris est la page d'accueil, list-collections. Donc, c'est /collections et /products. C'est facultatif. Vous voyez, certains de ces optionnels se réfèrent simplement à quand vous soumettez un thème au Theme Store. Ce qui est nécessaire et ce qui ne l'est pas. Nous avons la page ici, ce n'est qu'une page comme nous l'avons appris. .Contact, ceci un modèle alternatif, et je ne vais pas en parler tout à fait encore. Mais on va y entrer. Produit. Liquide, on a beaucoup joué avec ce gars. Donc, la page produit et la recherche sont les résultats de la recherche. Donc, ici, nous avons collection.list. Il s'agit d'un autre modèle. Ouais, collection/tous ? liste de lecture. Encore une fois, celui-ci n'est pas nécessaire. Mais c'est utile d'avoir ici. C' est une partie de la raison pour laquelle j'aime commencer. Si je faisais un thème personnalisé, c'est bien de commencer avec ce travail de charpente en bois. On va plonger dans des trucs plus liquides ensuite. 10. Filtres et boucles: Je veux plonger dans et parler de l'une de mes fonctionnalités préférées de la syntaxe liquide et c'est les filtres. Nous allons lire la définition de Shopify. Les filtres sont des méthodes simples qui modifient la sortie des nombres, des chaînes, des variables et des objets. Ils sont placés dans une balise de sortie et sont séparés par un caractère de tuyau. Donc, comme nous nous souvenons avant, une balise de sortie, c'est un objet, un objet Liquid ou une variable Liquid et il est indiqué par ces accolades doubles. C' est généralement pour des choses comme le titre, la description, prix, ces choses qui ne sont que des variables dynamiques que vous voulez cracher. Donc, ils nous donnent un exemple comme majuscule comme une pipe. Alors, nous allons dans notre bon vieil ami, le modèle de produit. Got produit.Liquide ici et ici regarder h1 ; product.title. Ajoutons un filtre. Un filtre est indiqué par pipe, donc pipe étant un caractère pas comme une référence Mario, et ensuite nous allons ajouter majuscules là-dessus. Donc, voilà, nous avons obtenu « product.title | upcase ». Donc, on pourrait probablement deviner ce que ça va faire. Enregistrez-le et maintenant, actualisons cette page. Regarde ça, ça a changé ça en chaussures Gnarly, inspecter l'élément. Donc, si nous le regardons, nous avons « itemprop est égal au nom des chaussures gnarly ». Cela a modifié la sortie pour nous et c'est utile. Vous pouvez le faire pour faire des choses globalement, pour modifier les paramètres thématiques comme dans votre navigation. Peut-être que votre navigation vous voulez qu'elle soit toujours en majuscules, minuscules, vous pouvez le faire ici. Donc, sortons ça, mais il y a toutes sortes de filtres qui font beaucoup de choses différentes, et l'une des meilleures ressources pour trouver qui est la feuille de triche Shopify à nouveau de Mark Dunkley. Si je veux regarder ici, il a des filtres liquides, ce truc de sortie, donc c'est cool. Voici une bande HTML. Donc, c'est bien comme disons, vous voulez ajouter votre description incorporée à un document. Donc, voici leur exemple. Ce qu'ils ont fait est de saisir le contenu de l'article, puis de supprimer HTML, en tire le HTML parce que, évidemment, HTML dans votre description intégrée le casserait, et puis ici, ils ont ajouté un autre tuyau, tronqué : 20. Donc, je me demande ce que le tronc fait. Allons ici. En utilisant des mots tronqués, nous pouvons le réduire à x mots ou tronquer des caractères. Cool, alors faisons défiler vers le bas. On a d'autres filtres. On en a ? Donc, ici est capitalisé. Capitalisé, c'est sympa, on pourrait utiliser ça pour assainir notre contenu. Dans le cas de, disons quelqu'un qui est paresseux et tous leurs autres titres de produits étaient en minuscules. Vous pouvez l'utiliser pour les rendre jolis, pour s'assurer qu'ils ont toujours fière allure, ce qui est pratique. Mais comme vous pouvez le voir ici, c'est plus que de simplement modifier ces sorties. Il y en a beaucoup de différentes pratiques. Ici, on a de l'argent avec de la monnaie, l'argent sans monnaie, et de l'argent. Vous allez les voir beaucoup parce que vous voulez être en mesure d'internationaliser vos thèmes. Donc, peut-être que quelqu'un vend dans plusieurs devises ou qu'il est dans différents pays. Donc, vous pouvez afficher hey, l'argent avec de la monnaie au lieu de simplement afficher le signe du dollar comme nous le faisons maintenant. Ici, c'est ajouter de l'argent canadien sans monnaie. C' est juste le prix sans le signe du dollar, et l'argent est prix avec le symbole de la devise. Mais c'est utile pour des choses plus que ça. On a le prix, c'était plutôt cool. Jouer avec les prix est pratique, étant capable de modifier la sortie de texte en minuscules à majuscules. Mais qu'en est-il du raccourci, nous facilitant la vie. Donc, allons vers un gars que nous avons regardé plus tôt et c'est ce lien CSS. Donc, CSS, nous avons des références du fichier. Donc ici, ce gars en simple citation fait référence à notre atout. Il y a du bois, et si on retourne ici, alors on a deux tuyaux, donc on a deux filtres ici. Le premier est asset_url. Donc, asset_url, nous pourrions probablement deviner qu'il va tirer l'URL sur cette balise puis feuille de style. Alors, jetons un oeil dans la source. Permet de voir la source de notre fichier et de trouver le lien CSS, il est, lien CSS href, blah, blah, cool. Donc, nous avons tout ce qui se passe hors d'ici. Mais que se passe-t-il si nous tuons stylesheet_tag ? Nous sortons un de ces tuyaux, sauvegardons et rafraîchissons. Regarde ça. Donc, ici, comme nous nous attendons à ce qu'il produise juste l'URL. Il y a des situations où vous voulez faire cela. Si vous souhaitez pouvoir ajouter des attributs supplémentaires à un lien, vous souhaiteriez pouvoir le faire. Donc, c'est très pratique. Donc, nous allons utiliser des filtres de plus en plus et d'autres choses, mais certainement juste l'attraper. Ceci est une référence en utilisant la feuille de triche Mark Dunkley, très pratique pour vos filtres mais il vous permet de faire toutes sortes de choses programmatiques amusantes que les concepteurs ne pouvaient pas utiliser, bien pas forcément ne pourrait pas le faire, mais avaient peur d'utiliser ou difficile à utiliser auparavant avec JavaScript, PHP, ce genre de chose. Ici, c'est rendu incroyablement facile. Tu dois juste savoir lequel tu cherches et c'est ce que sert la feuille de triche. Maintenant, on va parler d'un sujet, ça va devenir un peu effrayant. Je ne veux pas t'effrayer. Nous allons discuter de pour-boucles. Donc, si vous êtes familier avec naviguer dans votre CSS HTML, ce n'est pas beaucoup de logique de programmation là-dedans. Donc, quelque chose comme une boucle pour peut sembler intimidant. Jeffrey les appelle balises d'itération, for-loop est une sorte de balise d'itération. Tout ce que vous faites est de répéter un bloc de code. Alors, jetons un coup d'oeil à quelques exemples où nous pourrions vouloir utiliser for-loops, et ensuite, nous verrons comment ils fonctionnent, et qu'ils ne sont pas effrayants du tout. Donc, nous avons ici dans notre collection, dans notre thème. Ce que nous ne savons pas lorsque nous chargeons une collection, nous avons un modèle de collection qui met dynamiquement les produits là dedans. Nous ne savons pas combien de produits seront présents dans chaque thème, dans chaque collection. Donc, nous devons avoir un moyen de le faire par programme et facilement, sans répéter tout ce code. Ici, ce nuage de balises sur la gauche, cette barre latérale, c'est une boucle et même quelque chose d'aussi simple que la navigation en haut. Nous ne savons pas combien d'articles vont être là-dedans. C' est juste une liste répétée encore, et encore. Encore une fois, c'est juste une boucle pour, puis, une autre commune bien sûr, vignettes de produit, les produits peuvent avoir différents nombres de vignettes. Donc, nous devons utiliser for-loops et nous les utilisons un peu tout au long d'un thème. Alors, regardons comment cela fonctionne. Donc ici, j'ai chargé collection.Liquid et en collection.Liquid et je l'ai simplifié un peu, mais si nous arrivons ici, nous voyons la ligne 53. J' ai ce gars, et il dit, pour le produit dans la collection.products comprennent l'article de la grille de produit et finfor. Donc, dès que nous voyons le pourcentage d'accolades, nous savons que c'est un morceau de logique et nous devons le fermer. Donc, on a pour et fin. Très simple. Maintenant, si on regarde la langue, c'est aussi simple. Donc, pour le produit dans la collection.products. En utilisant ce grand liquide.Syntax, nous pourrions dire qu'il est juste de dire, pour chaque produit d'une collection, cependant, de nombreux produits sont dans leur, boucle à travers et inclure cet extrait. Ok, et regardons cet extrait. Nous avons un article de grille de produits et voilà, cet extrait est utilisé pour mettre en valeur chaque produit pendant la boucle, pour les produits de collection .products et collection.liquid. Très bien. Donc, tout ce code ici, normalement, si nous voulions le faire sans la boucle, nous devrions le faire statiquement et continuer à répéter cela encore et encore, cela ne fonctionnerait pas. La boucle le rend beaucoup plus facile. Alors, revenons à cette boucle. Très bien, donc nous avons pour le produit dans la collection. Les produits incluent l'article de la grille de produit. D'accord. Juste pour le démo, nous allons tuer cet extrait et puis nous laisser rafraîchir et voir ce qui se passe. Tous nos produits disparaissent. Donc, on sait que ça marche. Alors, remettez-le, enregistrez-le, rafraîchissez-le et nos produits reviennent. Maintenant, avec une boucle, pour la plupart c'est facile comme ça juste, « pour n'importe quoi dans endfor. » Mais les boucles sont plus puissantes que cela. Nous pouvons en fait inclure d'autres bits de logique là-dedans. Donc, on pourrait faire un autre. Essayons d'autres. Sinon est un peu de logique. Donc, on va dire autre et ensuite, je vais coller ça ici. Je l'ai déjà fait écrire mais juste ce sont les balises de paragraphe dit, « Oups, la collection est vide. » Alors, sauvegardons ça. Donc, maintenant, nous avons un peu de logique ici, et ce que cela signifie pour le produit. Donc, s'il y a des produits dans la collection, dans la collection, nous allons exécuter cet extrait mais s'il est vide, nous allons afficher un message différent. Donc, créons pour vérifier nos collections. Qu' est-ce qu'on a ? Produits, collections. J' ai déjà créé une collection vide et regardons la. Regarde ça. Donc, il est dit, « Oups, la collection est vide. » C' est en utilisant cette autre logique que nous avons mise là-dedans. Juste pour montrer que c'est ce qu'il fait, revenons en arrière et éditons notre thème à nouveau. Collection.Liquide. Quand nous prenons l'autre, voyons ce qui se passe, si nous n'avons pas inclus ce petit peu de logique là-dedans. Donc, il traverse la boucle mais il n'y a aucun produit et rien ne se passe. Ça s'arrête et commence. Donc, à peu près plus simple que vous ne le pensez, probablement plus simple que d'autres langages de programmation si vous les avez gâchés mais il y a encore plus que cela. Donc, si nous revenons à la feuille de triche de Mark Dunkley, nous avons ici pour trouver la boucle pour, mais il y a plus que vous pourriez faire avec. Alors, si tu descends, où est-il ? On y va, Loop Helpers. Alors, Loop Helpers, maintenant, nous pouvons définir des choses. Alors, voulons-nous courir sur toute la longueur de la boucle ? Voulons-nous savoir où nous sommes dans la boucle ? Index de l'itération actuelle, qu'est-ce que nous avons d'autre ? Oh, ces deux-là sont bons, premier et dernier. Donc, si vous dites, si c'est comme pour la pagination, si c'est la dernière chose dans la boucle, nous pouvons y ajouter une flèche ou si c'est la première chose, nous allons y ajouter l'autre flèche. Il y a beaucoup de flexibilité ici avec les boucles mais pour la plupart, ce n'est pas particulièrement compliqué. Je suis ici sur cet exemple, crache juste des produits. Donc, pour le produit dans la collection de produits, titre des produits. Faisons ça comme notre dernière démonstration rapide du fonctionnement de la boucle. Nous y allons, donc nous allons échanger notre extrait contre le titre du produit seulement, afin que nous puissions le voir passer à travers. Voilà, rafraîchir, ouais, et là c'est juste que tous les titres de produits crachent. Donc, ouais, pour-boucles pas compliqué, pas effrayant dans Liquid. Si vous connaissez le langage de programmation de base, sinon, vous pouvez le comprendre. Ce n'est pas difficile, mais il fait partie intégrante d'un combat de pelle. 11. Produit: Donc, pour récapituler, nous avons surtout fait beaucoup d'apprentissage. Nous avons appris sur la plate-forme, nous avons appris la syntaxe Liquid, ce que nous pouvons faire avec le Liquid, comment c'est facile, la structure d'un thème ou d'une interface Shopify. Nous avons beaucoup appris. Maintenant, je veux commencer à marcher et à assembler tout ça. Nous allons le faire en marchant à travers et en essayant de discuter la façon dont les modèles de notre thème du cadre sur le bois sont présentés, et cela nous donnera une bonne compréhension. Nous allons commencer par le modèle de produit. Modèle de produit est probablement le modèle le plus compliqué dans n'importe quel thème, l' exception peut-être de quelques thèmes pages d'accueil. Mais pour la plupart, modèle de produit est fou comme il obtient. Donc, si nous pouvons le maîtriser, si nous pouvons le comprendre, alors nous savons que nous devrions être bons pour tout le reste. Tant que nous examinerons ce modèle de produit, nous allons vouloir ouvrir deux références. Tout d'abord, nous allons récupérer la documentation liquide pour les objets, spécifique à une page produit. Si vous vous souvenez que nous avons des variables que nous pouvons produire dans le monde entier, qui fonctionnent partout, et alors nous avons beaucoup de choses que nous pouvons produire uniquement spécifiques à un produit. Ici, nous avons ces attributs de produit devant nous. Si on veut, on pourrait aussi garder la feuille de triche Shopify de M. Dunklee devant nous. Juste ici sur la droite, nous avons des variables de template avec product.liquid. Celui-ci est bon pour une référence très rapide. Nous pouvons tous les voir en un coup d'œil, et si vous l'ouvrez comme oh ce que est produit.title faire, renvoie le titre du produit. Celui avec lequel vous êtes à l'aise. Je souvent, nous aurons les deux ou juste Google, voir ce qui se passe. Ici, nous avons une page produit. C' est compliqué comme ça. Nous voulons commencer à regarder notre modèle. D'accord. Vous connaissez HTML régulier, nous ouvrons notre classe div, et immédiatement nous avons la balise h1. Voici notre premier produit variable Shopify. Naturellement, nous savons que ce gars fait référence à Awesome Sneakers product t.title. Je ne démontrerai pas celui-là, je continuerai à passer. Très bien, ici nous pourrions voir que nous faisons des choses avec le balisage de schéma, c'est pour inclure des données d'extrait riches. Je pense que la plupart ou tous les thèmes le font maintenant. Vous n'avez pas forcément à le faire pour vous-même, mais c'est une bonne chose à avoir, si vous êtes un grand croyant au web sémantique comme moi. Mais il nous donne également accès à quelques bonnes choses en un coup d'œil comme la monnaie de prix de l'article, le contenu est égal shop.currency. Nous ne savons pas exactement quelle est cette sortie, mais nous savons que c'est en référence à la boutique, c'est une variable globale, et c'est la monnaie. Alors, voyons si on ne peut pas regarder ça. Bien sûr, Shop.currency est ici. Retourne une chaîne avec le nom de la devise généralement trois lettres représentant par exemple USD. Notre boutique devrait être mis en place en dollars américains. Donc, cela produira USD, mais regardons dans le code, voyons ce qu'il fait. Donc, si j'ai raison, et si je contrôle de recherche trouver USD. Bien sûr, il est là. En fait, c'est vraiment dans si tu regardes, c'est là. contenu de la devise du prix est égal à USD, Baskets impressionnantes. On fait du bien jusqu'à présent, on n'a rien eu de trop fou. Nous allons en utiliser un autre - la disponibilité. C' est vraiment pour Google. Google va vouloir savoir ce truc. C' est bon pour un référencement. Donc, ici nous avons, c'est une chaîne intelligente que quelqu'un a écrite ici. Donc, nous faisons référence à schema.org. Maintenant, nous avons notre premier exemple de logique. Nous pouvons faire notre chemin à travers ça. On peut intuiter. Si product.available, donc, si le produit est disponible, c'est un opérateur booléen oui, non. Si le produit est disponible, vrai, il va écrire dans les mots « en stock », sinon. Donc, nous savons que si ce n'est pas disponible, c'est en rupture de stock. « Else » en rupture de stock. endif. Nous avons déjà une logique intelligente ici pour faire fonctionner ces données d'extraits riches. Ici, nous avons un commentaire ici venir dans le code. Donc, il est agréable de faire des commentaires comme celui-ci, enveloppant vos commentaires dans des balises Liquid, car ils ne seront disponibles que dans l'éditeur de thème. Ils ne seront pas rendus avec. Cela n'apparaîtra jamais sur le front de l'utilisateur final. Donc, si nous regardons, nous pouvons voir qu'il n'y a pas de commentaire ici du tout, ce qui est sympa. Cela rend juste la page un peu plus petite, un peu plus propre, et puis vous n'avez pas à vous inquiéter si vous avez un commentaire sensible là-dedans, que vous le feriez mais vous n'avez pas à vous soucier de ce qui est exposé. Donc, nous avons notre action de formulaire juste poster sur le panier. C' est très simple, Méthode, Post. Donc, nous publions sur le cart/id d'annonce AddToCutForm. Donc, il y a un sélecteur pour un branchement de chariot Ajax. C' est probablement un peu au-delà de nous en ce moment. On ne va pas s'inquiéter pour ça. Faire défiler vers le bas, voir ce que nous avons d'autre ici, pour la variante dans les produits. Ça devient intéressant. On a des variantes. Vérifie ça. Donc, taille, ici nous n'en avons que deux, mais ce sont vos variantes, vos options de produit. C' est à ça que ça fait référence. Ici, il fait référence à l'option selection.js, quelques trucs javascript fous. Je ne veux pas que tu t'inquiètes pour ça. Mais on pourrait encore comprendre ce qui se passe. Donc, option. Il s'agit donc d'un champ de formulaire, si variant est égal au produit sélectionné ou à la première variante disponible. Donc, ce qui signifie le choix par défaut, le premier qui est là haut ou ce que l'utilisateur a sélectionné, puis il affiche sélectionné égal sélectionné. C' est une option, puis endif. Ici, nous avons qu'il veut écrire dans l'inclinaison pour le produit, sorte que nous pouvons écrire des bichettes uniques, variant.skew, évidemment nous pourrions dire obtenir le double accolade, et il va cracher biaisée, et il garde juste aller, variante ID, titre, prix et cetera. Voici comment nous affichons les options pour ce produit. Option désactivée. Ici vous pouvez voir la variante title-products.product.épuisé. C'est intéressant. Si vous voyez ce type, le T. C'est pour l'internationalisation, pour la traduction. Si vous le souhaitez, l'utilisateur final peut modifier la langue, puis n'importe où ce mot « épuisé » apparaît. C' est la valeur par défaut. Il va juste réécrire ça pour eux. Continuons à avancer. On y va. En voici une bonne. Variante actuelle.prix, argent pipe. Nous savons que le prix se réfère évidemment au prix du produit, current_variant. Il va être quatre, parce que nous avons encore une fois, peut-être que cela vient en différentes tailles ou est venu en différentes couleurs, et cela changerait le prix. Comment pouvons-nous savoir quoi faire là-bas ? Comment pouvons-nous savoir à qui on fait référence ? Eh bien, c'est de ça qu'il va s'occuper ici. Current_Variant.price, il va afficher le prix de la variante actuelle. Donc, vous avez très vite l'idée ici que nous pourrions juste intuiter, parce que c'est un langage naturel, nous pourrions comprendre de quoi cette chose parle assez facilement. On n'a même pas besoin de vérifier la feuille de triche. Ensuite, nous sommes revenus, nos vieux amis, le filtre. Dès que nous voyons un tuyau, nous savons que c'est un filtre qui est appliqué à cela, et qu'il dit « argent ». Il y a deux façons différentes de produire des prix. Alors, vérifions. Voyons si nous pouvons trouver ce que fait le filtre d'argent. Le voilà, filtre l'argent. Il ajoute le symbole de devise. Donc, la belle ici, on pourrait si on savait que c'était toujours un magasin américain, on pourrait y ajouter le symbole de la monnaie. Mais si nous faisons un thème pour le grand public, nous ne savons pas quelle monnaie ils utilisent. L' avantage de faire cela, Shopify intelligent lorsque le client choisit sa monnaie, il va automatiquement ajouter le bon symbole. Rend notre vie très facile. Ensuite, nous passons à des produits, product.compare_at. Donc, voici le prix de comparaison. Encore une fois, comparer au prix se réfèrent généralement c'est MSRP, ce qui signifie que si c'est en vente, et ici nous voyons, il y a une certaine logique ici, si et si. Donc, ici, ils ont fait quelque chose de gentil. Si le produit .compare au prix max est supérieur au prix du produit, il affiche la section. Alors, qu'est-ce qui se passe ici ? Est si cela est logique inclus pour déterminer si le produit est en vente ou non. Donc, si mon produit a juste un prix, et pas de comparaison au prix, nous savons qu'il n'est pas en vente. Si le prix est supérieur à notre prix actuel, nous allons afficher ces informations pour afficher que le produit est en vente. Je reviens ici. Ici, nous avons encore le filtre pour l'argent, donc nous savons qu'il inclut le signe du dollar pour nous. Étiquette pour la quantité, product.product.quantity. Encore une fois, c'est juste que vous connaissez pour une langue différente. Nous pourrions écrire la quantité là-dedans, mais c'est plus facile, et surtout si nous allons vendre un thème ou avoir un thème dans un magasin à thème. Nous devons avoir ceci ici pour l'internationalisation, afin que nous puissions faire différentes langues. Encore une fois, le texte add_to_cart tombe également sous cela, et ici nous revenons à notre vieil ami, dès le début de notre cours, product.description. On a ce type. Ce n'est pas seulement une ligne, il n'est pas enveloppé dans html. n'y a pas de filtres là-dessus, parce que leur description est écrite dans ce, éditeur WYSIWYG. Peu importe ce qu'il y a là-dedans, ça va juste déposer exactement ce qu'il y a dans cet éditeur WYSIWYG ici. Mais si on le voulait, il y a des filtres où on pourrait enlever tout ça. Ici, nous avons plus de logique. Si la collection, et endif. Je me demande ce qui se passe ici. Donc, Shopify a pour chapelure, pour faire chapelure sont basés sur des URL. Donc, si j'allais à un produit directement à partir d'une recherche Google, cette section disparaîtrait. Mais si je naviguais dans le magasin, et que je suis passé de collection en produit, ce qui est la façon dont la plupart des gens le feraient. Cette logique va se lancer, et qu'elle va ajouter. Donc, si la collection, et puis nous avons un autre ensemble de logique est, si la collection, nous pouvons imbriquer les instructions if. Si collection.predent produit ou collection prochain produit, alors vous pouvez afficher ces gars. Que se passe-t-il ici ? Nous avons des liens précédents, suivants qui fonctionnent dans le thème. Je ne les ai même pas vus ici. Il y a des paramètres de thème qui sont activés, et pourtant nous sommes toujours. Attends, voyons si j'ai raison. Ouais, on dirait que c'est un thème, mais ce n'est pas là. Mais nous, sans l'avoir vu, je sais encore ce qu'il va faire parce que la logique est très claire. C'est très facile à suivre. Donc, nous ne sommes pas là, nous avons ce truc javascript qui devient un peu plus effrayant. Nous n'avons probablement pas besoin de nous inquiéter à ce sujet, à moins d'entrer dans la personnalisation avancée des thèmes. Je ne laisserais pas ça t'effrayer. Mais il y a encore quelques choses qu'on peut regarder. Encore une fois, nous avons ici, alors disons que nous avons un javascript que nous chargeons tous ici. Nous l'appelons, option selection.js, et puis nous y ajoutons deux filtres, que nous devrions nous souvenir d'avant, Shopify asset url, et tag script. En regardant ça, on sait ce qu'il va faire. On peut travailler en arrière. Il va écrire une balise de script, c'est en fait quand vous avez plusieurs filtres, lisez-les à l'envers. Nous avons une balise de script ici, puis nous allons afficher une URL à l'actif pour l'option selection.js. Vas-y et trouve ça ici. Faites défiler vers le bas, on sait qu'il est en bas. Oui, voilà, la sélection d'options. C' est notre gars 44, et comme nous le pensions, balise de script, URL et URL à l'option selection.js. Mais ici, on peut voir soit nous avons de l'argent en train de s'écouler ici, probablement pour une sorte de, ce qu'ils appellent ça, une action CDN. Vous devez vous assurer que nous chargeons probablement la version actuelle. Mais normalement, ce que nous devrions nous inquiéter, c'est l'avantage ici est que nous pouvons simplement déposer dans la balise de script et l'URL d'actif Shopify. Il a pris soin de nous. On n'a pas besoin de s'en soucier. La prochaine, on va faire la même chose, et ça va devenir plus facile. On pourrait comprendre ce type, produit Liquid, [inaudible] c'est le plus compliqué. C' est même la première fois que j'ai parcouru ce produit Timber, mais j'ai quand même pu imaginer ce qui se passait là-bas à cause du langage naturel. Ça ne fait pas mal qu'ils mettent des commentaires ici. Je recommande de laisser quelques commentaires pour vous-même si vous vous perdez dans ces thèmes. 12. Collection: Nous allons regarder le modèle de collection. Comme le produit, nous allons juste le parcourir et essayer de déchiffrer ce qui se passe ici, appliquer ce que nous avons appris et ce sera plus facile. La collection est plus simple que le produit et le modèle que nous allons examiner après cela sont encore plus faciles. Donc, on va plus facilement en allant. Si le produit était un peu déroutant pour vous, ne vous inquiétez pas les collections devraient être plus faciles. Si les collections sont déroutantes lorsque nous regardons la suivante, cela devrait être clair comme le jour. Ici, nous avons Collection.Liquide. C' est notre fichier de modèle qui fait référence à une collection de produits similaires à une catégorie et si nous nous dirigeons vers documentation liquide, nous voulons avoir à notre disposition pour référence lorsque nous regardons ces choses. Nos objets ou variables liquides pour la collecte. Encore une fois, c'est une syntaxe de point. Donc, nous savons que ce sera la collection point n'importe quoi. Et puis nous avons aussi la feuille de triche Shopify de Mark Dunklee. Merci, Mark Dunklee. À ce stade, nous devrions tous lui envoyer une note de remerciement. Mais nous allons trouver une collection. Elle est là, collection.liquide et déjà nous pouvons dire que c'est plus facile que le produit. Nous avons beaucoup moins de collections ici et certaines d'entre elles sont évidentes comme le titre de la collection, renvoie le titre de la collection ou la description, ou les termes la description de cette collection, des choses simples. Mais comme quel ID de collection, tourne l'ID de cette collection. Ok, et ensuite on a la main. Retourne le handle de collections qui est par défaut en minuscules. D' accord. On parlera de poignées. Nous n'avons pas encore discuté des poignées. Chargons notre collection. Oups, laisse-moi le dire d'abord. Donc, les produits, les collections. On a des chaussures en cuir. Cliquons sur ce type. Nous l'avions fait plus tôt. C' est une collection automatique. Ensuite, nous avons ici, donc si nous regardons URL c'est collections/chaussures en cuir. Alors, commençons par ça. URL et handle. Un handle fait partie de l'URL. Dans ce cas, il s'agit de collections/chaussures en cuir. Si nous parlions d'une poignée de produit, ce serait /product/le nom de la poignée, comme des chaussures de hanche. On pouvait voir dans une poignée que ça le rend amical. Ça fait une minuscule. Il remplace les espaces par des tirets. Il se débarrasse de tous les caractères spéciaux que nous ne pouvions pas utiliser. C' est très pratique parce qu'en plus d'être notre URL, la fin de cette URL, un handle est aussi comment, en liquide, nous faisons référence à diverses collections et objets par programme donc nous allons garder cela à l'esprit et nous le trouverons. Alors, je digresse. Retournons à notre thème. Modifier le code HTML. Encore une fois, nous travaillons sur le thème du bois, le cadre Shopify similaire à Twitter Bootstrap. Chargons la collection. Liquide et voici ce gars. Voici notre exemple de collection, les chaussures préférées de Kurt et en passant par ici. Commençons comme avant. Donc la première chose que nous trouvons est quelque chose que nous n'avons pas rencontré auparavant, paginer. Même si nous ne l'avons pas rencontré, nous pourrions probablement comprendre ce que cela signifie. Paginate collection .products par 12 ce qui signifie que nous allons ajouter, nous allons afficher. Supposons que nous avions 48 produits là-dedans, nous ne voulons pas afficher les 48 produits en même temps même si nous le pouvions. On veut le décomposer par 12. Si on en avait autant, je pourrais le démonter. Pour l'instant, nous ne le ferons pas. On va y retourner et le regarder. Dans la prochaine étape ici, nous avons la chapelure. Des extraits. Tout d'abord, nous avons une inclusion. Une inclusion est exactement ce que cela ressemble. Il comprend un extrait. Un extrait est l'endroit où chaque fois que nous voulons inclure un morceau de code que nous ne voulons pas réécrire. Nous ne voulons pas nous répéter. Nous voulons adopter une approche sèche à cet égard. Ne te répète pas. Donc, nous allons descendre des extraits chapelure. Liquide et ce qu'il va faire comme nous l'avons déjà discuté, quand il rend cette page il va attraper la chapelure, cet extrait. La raison pour laquelle nous faisons cela est que cela apparaît sur plusieurs pages. Ça va apparaître dans la collection. Il va apparaître sur la page du produit. Donc, on veut juste un endroit pour changer ça. Encore une fois, nous pouvons voir qu'il fait cela. Si le modèle contient un produit ou si le modèle contient une collection. C' est simple. Regardez cela, si le modèle contient la poignée de collection et de collection. Donc il y a cette référence à gérer que nous avons vu à nouveau et nous pouvons même regarder en bas. Regardez ça, capturez URL/collections et il y a collections.handle. Donc c'est exactement comme ce qu'on a vu avant. Revenons collection.liquide. On a dévié un peu, mais on y repart. Nous avons un joli commentaire, un balisage différent si une description de collection existe. Ok, nous changeons la façon dont notre HTML est présenté selon si nous avons une description de collection. Dans ce cas, dans ce thème, nous n'avons pas ajouté de description, nous avons juste notre titre et ensuite nous avons... alors nous y voilà. Si collection.description n'est pas vide, donc ce type, ce point d'isolement n'est pas égal à, est vide. Ensuite, nous avons eu un en-tête, nous affichons le titre de la collection comme nous l'avons vu, puis nous affichons notre description de la collection. Encore une fois ce gars, la description de la collection c'est fait dans un éditeur WYSIWYG ajoute son propre HTML donc nous n'avons pas besoin de nous soucier de l'envelopper ou de jouer avec cela ici. Si nous le voulions, nous pourrions ajouter un filtre à un HTML distribué, mais nous ne le ferons pas. Ensuite, nous avons juste ici inclure le tri des collections. Parce que nous avons utilisé ces belles classes, nous pouvons voir que sur la droite est notre tri de collection. Jetons un coup d'oeil, et assez sûr ici nous avons ce module, triés par et ce gars et nous sommes assez intelligents pour tenir dans cet extrait et inclure. Alors, c'est comment. Regarde ça. Tri de la collection. Ouvrez ce type. Ici, nous avons cette logique ici pour faire notre tri de collection. Il est automatiquement déposé dans. Donc, si nous le voulions, dans certains magasins, c'est une modification de thème commune. J' ai obtenu, où quelqu'un dit bien que je veux que les gens puissent trier par best-seller et alphabétiquement et prix, mais je ne veux pas qu'ils soient triés par date. Je ne veux pas que les gens s'inquiètent que certaines choses soient vieilles ou désuètes. Donc si nous le voulions tant qu'on est là, allez-y et on pourrait juste tuer ça et voir ce qui se passe. Donc, maintenant, il n'est plus ici. Cool. Donc, je vais tout de suite, nous avons ce commentaire. Oups ! Je suis toujours dans le tri des collections. Revenons à la collection. Liquide. On y va. Autre chose, l'éditeur Shopify qui est intégré dans le thème, si génial. Encore une fois, vous pouvez utiliser textmate si vous le souhaitez, utiliser le vôtre et le synchroniser. Mais, non, nous allons laisser ça aux développeurs plus avancés comme Gavin Ballard, qui va en parler dans un autre cours Skillshare. D' accord. Qu' est-ce qu'on a ? Où étais-je ? Donc, nous avons couvert cette logique s'il y a une description plutôt qu'une description. Nous faisons une inclusion pour le tri des collections. Et ici, nous voyons pourquoi nous n'avons pas inclus. Parce qu'on doit le répéter à cause de cette logique. Je ne veux pas avoir ce code là deux fois, surtout quand je fais des changements comme nous l'avons vu. Donc, c'est pour ça qu'on fait l'extrait et on le met deux fois dedans. Et souvent, les extraits sont sympas juste quand vous travaillez beaucoup sur un thème. Il garde le code plus propre. C' est plus facile à voir. Plus facile à lire en un coup d'œil. D' accord. Et puis nous terminons notre endif. Donc, ici, nous avons un commentaire. Utilisez l'uniforme de la grille de classe pour avoir colonnes de taille égale s'effacer correctement à chaque point de rupture. Donc, nous savons que nous avons ajouté quelque chose ici pour nos points d'arrêt réactifs. Donc, nous avons un uniforme de grille. Je ne sais pas nécessairement que cela avait besoin d'un commentaire. Je suppose que tout le monde n'est pas réactif. D' accord. Nous avons un commentaire. Et encore une fois, la raison pour laquelle ces commentaires ne sont pas simplement enveloppés dans des balises de commentaire HTML, ils sont enveloppés dans des balises liquides est parce qu'ils ne seront pas rendus, et ne seront pas transmis à l'utilisateur final. Donc, ils ne les verront pas s'ils se sentent snoopy. Pour que tu puisses mettre ce que tu veux là-dedans. Il va aussi juste rendre la taille de la page légèrement plus petite. Donc, nous avons parlé de boucles avant. Nous avons appris à ne pas avoir peur des boucles. Et ici, nous avons une boucle. Donc, pour le produit et la collection de produits- donc chaque produit qui est dans cette collection de produits, nous allons inclure l'article de la grille de produit. C' est un endroit parfait pour mettre un extrait bien sûr. L' élément de la grille de produit fait référence à un produit. Cette unité. Ils ont une belle convention de nommage ici, c'est pourquoi vous voulez donner à vos extraits beaux noms que vous savez ce qu'ils sont en un coup d'œil. Imaginez si tous ces extraits étaient simplement étiquetés comme A1, A2 et widget. Ça ne va pas être utile. Donc, adressez-vous à une bonne convention de nommage qui décrit ce qui se passe. Et en même temps, l'utilisateur final ne le verra pas s'il fouille votre code. N' hésitez donc pas à utiliser des noms longs, expressifs et descriptifs. Donc, ok pour inclure le produit et ensuite nous avons un autre. Donc, nous pourrions dire ici que c'est pour le produit dans la collection .products. Sinon, ce qui signifie que s'il n'y a rien d'autre, il va saisir - donc, si collection.handle est égal à tout, et que les balises actuelles ne sont pas, ajoutez des produits par défaut pour aider à l'intégration pour la collection/tous seulement. Ok, très intelligent. Ça fait même quelque chose de fou. Il charge différents CSS. Regardez cette balise de feuille de style d'URL de ressource globale. Probablement n'aurait pas cela dans votre propre thème dans un thème standard. Mais c'est intelligent. Inclure l'intégration de la collection vide. D' accord. Donc, nous savons que nous l'avons fait. Cela n'arrive que dans/tout. Ça n'arrive que si c'est vide. Donc, nous répondrons à la première exigence. Donc, c'est une collection poignées. On a... On va frapper la poignée à tous. Ensuite, ce qu'il fait, tout est une collection par défaut qui existe dans Shopify qui affiche tous vos produits à la fois comme ça. Et si c'était vide, donc, nous n'avons rencontré que la moitié de la logique parce que nous avons fait si et les balises actuelles sont égales que cela ferait autre chose. Et puis, sinon, si la collection existe mais est vide, affichez le message. Nous avons une collection de paragraphes générale aucune correspondance. On l'a vu plus tôt quand on a fait la démo pour boucle. On a peut-être une collection qui n'a rien dedans. Donc, on a mis cette autre logique et ça tombe dans ce gars. Encore une fois, cela provient de la traduction de la langue. Mais tu pourrais réécrire ça si tu le voulais. Vous ne pouvez pas le faire dans un thème que vous soumettez à la boutique de thèmes. Mais dans votre propre, vous pourriez le faire. Donc, nous allons juste dire, « Oups, rien là-bas, patron, endif, endfor. » Donc, cela conclut notre logique et conclut notre boucle. Maintenant, on va voir ce type intéressant. On a la pagination. Donc, s'il y a plusieurs pages, si paginate.page est supérieure à une, donc si nous avons plus d'une page, cela va déclencher cette logique, qui est notre pagination. Donc, nous faisons une règle horizontale pour que nous puissions la voir, pagination de classe div. Voici notre paginate. Regardez tous ces filtres. Cette chose est fabuleuse avec des filtres. D' accord. Paginate, pagination par défaut en tant que handle. Intéressant. Je me demande si on pourrait trouver ça dans la feuille de triche. Il est là, pagination par défaut en tant que filtre, utilisé en conjonction avec la balise liquide paginate. Eh bien, ce n'est pas particulièrement utile. Voyons voir. Très bien, allons le trouver. Donc, voici un problème maintenant. Il y a une limite de 50 produits lorsque vous faites de la pagination. Généralement, donc, ils se divisent uniformément je fais 48. Allons de l'avant et trouvons notre paginate. Il est là, paginer l'objet paginate par défaut. Alors, on y va. Vous pouvez également utiliser la balise paginates, est construit en utilisant les attributs de l'objet paginate. Vous pouvez également utiliser la pagination par défaut comme alternative rapide. Donc, c'est très intelligent. Vous pouvez écrire votre propre pagination si vous voulez obtenir de la fantaisie, ou parce que nous avons nos différentes options ici, nous pouvons faire la pagination que nous voulons, ou nous pouvons charger la pagination par défaut. Donc, partout où nous voulons utiliser la pagination, juste comme ça, nous pouvons y entrer. On peut penser à ça comme s'il s'agissait d'un extrait inéditable. Donc, nous écrivons entrée pagination sortie par défaut de pagination, et là il va. C' est un exemple. Alors, essayons-le. On peut forcer cette chose à courir. Montons et nous allons déposer notre collection pour paginer par trois. Alors, nous allons charger. D'accord. Donc, ici, nous devrions en avoir assez. Il devrait paginer pour nous. Regarde ça. C'est le cas. Donc, il y a votre pagination par défaut, un, deux, trois. Regardons le milieu. On a ces flèches gauche droite. Parce qu'on pouvait voir ça se passer ici. Remplacer le guillemet gauche précédent par une flèche gauche. Donc, nous avons nos entités HTML. Vérifions ça. Sortons ça et je vais te montrer ce qu'il fait là. Parce que c'est un excellent exemple de filtre. Les filtres peuvent utiliser cela. Je veux dire, à bien des égards, c'est similaire à une expression régulière. Regarde ça. Donc, là. Donc, c'était les comportements par défaut qui précédent- nous avons pu utiliser des filtres pour éditer l'extrait par défaut même si nous n'y aurions pas accès autrement, ce qui est intelligent. En fait, je préfère ça. Je pense que c'est un meilleur exemple de pagination. Mais l'inverse est très soigné, très propre. Et sur ce type, je... on peut le séparer. J' aime ces flèches, mais je n'aime pas me débarrasser du mot ensuite. Alors, essayons... Faisons ça. Si nous laissons le mot suivant, mais remplacons cela. Sauvegardez. Boum. Regarde ça. Très cool. Alors, regardons vers le haut... Prenez juste les infos sur ce filtre. Donc, ici vous avez remplacer et remplacer. Vous pouvez également faire remplacer d'abord, ce qui est cool. Donc, il ne fera que le premier qui est utile pour les boucles comme une collection. C' est la description que nous avons ici. Ensuite, juste remplacement régulier, remplace toutes les occurrences d'une chaîne par une autre. Normalement, faire des choses comme ça dans d'autres langages, PHP , peu importe, impliquerait des expressions régulières, serait très fou. Ici, c'est très simple. Tu écris juste. Ce n'est pas différent de trouver le remplacement dans une application de texte. Remplacez la chose que vous souhaitez remplacer par ce que vous remplacez. D' accord. Donc, là, c'est comme ça que la collection fonctionne. Nous appliquons encore cette logique. Ensuite, nous avons également appris un peu sur - nous avons appris les poignées, pagination, et ce filtre-remplacement soigné. Donc, seulement mise en garde là, gardez à l'esprit que lorsque vous faites - dans une collection où vous affichez des produits, il y a un maximum de 50 que vous pouvez exécuter. Typiquement, vous voulez diviser par quelque chose de gentil. Donc, d'habitude, on fait un maximum de 48. D' accord. Ensuite, on va regarder ... Tu n'as pas à t'inquiéter si celle-là était compliquée. Nous allons regarder page.liquid, qui est le plus simple de tous nos modèles. 13. Page: D' accord. Nous avons couvert et appliqué ce que nous avons appris aux produits, collections et ensuite on est devenu un peu fou avec la pagination. Mais je te promets qu'on est sur les pages les plus faciles. Donc, nous avons, voici à propos de nous page et heureusement, ça ne se passe pas beaucoup ici. Donc, comme avant, beaucoup de notre référence, nos objets pour la page et ils sont si peu nombreux. Ce qui est gentil avec eux, tout ça en un coup d'œil, vous pouvez comprendre ce qu'ils font. Auteur de la page, contenu, c'est comme description du produit. C' est juste le contenu de la page. La poignée dont on a parlé, c'est ce type ici. Le à propos de nous, et nous connaissons l'URL. C' est aussi comment nous pouvons le référencer à travers le magasin. ID, concept similaire à gérer. Pages publiées sur, c'est juste notre filtre de date ou notre horodatage et ensuite nous pouvons utiliser le filtre de date pour formater cela d'une manière spécifique. Alors, bien sûr, nous avons aussi notre feuille de triche. Notre merveilleusement marqué sur la feuille de triche propre. Donc, la même affaire nous donne juste un accès rapide à elle. Mais les pages ne sont pas si compliquées. Donc, ici nous avons notre sujet et à ce stade, vous pourriez probablement écrire celui-ci vous-même, mais nous vous pourriez probablement écrire celui-ci vous-même, allons néanmoins jeter un coup d'oeil aux modèles. Nous allons plonger dans les thèmes, éditer HTML. HTML, comment prononcez-vous HTML ? Donc, dans ma tête, je dis en fait HITIMAL mais ça ne peut pas être correct, ou que diriez-vous du Hot Metal ? Je ne sais pas. Ok, je digresse, gabarits, page.liquid. Vous remarquerez peut-être ce type, page.contact.liquid, nous allons parler de ce qui se passe là-bas. Mais regardons juste page.liquid. Bénis-nous, ce truc est 17 lignes. C' est le plus simple plus simple que nous ayons examiné et je vous garantis qu'à ce stade, vous devriez être en mesure de jeter un coup d'œil et de savoir ce qui se passe. Ce n'est pas dur. Nous avons juste notre mise en page standard, nos trucs HTML ici. Puis, le titre des pages enveloppé dans les balises de titre, merveilleux ! Commentaire, le contenu de la page régulière va ici. Eh bien, bien sûr. Ensuite, le contenu de la page c'est tout. Non, il y a une page à propos de nous. C' est tout ce qu'il y a. Mais tant qu'on a ça ouvert, essayons de jouer avec d'autres trucs. Donc, nous avons, regardez que nous avons publié la page à et le filtre de date et nous avons l'auteur. Ok, alors, on va s'amuser avec les deux. Bon, on a ce type, juste en dessous. Je vais aller de l'avant mettre un paragraphe là-dedans avec mon auteur de page, page.author. D' accord. Mettons là, posté par page.author et puis il y a un livre à elle. Je vais être un mauvais garçon. Enveloppons cela dans certaines balises de soulignement, enregistrez, actualisez. Regarde ça, posté par Shopify. Parce que c'est juste un thème par défaut qui est ici qui a été ajouté dans le magasin, donc il est juste publié par Shopify. Sinon, il indiquerait le nom du fonctionnaire qui l'a fait. Donc, tant qu'on y est et qu'on est en train de jouer avec ça, va s'amuser avec ce gars, page publiée à. Donc, nous pourrions dire à et allons envelopper un liquide, sauver, rafraîchir. D' accord. Donc, il s'affiche exactement quand il a été publié à, mais ce n'est pas d'une manière utile, utile sauf si vous êtes vraiment dans les terminaux Unix. Donc, nous devons utiliser le filtre de date est ce qu'ils suggèrent. Donc, nous allons cliquer sur ce lien. Ici, nous pouvons formater l'horodatage dans un autre format de date, dans la façon dont nous voulons le faire, votre préférence peut-être la préférence du pays, mais ils nous donnent cet exemple, nous pourrions dire mardi 22 avril, 14. D' accord. Je n'aime pas ce T-U-E, c'est un abrégé. Je veux le nom complet du jour de la semaine. Donc, c'est sensible à la casse. On devrait faire un A capitalement, désolé. Copions leur exemple et revenons ici. D'accord. Donc, c'est un filtre donc nous ajoutons un tuyau, puis nous collons dans nos filtres date et puis ce sont les attributs du filtre. Sauvegardons ça. Regarde ça, déjà beaucoup mieux. Mais je n'aime pas toutes ces abréviations. Alors, allons de l'avant et changeons. Si nous changeons la minuscule a qui est la date abrégée pour le capital A, cela devrait nous donner la journée complète. On y va, posté lundi. Voyons ce qu'on a d'autres ici. Donc, nous avons ici samedi, mardi, janvier. Je veux le jour du mois zéro rembourré. C' est ce que j'aime. Donc, ici, nous allons juste le rendre plus propre. Jour du mois. Est-ce que c'est vrai ? Je suis désolé, le jour du mois, je voulais dire la date du mois. Jour du mois, nous formons la date. Je vais regarder ça ici. Ce filtre simplifiera même le tout un peu. Donc, nous pouvons le faire de cette façon ou si nous le faisons simplement. Oups ! Il suffit de laisser tomber ça, de sauvegarder, de recharger. On y va. C' est une façon super propre de le faire, ça air bien et on a notre premier rendez-vous là-bas, donc ça marche. Les pages sont très simples. Ici, nous avons page.contact et nous avons deux pages différentes. Je vais m'arrêter ici et c'est ce que nous allons plonger ensuite. On va trouver ce qui se passe ici 14. Modèles alternatifs et extraits: SkillShareDemo, nous avons une boutique en place, nous avons notre Démo À propos de nous dans cette page, votre modèle de page habituel, et c'est ce dont nous avons parlé. Nous avons parcouru nos modèles. Ici nous avons, nous pourrions voir ici il y a page.liquid et page.contact.liquid. Je voulais parler de ce qui se passe là-bas, de ce que c'est. Donc, on a ça. Regardons notre page de contact. Donc nous avons cette page, c'est Contactez-nous, Parlez à Kurt. Si nous cherchons ici dans notre URL, nous voyons qu'il va à des pages slash. Ok, donc nous savons que c'est une page, mais elle a une forme fantaisie, mise en page différente de celle-ci, dont on sait aussi qu'elle est une page. Alors, comment font-ils ça ? Si nous regardons ici, nous avons, page.liquid, page.contact.liquid. Dans Shopify, vous n'êtes pas limité à ces modèles, vous pouvez ajouter, nous pouvons faire plusieurs versions de modèles. Je ne sais pas quelle est la limite, mais je ne l'ai jamais atteint. Donc, nous avons page.liquid et ensuite il y a page.contact.liquid. Donc, lorsque vous l'avez nommé, cela devient la page est juste le modèle par défaut, puis il existe maintenant un autre modèle de page appelé Contact. Ensuite, juste la même chose qu'avant, il y a html ici et vous pouvez ajouter ce que vous voulez. Dans cet exemple, chaque thème doit avoir un modèle de page Contactez-nous avec ce formulaire ici. Même la forme fait partie de Shopify, fait partie de liquide. Donc, vous n'avez pas à vous soucier de jouer avec les formulaires et il y a un anti-spam dessus, très sympa. Alors, vérifions, comment appliquons-nous ça ? Comment ça marche ? Si nous ouvrons nos pages et dirigeons vers le bas vers le bas vers le bas vers le bas, page modèle et page .contact. Donc, si mon fichier a plusieurs modèles, ce gars arrive ici avec page.contact et page, cool. Vous pouvez le faire pour aimer à peu près tout, vous le faites pour les produits, vous pouvez le faire pour les collections, c'est extrêmement utile. Par exemple, nous l'avons fait, disons que vous avez un client ou que vous voulez démarrer un produit et le mettre sur Kickstarter et que vous l'avez dans la boutique Shopify. Mais vous ne pouvez pas vendre vos produits pendant que le Kickstarter est en cours d'exécution, donc les produits Kickstarter, vous pouvez créer un autre modèle appelé product.kickstarter.liquid, puis simplement échanger votre bouton Ajouter au panier un qui indique Back us sur Kickstarter et Goes to Kickstarter, ce serait un exemple parfait de l'endroit où utiliser un modèle de produit différent. Donc, prenons un, nous avons défini page.contact et vous pourriez voir si je suis passé à la page et appuyez sur Enregistrer et rafraîchir, regardez cela, Contactez-nous, Parlez à Kurt. Ici, c'est l'autre modèle de page que nous avons fait complet avec l'auteur et la date. Nous remettrons ce type à page.contact et appuyez sur Enregistrer, rafraîchir, maintenant c'est de retour à ça. Alors, allons regarder la page.contact.liquid. Donc, si nous descendons, voyons le contact de formulaire, il est si simple d'ajouter un formulaire, choses très, très simples et une forme de fin. C' est ça, et ce type est notre forme. Les formulaires sont très simples dans Shopify mais c'est sa propre chose que nous allons parler. En fait, je ne pense pas qu'on y arrivera ici, celui-là. Ok, alors faisons-le, j'ai parlé du produit liquide, alors essayons ça. Voyons comment en faire un, comment faire un de ces modèles alternatifs ? Donc, j'ai produit .liquid ici, cliquez sur Ajouter un nouveau modèle et créer un nouveau modèle pour et nous dirons produit appelé Alternate. Nous allons utiliser cet exemple, appelons-le Kickstarter. Boom, j'ai maintenant product.kickstarter.liquid ici, et je ne veux pas trop gâcher avec ça. Mais, changeons quelque chose à ce sujet. Trouvons quelque chose à changer. Voyons la description. Donc, en bas, disons, juste ajouter venir bientôt à Kickstarter, sauver, et plongons dans les produits. Produits, nous avons nos coups de pied cool, et regardez ce qui est apparu ici. Maintenant, nous avons un modèle de produit et produit .kickstarter, sauvegardez, visualisez-le, et maintenant, il y a une ligne que nous avons ajoutée, Venant bientôt à Kickstarter versus si je vais, revenons à, regardons n'importe quel autre, ça ne pas cette ligne. Donc, il devient très facile d'ajouter ces modèles, cela a pris quelques secondes, cela a pris quelques secondes, et c'est utile pour les clients qui disent, « Eh bien, je veux que certains produits ressemblent à cette mise en page et d'autres produits aient cette mise en page, et je veulent être en mesure de choisir manuellement. » Ok, donc vous faites juste un modèle alternatif pour eux et ensuite c'est aussi facile que de le choisir ici. Donc, c'est très agréable, très facile pour tout le monde impliqué. Je l'aime beaucoup. C'est une grande fonctionnalité. On l'utilise souvent. Je veux parler d'extraits. On a vu des extraits. On les a un peu baisés, mais on n'en a pas fait nous-mêmes. On n'a pas vraiment creusé dedans. Donc, nous avons notre dossier d'extraits et il y a exactement ces extraits de code. Il y a deux raisons pour lesquelles vous voudriez utiliser un extrait. Le premier est, pour que nous puissions adopter une approche sèche. être sec ne te répète pas. Nous ne le faisons pas, si un morceau de code apparaît plusieurs fois, nous pourrions le mettre dans un seul extrait, inclure partout où nous en avons besoin, dans plusieurs modèles, et alors nous pouvons juste, si nous devons le mettre à jour, nous pouvons le mettre à jour dans l'extrait et il se met à jour partout sur le site automatiquement, ce qui le rend très pratique. L' autre chose, nous pourrions vouloir l'utiliser pour, c'est juste pour garder le code propre, et c'est vraiment pour nous, en tant qu' humains, essayant de le trier et de voir des choses en un coup d'œil. Donc, en ce moment, c'est ce que je veux faire à titre d'exemple. Donc, souvent, disons qu'un client a ou que vous avez un thème plus ancien et que, pour une raison quelconque, vous voulez le conserver, vous voulez mettre à niveau vers un nouveau thème, mais vous voulez ajouter une nouvelle fonctionnalité comme des balises de graphe ouvert. Les balises de graphe ouvert décrivent des choses, décrivent le contenu d'une page aux moteurs de recherche , aux réseaux sociaux, puis vous obtenez ce bel extrait riche. Désolé, eh bien, ouais, extrait riche mais riche de données quand les gens le partagent. Donc, ici j'ai de Shopify, de Github, j'ai tout ce code, et je vais le copier et tout ce code nous permet de créer, gère logiquement nos balises graphiques ouvertes. Donc, si je retourne à ma page d'accueil, sous les aides, je vais le coller là dedans. Regarde ça, c'est énorme. Ça prend une tonne d'espace, n'a pas l'air bien, une sorte de douleur si je dois travailler sur le thème si je travaille dessus. Il n'a pas l'air propre comme avant, donc au lieu de le faire, nous allons créer un extrait et mettre ce gars en place, il nous demande de créer un nouvel extrait. Alors, regardons ce que Shopify l'avait appelé, balises Meta Dash social. Donc, nous voulons nous assurer que nous utilisons un nom descriptif pour que nous puissions voir en un coup d'œil, et si quelqu'un d'autre doit travailler sur ce thème, ils pourraient le voir en un coup d'œil ce que nous faisons. Donc, nous allons faire des balises Meta Dash social. Nous n'y ajoutons pas ce liquide, parce que lorsque nous créons un extrait, Shopify le fait pour nous. Bon, maintenant je l'ai mais j'ai juste un fichier vide, donc je vais coller mon gros bloc de code désordonné là-dedans et enregistrer. Ok, donc j'ai ce code, je peux maintenant référencer cela dans n'importe quel modèle en utilisant la commande Inclure. Donc, revenons à theme.liquid et dans cette section d'aide, nous allons l'ajouter. Donc, disons, c'est très facile, nous faisons accolade bouclés, pour cent incluent la commande make sense, et simple citation, les balises méta sociales et ensuite nous le fermons, facile, sauver. Donc, ici, nous rafraîchissons notre page et pour nous cela ne change rien, donc nous devons regarder la source. Faites défiler vers le bas jusqu'à l'endroit où on est arrivés, les aides et voici, on en a un, deux, trois, et voilà où ça commence. Malheureusement, a ajouté un commentaire là-dedans afin que nous puissions voir cela en un coup d'œil. Mais là, c'est intelligent, choisissez si alors il a créé nos balises open graph pour nous. Donc, revenons en arrière, et tout ce que c'est avec cette seule ligne, le single include et si nous revenons à nos balises méta sociales, nous pourrions voir cette première ligne ici, c'est cette ligne ici, donc elle est restée propre, ça a rendu les choses facile mais Essayons autre chose. Donc, j'ai Theme.liquid, ai mon inclusion, que se passe-t-il si je l'épelle mal ? Donc ou j'y ajoute par erreur du liquide. Ok, on va le sauver et on va voir ce qui se passe. Nous obtenons un joli petit code d'erreur, il est lisible par l'homme de sorte que nous pourrions déboguer cette fonctionnalité facilement, belle dans Shopify. Ils prennent soin de nous. Donc, nous avons une erreur de liquide, pas pu trouver d'actif, et c'est parce qu'il ajoute du liquide point pour nous. Donc, c'est assez facile à réparer. Rend la vie simple. 15. Vérification: Parcouvrons notre page de panier. C' est une page importante et il est étonnamment simple de travailler avec. En fait, la façon dont Shopify nous l'a mis en place, c'est très simple. Donc, nous allons découvrir à quel point c'est facile. Pour ce faire, nous allons regarder notre modèle cart.liquid et tout comme pour marcher à travers d'autres modèles, nous allons appliquer ce que nous avons appris ici et passer par le panier. Donc, si nous voulons le faire, nous devrions avoir notre référence ouverte, les objets chariot. Il y a vraiment très peu d'objets que le panier utilise ici, et aussi longtemps que nous y sommes, nous pouvons aussi regarder le modèle cart.liquid qui nous donne quelques références à la façon dont les choses sont censées fonctionner. Donc, dans cart.liquid, d'abord, on a ça si logique parce que si rien n'est dans le chariot ? Une grande modification au thème peut être de le faire - donc ici, nous avons si le nombre d'articles est supérieur à zéro, s'il y a des articles dans le panier mais s'il n'y en avait pas, nous pourrions le modifier pour dire, « Voici quelques articles en vedette. Ce qui pourrait être une façon intelligente de le modifier. Donc, ici, nous avons un article dans le panier et nous l'espérons. Nous espérons que les gens achètent chez nous. Typiquement, dans la plupart des thèmes, ce sera juste une table. C' est comme ça qu'ils s'attaquent. On a notre titre, juste le titre général du chariot, ce gars, c'est juste là pour l'internationalisation. Le panier n'est qu'un formulaire. C' est un formulaire et il publie et c'est tout, mais cela rend votre vie vraiment simple avec l'utilisation de ceci, surtout si vous avez juste des compétences HTML/CSS, vous n'avez pas à vous soucier de jouer avec Javascript pour que ce formulaire fonctionne. Donc ici, nous avons pu voir, nous avons déjà ouvert notre table. C' est une façon très courante de le faire. Les étiquettes pour le chariot, encore une fois, nous avons ces étiquettes d'internationalisation, et nous allons vers le bas, et la première chose que nous trouvons est notre bon vieil ami, la boucle for-. articles du panier ne sont pas référencés, ce sont des produits, ils ne sont pas appelés produits, ils sont appelés articles. Donc, pour l'article dans cart.items, il va passer en boucle. Donc, chaque article dans le panier, dans ce cas, est une ligne dans ce tableau comme nous le traversons. Ici, on a fait une bonne chose. On a l'image ici. Mettre l'image dans le panier est excellentes conversions de boost parce que cela aide la personne à comprendre  : « Oui, c'est l'article que j'achète, je vais obtenir ce qui est illustré. » Donc ici, nous y ajoutons l'URL, afin qu'ils puissent cliquer en arrière ce qui n'est pas une mauvaise idée, si quelqu'un veut vérifier quelque chose. Et vous êtes là, puis nous saisissons la source de l'image et nous jetons même la vieille étiquette là-dessus, avec le titre. Donc, si on passe la souris dessus, devrait-il afficher l'ancienne balise ? Inspectons l'élément. Il y a, alt bon vieux chaussures, donc il ne rapporte le titre du produit là-dedans. Hé, revenons en arrière, continuez à regarder à travers tout ça. Alors, la même affaire pour la- nous voulons afficher le titre du produit. Donc, c'est item.product.title et ici, nous faisons les URL, nous y relions à moins que ce ne soit une variante. Donc si c'est une variante, qu'est-ce qu'on fait ici ? Sauf si le titre contient la valeur par défaut et que nous avons, ah, donc nous avons une petite balise avec le titre de la variante, très intelligente. Donc, si la chaussure est venue en plusieurs options ou donc disons, différentes tailles et je choisis la taille, il apparaîtrait ici. Très intelligent. Donc, comme ça, les gens savent  : « J'ai la bonne chose. » Si je viens de voir la chaussure sans la taille ou la couleur, ça pourrait me confondre, m'inquiéter, tuer les conversions. Oh là, on a un décor à thème. Donc, si dans mes paramètres, j'ai activé les chariots ou les fournisseurs. Il va montrer qui le fabricant, article. fournisseur. Donc, on fait défiler ici. Ok, donc ici, il parle des propriétés de l'article. Propriétés de l'article est une modification de thème intéressante et vous pouvez avoir, disons, vous vendez des chemises monogrammées. Vous savez que c'est désactivé comme la personnalisation de la personnalisation sur le produit. Vous pouvez utiliser les propriétés de l'élément de ligne pour stocker des informations de variables individuelles sur le produit. Je veux dire encore une fois, c'est une modification de thème. Ce n'est pas standard, selon le magasin, vous pouvez ou non en avoir besoin. La plupart ne le feront pas, mais il y a certainement ceux là-bas qui le font et ensuite vous pouvez écrire dans plusieurs éléments de ligne. Donc ici, nous pouvons voir p. pour, p dans les propriétés de l'élément. P.Tout d'abord, vérifier et télécharger le fichier a été associé. Donc il téléchargerait même des fichiers avec. Donc, disons, impriment quelque chose. Ici, on pourrait le faire. Alors allons de l'avant, et ici, nous pourrions voir qu'ils ont ajouté le commentaire. C' est facultatif et ils ont le lien vers la documentation sur la façon de le faire, comment puis-je collecter des informations supplémentaires. C' est dans ce cas, nous le faisons dans le panier et ensuite posterons un e-mail ou une confirmation, l'e-mail de commande et vous devez modifier cela ainsi pour le faire fonctionner. Ok, pour l'avenir, nous avons ce type, ligne de changement de panier pour loop.index. Nous pourrions penser que ce bouton de suppression est une chose compliquée, mais si nous le regardons, ce n'est vraiment pas. C' est qu'ils utilisent, tu sais, on ne fait que poster sur un formulaire. Nous avons un lien ici, donc le changement de panier, nous avons cette ligne de chaîne de trimestre et forloop.index. Donc, si vous vous souvenez de notre aventure antérieure avec des boucles, forloop.index sort juste quelle itération dans la boucle nous sommes. Donc, voilà, c'est la première ligne. Donc, forloop.index sort juste un et si j'ajoute deux éléments, il deviendrait deux, puis en utilisant cette chaîne de requête, il définit ensuite la quantité à zéro qui la supprime fonctionnellement. Ainsi, lorsque vous supprimez un article, vous définissez juste la quantité égale à zéro en tant que force de base. Ok, alors nous affichons le prix à nouveau en utilisant des filtres. Nous voulons que Shopify restitue la monnaie pour nous. Nous utilisons donc le filtre d'argent qui le formate bien et y ajoute la monnaie. En descendant, on peut vouloir changer la quantité. Donc ici, très simple, c'est une entrée, et puis nous avons juste ici. Donc mettre à jour item.id. Item.id est un numéro unique au lieu du handle pour le produit pour l'identifier , puis la valeur devient juste quelle que soit la quantité d'article. Total de l'étiquette du panier, même affaire. Donc, il va attraper, nous avons item.line_price, puis encore une fois, un filtre pour le configurer pour le former comme monnaie. Maintenant, la raison pour laquelle nous avons... au lieu de, nous avons le prix ici et le prix en ligne ici. Celui-ci est le prix de fois la quantité, donc le prix de la ligne est le prix fois la quantité pour cet article, et encore une fois, vous n'avez rien à faire, Shopify calcule cela pour vous. Allons vers le bas, donc on a si. Voici un autre thème dont nous n'avons pas encore parlé, mais nous le ferons. Un paramètre de thème pour les notes de panier est activé. Si les notes de panier sont activées, il crée un champ de formulaire pour ajouter une note, et une note sur les notes, vous ne pouvez en avoir qu'une dans votre panier. Vous ne pouvez pas faire plusieurs, mais alors il y a des problèmes de travail, il y a d'autres façons d'écrire des informations supplémentaires. Mais pour juste une note de panier régulière, ces instructions spéciales, vous pouvez le mettre là, et c'est probablement, chaque thème supporte cela. Donc, c'est souvent ce que les gens utilisent comme un travail autour au lieu d'avoir à jouer avec comme aligner des propriétés. Tu pourrais juste dire, d'accord, prendre une note pour ce qui est de la chose dont ils ont besoin. C' est le moyen facile de sortir. D' accord et puis, des trucs réguliers. Une fois de retour, ici, on a fini la boucle. Une fois que nous sommes hors de la boucle, les choses deviennent encore plus simples. Vraiment, nous voulions juste afficher le sous-total et notre bouton de paiement, mais comment fonctionne ce bouton de paiement ? Ok, qu'est-ce qu'on a ? Entrée check out, cart.generalcheckout. Donc on a pu voir que c'est incroyablement simple. C' est juste une entrée et regardons la documentation pour cette chose. Considérations relatives au modèle, en procédant à la caisse. Tout ce que ça fait, parce que le panier est un formulaire, c'est juste poster le formulaire sur Shopify et vous avez juste besoin de l'entrée, c'est tout. Je veux dire, c'est vraiment aussi simple que ça en a l'air. C'est tout ce qu'il y a. Donc d'accord, nous devons vérifier quel genre de modifications pouvons-nous faire ce truc ? Nous pouvons faire des propriétés d'élément de ligne dont il existe des guides de documentation disponibles pour le faire. On peut aussi faire quelques autres choses. Nous avons notre sous-total, 110$. Disons que nous offrons la livraison gratuite. Nous pourrions ajouter une logique ici qui s'affiche, nous pourrions utiliser sinon. Donc, nous pourrions dire, sous-total est plus de 100 dollars, il affiche un message de livraison gratuite. Alors essayons ça. On y va. Voyons voir trouver mon prix. Donc nous avons cart.totalprice. Copions ce type. Nous allons l'inclure, nous allons juste le mettre dans cette balise de paragraphe. Alors, voyons. Pour cent, si le prix total du chariot est supérieur à 100, c'est tout, vous êtes admissible, je dirai, plus la livraison gratuite. D' accord. Clôtons notre déclaration. Pourcentage. Endif. Cool. D'accord. Sauvez-le. Voyons ce qui se passe. Pourtant, nous avons eu ça, plus la livraison gratuite. D' accord. Maintenant, j'ai fait ce truc drôle ici où j'ai ce numéro. Pourquoi je l'ai fait comme ça ? D' accord. Alors, ramenons-le à 100 et voyons ce qui se passe. En fait, ici. On va le faire dans l'autre sens, équivaut à 100. Sauver. Ça marche toujours. D' accord. Mais notre prix est de 110. Donc, ajoutez des zéros doubles là-dessus, enregistrez, actualisez, affiche toujours. Ajoutons un autre là-dessus. Maintenant, il n'apparaît pas. Alors, qu'est-ce qui se passe ici ? Pourquoi nous fait-il ça ? La raison en est que le prix, si vous n'avez pas ce filtre appliqué, Shopify l'exprime comme en cents, en centimes. Donc, vous devez multiplier, si vous faites des maths comme ça, vous devez multiplier fois 100. C' est tout ce qu'il y a, ce qui se passe là-bas. Mais c'est une très belle, très bonne modification simple des frais que tout le monde peut faire. Cela augmente également le taux de conversion. Nous le faisons souvent pour les clients, s'ils offrent la livraison gratuite. D' accord. Alors ça va nous amener à « Checkout ». Donc, quand je suis dans le panier et que je clique sur « Checkout », nous savons qu'il affiche un formulaire, url. Shopify s'en occupe pour nous, et il nous envoie ici. Ici, nous avons, c'est la dernière version de la caisse Shopify. C' est beau, c'est réactif, mais si vous ne le configurez pas, c'est très clair. Il se peut qu'il ne corresponde pas nécessairement à votre magasin. Si c'est le cas, nous avons ce bouton « continuer la méthode d'expédition ». On n'a pas de logo ici. Si on y retourne, j'ai ces grandes polices Helvetica audacieuses et tout est en gris. Peut-être pas le meilleur pour la conversion, mais c'est certainement joli. Alors, comment on fait ça ? Que pouvons-nous faire avec ce chèque ? Si nous nous dirigeons vers personnaliser le thème, les paramètres de thème réguliers, Shopify ajoute automatiquement ce panneau, ce panneau « Checkout ». Si on clique sur ce type, on a quelques options ici. Donc, le premier est l'arrière-plan personnalisé. Donc, nous n'avons pas d'antécédents ici. Alors, regardons le magasin de démonstration, un vrai magasin, Tattly, magasin Shopify très prospère, vend des tatouages temporaires. Si je clique sur Check out, eh bien, regarde ça. Voilà notre bannière. Ils ont même leurs logos. Eh bien, ici, votre image de logo, et même si vous avez déjà téléchargé une image dans votre magasin, vous venez de sélectionner « Storefront » et terminé. Votre image est ajoutée. C'est aussi simple que ça. Ensuite, selon votre magasin, si votre logo se trouve à gauche, au centre ou à droite, vous pouvez faire cette correspondance. Donc, il se transporte. Donc, votre tête de mât, qui est ce que les gens voient d'abord qu'ils lisent assez de modèle, ils le verront d'abord et ils sauront que c'est le bon site. Ça a l'air de la même chose, ça me semble juste. Nous pouvons devenir plus fous, nous obtenons la « zone de contenu principale », nous pourrions définir un arrière-plan personnalisé. En fait, je ne l'ai jamais fait. Je veux que ça reste propre, beau. Le « résumé de la commande », nous pourrions le définir. Donc, ici, revenons en arrière. Le côté gauche est la zone de contenu principale, le côté droit est cette zone de résumé de contenu. C' est à ça qu'ils font référence quand ils parlent de ces milieux. Vous pouvez également définir la couleur d'arrière-plan. Donc, couleur de fond, on y va. Faisons un peu rose, donnons toute teinte là, sauvegardez les changements et voyons ce que cela fait. Donc, nous avons vraiment fait ressortir ça. Peut-être que tu as remarqué quelque chose de cool qui se passe ici. Je ne suis pas sûr de la façon dont ils font cette magie, mais la police, la couleur pour cela semble être définie automatiquement pour nous en fonction de la couleur d'arrière-plan que nous choisissons. On peut voir, si on avait choisi un logo, il serait apparu là-dedans. Alors, revenons en arrière. Débarrassez-vous de ce type, notre logo. Nous allons le remettre à zéro, et nous avons quelques autres options ici. Donc, « Typographie », nous ne pouvons pas choisir une police bon gré, mais nous avons accès à certaines polices système que nous pourrions choisir. Nous avons également une belle sélection, une assez large sélection de Google Fonts qui chargent. Beaucoup de thèmes utilisent Google Fonts. Donc, ce sont des choix très courants. Nous pouvons également choisir des thèmes qui correspondent à notre, même si ce n'est pas exactement, vous pouvez en obtenir un qui est proche. La plupart des gens ne sont pas des designers, ils ne vont pas l'attraper. Alors, voyons. Pour les « titres », j'aime « Oswald ». Donnez-lui une belle étiquette, et puis pour notre « corps », nous ferons, quel est le bon match pour ça ? En fait, tu sais quoi ? Ici, c'est un de mes favoris. D'accord. Nous avons « Accents », « Boutons » et « Flèches ». Je veux certainement, mon bouton « Ajouter au panier » est pour la conversion de n'importe quelle façon. Je veux que mon bouton « Ajouter au panier », mon bouton « Commander » et mon bouton « Passer à la caisse », mon bouton « Achat » soient de la même couleur. Dans notre thème, nous les avons déjà grises. Alors, allons-y et mettons-le, mettons-les ces accents en gris, mets-mon bouton en gris, et les flèches, on laissera le rouge. Le rouge semble être une bonne couleur pour les flèches. Ok, rafraîchissons ce type. Regarde ça. Déjà, même si nous n'avons pas le contrôle total de cela, un accès total sur ce modèle, sauf si vous utilisez Shopify plus, nous pouvons le modifier suffisamment là où clairement, cette caisse semble différente et de marque que cette autre commande Shopify. Ça a l'air différent de ça. Ici, nous en sommes à une étape ultérieure du processus. Donc, ici, vous pouvez voir cela semble différent de ce gars, qui semble certainement différent de l'original, le modèle par défaut. Assurez-vous donc que vous êtes toujours, qu'il s'agisse de vos clients de magasin, configurez toujours ces paramètres de thème pour correspondre le plus possible à l'image de marque de votre boutique Shopify. Cela va réduire la dissonance cognitive et aidera les gens à acheter. 16. Paramètres des thèmes: Maintenant que nous avons appris toutes ces compétences Shopify et que nous connaissons structure Liquid et des thèmes dans notre interface, je veux appliquer tout cela d'une manière qui nous donne quelque chose d'utile, quelque chose dont beaucoup de magasins peuvent bénéficier. Donc, une modification très courante que nous faisons est l'infobar. Donc, si on regarde Tattly, ils ont cette nouvelle en haut, inscrivez-vous à la newsletter hebdomadaire Tattly Tuesday. Si nous regardons everestbands.com, ils ont des navires dans le monde entier, livraison gratuite. C'est très commun. C' est un endroit idéal pour déclarer la livraison gratuite, pour annoncer des ventes ou des choses en temps opportun. Ici, nous avons Bandon Dunes Golf Shop, ils offrent également la livraison gratuite. Mais nous voulons le faire pour que le client puisse l'éditer. Donc, ce que nous voulons est un paramètre de thème dans un thème où le client peut facilement mettre à jour le texte dans cette barre d'information. D' accord. Eh bien, nous allons apprendre à faire ça. Donc, voici notre truc de Skillshare et nous, très déprimants, nous n'avons pas de barre d'info. Donc, nous allons apprendre à en ajouter un. Si nous nous dirigeons vers notre thème. Liquide, nous voulons placer ça dans le corps. On pourrait juste coller ça ici, mais on est plus malins que ça. Donc, nous allons faire une inclusion. Donc, commençons par créer un extrait et nous allons créer un extrait appelé barre d'informations. Ça a du sens ? Encore une fois, nous voulons des noms descriptifs. Nous avons créé notre infobar.liquid. Maintenant, je vais être un mauvais garçon. Je sais, je ne devrais pas faire de styles en ligne, mais pour qu'on puisse tout voir et comme on utilise un extrait, on va le faire. J' ai déjà écrit mes styles CSS ici, nous allons l'appeler bannière promo. J' aimerais ce style Tattly, je veux le blanc sur le texte noir. Astuce rapide ici, ne jamais utiliser tout le noir ou tout le blanc. Si nous faisons off noir, blanc cassé, aucune différence notable, mais l'anti-aliasing OSS fonctionnera mieux. D'accord. Nous devons mettre dans notre HTML, notre contenu. Donc, ici et nous allons le formater bien. Tout d'abord, voyons ça avec la livraison gratuite, et gardons notre infobar, et nous retournerons à theme.liquid. Mettons-le là-dedans. Inclure 'Infobar' et nous allons le fermer. Donc maintenant, ce contenu que nous avons écrit dans notre extrait, il va être déposé juste là et voyons où il finit. On y va, belle. Nous avons une barre d'expédition gratuite, très jolie. Mais si on sait que le contenu ne changera jamais, on pourrait s'arrêter maintenant. Mais nous voulons que le client soit en mesure d'éditer facilement et nous ne devrions pas nous attendre à ce qu'ils soient en cours d'exécution de modèles de thème en HTML. Certaines personnes le font, d'autres ne peuvent pas faire ça. Mais même si vous le faites pour vous-même, facilitez votre vie, faites-en un décor thématique et c'est ce que nous apprenons dès maintenant. Donc, ici, laissez-moi saisir les paramètres. Donc, les paramètres, vous pouvez faire vos propres variables ici, les vôtres. Donc, les paramètres sont un objet, puis le point n'importe quoi. Dans ce cas, texte .promo. Vous pouvez nommer ça tout ce que vous voulez par vous-même. Mais encore une fois, faites-en quelque chose de descriptif. Donc, ici, en ce qui concerne ce thème, nous allons l'appeler texte promo. Pour la première fois, nous allons découvrir dans le fichier de paramètres dans Paramètres. Alors, ouvrons le thème Personnaliser. Donc, il y a ces gars, ces réglages. Ça fait partie du thème, vous contrôlez ça. En éditant le thème, vous pouvez modifier ce que vous voulez là-bas. Voyons comment ça marche. Nous descendons à Config, c'est ce dossier Config. Ainsi, à l'intérieur du dossier Config, les données de paramètres sont les paramètres actuels et le schéma de paramètres définit comment ceux-ci fonctionnent. Un mot de prudence ici, et je peux ou ne peut pas gâcher cela moi-même, est les valeurs séparées par des virgules sont très importantes. Si vous manquez une virgule, cette chose se cassera. Donc, si vous vous embêtez avec ça, arrête de fonctionner correctement. La première chose à rechercher est des virgules perturbées. Vous pouviez voir comment ils fonctionnent. Donc, nous avons une accolade ouverte, l'en-tête de nom. Personnalisez le thème, l'en-tête et puis, vous savez à quoi vous attendre. Le premier sera le logo ici. Regardons vers le bas. Tapez l'en-tête, le logo de contenu. Regarde ça. Donc, on veut ajouter les nôtres ici, d'accord ? Je l'ai déjà écrit, attrapons-le. Ici, nous avons, nous voilà. Donc, d'abord, nous voulons être en mesure de définir notre texte. Alors attrapons ce type, collez-le ici. D'accord. Nous en ferons la première chose, donc c'est facile pour nous de le trouver. Fouiller dans les fichiers des paramètres est une douleur. Donc, assurez-vous de trier les choses logiquement et de les étiqueter bien. Mais encore une fois, donc nous allons dire, les paramètres, le type est le texte, ID est le texte promo. Donc, c'est le type de champ qu'il est, ID est la variable, très simple, et l'étiquette est le texte de la bannière promotionnelle. C' est incroyablement facile. Avec trois lignes, nous venons d'ajouter un thème, c'est génial. Donc, ici, nous allons le rafraîchir. Ce type travaille toujours. Donc, actualisons nos paramètres de thème, voyons ce que nous avons en cours ici. En-tête, texte de bannière promotionnelle. D'accord. Donc, nous allons dire, pour que nous puissions voir une différence, livraison gratuite de plus de 100$, sauver nos changements, et revenons à la barre d'information. Donc, nous avons settings.promotext. Sauvons ce type. C' est rafraîchissant. Regardez ça, livraison gratuite de plus de 100$. Essayons ici. Donc, disons qu'ils le changent. Il devient plus de 120. Sauvez-le. Actualiser. Regarde ça. Donc, il se met à jour. Il nous a fallu quelques minutes pour pouvoir ajouter ce paramètre de thème vraiment facile à utiliser que tout le monde peut ensuite utiliser pour mettre à jour son thème. Mais disons que vous ne voulez pas toujours cette infobar. Donc, nous avons aussi une solution pour ça. D'accord. Nous devons ajouter un nouveau paramètre de thème et cela va être appelé une case à cocher. Donc, nous allons dans le schéma des paramètres. Au-dessus de notre texte promo, je veux en ajouter un nouveau, ajoutons ce gars. Donc, nous avons la case à cocher de type, nous dit que l'entrée, est le type d'entrée, qui va être, comme vous l'avez deviné la case à cocher, au lieu de texte. Notre ID est une bannière promo, donc c'est notre nom de variable dans laquelle nous allons stocker cela, et notre étiquette est activer la bannière promo et c'est ce qu'il dit dans les paramètres du thème. Alors, économisez. Si on rafraîchit ça. Donc, ici, nous avons nos paramètres de bannière promo, mais cela ne fait rien pour l'instant. Il faut ajouter un peu de logique ici. Laisse-moi aller de l'avant et le copier, rendre ma vie facile, et on en parlera. Bon, infobar.liquide. Donc, nous avons ce type ici, notre extrait, et nous allons ajouter une déclaration If. Si settings.promobanner. Donc, il est plus intelligent de savoir qu'il s'agit d'une condition booléenne. Donc, si la case à cocher est décochée, cela n'apparaîtra pas. Alors nous devons le fermer, endif. Facile. Sauver. Donc, maintenant nous l'avons vérifié ici. Donc, si on se rafraîchit, il devrait toujours être là, et c'est le cas. Maintenant, disons que nous n'offrons pas la livraison gratuite tout d'un coup, décochons, sauvegardons , actualisons et c'est parti. Parfait et merveilleux. Il est très facile d'ajouter des paramètres de thème, sorte que soit vous pouvez modifier le thème rapidement, vous pouvez avoir un membre du personnel, vous pouvez le faire pour un client. C' est phénoménalement facile, j'aime ça. faisant défiler rapidement ici, vous pouvez joindre des fichiers dans vos paramètres de thème pour différentes choses. Donc, c'est comme ça que nous changeons le logo du magasin, bien sûr, les icônes fave. Nous pouvons également utiliser ces mêmes variables et ces paramètres de thème. Nous pouvons également les utiliser dans notre fichier CSS. Notre fichier CSS est également un fichier .liquid. Donc, cela devient très pratique, pas seulement pour le travail du client, mais aussi pour modifier rapidement votre propre magasin. 17. Gagner de l'argent avec Shopify: Donc, si vous êtes comme moi, vous voulez gagner de l'argent et il n'y a rien mal à ça et vous pouvez utiliser les compétences que nous avons apprises ici pour le faire. Ce n'est qu'une étape sur la voie à suivre. Notre première étape a été de lancer ce programme de partenaires Shopify et d'obtenir la porte des partenaires Shopify. Eh bien, une fois que vous avez prouvé l'expérience de Shopify, cinq magasins dans ce compte partenaire, vous pouvez postuler au programme d'experts Shopify, et je veux vous le montrer. Voici la liste de mon expert sur Shopify. Tu sais qu'ils te vérifient pour prouver une fois que tu as cinq magasins, ça prouve que tu connais Shopify. Tu sais ce que tu fais. Il peut vous amener dans le programme d'experts qui est vraiment un outil phénoménal de génération de plomb. Ainsi, vous pouvez mettre votre expertise. Il y a différentes catégories : design, développement, marketing, photographie, mise en place. Mettez une description, des liens vers votre site Web, et ensuite vous pouvez demander à vos clients heureux d'ajouter des témoignages à vous. Donc, quelqu'un est à la recherche de l'aide, ils pourraient choisir une catégorie, cliquez sur contact expert. Il ouvre ce formulaire et immédiatement, vous recevez un e-mail à ce sujet. Donc, une fois que vous passez de partenaire Shopify à expert, vous faites désormais partie non seulement d'une plateforme utile et d'une communauté utile, mais vous disposez de cet outil d'affaires incroyable pour générer des prospects. Mais il y a d'autres choses que vous pouvez faire aussi, bien sûr. Vous pouvez faire un thème, un thème personnalisé soumis à la boutique et ceux font très bien. Shopify gère toute la livraison pour vous et vous obtenez juste l'argent PayPaled pour vous, ce qui est génial ou si vous avez l'impression que vos compétences de code sont à priser, vous pouvez soumettre des applications et les gens ont besoin et utiliser des applications tout le temps. L' avantage de faire des applications est son chiffre d'affaires récurrent. La plupart des applications sont des abonnements. Vous payez une cotisation mensuelle et ensuite vous obtenez ce revenu passif que les revenus récurrents qui est génial. Voyons voir. Regardons une ou deux de ces choses. On a des experts en configuration. Les experts en configuration sont très simples. Tout ce que vous avez à faire est d'aider les gens à installer leur magasin. C' est probablement l'obstacle le plus facile à entrée et c'est bien parce qu'avec un expert en configuration, vous allez souvent faire tourner de nouveaux magasins et ensuite vous obtenez une part de revenus de 20 pour cent grâce au programme partenaire de tout ce que ce client paie à Shopify. Vous obtenez ensuite 20 pour cent PayPaled pour vous, ce qui est très agréable. En même temps, vous voudrez probablement aussi postuler en tant que concepteur. Designers, les gens que vous chercheriez à modifier un modèle comme nous l'avons fait avec la barre d'informations qui était très pratique et ensuite devenir un peu plus difficile au-delà de ce que nous avons discuté serait le développement, où vous pouvez ajouter et des applications privées aux magasins. Bien sûr, il y a de l'espace pour les marketeurs et même les photographes, ce qui est génial. Donc, tu n'as pas à en choisir un. Vous pouvez appliquer à plusieurs. Donc, une fois que vous entrez dans cet écosystème, continuez à grandir, continuez. C' est juste une communauté phénoménale. Comme une histoire de réussite, nous vivons à plein temps confortablement et avec très peu de stress de la part de Shopify parce qu'ils nous fournissent beaucoup de soutien, beaucoup de ressources, même en créant cette série de vidéos. Ils m'ont reconnu et ont contacté nous avons parlé et mis en place, et ils sont très utiles. Ils sont vraiment généralement des gens utiles et je suis très reconnaissant pour eux. Alors, considérez-le.