Personnalisation du thème Shopify - Créez une vitrine Shopify sans codage

1. Introduction: Si vous souhaitez créer un site Web Shopify sans engager une équipe de concepteurs et de développeurs, ce cours est fait pour vous Si vous n'avez jamais vu mon visage auparavant, je m'appelle Christopher Dodd Je suis l'un des meilleurs professeurs sur skillshare.com et un expert du développement Shopify Travaille avec la plateforme Shopify depuis 2019. Dans ce cours, je vais vous expliquer transformer votre marque de commerce électronique en une boutique Shopify magnifique et adaptée aux mobiles sans avoir à apprendre à outils de conception Web avancés tels que Figma ou à toucher le code interne de votre thème Shopify Nous allons plutôt nous concentrer sur l'approche native de Shopify en matière de conception de boutiques sans code L'éditeur de la boutique en ligne. Dans ce cours, nous aborderons les éléments essentiels d'une marque de commerce électronique et concevrons un acheteur par magasin à partir de zéro en utilisant les sections existantes de notre thème À la fin du cours, vous aurez une vitrine fonctionnelle que vous pourrez utiliser pour lancer votre propre marque. Commençons. 2. Préface: Comme je l'ai mentionné dans l' introduction de ce cours, je vais vous expliquer comment transformer votre marque de commerce électronique en une belle boutique Shopify adaptée aux mobiles l'aide de l'éditeur de boutique en ligne, et je vais le faire en utilisant cette fausse marque Macha comme exemple Comme vous pouvez le voir ici, tous mes actifs sont déjà prêts à être utilisés. Si vous souhaitez suivre exactement les mêmes ressources, je vais laisser un lien ici sur ce cours pour que vous puissiez télécharger exactement les mêmes fichiers. Si, toutefois, vous souhaitez suivre votre propre marque, je vous encourage à organiser les actifs de votre marque et images de votre site Web dans un endroit facilement accessible, comme je l'ai fait avec ce dossier pour ma fausse marque Sans. Vous n'avez pas encore atteint ce stade du développement de votre marque, vous pouvez utiliser un outil comme ov At, outil d'intelligence artificielle qui peut vous aider à développer une marque à partir de zéro. Comme vous pouvez le voir ici, tous les actifs de mon dossier ont été générés depuis l'application Lovart Et si vous voulez savoir exactement comment je l'ai fait, vous pouvez regarder ma vidéo gratuite sur ma chaîne YouTube. Mais que vous utilisiez les ressources de ma marque ou les vôtres, assurez-vous de préparer ce dossier à l'avance, car c'est ce que nous allons utiliser comme base pour la conception de notre vitrine sur Shopper FI La deuxième chose que je tiens à mentionner ici est qu'il existe évidemment différentes ressources au sein la plateforme Shopify elle-même qui sont utilisées pour créer la vitrine Outre la personnalisation du thème Shopify elle-même, vous devrez ajouter certains produits à votre boutique et les organiser en collections, le cas échéant nous aborderons certaines des autres ressources cours, nous aborderons certaines des autres ressources de Shopify Mais si vous utilisez Shopify pour la première fois, vous devez d' abord vous familiariser avec la plateforme Si ce n'est pas déjà fait, je vous recommande de suivre mon cours de configuration de boutique Shopify ici sur Skillshare avant de suivre celui-ci , car il vous donnera un aperçu du fonctionnement de la plateforme avant de nous plonger spécifiquement dans Ally, comme je l'ai également mentionné dans l'introduction, nous allons créer une vitrine sur Shopify dans ce cours sans aucun codage Afin d'éviter complètement le code, nous allons sélectionner un thème Shopify prédéfini dans la boutique de thèmes Shopify Vous pouvez considérer ces thèmes comme des collections de modules prédéfinis que nous pouvons utiliser comme éléments de base dans l'éditeur de la boutique en ligne Il est important de noter ici que ces éléments de base dépendent du thème par lequel nous choisissons de commencer, et que ces thèmes sont disponibles dans différentes gammes de prix. Bien qu'il existe un tas de thèmes gratuits que nous pouvons utiliser, nous allons avoir plus d'options de qualité dans l' éditeur de boutique en ligne en utilisant ce que l'on appelle un thème premium. En d'autres termes, un thème pour lequel nous devons payer. Cela étant dit, les principes que j'enseigne dans ce cours sont universellement applicables à tous les thèmes. Et comme nous le verrons dans ce cours, nous pouvons commencer à jouer avec les sections et à créer notre vitrine en mode d'essai, ce qui nous permet de tester autant de designs que nous le souhaitons avant de lancer le thème en ligne Donc, pour résumer, avant de commencer , vous devez d'abord préparer le dossier des actifs de votre marque et, deuxièmement, vous familiariser avec la plateforme Shopify Si ce n'est pas déjà fait, allez-y, et je vous retrouverai dans la prochaine vidéo. 3. Le moodboard: Dans cette vidéo, nous allons parler du moodboard, qui, comme il est dit ici, est le processus de création d' une collection visuelle pour définir la direction, l' esthétique ou le ton émotionnel d'un projet créatif En gros, ce que nous essayons de réaliser dans cette étape, nous pourrons faire un peu plus tard si vous voulez la retarder et que vous voulez réellement commencer à mettre vos produits dans votre boutique dès maintenant, c'est quelque chose que nous pouvons faire tout au long notre parcours en tant que marque sur Shopify, c'est pouvoir constamment nous inspirer d' autres sites Web et découvrir ce qu'ils font, ce qui pourrait être efficace, ce qui pourrait fonctionner pour notre marque et intégrer à notre propre site Web. S'inspirer d'autres sites Web n' est donc pas quelque chose que nous faisons une seule fois, et c'est fait. Nous devrons constamment examiner nos concurrents et voir ce qu'ils font. Nous pouvons également nous inspirer de sites Web de différents créneaux, mais nous voulons certainement voir ce qu'ils font et ce qu'ils utilisent éventuellement dans notre propre marque auprès de magasins qui vendent un produit similaire voulons certainement voir ce qu'ils font et ce qu'ils à nous. Nous pouvons donc trouver d'autres marques dans notre créneau. Idéalement, vous devriez savoir qui sont vos concurrents dans votre créneau. Mais si vous avez besoin d'aide , vous pouvez utiliser Google ou un LLM comme Gemini pour demander quels sont vos principaux concurrents ou quelles sont les marques les meilleures ou les plus populaires dans votre espace La marque d'exemple pour ce cours Skillshare est donc une marque mata Je vais donc rechercher de la poudre de matcha Et maintenant, nous pouvons voir apparaître tout un tas de sites Web optimisés pour les moteurs de recherche. Nous devrions peut-être nous limiter à notre marché particulier. Donc, en tant qu'Australien, je devrais peut-être inclure l'Australie ici. Ou si vous êtes américain, remplacez-le par les États-Unis. Vous pouvez affiner ce champ autant que vous le souhaitez. Je vais utiliser Google Gemini, donc je vais vous dire ici, quelles sont les meilleures marques de matcha qui vendent en ligne, principalement via une boutique en ligne Cela me donne l'un de ces choix A, le choix B. Oui, il y a plein de noms de chaque côté. Beaucoup d'entre eux sont donc très japonais, mais si nous regardons la marque O, elle s'adresse un peu plus aux Occidentaux Jetons donc un coup d'œil à Jade Leaf Macho. Il s'agit de l'un des plus grands vendeurs en ligne aux États-Unis. Alors prenons-le et jetons un coup d'œil à leur site Web. C'est donc un produit similaire à celui que nous vendons avec la poudre macho elle-même et le kit pour la préparer Sachant qu'il y a peu de bruit ici, je vais fermer ça. Ensuite, nous pouvons jeter un œil au site Web et à ce que nous aimons, ce que nous n'aimons pas et, surtout, à ce que nous pouvons appliquer à notre marque. Ainsi, par exemple, s'il propose une large gamme de produits et que nous n'en avons pas une large, nous ne pouvons pas nécessairement l' appliquer à notre marque. S'ils ont 1 300 avis sur un seul produit, nous ne pouvons pas nécessairement faire 1 300 Mais s'ils ont, par exemple, témoignages qu'ils mettent particulièrement en valeur ou des recettes, nous pourrions créer nos propres recettes sur la façon d'utiliser la poudre Nous pouvons certainement nous inspirer de ce site Web, d'accord ? Également, la vente par abonnement et la structure de l'abonnement Bridget. Peut-être que ça nous plaît. Donc, ce que je vais faire, c'est que j'aime aussi les icônes ici, et certaines aiment les USP ici D'accord, trouvons donc d'autres exemples. Trouvons Macha pleine d'accord. Encore une fois, il s'agit d'un processus assez subjectif. Je veux que vous regardiez ce que vous aimez sur ce site Web. Si j'aime cet en-tête, je peux simplement en faire une capture d'écran. J'ai mon kit de capture d'écran il va donc être placé directement dans un dossier que j'ai créé pour inspirer le site Web de la marque, afin que vous puissiez le voir dans un dossier que j'ai créé pour inspirer le site Web de la marque, afin que vous puissiez Je pourrais donc simplement tout mettre dans un dossier si je le voulais, puis regarder ce dossier ou le disposer sur une sorte de canevas. J'ai Figma ici, donc je pourrais faire tout un tas, disons, d'en-têtes, n' Je dois prendre cette ampleur, n'est-ce pas ? Je pourrais donc mettre ici tous mes en-têtes que j'aime. Disons donc, par exemple, que j'aime aussi cet en-tête. Évidemment, ils sont complètement différents, mais disons que j'ai aimé les deux. Ensuite, je pourrais simplement aligner tous mes en-têtes que j'aime ici Encore une fois, vous pouvez utiliser l'outil que vous préférez avec cela. Je ne suis qu'un utilisateur de Figma, il est donc logique pour moi d'utiliser Figma, mais vous pouvez les combiner Un logiciel que tu préfères ? Et comme nous n' allons pas coder le site Web de manière personnalisée dans ce cours de Skillshare, je veux que vous vous concentriez davantage sur la liste des sections plutôt que sur les exigences de conception exactes Parce qu'à moins que nous ne choisissions un thème qui contient déjà ce design d'en-tête, il s'agit d'un design assez personnalisé. La plupart des thèmes ne nous donneront donc la fonctionnalité d'avoir un en-tête qui ressemble exactement à celui-ci. Je veux plutôt que vous vous concentriez sur quelle est la section au-dessus du pli de la page d'accueil ? C'est assez standard dans le commerce électronique. C'est ce qu'on appelle une section consacrée aux héros. Et si nous examinons l'un de ces sites Web, si je reviens ici, jetons un coup d'œil à Peak Life. Ils auront tous une sorte de section de héros en haut. Nous allons donc évidemment vouloir une section consacrée aux héros. Nous n'allons pas réinventer la roue ici, mais peut-être voulons-nous voir quels types de sections de héros nous aimons Ils sont tous assez similaires ici, mais celui-ci est plutôt propre. Je vais donc simplement faire une capture d'écran. Et puis pareil ici. Je vais faire des héros Disons des sections de la page d'accueil, non ? Nous pouvons donc montrer le héros ici. Peut-être que nous aimerions regarder ça. Comme mentionné, nous allons probablement avoir une section consacrée aux héros sur notre page d'accueil. C'est assez standard. Ensuite, nous pouvons examiner des choses comme, accord, quels sont les avantages pour la santé ? C'est peut-être quelque chose que nous voudrions mettre en évidence sur notre site Web, afin de pouvoir également l'intégrer à notre moodboard. Cela nous aidera à déterminer ce que nous devons réellement mettre sur notre site Web, sections à les sections à rechercher pour pouvoir les intégrer. Et nous pourrions vouloir les regrouper. Disons que nous voulons absolument mettre en évidence les avantages, n'est-ce pas ? Et je suis sûr que les autres marques présentes ici ont probablement quelque chose de similaire. Alors voilà, bienfaits pour la santé de nos plantes Alors laissez-moi simplement le copier-coller. En fait, je vais copier-coller sur toute la largeur. Nous pouvons donc empiler différentes sections qui obtiennent le même résultat à partir de différents sites Web en mettant en évidence les avantages. Alors, celui-ci a-t-il des avantages ? Celui-ci n'a pas vraiment ce qu'il contient c'est cette jolie petite section de recettes. Voyons donc si je peux tout intégrer dans un seul cadre de site Web en zoomant. On dirait que je ne peux pas y aller. Donc je vais juste prendre tout ça. Et disons qu'ici, nous allons avoir des recettes phares ou des recettes de mach, insérez cette section Et comme vous pouvez le voir, je divise cela section par section. Un site Web est essentiellement une liste de sections. Nous pouvons donc le décomposer en cette barre d'annonce, cet en-tête, cette section héros, cette section sur les avantages, cette section sur les collections en vedette. Nous pouvons essentiellement décomposer n'importe quel site Web de commerce électronique standard en sections, et c'est ainsi que cela fonctionne dans Shopify Donc, lorsque nous commencerons à créer notre boutique un peu plus tard, vous verrez la liste des sections disponibles dans le thème, puis nous les intégrerons simplement dans nos modèles, d'accord ? Alors peut-être que j'appelle ça un héros, et je peux encadrer tout cela pour les sections que je pourrais avoir envie de mettre sur la page d'accueil. Très bien, je peux donc les regrouper dans des sections de page d'accueil. Maintenant, évidemment, mon texte n'est pas de la bonne couleur, donc je vais juste corriger. Hein ? Je peux donc évidemment utiliser ces bribes d'inspiration sur différents modèles de mon site Web Shopify, mais je vous donne juste quelques idées ici. Je vais donc créer un autre cadre ici pour la page du produit. Dans Shopify, il s'agit donc d'un modèle de produit que nous allons utiliser pour tous les produits, sauf si nous utilisons des modèles alternatifs, mais la plupart du temps, nous n'utilisons qu'un seul modèle Pour nos produits. Passons donc à la page principale du produit. Ce sont les deux pages principales tout site Web de commerce électronique Shopify Je suis toujours en train de zoomer ici, alors laissez-moi revenir en arrière Cela dépend de la quantité de capture d'écran que je souhaite. Mais ici, nous pouvons jeter un œil au modèle de produit principal de ces autres marques. Alors laissez-moi ici, je vais faire un zoom arrière. Et vous pouvez voir que celui-ci ne zoome pas très bien, mais vous pouvez voir ici que beaucoup d'entre eux sont proposés sur abonnement. Permettez-moi d'aller voir où se trouve la page du produit ici. OK. Macha, déesse du soleil D'accord, oui, celui-ci est également sur abonnement. Nous pouvons donc voir comment les galeries sont configurées, si nous aimons les vignettes sur la gauche Ou nous les aimons en bas. Encore une fois, nous allons être limités par notre thème. Nous ne pourrons pas nécessairement le personnaliser exactement comme nous le voulons sans un codage personnalisé, mais nous pouvons nous en rapprocher assez avec le thème. Et vous pouvez voir ici que nous avons quelques petits badges. Voyons si c' est par ici, non. Je crois que j'ai vu des badges ici, non. C'est donc quelque chose d'unique que fait Sun Goddess, c'est apposer des badges sur les images des produits, et ici. Voyons également comment nous pouvons agrandir ces images. Vous pouvez le faire aussi longtemps ou aussi peu que vous le souhaitez. Plus vous ferez des recherches, plus vous découvrirez ce que font les autres sites Web et vous aurez peut-être de bonnes idées. Mais évidemment, comme je l'ai déjà mentionné, cela doit correspondre à ce que vous êtes capable de réaliser avec votre marque. Donc, si vous n'avez pas ce que celui-ci avait 1 300 critiques, si vous n'en avez pas encore une tonne , alors vous ne pouvez pas nécessairement présenter une tonne de critiques, évidemment Mais nous pouvons faire quelques témoignages. Si nous n'avons qu'un petit nombre d'avis, nous pouvons mettre en évidence chaque avis individuel , par exemple en utilisant des icônes ici. ne s'agit pas nécessairement d'une section, mais juste une inspiration design pour dire que j'aime bien ces icônes. Encore une fois, il s'agit de votre petit album, votre petit canevas pour mettre toute votre inspiration en matière de design sur une seule page Il n'y a pas de processus défini pour cela. C'est un processus flexible pour inspiration en matière de design, d'accord ? Je vous recommande donc de consulter vos concurrents ou les magasins vous vendent des produits similaires. Trouvez de l'inspiration pour eux. Les principaux éléments que vous aimez intégrer à votre moodboard, sorte que lorsque nous aurons créé notre vitrine dans l'éditeur de boutique en ligne, vous aurez déjà une idée de ce que vous souhaitez mettre dans la boutique Et pour rappel, vous pouvez le faire à n'importe quelle étape du processus. Vous n'avez pas besoin de faire votre moodboard maintenant, le terminer, puis de passer à l'étape suivante Cela peut être quelque chose et cela devrait être quelque chose que vous faites tout au long de la vie de votre marque, recherchant toujours différentes inspirations, et vous pouvez toujours mettre à jour votre site Web au fur et à mesure que vous vous inspirez d'autres sites Web ou simplement d'idées qui vous viennent à l'esprit Mais il s'agit certainement d'un processus de réflexion que vous voudrez avoir avant de vous lancer directement dans l'éditeur de boutique en ligne, ce que nous ferons plus tard dans le cours. 4. Entrée de produit: Très bien, nous sommes maintenant arrivés dans une boutique Shopify Bresh. Voici la boutique que j'ai créée pour Sans marcher. Et si nous allons sur le canal de vente de la boutique en ligne, vous verrez que seul le thème par défaut au moment de l' enregistrement d'Horizon figure dans notre bibliothèque de thèmes. Et si nous examinons nos produits, vous verrez que notre liste de produits est complètement vide. Dans cette vidéo, cela va être assez court car nous allons simplement ajouter des produits à notre boutique. Évidemment, pour votre marque, selon le nombre de produits que vous possédez, processus peut être long. Si vous souhaitez suivre la même liste de produits que mon exemple de marque CNS, il vous suffit de cliquer sur Importer et nous pourrons ajouter un fichier CSV au format Shopify Je vais donc passer à mon dossier d'identité de marque ici, qui contient tous les actifs de ma marque. Et vous pouvez voir ici qu'il y en a un appelé productlst point csv Vous pouvez donc simplement cliquer dessus et le faire glisser ici. Je vais publier tous les nouveaux produits tous les canaux de vente. Notre site Web n'est pas encore en ligne, donc cela n'a pas vraiment d'importance. Cliquez sur Télécharger et prévisualiser. Il va donc simplement vérifier le mappage ici, le titre et la description et ils sont au bon endroit. Je peux vous assurer que cela a été exporté depuis Shopify, nous devrions donc pouvoir simplement l'importer, et cela prendra un peu de temps Mais au bout d'un moment, il sera question de produits importés. Vous verrez quelques images apparaître ici , ce qui est une bonne chose. Mais si nous passons à notre poudre de matcha, oui, nous avons aussi les images Ainsi, dans ce fichier CSV, il doit contenir un lien vers l'image. Et si nous ajoutons des produits avec des images à notre boutique, si nous passons au contenu et aux fichiers, nous devrions voir que ceux-ci ont déjà été téléchargés dans notre section des fichiers également. Il est important de noter ici que j'ai récemment eu un client qui venait de supprimer certains fichiers parce que son magasin était plein. Tout ce qui renvoie à ces fichiers dans notre liste de produits ou dans notre thème se retrouvera avec du contenu vide si nous supprimons nos fichiers. Donc oui. Lorsque vous supprimez des fichiers, veillez à ne pas supprimer les fichiers actuellement utilisés. Comme vous pouvez le voir ici, références, il est utilisé dans un seul produit. Donc, si nous le supprimions, nous perdrions cette image des images de nos produits ici. Maintenant, bien sûr, si vous utilisez votre propre marque, vous n'allez pas simplement importer ma liste de produits et l'utiliser. Vous devrez donc évidemment ajouter vos propres produits, que ce soit par le biais d'un processus automatisé, d'une importation comme je viens de le faire ou manuellement en cliquant sur Ajouter un produit ici. Lorsque vous ajoutez vos produits, le principal élément sur lequel vous devez vous concentrer est évidemment le titre Je vais donc dire produit juste à titre d'exemple, titre du produit, cela déterminera ici votre liste sur les moteurs de recherche. Vous pouvez donc voir ici qu' il a pris le titre du produit et qu'il l'a mis en tant que titre tiret du produit, mais vous pouvez également le modifier ici. Dans Shopify, le handle n'est pas seulement une question de référencement, mais c' est aussi la façon dont nous ciblons les produits dans notre programmation Il est donc important de le faire bien à l'avance. Donc, lorsque vous configurez vos produits, vous devez vous assurer que le nom du produit correspondant à cette dernière partie de l'URL est tel que vous le souhaitez, d'accord ? Mais à part le titre, une image, un prix et évidemment l'ajout peu d'inventaire ici pour pouvoir l'acheter, c'est tout ce dont vous avez vraiment besoin, et tout le reste est en supplément en plus de cela. Évidemment, si votre produit se décline en différentes options, vous devez les ajouter ici, ce qui créera différentes variantes. Mais nous n'allons pas entrer dans la différence entre les produits et les variantes de cette classe. Nous en avons déjà parlé dans la configuration de la boutique Shopify. Je n'aborderai donc pas le fonctionnement réel de la plateforme Shopify en dehors de l'éditeur de boutique en ligne Si vous souhaitez en savoir plus à ce sujet, vous pouvez consulter le précédent cours Skillshare Mais quelle que soit la méthode que vous avez utilisée pour acheter certains produits dans votre boutique, vous aurez besoin de certains produits Je vous encourage donc à le faire dès maintenant. Et une autre chose que je vais faire est de les ranger dans une collection. Et comme notre gamme de produits est si restreinte, je vais simplement créer une collection très basique au lieu de la page d'accueil, qui est la collection par défaut, je vais supprimer celle-ci. Je pourrais aussi le modifier à ma guise, mais je vais juste le supprimer et recommencer à zéro. Et je vais simplement l'appeler la collection Shop All. Beaucoup de magasins le font, et je peux soit le faire de manière intelligente, soit le faire manuellement, étant donné que j'ai une gamme de produits si petite cela n'aura pas beaucoup d' importance de toute façon. Je vais donc ajouter les quatre produits de ma gamme de produits ici, et cela va les ajouter à cette collection Shop All. Donc, à la fin de cette vidéo, vous devriez faire importer vos produits ou au moins quelques-uns d'entre eux, et au moins une collection composée de certains de ces produits. OK. Dans la vidéo suivante, nous allons passer aux paramètres de marque de notre boutique Shopify, et nous allons également ajouter le logo de notre marque et quelques couleurs Je vous retrouverai donc dans la prochaine vidéo. 5. Paramètres de la marque: Dans la dernière vidéo, nous les avons donc rapidement ajoutés à notre liste de produits à l'aide d' une importation et les avons organisés en une seule collection. Nous allons faire une autre petite vidéo sur configuration de certains éléments dans notre boutique avant de passer sélection de notre thème et à configuration de notre vitrine avec l'éditeur de boutique en ligne, et c'est pour entrer dans les paramètres de notre marque Je crois qu'il s'agit d'une fonctionnalité assez nouvelle dans Shopify, mais nous pouvons désormais ajouter des éléments tels que notre logo et les couleurs de notre marque à une section de nos paramètres sur notre boutique Shopify a déjà été fait dans l' éditeur de la boutique en ligne lors de la configuration de votre thème, et c'est toujours le cas. Mais l'idée des paramètres de marque est que nous ne copions pas et ne collons pas les paramètres sur plusieurs thèmes, qui peuvent inclure jusqu'à 20 thèmes différents dans votre bibliothèque de thèmes Nous avons un endroit centralisé où placer des éléments qui ne changent pas vraiment, comme les couleurs de notre marque et le logo de notre marque. Utilisons-le donc maintenant, puis nous le lierons évidemment à notre thème un peu plus tard. Et si nous faisons défiler la page vers le bas, vous pouvez voir qu'il ne s'agit pas uniquement de logos et de couleurs. Nous pouvons également ajouter une image de couverture, slogan, une brève description et des liens sociaux ici. Je vous encourage donc à le remplir autant que possible. Dans cette vidéo, je vais juste ajouter le logo. Comme vous pouvez le voir ici, nous avons les images de nos produits ici, mais nous n'avons pas encore notre logo Je vais donc ouvrir mon dossier d'identité de marque, et vous pouvez voir que nous avons le logo Je vais donc simplement faire glisser un message pour vous rappeler que ce logo, si nous y jetons un coup d'œil, est très bien recadré et possède un arrière-plan transparent Lorsque vous préparez votre logo, je vous recommande de faire de même. Et si vous voulez savoir comment je l'ai fait, j'ai simplement utilisé l'aperçu, qui est l'application standard sur MAC pour recadrer une image comme celle-ci, puis vous pouvez utiliser un outil tel que supprimer le point Bg pour supprimer l'arrière-plan d'une image si vous n'avez pas d'application comme Photoshop, d'accord ? Mais oui, vous souhaitez ajouter votre logo, comme tel, sans trop d'espace autour du contenu réel du logo et sans arrière-plan transparent. Je vais donc l'ajouter. Et ce qui est cool à propos de ces paramètres de marque, comme vous pouvez le constater, c'est qu'ils sont également ajoutés à cette petite maquette en haut de la page. Nous pouvons également ajouter un logo carré. Je ne sais pas si j'ai la version carrée ici. Je ne pense pas, mais c'est aussi une option. Et maintenant, je vais ajouter les couleurs de ma marque. Jetons donc un coup d' œil, nous pouvons soit regarder la liste ici écrite dans l'édition de texte. Ou nous pouvons consulter notre guide d'identité de marque ici. Je vais donc plutôt consulter mon guide d'identité de marque. Je vais donc l' ouvrir avec un aperçu. Et comme vous pouvez le voir, j'ai deux couleurs primaires et trois couleurs secondaires, qui, je pense, correspondent parfaitement ici. Ajoutons donc ma première couleur primaire, qui, espérons-le, sera de pouvoir copier-coller. Oui, je peux, juste ici. Il n'aime pas le hachage, nous allons donc nous assurer de le récupérer Donc, si je fais quelque chose comme ça, il manque juste le dernier caractère des trois OK, allons-y. Et puis la couleur contrastante, c'est celle-ci. J'aimerais donc pouvoir sélectionner, peut-être que je vais au document ici, ce sera peut-être plus facile à copier-coller. Bien que celles-ci soient un peu mal organisées ici, laissez-moi y jeter un œil. Nous voulons donc passer de la couleur crème au second plan. Bien, maintenant nous pouvons utiliser cette liste. Donc, si je reviens ici pour la couleur contrastante, c'était du beige doux. Je vais donc le copier sans le hachage, puis je vais passer aux couleurs secondaires ici, en mettant le vert sauge le prochain, évidemment, il va sans dire que vous allez mettre les couleurs de votre propre marque ici. Vous le faites avec votre propre marque. Mais si vous suivez simplement mon exemple de marque, vous suivrez le processus la même manière que moi. Et maintenant, nous pouvons cliquer sur Enregistrer pour enregistrer ces couleurs. Et si nous faisons défiler l'écran vers le haut, nous pouvons voir comment ces couleurs interagissent dans une petite maquette ici Même s'il ne s'agit pas d'une vraie maquette de site Web, est plutôt belle la combinaison de ces couleurs D'accord, c'est tout pour configurer les paramètres de marque. Nous allons évidemment lier ce logo et ces couleurs à notre thème via l'éditeur de boutique en ligne, mais cela dépendra du thème que nous allons utiliser. La bonne nouvelle en ce qui concerne la configuration des paramètres de marque est qu'elle est cohérente dans toutes les boutiques Shopify, alors que la partie que nous allons aborder ensuite, qui consiste à choisir votre thème puis à intégrer ces informations dans votre thème, varie d'un thème à Alors, sans plus attendre, maintenant que les paramètres de notre marque sont définis et que nos produits sont importés, passons au canal de vente de la boutique en ligne et commençons à travailler sur notre thème 6. Choosing a theme: Très bien, nous avons maintenant atteint la partie du cours où il est temps de choisir notre thème Shopify Et une série de facteurs entrent compte dans cette décision. Le premier facteur, je dirais, est le prix. Donc, si vous n'avez aucun budget, vous devrez évidemment choisir un thème gratuit, ou vous devrez utiliser cette fonctionnalité. Où se trouve-t-elle ici où vous pourrez écrire avec la magie de Shopify, une invite, et générer un thème en fonction de votre demande Je ne le recommanderais pas nécessairement. Vous pouvez le tester et voir s' il produit un bon résultat, mais j'ai trouvé que les résultats ne sont pas étonnants. Et il vaut mieux utiliser un thème qui a été créé par de vrais développeurs et non par l'IA, moins au moment de l'enregistrement. Et donc, vos options, évidemment, vous en avez déjà une installée sur votre boutique Shopify Donc, si je clique sur Modifier le thème ici, je vais accéder à l'éditeur de boutique en ligne pour le thème Horizon. Ce thème Horizon est donc sorti depuis un an ou deux en tant que thème par défaut sur les boutiques Shopify Et comme vous pouvez le constater, nous n'avons pas à payer pour cela. Il s'agit d'un thème gratuit. Lors de l'évaluation des thèmes, je souhaite que vous passiez en revue différents modèles et que vous consultiez la liste des sections. Donc, une petite introduction à l'éditeur de boutique en ligne. Nous en avons parlé un peu dans mon précédent cours Skillshare sur la configuration de Shopify Store Mais en gros, votre vitrine Shopify n' est qu'un ensemble de modèles, et nous pouvons accéder à ces différents modèles ici, en haut au Donc, comme vous pouvez le voir, le modèle actuel sur lequel je suis est la page d'accueil. Mais si je clique dessus, je peux choisir d'autres modèles à regarder. Les pages principales que nous allons examiner sont donc la page d' accueil et la page du produit. Et comme vous pouvez le voir, il y a un sous-menu ici car je peux créer des modèles alternatifs pour le modèle de produit, ou je peux simplement utiliser le modèle de produit par défaut. Nous allons simplement utiliser le modèle de produit par défaut Je vais donc cliquer dessus et vous verrez que cela me fait passer à un aperçu de ce modèle. Et puis cela dépend aussi du produit que nous faisons passer par ce modèle. Donc, ce que je peux faire, c'est modifier le produit que je cherche grâce à ce modèle. Supposons que notre produit principal, poudre Marcher de première qualité, nous puissions voir comment notre modèle interagit avec un autre produit d'entrée OK ? Revenons à la page d'accueil. Et dans cette zone de modèle, vous pouvez voir qu'il y a un bouton pour ajouter une section. Donc, ce que vous allez vouloir faire , c'est examiner les différentes options lorsque vous évaluez un thème dans la liste des sections. Avec Horizon, en fait , la liste est assez longue. Encore une fois, si vous n'avez pas de budget et que vous voulez juste un thème gratuit, Horizon convient parfaitement. Mais jetons un coup d'œil à certaines des autres options de la boutique de thèmes Shopify Si je vais ici pour les thèmes gratuits populaires, vous pouvez voir qu'il y a d'autres thèmes gratuits ici. Mais visitons l'ensemble de la boutique de thèmes. C'est bon. Maintenant, comme vous pouvez le voir ici, certaines de celles qui se classent au sommet, les plus populaires un prix de 300 à 400$ Impulsion. Celui-ci est l'un des plus populaires. Je l'ai utilisé sur divers projets, mais son prix sera élevé. Cela étant dit, si vous deviez personnaliser votre propre thème, cela coûtera probablement plus de 400 USD. Je crois donc que vous pouvez obtenir un bon pour Buck avec des thèmes premium, et je recommande d'acheter un thème premium à tous ceux qui ont pas les moyens de se payer un site Web de 5 000 à 10 000 dollars. Vous pouvez obtenir une tonne de travail de développement dans un thème très modulaire avec lequel se payer un site Web de 5 000 à 10 000 dollars Vous pouvez obtenir une tonne de travail de développement dans vous pouvez travailler dans l' éditeur de boutique en ligne ici sur Shopify Vous pouvez donc consulter la boutique de démonstration sur l'un de ces thèmes Shopify, et vous pouvez jouer avec C'est dans ce petit contenant, mais je peux l'étendre et vous pouvez voir ici qu'il y a beaucoup plus de choses en termes d'animation, et c'est juste très net et haut de gamme. Il y a une tonne de sections et un très bon méga menu. Certains de mes clients ont donc déjà utilisé ce thème premium. Mais évidemment, il y en a sur le Shopify Theme Store. Nous recommençons à parcourir tous les thèmes, il y en a plus de 1 000. Il est donc assez difficile de tous les examiner et de les évaluer. C'est presque impossible. Vous voudrez donc utiliser certains de ces filtres ici. Je ne pense pas qu'on puisse filtrer par prix. Il ne peut être que gratuit ou payant. Supposons donc que votre budget soit nul, vous allez examiner ces 24 thèmes différents. Vous pouvez évidemment choisir un thème en dehors de la boutique de thèmes de Shopify, mais je ne le recommanderais tout simplement pas Tous ces thèmes de la boutique de thèmes sont soumis à une liste de contrôle stricte afin d'être approuvés pour exister sur cette boutique de thèmes Je vous recommande donc vivement de passer par le Shopify Theme Store Peut également filtrer selon l'industrie. Alors, quel serait le nôtre ? Je suppose que ce serait de la nourriture et des boissons, ici. Vous pouvez donc filtrer en fonction de différents secteurs, petites tailles de catalogue et de différentes fonctionnalités. Mais vous pouvez également utiliser l'IA pour vous aider. Pour en revenir à notre ami Google Gemini, je vais vous dire : aidez-moi à choisir un thème Shopify pour ma séance de marque premium MachaPowder Évidemment, remplacez-le par votre propre marque si vous le faites pour votre propre marque. D'accord, vous pouvez donc voir ici qu'il recommande quelques thèmes ici. J'ai déjà entendu parler de prestige. Jetons un coup d'œil au prestige. Encore une fois, comme beaucoup de choses abordées dans ce cours, il s'agit d'un processus un peu subjectif, qui dépendra en grande votre propre marque et de vos préférences, mais nous pouvons voir la démonstration du prestige ici. C'est un peu plus tendance. Je ne sais pas si cela a nécessairement sens pour notre marque Macha, mais ce que nous pouvons faire, c'est que sur n'importe lequel de ces thèmes, nous pouvons cliquer sur Tri Theme Et ce que Tri Theme nous permet de faire, c'est de commencer à créer notre vitrine avec ce thème sans avoir à le payer Maintenant, bien sûr, sans le payer, nous n'allons pas obtenir beaucoup de fonctionnalités, par exemple, nous ne pouvons pas réellement le publier sur notre boutique. Donc, comme vous pouvez le voir ici, il va être installé dans ma bibliothèque de thèmes à titre d'essai. C'est donc fait maintenant. Et généralement, il y a un bouton ici pour publier Je peux donc déplacer ce thème dans notre bibliothèque de thèmes, qui est actuellement un thème d'aperçu dans le thème principal, et donc le publier sur le site Web. Nous ne pouvons pas le faire avec un thème d'essai. Nous ne pouvons que cliquer ici pour acheter. Et si nous voulons modifier le code, nous ne pouvons pas réellement modifier le code Eva. On dirait que nous pouvons prévisualiser le thème. C'est sympa. OK. Et vous pouvez voir que cela figure déjà dans notre logo. Nous ne pouvons tout simplement pas le publier ou modifier le code. Ce sont là les deux principales limites. Mais nous pouvons passer le reste de la classe à construire notre vitrine sur un thème comme celui-ci sans avoir à l'acheter, sauf si nous sommes prêts à lancer cette vitrine, d' Vous pouvez donc voir ici que mon logo est déjà préchargé. Donc, si je vais dans mon en-tête ici, l'image extrait le logo par défaut depuis les paramètres de notre marque. Mais disons simplement, par exemple, que nous n'avons pas configuré ce logo dans les paramètres de notre marque, nous pouvons toujours le lier directement ici dans l'éditeur de la boutique en ligne. Cela ne pose aucun problème. Je vais cliquer pour connecter une source dynamique cependant cliquer pour connecter une source dynamique et connecter le logo de notre marque juste pour être plus clair ici. OK. Il permet également de parcourir certaines navigations. Nous travaillerons sur les navigations un peu plus tard dans le cours Mais si nous examinons les paramètres généraux de notre thème ici, nous pouvons commencer à intégrer certaines des couleurs et de la typographie de notre marque Je vais d'abord commencer par la typographie. Et pour le corps du texte, polices de notre marque sont, comme indiqué ici, Inter et Tenor Sands Notre police de caractères sera donc Inter. Je vais donc le composer immédiatement. Ensuite, je vais aller jusqu'à la police de notre titre. Et selon notre document de marque, ce sera Tennis Sands, non ? Alors mets ça dedans. Et vous pouvez voir que cela n'a pas l' air très différent, mais j'espère que vous conviendrez que les polices vont bien ensemble. Très bien, nous allons maintenant mettre en couleur les thèmes Shopify modernes ont désormais des schémas de couleurs Vous sélectionnez donc un schéma, puis il intègre toutes les variables de couleur de ce schéma. Et ce que cela vous permet de faire, c'est qu'au lieu de définir des couleurs individuelles pour chaque section, vous pouvez créer un schéma, et vous pouvez échanger ce schéma sur une section donnée. Il réduit donc simplement les options de sorte qu' au lieu d'ajouter tout un tas de variables de couleur dans chaque section, il vous suffit de sélectionner un schéma, puis de configurer les variables de couleur sur l' un de ces schémas Je vais donc ajouter un nouveau schéma, et vous pouvez voir ici que nous avons une, deux, trois, quatre, cinq, six, sept variables de couleur différentes à ajouter. Nous pouvons donc mettre ici les couleurs de notre marque. Il y a ici une certaine habileté à déterminer ce qui va où. Pour nos couleurs d'arrière-plan, nous voulons évidemment quelque chose de légèrement blanc cassé, et pour les couleurs de texte, nous voulons quelque chose de légèrement plus foncé. OK ? Donc, si je regarde le graphisme des couleurs de notre marque ici, je l'ai déjà ouvert, vous pouvez voir ici que nous avons déjà intégré un certain blanc cassé ici. Nous pouvons plutôt changer cela et ajouter une couleur spécifique ou nous pouvons ajouter une valeur dynamique et introduire, par exemple , notre couleur contrastante secondaire, afin qu'ils lient la variable réelle à notre couleur d'arrière-plan générale. Ensuite, en termes de corps de texte, nous pouvons utiliser notre couleur principale. Ces sections n'ont pas été modifiées pour utiliser notre nouveau schéma de couleurs, nous devrons donc le faire un peu plus tard. Mettons-les maintenant. Passons à l'arrière-plan de nos boutons, qui est généralement l'inverse de ce que nous avons configuré ici. Je vais donc faire en sorte que ce soit essentiellement l'inverse. Je vais donc configurer l'arrière-plan pour qu'il soit le vert vif de la marque, puis je vais définir le texte pour qu'il soit la couleur primaire contrastante. Et puis ici, je pourrais utiliser la couleur secondaire deux, et la contraster avec la couleur contrastante secondaire. D'accord, nous devrons peut-être le modifier et le peaufiner au fur et à mesure que nous commencerons à créer nos sections Mais passons à cette section de diaporama, par exemple, et y a-t-il une option pour couleurs ? Il ne semble pas en avoir. Mais passons, par exemple, à la collection en vedette ici, puis nous pourrons la remplacer notre nouvelle palette de couleurs cinq. Et comme vous pouvez le voir, ça a l'air bien, mais nous avons un petit problème avec le bouton. Permettez-moi d'y revenir, passons au texte de notre bouton ici. Et nous n'avons pas nécessairement besoin d'utiliser exactement ces couleurs, donc je peux simplement les supprimer, les laisser en blanc. Vous savez, je voudrais peut-être utiliser l'autre couleur contrastante secondaire. OK, laisse-moi enregistrer ça. Et je crois que le texte utilisé ici en couleur primaire n'est pas assez contrasté Je vais donc simplement sortir de cette sélection et rendre le vert un peu plus foncé. Vous savez, c'est un système flexible. Il n'est pas nécessaire de respecter totalement le code couleur exact. Nous pouvons rendre cette couleur un peu plus foncée, et je pense que cette palette de couleurs fonctionne mieux. OK. Bien, maintenant que notre thème est décidé, passons à l'étape suivante, qui consiste à ajouter des sections. Et si cela ne fonctionne pas pour ce thème en particulier, nous pouvons toujours changer de thème. Mais maintenant, en utilisant le prestige, commençons à configurer notre vitrine en utilisant les sections disponibles dans le thème que nous avons choisi 7. Page d'accueil: Bien, nous voici donc dans l' éditeur de boutique en ligne, personnaliser le thème du prestige Comme mentionné dans la dernière vidéo, les options de personnalisation du thème dépendent beaucoup du thème que vous choisissez. Cet éditeur de boutique en ligne sera le même quel que soit le thème que vous utiliserez, mais les options sections que vous pouvez ajouter et les options au sein de ces sections seront limitées ou activées par le thème. OK ? Nous allons donc passer au thème du prestige, mais vous pouvez en principe suivre n'importe quel thème. Les sections et les paramètres seront simplement différents. Une chose que vous pouvez remarquer ici, c'est que la taille de mon écran est si étroite que cette icône de hamburger apparaît dans le menu mobile Si je passe en plein écran, vous pouvez voir que cela s'étend aux éléments de menu. Je ne veux pas que cela apparaisse comme ça lorsque je personnalise la page d'accueil, donc je vais juste faire un zoom arrière, et cela devrait nous amener nos éléments de menu ici. OK. Maintenant, avec ce thème particulier, nous pouvons voir différents groupes de sections sur la gauche ici. Nous avons donc notre groupe d'en-têtes, notre groupe de superposition et notre groupe de pieds de page en plus du groupe situé sous le modèle Juste pour expliquer cela un peu avant de regarder les sections du modèle lui-même. Dans Shopify, nous pouvons créer nos propres groupes de sections qui s'appliquent à chaque modèle, et celles-ci sortent du groupe de modèles normal ici Dans le passé, il ne s'agissait que d'une section d' en-tête et d'une section de pied de page Mais pour que ces zones soient un peu plus personnalisables et permettent d'y ajouter des sections supplémentaires, Shopify a créé ce que l'on appelle groupes de sections il y a quelques années, et maintenant un groupe de pieds de page et un groupe d'en-têtes qui seront assez cohérents sur tous les thèmes Mais ce groupe superposé est quelque chose d'assez propre au prestige Tout ce que vous devez savoir ici, c'est que ces groupes apparaîtront quel que soit le modèle que vous consultez, mais que les sections situées sous cet en-tête de modèle ne s'appliquent au modèle que nous examinons. Nous examinons donc la page d'accueil ce moment, telle que nous pouvons le voir ici. Ces sections sont donc affichées sur notre page d'accueil. Comme vous pouvez le constater, il y a une tonne de sections ici. Ce qui se passe lorsque vous installez un thème depuis la boutique de thèmes en mode d'essai, c'est que vous allez avoir tout un tas de sections de démonstration ajoutées à la page d'accueil, ce qui est un peu ennuyeux. Il présente au moins toutes les fonctionnalités du thème ou au moins un ensemble de fonctionnalités, mais ce n'est pas ce que nous voulons Nous voulons réellement créer notre vitrine à partir de zéro. Et nous pouvons toujours les sélectionner en ajoutant une section via ce menu. Je vais donc en supprimer autant que possible, ce qui me permettra de les supprimer toutes, sauf une, car nous avons besoin d' au moins une section dans notre modèle à tout moment. Vous pouvez donc voir ici que si je fais défiler la page vers le bas, nous n'avons plus aucune de ces sections, et pour cette section de diaporama en particulier, nous ne pouvons pas la supprimer car c'est actuellement la seule section de notre modèle Maintenant, comme mentionné dans la leçon de moodboard, presque tous les sites de commerce électronique auront une section dédiée aux héros sur leur C'est donc une décision de conception assez facile à prendre. Nous voulons trouver une section qui soit une section de héros que nous pouvons ajouter en haut de notre modèle. Ce que nous allons faire, c'est dans ce groupe de modèles ici, cliquez sur Ajouter une section. Et maintenant, nous pouvons voir tout un tas de sections dans différents groupes comme celui-ci. Nous pouvons élargir et réduire ces groupes dans le cadre du thème du prestige en particulier. Donc, cette sélection de différentes sections dépendra du thème que vous personnalisez Donc, dans le thème du prestige, nous avons toutes ces différentes options. Et lorsque nous survolons les différentes sections, nous pouvons évidemment lire le nom Mais sur la droite, si un préréglage a été défini, nous pouvons voir un aperçu visuel de ce à quoi cette section pourrait ressembler. Alors que nous faisons défiler le curseur sur ces différentes sections, vous pouvez voir à quoi elles pourraient ressembler dans votre boutique avec du contenu réservé OK ? Maintenant, ce diaporama est quelque chose que nous pouvons utiliser en tant que héros, mais je vais choisir parmi cette liste d' autres bannières Regardons cette image avec un bloc de texte. Et ce que je vais faire, c'est ajouter à l'image que j'ai préparée plus tôt, notre section consacrée aux héros du style de vie et de danse Je vais donc cliquer dessus et le faire glisser dans mes fichiers ici, puis appuyer sur OK. Ensuite, je vais évidemment vouloir modifier le texte ici, mais permettez-moi de vérifier que je peux réellement déplacer cette case parce que je ne la veux pas ici, au centre. Donc, en fait, je veux me débarrasser de cet effet parallèle. OK, c'est mieux. Mais vous pouvez voir ici que cette boîte masque en quelque sorte le contenu Donc, à moins qu'il ne soit possible de la déplacer vers la gauche ou vers la droite, je ne pense pas que ce soit la section idéale pour notre section de héros. Donc, ce que je vais faire, c'est regarder cette autre image ici avec une superposition de texte Nous n'en avons pas vraiment d'aperçu, mais nous pouvons le voir ici maintenant lorsque nous l'introduisons avec les données prédéfinies. Et vous pouvez voir ici que cela pourrait en fait fonctionner un peu mieux. Je vais donc configurer ma palette de couleurs ici en fonction de la palette de couleurs de notre marque, puis je vais cliquer sur Sélectionner ici dans le champ de l'image pour afficher l'image que nous avons créée dans le précédent. OK. Je pense que cela va être plus beau, même si le texte n'est pas la bonne couleur en termes de contraste Donc, ce que nous pouvons faire, c' est qu'il y a un paramètre de superposition ici Donc, comme vous pouvez le voir, il s'agit d'une couche foncée. Ce que nous pourrions faire, c'est mettre une superposition plus lumineuse comme celle-ci, puis peut-être augmenter l'opacité de la superposition pour créer plus de contraste avec le Je vais le laisser en noir, et je vais changer le schéma de couleurs pour le rendre blanc. En fait, je trouve que ça a l'air un peu mieux. Mais à chacun ce qui vous convient le mieux, vous pouvez évidemment le faire. Ensuite, je vais ajuster mon opacité à un niveau qui, à mon avis, ne masque pas trop l'image tout en créant un certain contraste avec le texte Et pour ce qui est de personnaliser les éléments réels de cette section, je peux examiner les blocs de la section Permettez-moi de supprimer ces autres sections maintenant que j'en ai décidé en tant que héros. Donc, comme vous pouvez le voir ici, ça va être beau en tant que héros. Je peux personnaliser d'autres éléments, comme le fouet du contenu et la position du contenu, afin de pouvoir le placer en haut à gauche si je le souhaite Je peux le mettre en bas à droite si je le voulais. Ça a l'air sympa, tant que c'est au-dessus du pli, mais je veux vraiment que le texte soit au-dessus du pli. Je vais donc le laisser au centre. Ensuite, je vais vouloir personnaliser ce texte. Comme vous pouvez le voir ici, il y a deux blocs dans cette section, et je peux cliquer ici pour ajouter d'autres blocs. Cette section permet donc de créer un sous-titre. Liquid signifie simplement code personnalisé, nous pouvons donc ajouter du code personnalisé. Nous pouvons ajouter un bouton. Je pourrais ajouter un bouton ici , puis évidemment le réorganiser , pour qu'il soit en bas Ensuite, je vais vouloir modifier la copie. J'ai donc une copie du document de mon site Web ici. Laisse-moi juste ouvrir ça. Et puis, en haut, je peux voir un petit titre, donc je vais le copier, le mettre ici Ensuite, pour le paragraphe, je vais prendre ce paragraphe sous le titre et le mettre ici, n'est-ce pas ? Et puis pour le texte du bouton, nous devons également lier ce bouton à quelque part, évidemment. Peut-être que je dis simplement « découvrez la différence entre les séances » ou ce que vous voulez ici, puis je pourrai simplement créer un lien vers notre boutique ou notre collection, ou je pourrais créer un lien direct vers notre produit principal La poudre de marcha de première qualité, ce que je veux ici. Et je peux également personnaliser la couleur du bouton. Je peux le remplacer par un plan. Je vais le rendre solide ou le maintenir solide. Et puis la couleur de fond, peut-être que j'utilise la couleur principale de ma marque. vais passer directement aux méta-objets ici, mais je peux cliquer sur ce chevron ici pour revenir à notre marque, puis essayons d'abord la couleur primaire Je pense que c'est une couleur trop audacieuse. Permettez-moi donc de le remplacer par une couleur secondaire. Et puis, bien sûr, je veux que le texte soit d' une autre couleur blanche pour le contraste. OK. J'aime donc le look. Si nous voulons le voir sur différentes tailles d'écran, nous pouvons accéder à ces icônes ici. Donc, si je clique sur plein écran, cela masquera la barre latérale, puis nous la verrons sur un écran un peu plus large. Et puis si je clique sur mobile, on peut voir à quoi ça ressemble sur mobile, ce qui est assez serré. se peut donc que nous souhaitions mettre à jour un peu nos paramètres ici. Donc, ce que je pourrais faire, c'est modifier la taille de l'image, du ratio d'origine au format grand. Ajuster l'écran. Donc ça a l'air beaucoup mieux sur mobile, et puis ça ne va pas trop mal sur ordinateur Eva. Cela nous donne donc le meilleur des deux mondes, je pense, en termes d'utilisation de la même image de héros sur ordinateur et sur mobile. Nous obtenons de bons résultats en le faisant. OK, c'est donc notre première section. Nous pouvons même le renommer héros si nous voulons le rendre un peu plus clair Et avec l'ajout de notre section sur les héros, ajoutons d'autres sections. Maintenant, je vais aller un peu plus vite maintenant que nous savons comment configurer au moins une section, et maintenant il ne reste plus qu'à décider quelles autres sections afficher sur notre page d'accueil et à les configurer. Nous allons donc cliquer sur Enregistrer à ce sujet et passer aux sections suivantes. Donc, pour la première section de la page d'accueil, ce sera généralement toujours une section réservée aux héros. C'est donc une évidence. Mais maintenant, nous devons décider ce que nous voulons voir d'autre sur notre page d'accueil. Et pour inspirer cette décision, nous pouvons nous référer à notre moodboard. Et découvrez ce que font les autres sites Web que nous aimons. Mais nous devons également faire correspondre cela avec les sections disponibles dans le thème que nous avons choisi. Nous sommes donc un peu limités aux sections disponibles dans notre thème ici, qui dans ce cas est le prestige. Maintenant, bien sûr, si vous codez votre site Web sur mesure, vous pouvez lui donner l'apparence que vous souhaitez et y intégrer les sections de votre choix. Et j'aborderai certaines des options à la fin de ce cours sur la façon de procéder. Mais pour l'instant, sans utiliser d'IA ni de code, en utilisant simplement la méthode standard de Shopify, nous devons examiner quelles sections sont disponibles dans la version actuelle. Mais apparemment, je n'ai pas vraiment de moodboard, et j'ai déjà une idée en tête de ce que je veux créer Je vais simplement parcourir cette liste de blocs et voir ce qu'il est judicieux d'ajouter. Un formulaire de contact sur la page d'accueil, qui n'est pas particulièrement typique pour une marque de cette nature. Si j'ai une newsletter, je peux enregistrer inscriptions à la newsletter si j'ai une sorte d'aimant à recueillir auprès des gens. Mais je pense qu'il est assez courant de présenter certains produits sur notre page d'accueil. Et nous pouvons le faire en utilisant ce que l'on appelle une collection en vedette dans Shopify ou, dans ce cas, une section de collections en vedette Je vais donc cliquer dessus et cela me permet d'apporter une certaine collection ou un ensemble de collections. Dans le cas de celui-ci, nous pouvons donc ajouter plusieurs collections différentes. Par défaut, il n'y en a qu'une, mais pour cette section en particulier, nous pouvons ajouter plusieurs collections. Donc, ce que je vais faire, c'est cliquer sur ce bloc pour accéder à la collection, et comme vous pouvez le voir ici, nous pouvons lier une collection de notre boutique, comme nous n'en avons qu'une parce que nous avons une petite gamme de produits, je vais simplement aller sur Link Shop A. C'est la limite de produits à montrer, mais apparemment nous n'en avons que quatre sur notre boutique Nous n'en montrerons que quatre. C'est donc le maximum qui affichera cette section. Ensuite, nous pouvons mettre un titre pour cette collection, en gardant à l'esprit que nous pouvons mettre plusieurs collections ici Je pourrais donc ajouter un en-tête facultatif ici pour la boutique A. Comme vous pouvez le voir, ci-dessous, si vous regardez attentivement, le titre par défaut est le titre de la collection Donc, si je laisse ce champ vide, le titre de la section est de toute façon Tout acheter, donc cela ne changera pas le texte. Permettez-moi de remplacer cela par la gamme de produits Al, non ? Et puis cela va changer le texte ici. Et puis je ne veux pas de bouton Tout afficher , car il s'agit littéralement de tous les produits que nous avons sur notre boutique. Et puis, si je passe aux paramètres de la section, il y a cet autre petit bout de texte ici, le sous-titre, et je vais simplement le supprimer complètement Généralement, avec les sections Shopify, si vous supprimez complètement le texte dans le champ, l'espace où ce texte était destiné sera ce texte était si le thème est créé correctement, c'est-à-dire Et comme la dernière fois, nous voulons examiner nos différentes options de personnalisation ici pour trouver des opportunités de rendre cela encore plus beau. Évidemment, nous voulons qu'il utilise notre propre palette de couleurs, donc je vais le définir sur le schéma cinq, et c'est plutôt joli, en fait. Si vous avez l'une de ces marques haut de gamme dont vous n'indiquez le prix ni le titre, vous pouvez l'activer. Je ne vais pas le faire dans ce cas. Nous pouvons empiler les produits. Je crois donc que cela est lié au mobile, je vais donc passer à l'affichage mobile ici. Si je le désactive, c'est une sorte de conteneur défilant à débordement Mais si je passe à des produits empilés, vous pouvez voir que je peux avoir ici une grille de deux colonnes ou une simple grille d'un produit par ligne. Cela dépend donc de vos préférences personnelles. J'aime bien celui-ci, donc je vais m'en tenir là. Et puis cela sera pertinent ici, car nous n'avons que quatre produits. Donc, à moins que nous ne changions cela pour, par exemple, deux pour ordinateurs de bureau, ce qui est tout simplement trop important, nous n'aurons pas à nous lancer dans plusieurs gammes avec une gamme de produits composée de quatre produits seulement. OK. Ce sont donc nos options dans la section elle-même, mais dans les paramètres de blocage, nous pouvons également lier le bouton que nous venons de supprimer ici à quelque chose. Évidemment, si nous avons une vue ou un bouton, il s'agit par défaut de l'URL de la collection, mais nous pouvons en fait créer un lien vers un autre endroit. Je vais juste supprimer complètement le bouton. Je ne pense pas que cela ait du sens, et c'est tout pour notre section consacrée aux collections en vedette. Je pourrais même le renommer en collection vedette, d'accord ? Ou je pourrais l'appeler notre gamme de produits. OK. Cela ne change pas le nom des sections ici, mais uniquement l'instance de notre section qui est ajoutée au modèle ici. OK, donc je vais appuyer sur Enregistrer là-dessus. C'est notre deuxième section de page d'accueil créée. Très bien, supprimons la barre latérale et voyons ce que nous avons obtenu jusqu'à présent . J'aime bien ça. Nous reviendrons à l'en-tête un peu plus tard, mais en ce qui concerne les sections spécifiques à la page d'accueil, tout va bien jusqu'à présent. Je vais en ajouter deux autres , puis nous terminerons et examinerons le modèle suivant. Donc, si vous vous souvenez de la leçon de moodboard, c'est qu'il semble que toutes les autres marques de matcher souligné les avantages de leur matcher Et une autre chose que j'ai aimé, ce sont ces icônes ici. J'ai donc généré mes propres icônes que vous pouvez trouver dans le dossier des icônes, et chacune de ces icônes représente un avantage différent. Donc antioxydant, si j'en réduis simplement la taille, santé du cerveau, énergie calme et désintoxication En fait, j'en ai un autre ici, mais je ne l'utiliserai probablement pas. Je pense que quatre, c'est probablement suffisant. avez quelque chose qui ressemble à une liste de points, vous pouvez utiliser quelque chose comme des icônes pour enrichir un peu cette liste, d'accord ? Donc, si nous revenons à notre modèle ici, trouvons une section que nous pouvons utiliser pour mettre en évidence ces avantages. Je vais donc cliquer sur Ajouter une section dans notre gamme de produits, et examinons les différents groupes de sections. En utilisant les titres de ces différents groupes pour m'informer. Nous ne cherchons pas de bannière. À la recherche d'appels à l'action, peut-être à la recherche de contenu. Nous n'allons donc pas publier certains articles de blog au moins à ce stade, ni du contenu sous forme d'onglets, ni une image avant/après, mais nous pouvons trouver quelque chose comme cette section à plusieurs colonnes ici tant que nous pouvons ajouter une image Je vais donc l' apporter ici. Et examinons les paramètres de chaque bloc. Oui, nous pouvons ajouter une image. Nous pourrions donc éventuellement utiliser cette section à plusieurs colonnes. Permettez-moi de jeter un autre coup d'œil aux autres sections que nous pourrions avoir à notre disposition. Et dans le groupe Confiance et preuve sociale, nous avons cette section intitulée Texte avec icônes. C'est exactement ce que je recherche. Je vais donc l'apporter ici. En fait, nous pouvons voir que nous l'utilisons ici avec les icônes intégrées au thème. Ce thème est évidemment livré avec quelques icônes, comme vous pouvez le voir ici. Nous pouvons ajouter nos propres icônes personnalisées. Donc, ce que je vais faire, c'est ajouter toutes ces icônes dans ce téléchargeur d'images ici Et ce que cela va faire, c'est les télécharger tous en une seule fois. Mais une fois qu'ils seront téléchargés, je vais évidemment les sélectionner un un pour mettre en évidence chacun de ces avantages. OK ? Je vais donc évidemment avoir besoin de l'associer à une copie du site Web. Revenons donc au document de copie de mon site Web ici. Et voici quelques points que nous voulons aborder sur notre site Web : défense radicale, rituel soutenu, étincelle métabolique et désintoxication éclatante Nous pouvons associer nos icônes à ces avantages. Donc, la première défense radicale, je vais regarder ici. Cette icône semble correspondre parfaitement. Je vais donc ajouter cela ici, changer cela en défense radicale, puis prendre le sous-titre du document de copie de notre site Web Le fouet pour nos icônes plus détaillées est évidemment bien trop petit ici, donc je vais en parler un peu plus En fait, je pense que je veux aller jusqu'à la valeur maximale de 64. Et puis nous avons également cette option pour l'icône mobile WIP Nous voulons absolument que cela soit également plus important sur mobile. Je vais donc aussi le mettre jusqu'à 64. Et comme vous pouvez le voir ici sur mobile, nous allons le transformer en une sorte de slider avec des animations entre les diapositives OK. L'avantage d' utiliser un thème standard et non codage personnalisé est que nous n'avons pas à nous soucier de le coder pour plusieurs tailles d'écran. Ce thème devrait fonctionner automatiquement sur mobile sans que nous ayons à le consulter, mais il devrait également y avoir des options disponibles dans le thème pour personnaliser ces options Comme vous pouvez le voir ici, je choisis par défaut le schéma 1. Je vais donc vouloir modifier cela pour notre palette de couleurs. Si vous voulez éviter complètement cette étape en changeant le schéma de couleurs de chaque section nouvellement créée, nous aurions pu configurer nos couleurs ici. Dans le schéma 1. En fait, il existe une option ici pour avoir le schéma de couleurs par défaut. Mettons-le donc à cinq, et cela nous permettra à chaque nouvelle section que utiliser par défaut le jeu de couleurs cinq, qui est notre propre jeu de couleurs, nous créons. OK ? Quelles autres options avons-nous dans les paramètres de la section ici avant de passer à la personnalisation des blocs Section séparée avec bordure. Il est donc difficile de le voir avec ces lignes bleues en ce moment. Mais il y a une frontière de chaque côté. Je pense que ça a l'air bien pour le moment, donc je vais laisser ça Et puis cette autre option pour empiler sur mobile, vrai, mais elle n'est pas aussi agréable à empiler . Je vais revenir en arrière. Et oui, je pense que c'est tout pour les paramètres généraux de la section. Pour l'instant, je vais simplement composer le reste de mes icônes. Je vais donc aller ici et quel a été le prochain rituel soutenu, d'accord ? Donc, celui-ci parle d'une énergie calme et concentrée qui dure 4 heures. Je pourrais même légèrement augmenter ce zoom pour vous. On dirait que je ne peux pas zoomer, donc je vais juste agrandir en termes de taille de police. OK, un rituel tellement soutenu, une énergie calme et concentrée qui dure des heures. Alors, qu'est-ce que ce serait ? Une énergie calme, probablement. Très bien, laisse-moi y mettre celui-ci. Encore une fois, je voudrais composer les icônes en forme de fouet, remplacer le contenu ici. Et c'était quoi ? Rituel soutenu ? Je vais juste le taper moi-même. C'est bon, cool. Et puis la troisième, ici, qu'avons-nous trouvé chez Metabolic Spark ? Donc, une stimulation naturelle à base de plantes pour votre métabolisme. Donc, cela stimule le métabolisme. Je crois que j'en ai un pour le métabolisme. Mettons-le dedans. Encore une fois, agrandissez-les beaucoup, remplacez le contenu, l'étincelle métabolique, puis une autre que je peux ajouter ici pour une désintoxication éclatante, riche en chlorophylle cultivée à l'ombre pour aider votre corps à filtrer et à nettoyer naturellement. OK ? C'est donc quelque chose qui parle de nettoyage et de désintoxication Je pense donc que celle-ci est la bonne icône pour cela. Encore une fois, il faut augmenter la taille de l'icône, remplacer cet en-tête et remplacer ce texte ici. D'accord. Jetons-y donc un coup d' œil en plein écran, puis sur mobile, ça a l'air plutôt beau, mais il manque un titre. Permettez-moi donc de revenir aux paramètres de ma section ici. Et malheureusement, il n'y a aucune option de titre dans cette section en particulier, ce qui me semble un peu bizarre, mais c'est vrai. Nous pouvons le présenter dans une autre section. Je vais donc cliquer sur Ajouter une section ici. Et dans de nombreux thèmes Shopify modernes, il devrait y avoir une section simplement appelée Rich Text, qui est une section flexible où nous pouvons introduire différents morceaux de texte à l'aide de blocs Comme nous pouvons le voir dans l'exemple, nous avons un sous-titre, un titre et un paragraphe Je vais supprimer le sous-titre et le paragraphe. vais mettre ce texte ci-dessus avec des icônes, et je vais juste l' utiliser uniquement pour son titre. Donc, même s'il s'agit d'une nouvelle section, elle utilise toujours l'ancien schéma, je suppose, parce que je n'ai pas encore cliqué sur Enregistrer. Faisons donc en sorte que ce schéma soit cinq, et celui-ci est un peu trop grand. Voyons donc si nous pouvons résoudre ce problème. Je vais supprimer cette section avec bordure, puis voyons voir, supprimer l' espacement vertical. OK, allons-y. Donc, tous les paramètres que nous pouvons personnaliser ici, le style du titre, le texte du titre. Et pour le titre ici, nous avons sur notre site web copy y seance marcha OK. Il s'agit donc plutôt des avantages du matcha en général, mais en le liant à notre marque de Seance Marcher, nous pouvons les mettre ici Et maintenant, jetons-y un coup d'œil. OK, donc notre section ci-dessous a toujours cette bordure, ce qui n'a pas vraiment de sens avec le titre ici. Je vais donc supprimer une section séparée avec une bordure, ce qui permettra à cette section de titre de mieux se fondre dans notre section d'icônes. OK. Très bien, donc techniquement, deux nouvelles sections ici. Je vais cliquer sur Enregistrer à ce sujet, et passons à une dernière section. Comme je l'ai dit, il s'agit d'une toute nouvelle marque, nous n'avons donc pas une tonne de critiques. Je vais donc tirer un meilleur parti des critiques que nous avons réellement, et je vais plutôt apporter des témoignages Je crois donc qu'il existe en fait une section consacrée aux témoignages dans le domaine du prestige, si je me limite à la confiance et aux preuves sociales Je peux donc simplement cliquer sur les témoignages ici. Parfois, vous trouvez qu' il existe une section dans votre thème qui correspond exactement à ce que vous essayez de réaliser. Et c'est le meilleur scénario, mais il faut parfois utiliser les sections existantes pour créer quelque chose en particulier. Je ne sais donc pas pourquoi, mais il utilise une palette de couleurs différente ici. Réglons-le selon notre palette de couleurs du schéma 5. Et pour l'en-tête de section, je vais juste ajouter ici les commentaires de nos clients. Évidemment, le reste du contenu est facultatif, je vais donc laisser ce champ vide. Ensuite, nous pouvons passer ici à ces différents témoignages Comme vous pouvez le constater, nous avons du contenu réservé ici Partagez ce que vos clients disent de vos produits, de votre service client ou de vos frais d'expédition. Supprimons-les donc. Revenez à notre liste de témoignages ici. Je vais aller chercher celui-ci auprès de Sara. Ensuite, dans le champ auteur, je peux mettre Sara. Et nous avons en fait des images de tous ces auteurs de témoignages Je vais donc aller ici. Et comme je l'ai fait pour les icônes, je vais toutes les télécharger en une seule fois, puis je vais les sélectionner de manière sélective au fur et à mesure que nous les plaçons dans différents champs. Donc, dans mon dossier clients, j'ai trois clients qui fournissent les témoignages Et je crois que Sarah M était la fille blonde ici. Nous pouvons donc apporter une photo d'elle. Et cela semble un peu étrange à ce stade, mais les images sont en fait des éléments de navigation. Donc, si je vais jusqu'ici et que j'ajoute la fille suivante, je ne sais pas laquelle est laquelle, mais cela n'a pas vraiment d'importance. Nous apportons un nouveau témoignage, revenons à son témoignage Elle peut être Maya, l'attraper, mettre son témoignage ici, prendre son nom, le mettre dans le nom de l'offre Et vous pouvez voir ici qu'ils servent de navigation pour les différents témoignages, d'accord ? Laisse-moi aller ici, sélectionner la dernière image. Cette fille peut être Ava, inscrivez son nom, mettez sa citation ici dans le contenu, et Wala, nous avons notre section de témoignages D'accord ? Donc, si je passe en plein écran, nous pouvons voir à quoi cela ressemble sur un écran un peu plus large. Et si nous passons au mobile, nous pouvons voir que nous obtenons cette navigation par slider avec les points Les navigations sont donc un peu différentes ici. Et encore une fois, examinons tout ce que nous pouvons faire pour rendre les choses un peu plus agréables. Il existe ici ce que l' on appelle un facteur de taille de police, nous permet de réduire la taille de la police. Je pourrais juste le réduire légèrement parce que vous ne voulez pas trop le réduire sur mobile, surtout si vos spectateurs s'ils appartiennent à une variété plus ancienne, auront du mal à le lire. La seule autre option que nous n'avons pas abordée ici est la largeur de l'image. Alors peut-être que nous jouons avec ça pour voir. Oui, je pense que nous pouvons l'agrandir un peu. Faisons donc 160 au lieu de 140. Pour chaque bloc de témoignages. J'ai accidentellement cliqué entre les blocs, ce qui a créé un nouveau bloc, donc j'ai simplement supprimé celui-ci Et je vais cliquer sur Enregistrer à ce sujet. Et jetons un coup d'œil à notre page d'accueil complète. Bien évidemment, je pourrais prendre le FEVA. Je pourrais ajouter d'autres sections de page d'accueil. Mais pour cette vidéo en particulier dans le cadre du cours Skillshare, je vais m'en tenir à ces quatre sections ou techniquement, à cinq sections si vous incluez le titre dans une section distincte Ici, vous pouvez le voir, nous avons notre section consacrée aux héros. Cela nous amène à la collection ou à un produit spécifique. Il présente notre gamme de produits avec les différents noms et prix Pourquoi seance Macha, les avantages de notre produit et quelques témoignages ici Si vous vous demandez d' où vient cette section de texte avec icônes, elle provient en fait du groupe de pieds. Donc, si vous voulez le supprimer ou simplement le masquer, vous pouvez le faire comme tel. Je pourrais juste le cacher pour le moment parce que oui, nous ne savons pas si nous pouvons offrir ces avantages. De même, en haut de l'en-tête, il se peut que nous ne soyons pas en train de compter à rebours avant une super vente. Donc, en fait, nous ne sommes pas en train de compter à rebours avant une super vente, donc je vais juste supprimer cela. Mais c'est une option. Si vous avez une vente à l'avenir, vous pouvez ajouter ce compte à rebours ou cette barre d'annonce au responsable du groupe, spécifiquement dans Prestige, d'accord. Mais pour l'instant, je vais simplement les supprimer, et voici notre page d'accueil actuelle. Comme vous pouvez le voir, avec de belles animations d'images défilantes. Et puis, si on regarde sur mobile, ça a l'air plutôt bien aussi. OK ? Donc, en termes d'importance de page, il y a probablement deux pages qui sont les plus importantes, la page d'accueil et la page du produit. Dans la vidéo suivante, nous allons donc passer à la page du produit. 8. Page produit: Dans la dernière vidéo, nous personnalisons la page d'accueil de notre boutique Shopify, mais nous allons maintenant passer à la page probablement la plus importante à optimiser dans notre vitrine Shopify, notre page produit Si je passe au sélecteur de modèles ici et que je sélectionne des produits, un nouveau menu s'ouvre et me donne toutes les options pour les différents modèles de produits D'accord ? Donc, contrairement à la page d'accueil, il n'y en a qu'une. Ce modèle ne s'applique donc qu' à une seule page. Si nous voyons ce chevron sur la droite, cela indique que l'un de ces modèles peut s'appliquer à plusieurs ressources, qu' il s'agisse d' un produit , d'une collection ou d'un article de blog, etc. Les pages de chacune de ces différentes ressources seront assez similaires. Ils passeront généralement par le même modèle. C'est pourquoi nous avons ce Chevron ici, nous permet non pas de créer un seul modèle de produit qui nous permet non pas de créer un seul modèle de produit applicable à tous les produits, mais également d'attribuer différents produits à différents modèles Donc, comme vous pouvez le voir ici, il s'agit de la valeur par défaut spécifiquement dans le thème du prestige. Cela peut être différent sur votre thème, mais nous allons certainement avoir un modèle de produit par défaut, puis nous allons avoir des modèles alternatifs ici. Comme vous pouvez le voir ici, il existe un modèle alternatif intégré au thème de prestige appelé précommande sous les noms des modèles Vous pouvez voir à combien de produits chaque modèle est attribué Vous pouvez donc voir ici que le modèle de précommande n' est actuellement attribué à aucun produit. Par conséquent, si nous devions le personnaliser, cela n'aurait aucun impact sur notre vitrine, à moins que nous n'attribuions un certain produit à ce modèle Et pour être complet, je vais simplement aller voir administrateur du magasin ici et vous montrer cela. Je pense que nous en aurions parlé dans la vidéo sur la configuration du magasin. Mais pour être clair, pour qu' produit particulier utilise un modèle différent, je passe ici au modèle de thème, et je passe du produit par défaut à un autre modèle de produit. Cette sélection provient uniquement du thème actuellement publié. Donc, si nous examinons nos thèmes actuellement publiés, vous pouvez voir que notre thème actuellement publié est Horizon. C'est donc une petite nuance au sein de Shopify qui peut être un peu ennuyeuse Nous devrons créer les mêmes modèles alternatifs dans le thème actuellement publié au cas où le thème sur lequel nous travaillons n' est pas déjà le thème publié. Donc, si je voulais le faire, je pourrais dire alternative, lui donner le même nom que le modèle alternatif que j'ai créé dans le thème prestige. Cela va le créer dans le thème actuellement publié, puis pour terminer cette démonstration légèrement tangente, je devrais maintenant être en mesure de sélectionner une alternative comme modèle vers lequel ce produit passera D'accord ? Mais dans cet exemple, nous n'allons pas avoir d' autres modèles de produits. Nous allons juste avoir un seul modèle. Je ne crois donc pas qu'il y ait d'option de suppression ici. Je peux entrer dans le code et le supprimer, mais nous n'avons pas accès au code, et il s'agit d'une classe sans code. Nous allons donc simplement revenir au produit par défaut ici, puis je vais ouvrir cette barre latérale ici. Les principes sont donc les mêmes qu'avant, mais nous avons maintenant une nouvelle option en haut de la page, à que nous pouvons changer le produit que nous recherchons. Nous pouvons donc voir l'aperçu de ce template passer en revue différents produits de notre boutique. Donc, ce que je vais faire, c'est définir produit central, notre produit principal qui contient plusieurs images de produits et est notre produit phare, d'accord ? Ensuite, je vais personnaliser ce modèle en fonction de ce produit. D'accord ? Vous pouvez donc voir que ça a l' air plutôt beau dès le départ. Le fournisseur que nous ne voulons pas ici, donc si je clique sur la section ici, vous pouvez voir que chacun de ces différents aspects constitué de blocs différents qui entrent dans la section principale du produit, c'est-à-dire ici. Je vais supprimer le fournisseur. Je peux également les réorganiser, afin de mettre le prix au-dessus du titre si je le voulais, cela n'a pas vraiment de sens, mais je pourrais le faire aussi Donc, ce que je peux faire, c'est en supprimer certains, ajouter de nouveaux et les réorganiser. Jetons donc un coup d'œil à tous les blocs disponibles dans ce thème particulier. Comme vous pouvez le voir ici, je peux ajouter des éléments supplémentaires à notre section principale de produits. Juste ici, d'accord ? De plus, sous la section principale du produit, comme vous pouvez le voir ici, elle s'appelle page du produit, mais dans d'autres thèmes, elle peut être appelée section principale du produit. Je l'appelle généralement la section principale du produit sur différents thèmes. C'est la section principale qui déterminera la page de votre produit. Mais en dessous, nous pouvons ajouter d'autres sections. Vous pouvez donc voir que nous avons cette section de produits connexes. Et pour être clair, cela se remplit sur la base d'une API définie par Shopify elle-même Donc, si cela ne s'affiche pas, vous devez cliquer davantage sur votre boutique pour que l'algorithme Shopify déterminer ce qui est lié en fonction des données utilisateur réelles, c' est-à-dire vous-même dans votre cas Donc, juste pour vous informer de cette section sur les produits connexes, comme il est indiqué ici, recommandations dynamiques changent et s'améliorent avec le temps. Vous pouvez créer des recommandations de produits manuelles si vous le souhaitez à l'aide de l'application de recherche et de découverte Shopify, mais par défaut, Shopify déterminera quels sont les produits connexes fonction de la manière dont les utilisateurs interagissent avec votre site Web OK. J'ai beaucoup parlé et je n'ai apporté qu'une seule modification à notre page produit jusqu'à présent. Passons maintenant aux modifications apportées à notre page produit. Comme toujours, nous allons être limités par les options disponibles dans le thème. Laissez-moi donc regarder l'objet de notre page produit. Et tout d'abord, je vais modifier le schéma notre palette de couleurs particulière, afin que cela soit une question de marque. Et ce que je peux faire ici, c'est réduire la largeur des détails réels sur la droite pour donner plus d'espace aux images si je le souhaite. Ou je pourrais faire le contraire. Je peux l'agrandir, en laissant moins d'espace aux images. Alors adaptez cela à vos préférences personnelles. Je pense que 33 % étaient probablement un bon chiffre, compte tenu du fait que le Web est relatif. Donc, si j'agrandis mon écran, ces deux colonnes seront plus grandes, tout en maintenant ce ratio de 33 %. D'accord ? En parcourant les autres options ici, je peux choisir une mise en page différente pour les images du produit. Comme vous pouvez le voir ici, souvenez-vous que lorsque nous avons examiné dans la leçon de moodboard si les vignettes trouvaient à gauche ou en bas, si nous préférons qu'elles soient en bas, nous pouvons réellement les personnaliser via notre thème ici, dans le thème dans En fait, je préfère le côté gauche, donc c'est ce que je vais faire. Ensuite, nous pouvons réduire l'écart entre ces images si nous le voulons, en particulier sur ordinateur de bureau. Ça n'a pas l'air de faire grand-chose. Peut-être que la largeur de mon écran n' est pas assez grande. Mais oui, les mêmes principes s'appliquent ici. Nous devons travailler dans le cadre des options disponibles dans notre thème, à moins, bien sûr, que nous ne le codions de manière personnalisée , ce à quoi nous reviendrons à la fin du cours. D'accord ? J'ai donc mon titre, mon prix. Versements échelonnés. Donc, si nous avons configuré notre boutique pour prendre en charge les versements de Shop Pay, comme vous pouvez le voir écrit ici, cela indiquera quelque chose Mais disons simplement, par exemple, que nous n'avions pas cette option, nous allons vouloir la supprimer même si elle est vide. Un séparateur est juste cette ligne ici. Nous ajoutons la description du produit. Nous pouvons le réduire en une section pliable juste là Je ne pense pas que cela ait nécessairement du sens. Et puis nous avons le sélecteur de variantes. Donc, si le produit était disponible en différentes options, c'est ici que nous utiliserions l'interface utilisateur pour choisir entre les différentes options. Sélecteur de quantité, c'est ce qui vous permet d'en ajouter au panier en plus d'une seule quantité Vous avez ces boutons d'achat pour ajouter le produit au panier ou simplement passer directement à la caisse avec ce produit. Ensuite, les produits complémentaires, qui, encore une fois, similaires aux produits connexes sont similaires aux produits connexes, seront basés sur l'algorithme. Et dans cette situation, il ne montre rien actuellement. Je vais donc également le supprimer. Je vais cliquer sur Enregistrer à ce sujet. Et ce que je vais faire ensuite, c'est ne pas apporter de trop grands changements ici. Je vais juste ajouter quelques sections d' accordéon ci-dessous pour ajouter des détails supplémentaires sur le produit Et pour ce faire, je vais utiliser des champs méta. Mais si vous n'êtes pas familier avec les champs méta, je vais d'abord le faire sans champs métafelds, afin de vous montrer la différence, puis vous verrez pourquoi les champs méta je vais d'abord le faire sans champs métafelds, afin de vous montrer la différence, puis vous verrez pourquoi les champs méta sont nécessaires dans ce cas. Donc, ce que je vais faire, c'est aller ici et ajouter une section accordéon, qui dans ce thème et dans beaucoup d' autres thèmes est simplement appelée texte pliable Vous pouvez voir dans ces options. En fait, mon thème semble bloqué lors du chargement, donc je vais juste le rafraîchir maintenant. Il aurait dû enregistrer mes modifications précédentes. Ouais OK. Pour en revenir aux blocs de la section de la page produit, je vais ajouter un nouveau bloc appelé texte pliable Pour notre accordéon. Et comme vous pouvez le voir, il se trouve actuellement sous la galerie de produits. C'est parce que cette case est cochée ici. Nous allons décocher cela pour qu'il apparaisse ici. Et c'est très simple. Il ne s'agit que du titre puis du contenu lorsque vous l'ouvrirez, d'accord ? Vous pouvez également mettre du code liquide personnalisé ici, qui est essentiellement le langage de programmation des thèmes Shopify, que nous n'aborderons pas dans cette classe particulière Et vous pouvez également, si le contenu est particulièrement avancé, essentiellement plus avancé que ce que vous pourriez mettre dans ce champ de texte enrichi. Vous pouvez également importer le contenu d'une page de votre boutique Shopify, d'accord ? Donc, ce que je vais faire ici, c'est passer à mon document de copie Web ici. Et pour le produit en poudre matcher haut de gamme, nous avons quelques détails Nous avons quelques ingrédients, puis nous avons des instructions sur la façon de les utiliser. Donc, ce que je vais faire, c'est saisir ces points, puis je vais les mettre ici. Ensuite, ce que je vais faire, c'est m'occuper des détails, d'accord ? Ensuite, je vais en créer deux autres. Je vais en ajouter un pour les ingrédients, texte pliable ici Encore une fois, je ne veux pas qu'il apparaisse sous la galerie. Je veux qu'il apparaisse ici. Celui-ci sera composé d'ingrédients, puis je vais simplement copier les ingrédients ici, n'est-ce pas ? Et puis une autre pour savoir comment l'utiliser. Je vais donc aller ici, le texte pliable, le retirer du bas de la galerie, le remettre ici Le suivant portait sur la façon de l'utiliser. Je vais donc copier ce contenu, le coller ici. D'accord ? Alors maintenant, si je masque simplement la barre latérale, vous pouvez voir que nous avons ajouté quelques détails à notre page produit ici, ce qui est vraiment sympa, sauf pour un problème, d'accord ? Si nous passons à un autre, laissez-moi simplement le sauvegarder pour qu'il ne perde pas cette progression. Ensuite, je remplace le produit d'entrée par un autre produit dans notre boutique. Disons donc simplement ce bol en céramique. Vous pouvez voir ici que j'ai toujours mêmes accordéontes parce qu'ils utilisent le Comme vous pouvez le voir ici, cela n'a pas vraiment de sens de parler de la poudre macho avec les ingrédients et de la façon de l'utiliser sur le bol en céramique, d'accord ? C'est donc le cas d'utilisation idéal pour Metafeld. Les champs méta sont des champs supplémentaires que nous pouvons ajouter à certaines ressources, telles que les produits, puis nous pouvons extraire ces valeurs dynamiques. Donc, comme c'est le cas ici pour le titre, nous ne définissons pas le titre réel dans l'éditeur de la boutique en ligne. Cela ne fait que tirer parti du produit lui-même. De même, le prix et la variance, non ? Il s'inspire du produit lui-même , et non du modèle. D'accord ? Donc, pour ce faire, je vais devoir retourner dans ma boutique, donc je vais devoir quitter l'éditeur de la boutique en ligne. Et puis, n'importe où dans notre boutique, il y a ce bouton de configuration ici. Je vais cliquer dessus, puis je vais aller ici aux champs méta et aux méta-objets. OK. Encore une fois, metafeld peut sembler quelque chose de compliqué, mais il s'agit essentiellement d'un champ supplémentaire que vous pouvez ajouter à n'importe laquelle de ces ressources, Nous pouvons donc ajouter à l'objet variant, l'objet de collection, les commandes des clients. Il existe de nombreuses options, mais la plus courante sera probablement celle des produits. Nous allons donc ici pour ajouter de nouveaux champs à nos produits, puis nous pouvons cliquer sur Ajouter une définition ici. Donc, ce que je vais faire, c'est donner des détails. Hein ? Et pour le type, nous voulons simplement faire correspondre le type du champ dans l'éditeur de boutique en ligne. Celui-ci ici, je peux l'identifier facilement, mais je ne suis pas sûr qu'il indique exactement qu'il s'agit d' un champ de texte enrichi, mais c'est ce qu'on appelle un champ mais c'est ce qu'on appelle de texte enrichi parce que contrairement à celui-ci, qui n'est qu'un champ de texte de base ne nous permet que de mettre du texte, champ de texte enrichi nous permet de mettre puces, des listes numérotées, des liens, en gras et en italique certains points et même mis dans des titres. texte enrichi est donc le type que nous allons rechercher ici. Je vais donc taper du texte enrichi pour filtrer jusqu'à cela. Nous pouvons également utiliser des métapils pour mettre une liste de valeurs, je pourrais donc passer à une liste de valeurs plutôt qu'à une seule Mais dans ce cas, nous n'avons besoin que d'une seule valeur. Ensuite, je peux ajouter une description ici si je pense que les administrateurs auront besoin d' aide pour identifier ce que c'est Je pourrais donc dire les détails affichés sur la page du produit, par exemple. Je pense que c'est assez explicite. Nous pourrions utiliser ces informations sur le produit n'importe où dans notre magasin. Il peut aller à d'autres endroits que la simple page du produit. Je vais donc appuyer sur Enregistrer là-dessus, et je vais faire exactement la même chose pour deux autres définitions. Je vais donc aller ici. Vous pouvez voir que nous y avons déjà défini les détails. Le suivant portait sur les ingrédients, puis encore une fois, même chose, le texte enrichi. Et puis exactement la même chose car je pourrais simplement les organiser dans le bon ordre. Comment utiliser, allez à nouveau ici, Rich Text, puis appuyez sur Enregistrer. OK, donc je vais juste les déplacer ici pour qu' ils soient dans le même ordre qu'ils apparaissent. Une fois ces définitions définies, il ne nous reste plus qu'à ajouter des données à ces champs personnalisés sur le produit auquel elles appartiennent. Je vais donc sortir d'ici, puis passer au produit phare, le produit auquel ces ingrédients détaillés et comment les s'appliquent réellement ces ingrédients détaillés et comment les utiliser, puis je vais faire défiler la page vers le bas pour trouver mes champs métafelds Vous pouvez donc voir ici les détails des ingrédients et comment les utiliser. Nous allons maintenant définir cela au niveau du produit plutôt que dans l'éditeur de boutique en ligne, qui, comme je l'ai déjà mentionné, s'appliquera à tous les produits utilisant ce modèle. D'accord ? Encore une fois, je peux le copier depuis l'éditeur de la boutique en ligne, je peux le copier d'ici. Je vais juste le copier à partir d'ici, entrer dans les détails, le copier, entrer dans les ingrédients, le copier, puis expliquer comment l'utiliser et le copier. OK. Je vais cliquer sur Enregistrer à ce sujet. Et pour être encore plus clair, si je dois passer à un autre produit notre boutique, le bol en céramique, par exemple, vous verrez que si je passe aux champs méta des produits, ces valeurs ne sont pas définies pour tous les Ils ne sont définis qu'au niveau d'un produit individuel, d'accord ? C'est ainsi que nous pouvons attribuer des informations à un produit, mais pas à l'autre dans Shopify Maintenant que ce métafeld a été lié, nous pouvons utiliser ce que l'on appelle le lien dynamique pour renseigner le contenu du champ de détails avec la valeur du champ avec la valeur du Je vais donc prendre tous ces points ici, les supprimer, puis je vais cliquer sur ce bouton ici pour connecter une source dynamique. Je vais donc cliquer dessus , puis nous ne saurons pas pourquoi il affiche des options pour se référencer. Il suffit d'appuyer sur ce chevron pour revenir en arrière et nous voulons accéder à l'objet du produit, puis vous pouvez voir ici que nous pouvons extraire d'autres aspects déjà existants de l'objet du produit, comme le titre ou le fournisseur ou ceux que nous avons déjà créés Je vais donc ajouter mes coordonnées ici, non ? Cela ne s'affiche pas encore, mais je vais juste appuyer sur Enregistrer, et j'espère que cela apparaîtra pour moi. En fait, je me rends compte que nous en sommes toujours au produit en céramique. Donc, nous espérons que c'est exactement ce qui se produira si les détails sont vides, alors l'accordéon ne figure tout simplement pas du tout, d'accord ? Donc, si j'en fais une autre, si je vais dans les ingrédients et que je me débarrasse de ces ingrédients, connecte à une source dynamique, que je me débarrasse de ces ingrédients, que je me connecte à une source dynamique, que j' ajoute des ingrédients provenant du métafeld, vous verrez le produit disparaître de la page produit de ce produit en particulier Mais si je passe en revue et que je remplace le produit que je cherche celui pour lequel les valeurs du métafeld ont été définies, vous pouvez voir que les détails et les ingrédients apparaissent. Je vais faire ce dernier point, comment l'utiliser. Je vais supprimer le contenu au niveau du modèle et intégrer une source dynamique tirée du produit lui-même pour expliquer comment utiliser le champ méta ici . Appuyez sur Enregistrer là-dessus. Et maintenant, au lieu de ce que nous avions auparavant, qui s' appliquait à tous les produits, cela ne s'appliquera qu'à ce produit en particulier. Et puis, comme nous en avons déjà vu un petit aperçu, si je passe au produit en céramique, vous verrez que, même si les blocs se trouvent dans l'éditeur de boutique en ligne, parce que cette valeur est vide, parce que cette valeur est vide, ils ne les afficheront tout simplement pas. Il va donc afficher la valeur conformément à la métaf, mais s'il est vide, il n'affichera simplement rien, c'est exactement ainsi que cela devrait fonctionner OK, donc pour terminer cette page produit avant de passer aux autres pages, je pourrais simplement ajouter un petit plus à ce modèle de produit. Je voudrais peut-être leur rappeler pourquoi ils achèteraient chez nous sans bénéficier des avantages de notre produit. Donc, au lieu de le recréer, ce que je peux faire, c' est rentrer chez moi dans le modèle où cette section existe déjà Et je peux le copier. Je peux donc me rendre ici. Évidemment, il y a deux sections différentes, mais celle-ci sera plus facile à reproduire que celle-ci Et ce que je peux faire ici, c'est soit cliquer ici pour copier, soit cliquer dessus avec le bouton droit de la souris et cliquer sur Copier. Ensuite, je peux accéder à mon modèle de produit ici, puis cliquer avec le bouton droit de la souris ici, puis cliquer sur Coller entre les deux. OK. Voilà. La section contenant tous les paramètres que nous avions précédemment est donc introduite. Et puis j'ai juste besoin d'ajouter à nouveau cette section de texte enrichi. Je vais simplement rechercher du texte enrichi ici. Il va ajouter du contenu supplémentaire par défaut, mais j'en ai juste besoin pour le titre. Je vais donc aller ici et vous demander pourquoi faire une séance. Ensuite, je veux régler cela sur le bon schéma de couleurs, supprimer séparément par une bordure, puis la section du produit connexe que je viens de remarquer n'est pas la bonne palette de couleurs, donc je vais simplement la définir selon notre palette de couleurs. En ce moment. Nous pouvons également changer cela pour une palette de couleurs légèrement différente , si nous voulions peut-être inverser les couleurs Mais maintenant, nous avons cette section dupliquée dans notre modèle de produit Et si nous examinons notre modèle de produit maintenant, je vais regarder le produit principal. Je vais donc passer ici à notre produit phare, la poudre de Macha de qualité supérieure, et jetons un coup d'œil à notre page produit dès maintenant De toute évidence, nous pourrions faire bien plus sur la page du produit si des personnes utilisent le produit. De toute évidence, plus vous pouvez mettre de preuves sociales et de démonstrations du produit sur cette page, mieux c'est. Vous pouvez donc ajouter d'autres sections sous la section principale du produit. Mais dans cette vidéo, nous avons abordé certaines des options du thème du prestige et, surtout, nous avons parlé de champs métafelds que nous pouvons intégrer via liens dynamiques dans l'éditeur de boutique en ligne afin des liens dynamiques dans l'éditeur de boutique en ligne afin de définir des données au niveau du produit, par exemple, et de les faire passer. Vers notre modèle dans les bonnes zones en utilisant la boutique en ligne, tergiversez. OK, une fois la page du produit et la page d'accueil terminées, passons à d' autres pages la vidéo suivante et résumons ce site Web créé. 9. Other pages: OK. À ce stade, nous avons configuré deux pages les plus importantes de notre site Web Shopify, la page d'accueil et la page du produit Continuons à parcourir la liste et à optimiser le reste des pages. Donc, si je vais dans mon sélecteur de modèles ici, nous avons commencé par la page d'accueil Nous personnalisons le modèle du produit. Regardons maintenant le modèle de collection, et nous n'en avons qu'un seul ici, le modèle de collection par défaut. OK. Les pages de collection ne seront donc très importantes pour nous en tant que boutique proposant une gamme de produits composée de quatre produits seulement, mais nous pouvons apporter certaines optimisations Comme nous pouvons le voir dans notre groupe de modèles ici, nous avons deux sections, la bannière de collection et la page de collection. De toute évidence, le contraste n'est pas idéal. Réglons les deux sur notre palette de couleurs. C'est déjà beaucoup mieux. Nous allons donc définir notre palette de couleurs cinq, qui est notre palette de couleurs personnalisée propre à la marque. Et je pense que nous pouvons rendre cela un peu plus beau en ajoutant une image d'arrière-plan Je vais donc le faire maintenant. Je vais aller dans mon dossier d' images ici et le parcourir Je pense que celle-ci pourrait être une bonne image de fond. Je vais donc apporter celui-ci, appuyer dessus. Et maintenant, nous devons apporter quelques modifications supplémentaires. Cela l'a rendu vraiment grand. Je crois que la taille de l'image a été réglée sur le ratio d' image d'origine. En fait, je veux que ce soit assez serré. C'est donc aussi petit que possible, apparemment, très petit. Et puis je ne veux pas vraiment ce texte vert foncé. Je vais donc revenir au schéma 4, et ça a l'air beaucoup plus beau, d'accord ? Nous pouvons donc également supprimer le paramètre de titre transparent ici, et nous pouvons afficher ou masquer les miettes de pain ici Je ne sais pas s'il est logique d'avoir une boutique à domicile, une boutique A, mais si vous avez beaucoup de collections, vous devriez peut-être y conserver cet élément de fil d' Ariane Et s'il existe une description de la collection, elle s'affichera. Je pourrais juste le supprimer au cas où cet effet parallèle se produirait. Je ne sais pas si j'apprécie cet effet parallèle. C'est à vous de décider si vous le laissez ou non. Encore une fois, tout dépend de votre thème. L'opacité, peut-être que je réduis un peu plus pour augmenter le contraste Le texte est légèrement au-dessus l'étiquette de l'image, ce qui n'est pas idéal. Nous voulons probablement utiliser une image d' arrière-plan légèrement différente où le texte n'est pas superposé au texte, mais je vais le laisser là pour le moment Et en regardant ici, voyons quelles sont les options pour la section principale de notre page de collection. Nous avons nos produits MAX par page de 48, mais nous n'en avons que quatre. Je ne pense pas que nous ayons besoin de filtrer en fonction de la disponibilité et du prix, je vais donc simplement supprimer complètement les filtres. Et puis je ne sais pas si nous avons besoin de ce sélecteur de grille Je crois que c'est le sélecteur de taille de grille. Je vais donc simplement le supprimer. Et cela simplifie encore davantage notre conception. Je pense que c'est plus logique lorsqu'il s'agit d' une gamme de produits aussi petite. Achetez les quatre produits ici. Et nous allons faire le tri là-dedans. Je ne sais pas si nous pouvons également nous débarrasser du tri par, mais généralement, les pages de collection auront le tri par dans le coin. Éteins ça. Et je peux aussi désactiver la quantité de produits, non ? Il ne s'agit donc que de ces quatre produits. Je vais laisser le décompte des résultats du produit ici. Et cliquez sur Enregistrer là-dessus. J'en suis plutôt content. Bien entendu, vous voudrez le personnaliser selon vos préférences dans les options disponibles du thème que vous utilisez si vous n'utilisez pas Prestige. Maintenant que c'est fait, passons au modèle suivant de la liste. Celui-ci n'est pas très courant. Je ne travaille pas souvent sur la page de liste des collections. Il s'agit d'un modèle unique répertoriant toutes les collections de votre boutique. Et comme vous pouvez le voir ici, il n'y a qu'une seule collection, donc c'est assez redondant Prochaine étape, carte-cadeau. Cela n'est pertinent que si nous proposons des cartes-cadeaux. Le suivant est le chariot. Encore une fois, ce n'est pas très pertinent si nous utilisons la carte coulissante moderne. Donc, si je passe à un produit, j'espère pouvoir le faire dans l'éditeur de la boutique en ligne. Sinon, je peux probablement cliquer ici pour un aperçu. Et puis nous pouvons obtenir un aperçu fonctionnel de notre site jusqu'à présent. Donc, si je devais aller ici et cliquer sur Ajouter au panier, vous verrez que cela apparaît sur notre petite carte latérale au lieu de nous amener sur la page du panier Donc, par défaut, tous les sites Shopify auront cette page de panier Mais si vous utilisez un thème moderne, il y aura plus de chances d'avoir ce chariot coulissant interactif. Donc, la personnalisation de ce modèle particulier, si nous y allons, n'a pas beaucoup d'importance Quelqu'un devrait littéralement accéder à la barre oblique CART de votre site Web pour y accéder si vous utilisez le tiroir à cartes OK ? Ici, vous pouvez cliquer sur le personnalisateur des comptes Checkout Cela vous amène à un personnalisateur complètement différent. Il s'agit simplement d'un lien vers une section complètement différente de votre boutique Shopify. Je ne vais donc pas aborder cette question. Techniquement, c'est en dehors de l'éditeur de la boutique en ligne. Ensuite, nous arrivons aux pages, aux blogs, aux articles de blog. OK ? Il est donc évident que les blogs et les articles de blog ne seront pertinents que si vous gérez un blog sur votre boutique de commerce électronique C'est comme une fonctionnalité secondaire de Shopify. Shopify est une plateforme de commerce électronique, elle fournit donc toutes les fonctionnalités pour vendre un produit Ce n'est peut-être pas connu comme une plateforme de blogs comme Wordpress, mais vous avez la possibilité d'ajouter différents blogs. C'est un peu confus, mais vous pouvez considérer chaque blog comme une catégorie différente sur votre blog sur votre site Web. Vous pourriez donc avoir, par exemple, un blog pour les recettes et un blog pour les articles de journaux ou autre. Hein ? Nous n'allons donc pas vraiment aborder ce sujet dans ce cours , car notre boutique ne sera pas non plus un blog. Mais si vous souhaitez personnaliser ces modèles, le principe est similaire à celui du modèle de produits. Vous avez votre liste de modèles alternatifs ici ou le modèle par défaut, et cela dépendra du billet de blog que vous publiez via ce modèle, et chacun des articles de blog passera par ce modèle de billet de blog Chacun des blogs va passer par ce modèle de blog par défaut. OK. Celui sur lequel je veux vraiment me concentrer pour le reste de cette vidéo, ce sont les pages. Donc, si nous cliquons ici pour les pages, vous pouvez voir que nous avons une page par défaut, page de contact, assignée à une page, FAQ et des collections de listes. Ils sont utilisés par défaut en termes de prestige. Ce ne sera pas nécessairement pareil sur votre thème, mais presque tous les thèmes Shopify sortiront probablement de la boîte avec un modèle de page évidemment par défaut et un modèle de page de contact OK, alors comment fonctionnent les pages dans Shopify, en particulier cette ressource de page Si je vais à la page par défaut ici, vous pouvez voir qu'elle va nous montrer le modèle de page appliqué à cette page en particulier, mais tout comme lorsque nous personnalisions le modèle de produit, nous pouvons cliquer ici pour le modifier et nous pouvons passer à une autre page de notre boutique Tout comme les produits, ils se trouvent dans une section différente de notre boutique. Donc, si je retourne dans notre boutique ici, je suis actuellement dans la section des produits. Mais si je vais sur le canal de vente de la boutique en ligne ici, puis que je clique sur Pages, vous pouvez voir que ce sont les deux pages que nous avons sur notre boutique. En gros, la page de politique de confidentialité et la page de contact. Si nous cliquons sur la page Politique de confidentialité ici, vous pouvez voir qu'elle s'exécute dans le modèle de page par défaut. Mais si nous cliquons ici, il existe un autre modèle de page appelé Contact. OK, donc ici, si nous revenons simplement aux choix de confidentialité, le contenu de cette page passe par cette section de contenu ici. Mais si nous laissons cela, je cliquerai simplement ici pour annuler mes modifications Je n'ai apporté aucune modification de toute façon. Et si nous allons ici pour vous contacter, vous verrez que ce champ est vide, mais qu'il utilise un modèle différent. Le contenu de cette page provient donc ce que nous avons défini ici dans le modèle alternatif. Donc, si je vais à la rubrique contact, ici, vous verrez qu'au lieu de la section de page standard, qui a été masquée ici, nous utilisons ce formulaire de contact. Et cela nous permet de créer des pages avec contenu personnalisé que nous voulons, d'accord ? Évidemment, sur la page de contact, il est logique d'ajouter cette section du formulaire de contact, qui existe déjà. Si nous avons d'autres pages à intégrer dans notre boutique Shopper fi qui ne correspondent à aucune des autres catégories ici, c'est ici que nous le faisons Et pour terminer cette vidéo, je vais en créer une avec vous dès maintenant. Donc, la première chose que je vais vouloir faire, c' soit commencer dans l'éditeur de la boutique en ligne est soit commencer dans l'éditeur de la boutique en ligne et le configurer ici , puis l'attribuer à une page, soit créer une page et créer un modèle qui attribue cette page immédiatement. Je vais d'abord créer la page et les lier ensemble. Je vais donc aller ici, cliquer sur Ajouter une page et créer une page À propos de nous pour cette marque Shopper Pi Et au lieu de parler de nous, ce qui est un peu sec, je vais dire O story. OK. Je vais appuyer sur Enregistrer là-dessus, pour le rendre visible. Encore une fois, peu importe que nous le rendions visible ou masqué, car notre site n'est pas encore en ligne. Et ce que je vais faire, c'est remplacer un nouveau modèle que nous allons configurer dans l'éditeur de notre boutique en ligne. Je vais donc accéder à notre sélecteur de modèles, accéder à Pages, créer un modèle, et je vais appeler cela Eva About Us ou Our notre sélecteur de modèles, accéder à Pages, créer un modèle, et je vais appeler cela Eva About Story Je vais cliquer sur Créer un modèle à ce sujet. Et comme vous pouvez le constater, comme il n'est pas encore attribué à une page en particulier, il vous suffira de choisir la première page de notre boutique Shopify Mais comme vous pouvez le voir, là-haut, il est indiqué qu'il est assigné à zéro page. Alors, réglons ça. Passons ici, et je pense que je devrai actualiser après avoir ajouté le modèle. Ensuite, je vais cliquer ici. Encore une fois, nous avons le même problème où il ne me permet pas de le sélectionner moins qu'il ne s'agisse d'un modèle dans le thème en direct. Je vais donc devoir dupliquer le même processus sur le thème que sur le thème en direct. Je vais donc aller ici, faire exactement le même processus, mais sur le thème actuellement publié, qui est Horizon. Et c'est le petit hack qui me permettra de le sélectionner ici, comme vous pouvez le voir, Notre histoire. Très bien, je vais appuyer sur Enregistrer là-dessus, puis je vais actualiser dans l'éditeur de ma boutique en ligne Vous pouvez maintenant voir que notre histoire est attribuée à une page, mais nous examinons toujours la page de politique de confidentialité alimentée par ce modèle. Nous allons donc passer à notre histoire. Maintenant, avec un modèle créé et attribué à une page spécifique dans le backend de notre boutique Shopify, nous pouvons désormais personnaliser cette page Et pour accéder à cette page, nous pouvons voir l'URL ici, d'accord ? Passons maintenant à la rédaction d'une page qui vous expliquera comment la séance a été créée Tout d'abord, je vais masquer la section de page par défaut, puis je vais prendre l'histoire, que j'ai écrite dans le document de copie Web ici, et trouver la meilleure façon d'afficher ces informations avec les sections disponibles dans le thème, d'accord ? Nous avons donc notre histoire. C'est une chronologie. Nous avons donc des années différentes ici avec des titres différents pour chaque étape du voyage. Et puis un paragraphe décrivant l'histoire à chaque étape. OK ? Laissez-moi donc parcourir les sections disponibles dans mon thème. Et il existe évidemment différentes manières de présenter ces informations. Nous pourrions en faire un diaporama. Nous pourrions superposer des images avec des blocs de texte ici. Mais je crois qu'il y a ici une véritable section intitulée « chronologie sous le titre « narration ». Comme vous pouvez le voir ici, il y en a une appelée chronologie ici. Donc, avec un nom comme Timeline, vous pourriez penser que c' est une section appropriée à utiliser pour notre histoire ici. Donc, tout d'abord, je peux modifier la palette de couleurs de la section pour qu'elle corresponde à notre marque, puis il y a aussi cette palette de couleurs interne. se peut donc que nous souhaitions également configurer un schéma de couleurs inversé. Peut-être que nous utilisons Oh, je ne veux certainement pas utiliser ça, on pourrait faire quelque chose comme ça. Permettez-moi de passer en revue les différentes options ici. Peut-être que dans notre palette de couleurs, dans les paramètres de notre thème, nous modifions simplement l'arrière-plan pour qu'il soit un peu plus fidèle à la marque. Et si nous utilisions cette couleur, puis que nous remplacions du texte par notre couleur contrastante secondaire ? Est-ce que ça a l'air bien ? OK, ça pourrait potentiellement bien paraître. Cela revient en quelque sorte à inverser les couleurs de l' autre palette de couleurs Disons simplement, par exemple, que c'est ce que nous allons choisir. Ensuite, ce que nous pouvons faire, c'est entrer et créer un article pour chacune de ces années. Je peux donc apporter l' image qui accompagne cette partie de l'histoire. Je vais tout apporter en une seule fois. Comme vous pouvez le constater, il y a un dossier dans notre dossier d'identité de marque, appelé histoire de marque, qui couvre chaque étape du parcours. Donc, au lieu de les télécharger un par un, je vais simplement les mettre dans cet outil de téléchargement de fichiers ici même afin qu'ils soient tous téléchargés en une seule fois, ce qui nous permettra de les sélectionner plus rapidement à chaque étape Ensuite, je vais sélectionner le premier, le début du parcours de la marque, c' est-à-dire l'année 2020, si nous revenons à notre copie ici. pourrais le mettre comme étiquette de navigation ou, en fait, je vais l'utiliser comme étiquette de navigation, n'est-ce pas ? Le titre du sous-titre 2020 sera le même, puis je pourrai intégrer l'histoire ici dans le contenu, n'est-ce pas ? Ensuite, passez à l'élément suivant, faites la même chose, insérez l'image suivante pour la partie suivante de l'histoire. L'étiquette de navigation a été la découverte. Je vais également l'utiliser comme titre dans le bloc. 2021 pour le sous-titre, puis je personnaliserai le troisième bloc ici. Je vais mettre l'image de la troisième partie de l' histoire de la marque, copier la source de l'étiquette de navigation et du titre, remplacer le sous-titre par 2022 Et puis insérez le contenu ici. Et puis, évidemment, nous ferions cela pour les deux ou trois autres parties de l'histoire. Jetons un coup d'œil à cela juste avant de nous donner la peine d'ajouter tous ces autres éléments. Et nous pouvons voir ici que si nous passons en plein écran, ça va apparaître comme ça, c'est vrai, qui est beau et compact, belles animations. Et je pense que cela fonctionnerait bien sur une page avec un autre contenu, mais c'est notre page d'histoire. Je pense donc qu'il est logique d'avoir une section distincte pour chaque partie du voyage. Encore une fois, il s'agit d'une préférence personnelle. Je pense qu'il serait préférable d'avoir une page plus longue avec tout le contenu dans une seule vue Donc, au lieu de supprimer cette section en particulier, je vais simplement la masquer et trouver une section que nous pourrions empiler pour créer notre histoire. Donc, pour en revenir à la narration, d'accord, je n'aime pas vraiment les autres options de la catégorie narration. Laisse-moi remonter la liste. Image avec texte. OK, je pense que celui-ci pourrait être approprié. Je vais donc passer au schéma de couleurs 5, notre schéma par défaut pour notre marque. Ensuite, je vais sélectionner le premier parmi les images de notre histoire de marque. Je vais ensuite cliquer dessus et regarder les blocs pour mettre à jour le titre. Donc le sous-titre, je crois que c'était en 2020, non ? Le fondateur est le nom de cette partie de l'histoire, n'est-ce pas ? En fait, qu'est-ce que ça dit ici, style ? Peut-être que nous le réduirons un peu. Donc H Two Style. Ensuite, nous entrons dans le paragraphe et nous introduisons ce texte ici même. D'accord ? J'aime bien ça. Ensuite, nous pouvons ajouter une autre de ces images avec des sections de texte. Changez le schéma à cinq. Je voudrais peut-être changer la position de l' image vers la droite. Ils alternent donc. Je vais ajouter notre image pour la deuxième partie de l'histoire. Ensuite, allez dans nos blocs, sous-titre 2021, je crois que c'était l'année suivante C'est la découverte. Copions donc les autres pièces dont nous avons besoin. Donc, dans le paragraphe, ce sera ce contenu. Et puis le titre est la découverte. G pour vous assurer que tous ces H sont deux au lieu de H. Je crois que c'est juste le style. Il n'utilise pas le H lui-même, ce qui serait mauvais pour le référencement. Donc je pense qu'en fait, je préfère qu'il soit plus grand, donc je vais juste créer tous ces styles H one ou H one. OK ? Permettez-moi de sauvegarder et d'y jeter un œil avant d'aller plus loin. J'ai oublié de mettre une section en haut de notre histoire, donc je vais d'abord le faire. Je vais monter ici. Et comme nous l'avons fait auparavant ajouter un titre à n'importe quel endroit de notre modèle, je vais simplement ajouter un changement de palette de couleurs à cinq, une section de texte enrichi supprimant le paragraphe et le sous-titre par défaut et mettre notre histoire en haut ici OK. Maintenant, jetons un coup d'œil à nouveau. Nous avons donc notre histoire, le fondateur, la découverte. Cela me plaît, donc je vais continuer à parcourir ces sections et terminer la construction de la page. De toute évidence, ce sera le même processus encore et encore. Je vais donc y aller un peu plus vite. Je vais donc simplement les configurer , puis combien d'autres parties de l'histoire avons-nous encore ? Nous en avons un, deux, trois, quatre. OK, donc je vais juste le configurer comme je le veux avec le bon schéma, et je vais juste le dupliquer trois fois de plus juste pour gagner du temps. D'accord ? Maintenant, nous en avons un, deux, trois, quatre, puis il ne me reste plus qu'à alterner la position de l'image. Je vais donc mettre la position de l'image vers la droite sur celle-ci, puis deux vers le haut, mettre la position de l'image vers la droite sur celle-ci aussi. Ensuite, il suffit de renseigner le contenu de chacun d'entre eux. Je vais donc ajouter la troisième partie de l'histoire de la marque. Encore une fois, revenez ici, inscrivez l'année, qui est probablement la source, faites-en une autre en temps réel avec vous, et ensuite je vais passer rapidement en revue le reste. Bien, ce sont donc toutes les sections sur une seule page. Je vais cliquer sur Enregistrer là-dessus. Regardons-le en plein écran. Nous pouvons maintenant voir toute l'histoire de la marque. Nous pouvons rencontrer la fondatrice, le parcours qui l'a amenée à découvrir le matcha à la source, intégrer dans son quotidien, puis à se donner pour mission de créer une marque qui transmettrait cette expérience à d'autres femmes comme elle Et aujourd'hui, c'est devenu le matcha de prédilection de la femme moderne spécialisée dans le bien-être Encore une fois, toutes ces images et le texte du site Web ont tous été créés dans le cadre de l'art amoureux. Il n'y a pas d'Emma. Il s'agit d'une histoire fictive, mais idéalement, vous devriez avoir une histoire de marque réelle que vous pourriez mettre sur votre page notre histoire. Et évidemment, si vous pouvez obtenir des images telle qualité ou même les générer avec Nano Banana ou si vous aimez l'art pour les pièces manquantes lorsque vous n'avez pas de vraies photos, vous pouvez également les utiliser pour l'imagerie de votre site Web. Et avec cette page À propos de nous, notre page produit, notre page d'accueil, notre page de collection, toutes créées. La dernière chose que nous voulons faire est mettre à jour la navigation de notre site, car comme vous pouvez le voir ici, nous venons d'obtenir la navigation par défaut : accueil, catalogue et contact. Nous allons probablement vouloir changer cela. C'est donc ce que nous aborderons dans la prochaine vidéo, et cela devrait essentiellement résumer notre vitrine 10. La navigation: D'accord, donc cette vidéo va probablement être rapide Nous avons juste besoin de parler des navigations et de la façon dont elles sont liées à notre thème Lorsqu'il s'agit de créer une vitrine sur Shopify, certaines choses se trouvent à l'intérieur du thème et en dehors du Et dans le cas des navigations, elles se situent généralement en dehors du thème et sont introduites à l'aide de l'éditeur de boutique en ligne, comme nous l' avons vu avec les produits et les métafelds OK ? C'était donc dans la boutique en ligne, mais maintenant nous pouvons passer au contenu. Ensuite, sous Contenu, nous pouvons trouver des menus, et ici nous avons notre menu principal. Donc, si vous vous demandez d' où venaient ces articles avant d'entrer en ligne de compte, de les cataloguer et de les contacter, ils se trouvent ici, dans notre menu principal, ou dans le backend, on les appelle des listes de liens. Donc, comme ce menu est déjà lié à notre thème, nous pouvons simplement le personnaliser comme nous le souhaitons, et il s'appliquera directement à notre thème. Donc, comme nous n' avons pas un catalogue volumineux, je vais le supprimer ou au moins le modifier et changer ce lien en article en boutique. Et au lieu de créer un lien vers tous les produits, je vais simplement le relier à notre produit phare, le Marcher Powder de qualité supérieure. Mais il y a évidemment une certaine stratégie à adopter dans votre navigation. Cela dépendra de votre marque et lequel vous souhaitez diriger vos clients. Donc, dans mon cas, je veux les diriger vers le produit principal que j'essaie de vendre ici. Et au lieu du contact, je souhaite également avoir un lien vers la page À propos de nous que j'ai créée, histoire de notre marque qui ne fait actuellement partie d' aucune autre navigation. Les utilisateurs auront donc certainement besoin d'un chemin pour accéder à cette page particulière. Je vais donc le mettre ici également. Je vais donc appuyer sur Enregistrer. Et comme je l'ai dit , comme cette navigation est liée au thème, si je vais dans mon thème maintenant, je devrais voir que les éléments de mon menu ont été mis à jour. Voyons comment cette liste de liens ou ce menu sont liés à notre thème. Si nous cliquons sur la section d' en-tête, vous pouvez voir ici que nous avons toutes ces différentes options, puis nous avons une option pour le menu. C'est ici que nous choisissons parmi les listes de liens de l'administrateur Je peux donc cliquer ici pour les remplacer, ce qui me donnera la possibilité de lier d'autres navigations depuis notre section de menu de notre boutique Vous pouvez voir ici que cela est clairement lié à la liste de liens de notre menu principal. C'est pourquoi, lorsque nous modifions la liste de liens de notre menu principal, nos modifications sont directement répercutées dans notre thème. OK ? Si nous examinons les autres listes de liens liés à notre thème, si nous descendons ici, nous devrions en avoir dans notre pied de page Comme vous pouvez le constater, paramètres généraux de notre section de pied de page ne les contiennent pas, mais notre pied de page est composé de différents blocs Comme vous pouvez le voir ici, cela provient de ce que l' on appelle le menu de pied de page Donc, si j'y vais et que je l'ouvre simplement dans un nouvel onglet pour qu'il puisse passer plus facilement de l'un à l'autre, et que je reviens à notre section des menus ici, vous pouvez voir le menu du pied La recherche et vos choix en matière de confidentialité. Vous pouvez voir ici que nous avons effectué une recherche et que vos choix de confidentialité sont absents. Peut-être que cette page a été définie comme masquée, mais nous pouvons, bien sûr, aller ici et les modifier également. Donc, au lieu de la recherche, ce qui n'a pas vraiment de sens dans notre boutique, je vais supprimer la recherche, et je vais ajouter à notre gamme pour les amener sur la page de collection de Shop All. Nous allons le lier dans notre navigation, mais uniquement dans le pied de page Ensuite, je mettrai un autre lien vers Notre histoire. Nous pouvons donc y aller, oups, pas des produits, mais des pages, notre histoire Je vais placer cela au-dessus des choix de confidentialité. Enfin, nous pouvons revenir dans cette page de contact que nous avons retirée de la navigation du menu principal. Mettez-le donc ici au-dessus des choix de confidentialité, cliquez sur Enregistrer dessus. Ensuite, nous devrions commencer à voir tous ces changements se refléter ici dans éditeur de notre boutique en ligne ou dans notre thème. Donc, si je clique ici. Il affiche toujours les anciennes informations. Permettez-moi de changer cela rapidement, puis de revenir en arrière. C'est un petit bug. Nous y voilà. Au pied d'un menu, puis nous pouvons cliquer ici pour afficher le titre ou ne pas l'afficher. Si nous cliquons sur Afficher le titre, il sera extrait directement du titre du menu par défaut, mais nous pouvons ensuite dire ici, menu ou autre chose que nous voulons pour personnaliser ce titre. Donc, en ce qui concerne la liste d'encre, il y a deux parties. Il y a la liste de liens que nous avons configurée ici dans cette section des menus de notre boutique Shopify, puis il y a le lien vers ce menu dans notre thème Donc, pour vous montrer comment créer un nouveau menu et le lier à notre thème, nous avons peut-être une deuxième colonne de liens de menu ici. Je vais donc en ajouter un ici. Et par défaut, il renvoie simplement à des liens de pied de page, ce qui va nous donner un doublon Mais disons simplement, par exemple, que nous avons créé un nouveau menu, et que nous disons menu de deuxième pied de page, puis que nous pouvons ajouter des éléments aléatoires ici Disons donc nos produits, et peut-être que chacun d'entre eux peut être simplement un lien vers chacun de nos produits, car il n'y en a que quatre. Nous allons donc, désolé, terminer le set de marcha. Quelle est la prochaine ? Fouet Macha élégant OK, si nous définissons d'abord le lien, il remplira automatiquement l'étiquette C'est pratique. Un bol Marcher de qualité supérieure et la poudre de marcha elle-même. Peut-être que nous l'avons mis en haut. Appuyez sur Enregistrer là-dessus. Maintenant que nous avons créé cette liste d'encre, nous pouvons désormais la lier ici à l'intérieur de notre thème Nous pouvons donc cliquer ici dans le paramètre du bloc pour le remplacer par nos produits, puis vous pourrez voir que cela sera répercuté, d'accord ? C'est ainsi que les navigations sont généralement effectuées sur les sites Shopify Nous les configurons ici sur le back-end de notre site Web Shopify, puis nous les intégrons dans notre vitrine via ces champs de liste de liens si j'y liste de liens Nous pouvons donc soit remplacer complètement le menu une autre liste de liens, soit si nous voulons simplement modifier un élément de la liste de liens, nous allons bien sûr aller ici et nous pouvons mettre à jour les différents éléments qui s'y trouvent. Et cela permet également la nidification. Nous pouvons donc créer ici des menus imbriqués jusqu'à trois couches de profondeur Très bien, alors ferme ça. Cela couvre essentiellement tout, les gars. Je vais supprimer la liste des produits ici. C'était juste une démonstration. Et c'est essentiellement notre vitrine que nous avons créée Pour votre projet de classe, je vous demanderai plus tard dans le cours présenter ce que vous avez construit avec le reste de la classe. Mais c'est l' exemple que je vous ai donné dans ce cours en particulier. Et dans la dernière vidéo avant la conclusion, je vais vous parler de vos options actuelles en matière de personnalisation avancée. Comme je l'ai mentionné tout au long du cours, nous allions faire cette version sans code. Donc pas de code, pas d'IA, il suffit d'utiliser l'éditeur de boutique en ligne avec un thème premium ou gratuit. Mais disons simplement, par exemple, qu'il existe une fonctionnalité que vous souhaitez vraiment intégrer à votre vitrine lorsqu'une section n'existe pas dans votre thème actuel Quelles sont alors vos options ? C'est ce que nous allons aborder dans la prochaine vidéo. 11. Options de personnalisation avancées: Bien, nous avons maintenant créé la vitrine de notre boutique Shopify à l' aide de l'éditeur de boutique en ligne Et comme je l'ai mentionné tout au long de ce cours, nous sommes limités par les sections et les options dans les sections disponibles dans le thème de notre choix, qui dans ce cas, est le prestige. Mais si vous voulez vous affranchir de cette limite, j'ai indiqué plus tôt que j' aborderais cette question à la fin du cours, et c'est le moment de le faire. Et les deux options dont je vais parler sont l'utilisation de ce que l'on appelle Shopify Magic et Sidekick pour vous aider à apporter des modifications à l'aide Ensuite, la deuxième option consiste à engager un véritable développeur. J'ai donc déjà mentionné lorsque nous utilisons un thème d'essai, nous ne pouvons pas réellement modifier le code, et nous sommes également limités en termes de fonctionnalités d'IA. Si je clique pour ajouter une section ici, il y a généralement un bouton ici pour générer une section avec l'IA. Donc, ce que je vais devoir faire, c'est me débarrasser de mon prestige pour le moment, parce que c'est essai, et vous montrer cela sur un thème qui n'est pas à l'essai. Je vais donc le démontrer sur Horizon Je vais donc passer ici pour modifier l'une des choses à noter. Sur ma chaîne YouTube, je parle de toutes ces sections contenant du code sur le back-end. Donc, si je clique avec le bouton droit de la souris ici, je peux réellement cliquer pour modifier le code. Je peux le faire depuis n'importe où dans l'éditeur de la boutique en ligne, soit depuis l'aperçu visuel soit ici dans la barre latérale. Je peux placer mon curseur sur la section. Cliquez avec le bouton droit sur Modifier le code. Je vais vous présenter cet éditeur de code ici, et voici tout le code. Et vous pouvez voir ici tous les fichiers de code dans différents dossiers. Je ne vais pas entrer dans les détails du code et fonctionnement dans ce cours de Skillshare En fait, j'ai trois cours Skillshare différents parlent du développement de thèmes Shopify, du développement, c'est-à-dire du codage. Dans ces cours, j'explique en détail comment personnaliser votre thème à l'aide d'un comment personnaliser votre thème à codage personnalisé Mais depuis que j'ai créé ces cours, de nouvelles fonctionnalités sont apparues dans Shopify pour générer des sections et des blocs avec l'IA Donc, si je clique ici pour ajouter une section, vous verrez apparaître un bouton que nous n'avons pas vu dans le thème Prestige parce que nous étions en mode d'essai, et c'est ce bouton là pour générer. Donc, comme vous pouvez le voir ici dans la section d'aperçu, cela signifie que si vous avez une idée, vous pouvez lui donner vie. Vous n'êtes donc limité que par ce que vous pouvez décrire ici dans cette zone à ajouter dans votre invite. C'est donc quelque chose avec lequel il faut jouer. Ce ne sera pas nécessairement parfait, mais nous pouvons l' essayer dès maintenant. Donc, l'une des sections que j'ai créées avant d'utiliser cet outil de génération de verrous dans Shuba fi est de me créer une section pleine largeur qui présente deux images, chaque image occupant exactement la moitié de la largeur de la section, Je vais appuyer sur Envoyer, puis nous laisserons Shopify Magic ou Sidekick faire leur travail Comme vous pouvez le constater, cela crée du code pour nous sur le back-end, mais nous pourrons le prévisualiser ainsi que les paramètres des sections et tout fois le traitement terminé. Et comme vous pouvez le voir ici, il a généré un aperçu de notre bloc. Techniquement, c'est un bloc. J'espère que si je clique hors d' ici, je pourrai toujours le faire. Techniquement, cela crée un bloc, mais si vous placez simplement un bloc dans une section vide, vous obtenez essentiellement une section. Donc, si je reviens ici, je veux m'assurer que je le teste d' abord avant de cliquer sur Enregistrer, car si je clique sur Enregistrer, cette section se verrouille et je ne suis pas en mesure de fournir des instructions de suivi. Juste pour noter, les gars, qu'il s'agit d'une fonctionnalité assez nouvelle et qu'elle évoluera probablement. Donc, si vous regardez cela dans le futur, cela pourrait être plus avancé ou l'interface utilisateur pourrait être différente. Je voulais juste dire que cela va probablement beaucoup changer à l'avenir. Au moment de l'enregistrement, c'est ainsi que cela fonctionne. Donc, comme vous pouvez le voir, cela me donne deux emplacements pour mettre des images. Donc, disons que je vais juste mettre des photos de ces filles. Cela n'a pas vraiment d'importance. Nous sommes juste en train de faire une démonstration ici, non ? Ensuite, voyons quelles options cela nous offre pour augmenter la hauteur de l' image, d'accord ? Et l'écart entre les images, je ne voulais pas d'écart, mais je peux en fait l'ajouter si je le voulais , puis ajouter un rayon de bordure. Ensuite, je peux également contrôler le positionnement sur mobile, afin de faire en sorte qu'il soit côte sur mobile si je le souhaite ou empilé Et ce ne sont que des paramètres qu'il supposait que nous voulions. Ce n'est donc qu'une supposition , mais je voulais une section complète Je voulais quelque chose qui couvre toute la largeur. Alors laissez-moi voir si je peux le faire avec des instructions de suivi. Je vais dire : Bien. Mais pouvez-vous vraiment le faire sur toute la largeur ? Je ne veux pas le rembourrage habituel à gauche et à droite. Et puis, pour être très précis, le bord gauche de l' image de gauche doit être aligné le bord gauche de la page et vice versa sur la droite C'est bon. Appuyez sur Entrée dessus, et voyons s'il peut réellement comprendre mes modifications et les adapter correctement à la largeur. Très bien, on dirait que c'est bien compris. L'inconvénient de fournir des instructions de suivi à cet outil d'IA est qu' il effacera tous les paramètres précédents. Donc, selon la complexité de la section, cela peut être assez ennuyeux. Permettez-moi donc d'ajouter à nouveau ces images. OK. Et c'est essentiellement ce que je recherchais. Donc oui, cela a fait du bon travail pour une section aussi simple que celle-ci. Vous pouvez donc utiliser les fonctionnalités d' intelligence artificielle de Shubafi pour créer le look que vous recherchez. Je vais le configurer côte à côte sur mobile. Peut-être voulions-nous mettre du texte au-dessus de l'image de chaque côté. Rendez-le liable, nous pourrions également fournir ces instructions ici Mais il est important de noter que si vous cliquez sur Enregistrer ici, vous bloquez l'accès à cette section. Donc, si je clique sur Enregistrer, cela m'empêchera de créer de nouvelles invites de suivi, mais je peux entrer et modifier le code si je comprends comment modifier le code Je ne peux donc pas recommencer, mais je peux entrer et modifier le code comme tel Mais encore une fois, le problème est que vous devez évidemment comprendre le code pour pouvoir travailler avec cela. Donc, encore une fois, si vous voulez apprendre à coder, c'est le summum en termes de personnalisation du thème. Et il y a des cours que j'ai créés sur Skillshare Vous pouvez le prendre si vous voulez comprendre le codage réel des thèmes Shaba Fi Mais dans ce cours, nous nous sommes concentrés spécifiquement sur la création d'une vitrine sans aucun codage personnalisé Maintenant, pour terminer sur l'IA, si nous allons ici, il devrait y avoir un petit bouton ici. C'est assez nouveau depuis l' année dernière au moment de l'enregistrement. Je peux aller ici et demander des modifications. J'ai découvert que cela ne fonctionne pas aussi bien que de simplement générer ici parce que je suppose que c'est une fonctionnalité plus récente, mais je veux dire, je prédis qu' elle ne fera que s' améliorer, comme le sont tous ces outils d'IA. Ajoutez un bouton au-dessus de chaque image auquel je peux renvoyer un lien vers un autre endroit de ma boutique. Appuyez sur Entrée à ce sujet. Donc, comme je l'ai déjà dit, vous ne pouvez pas créer d'instructions de suivi ici, mais une fois que vous avez généré une section d' IA, qu'elle soit générée par l'IA ou non, vous pouvez utiliser ce petit éditeur de thème secondaire Et voyons voir par ici. Je vais vous aider à ajouter un bouton cliquable au-dessus des images de cette section Permettez-moi d'ajuster le thème pour ajouter des boutons. OK. L'a-t-il fait si nous allons ici ? Ouais OK, il s'agit donc quelque sorte de boutons ajoutés à gauche et à droite. Donc oui, comme je l'ai mentionné, j'ai découvert que j'obtenais de bien meilleurs résultats si je générais la section à partir de zéro avec l' IA en utilisant le champ d'invite ici. Je vous recommande donc vivement de bien réfléchir avant de cliquer sur Enregistrer, car oui, vos seules options à ce stade sont de personnaliser le code ou d' utiliser cette fonctionnalité secondaire de demande de modifications. OK. Alors pour terminer, si les sections disponibles dans votre thème et votre IA ne vous aident pas à obtenir le résultat exact que vous souhaitez et que vous souhaitez un niveau de personnalisation supplémentaire ? Eh bien, comme mentionné, le plus haut niveau de personnalisation que vous puissiez avoir avec les thèmes consiste à modifier le code. Comme nous l'avons vu précédemment, si nous cliquons sur Modifier le code sur n'importe quel bloc, c'est l'intégralité du thème, y compris les paramètres de section. Donc, si je fais défiler la page vers le bas, vous pouvez voir dans le schéma ici tout cela est du code JSON. Mais juste pour démontrer que même les paramètres du thème sont tous écrits en code. Vous avez donc accès à l'intégralité du backend de votre thème Shopify, y compris les options disponibles dans le personnalisateur de thème Et c'est exactement ce que je fais en tant que développeur Shopify. J'aide les marchands de Shopify à personnaliser leur boutique en utilisant le pouvoir du code, car de nombreux vendeurs souhaitent personnaliser leurs boutiques en dehors des options sans code disponibles C'est donc là que j'interviens en tant que développeur. Je vais laisser mon site web ici pour que vous puissiez vérifier si vous intéresse, c'est Christopher Dodd.com Vous pouvez voir les marques avec lesquelles j'ai travaillé ici et quelques témoignages de clients précédents, mais le principe est que si vous souhaitez une personnalisation avancée, vous devez soit apprendre à coder, soit engager un développeur Donc, que ce soit moi ou quelqu'un d'autre que vous puissiez trouver, ce sera votre meilleure option pour une personnalisation complète de votre vitrine Et pour terminer cette leçon, si vous êtes un commerçant Shopify qui souhaite en savoir plus sur personnalisations avancées et le fonctionnement de la technologie sur la plateforme Shopify, j'ai également une chaîne YouTube que vous pouvez trouver sur youtube.com (symbole oblique Chris Dodd youtube.com (symbole oblique Et sur cette chaîne, vous pouvez en savoir plus sur ce que je fais et sujets similaires à ceux que nous avons abordés dans cette vidéo. J'ai ici deux vidéos qui recoupent assez bien le contenu de ce cours en termes d'utilisation de l'éditeur de boutique en ligne et d'utilisation de side kick and magic. Mais j'ai aussi tout un tas d'autres vidéos sur les différents aspects technologiques de votre boutique Shopify, réalisées par quelqu'un qui travaille sur la plateforme depuis plus de six ans Bien, donc si c'est réglé, passons à la fin du cours Skillshare , et je vous parlerai également de votre projet de cours dans la 12. Conclusion et projet de cours: Ainsi s'achève ce cours sur la personnalisation du thème Shopify Pour votre projet de classe, je vous encourage à créer votre propre vitrine sur Shopify, en utilisant la méthode présentée tout au long de ce cours. Si vous avez un véritable magasin, vous devez bien entendu utiliser votre propre magasin pour cela. Mais si vous suivez ce cours juste pour vous entraîner, vous pouvez créer gratuitement ce que l'on appelle un magasin de développement. Vous pouvez le faire en créant un compte partenaire gratuit et en le créant via le tableau de bord des développeurs. Ensuite, une fois votre boutique Shopify configurée, choisissez un thème dans la boutique de thèmes Shopify et utilisez l'éditeur de boutique en ligne pour personnaliser le thème de votre Vous avez terminé votre vitrine, partagez-la avec la classe dans la section des projets de classe de la manière qui vous convient le mieux, que ce soit par le biais de captures d'écran ou d' un lien direct vers la boutique Si vous aimez ce cours, assurez-vous de laisser un commentaire positif et consulter certains de mes autres cours ici sur skillshare.com, où je me concentre sur le développement Web, où je me concentre sur le développement Web, Shopify et Merci, comme toujours, d'avoir regardé, et je vous revois dans le prochain.