Shopify sans code : comment créer des modèles personnalisés avec des applications de création de pages + L'éditeur de thème

1. Introduction: Vous souhaitez donc créer des designs personnalisés sur votre site Shopify Mais vous ne voulez pas avoir à vous plonger dans le code du thème, car vous n'êtes peut-être pas un développeur ou vous n'avez tout simplement pas encore acquis ces compétences. Quelles sont donc vos options ? Eh bien, dans ce cours de partage de compétences, nous aborderons exactement cela Si vous n'avez jamais vu mon visage auparavant, je suis Christopher Dodd. Je suis l'un des meilleurs professeurs Skillshare.com et, surtout, un expert de Shopify qui propose certains des cours Skillshare les plus regardés sur Shopify Development de Skillshare.com et, surtout, un expert de Shopify qui propose certains des cours Skillshare les plus regardés sur Shopify Development. Dans ces cours, ainsi que sur ma propre chaîne Youtube. J'aborde en profondeur l'aspect développement de Shape Fi, mais dans ce cours, nous allons sortir de l'éditeur de code et voir ce qui peut être réalisé dans Shape Fi sans aucun codage. Je sais que beaucoup d'entre vous sont des propriétaires de magasins ou des créatifs qui ne veulent pas nécessairement devenir développeurs comme moi J'ai donc créé ce cours juste pour vous. Bien entendu, nous allons commencer par l'approche purement native en utilisant le propre éditeur de thèmes de Hope Fi. Mais nous examinerons ensuite certaines des applications de création de pages qui sont plus illimitées en termes d'options de personnalisation. L'objectif principal de cette classe n'est pas simplement de passer en revue un ensemble de fonctionnalités de Page Builder, mais aussi de vous aider à comprendre la place de ces options sans code dans votre boutique. Comprendre les limites de ces applications et ce qui se passe réellement dans les coulisses. Donc, si c'est le cas, si vous êtes prêt à apprendre à personnaliser votre boutique Shopify sans coder, cliquez sur la vidéo suivante et je vous verrai à l'intérieur 2. Préface: Ici, vous pouvez voir l'une de mes boutiques Shopify. C'est ce que l'on appelle une boutique de développement, ce qui signifie qu'elle possède presque toutes les fonctionnalités d'une boutique Shopify normale Mais je ne peux pas vraiment vendre quoi que ce soit dessus, c'est juste à des fins de test et de développement. Idéalement, vous avez votre propre magasin d' espoir avec lequel travailler. Mais sinon, vous pouvez toujours créer une boutique de développement gratuite comme moi. Je ne vais pas passer en revue l'ensemble du processus dans ce cours, car j'ai abordé ce sujet à plusieurs reprises dans d'autres cours et classes. Mais si vous voulez voir un tutoriel sur la façon de procéder, vous pouvez en trouver un sur moins de trois ici dans mon cours précédent intitulé Configuration de Shopify Store En fait, si vous découvrez Shopify pour la première fois et avez besoin d'une introduction à son fonctionnement, je vous recommande de regarder l'intégralité de ce cours avant celui-ci, en particulier la quatrième leçon de ce cours, celle sur l'architecture des boutiques Shopify Je vais m'arrêter ici une seconde pour vous donner un bref moment pour vous demander si vous voulez le faire. Si c'est le cas, mettez cette vidéo en pause et revenez à ce cours une fois que vous aurez fini de regarder l'autre cours. OK, prêt à continuer ? Commençons par concentrer notre attention sur le canal de vente de la boutique en ligne. Dans le canal de vente de la boutique en ligne, nous avons nos thèmes, nos articles de blog, nos pages personnalisées, nos listes de liens, également appelées menus, qui se trouvent ici dans la section de navigation. Et puis certains paramètres ici concernent spécifiquement ce canal de vente. Si nous passons aux thèmes, j'espère que vous connaissez les thèmes conceptuels. En gros, prenez le contenu que vous mettez dans votre boutique et affichez-le sur le front-end. Par exemple, si nous examinions la page d'un produit, le titre et le prix indiqués ici sont ceux que vous avez définis dans l'interface d' administration pour ce produit en particulier. Cela étant dit, la structure qui entoure ces informations est déterminée par le thème que vous étudiez actuellement. Si aucune barre d'aperçu en bas de l'écran ne vous indique le thème que vous utilisez actuellement, vous utilisez probablement le thème actuellement en ligne de votre boutique, que vous pouvez voir ici en haut de la page pour les thèmes. Maintenant, si vous savez comment écrire code de développement Web frontal, les thèmes sont très flexibles car ils sont tous basés sur du code. Dans l'exemple précédent, si nous examinions titre et le prix du produit dans le thème, vous pouvez voir le code qui l'entoure. Cette partie s'appelle Chop Fi Liquid code et indique à Shop Fi d'insérer le titre ici et le prix ici. Il est important de noter que vous souhaitiez toucher le code ou non, le résultat final est toujours du code. Ce que je veux dire par là, c'est que toutes les options que nous utilisons pour éviter le code créeront simplement du code pour nous. Nous n'avons peut-être pas besoin d' apprendre à coder, mais simplement de comprendre que le code est toujours créé. Vous pouvez en avoir la preuve en consultant n'importe quelle page sur le Web, le site Web de Shopify ou autre Il vous suffit de cliquer sur Afficher la source de la page. Et comme vous pouvez le constater, le résultat est toujours du code. Vous ne le comprenez peut-être pas encore, mais le thème est le meilleur moyen de personnaliser le front-end de votre boutique. Le seul problème est que l'éditeur de thème, dont nous parlerons prochainement, est encore très limité pour de nombreux utilisateurs. L'éditeur de thème, juste pour vous donner un aperçu, est l'interface utilisateur qui s'affiche lorsque vous cliquez ici pour personnaliser votre thème. Si nous examinons le code du thème, les options disponibles dans votre éditeur de thème ont en fait été codées dans le thème lui-même. Et la valeur de ce que l'utilisateur définit dans l'un de ces champs est simplement insérée dans le code. la même manière que nous l'avions vu auparavant avec le titre et le prix du produit. Étant donné que les seules options de votre éditeur de thème sont celles que le développeur du thème vous a spécifiquement fournies. Vous constaterez peut-être que l'option permettant de personnaliser une certaine partie de votre thème n'est pas disponible. Et c'est ce que je veux dire par le fait que cette solution est un peu limitée. C'est pourquoi les développeurs d'applications ont créé des applications appelées constructeurs de pages. Ces applications ont été développées par des tiers et fournissent leur propre interface utilisateur pour créer des designs de page et des mises en page dans Schobifi Lorsque vous créez un design et cliquez sur Publier sur l'une de ces applications, code est créé pour vous et injecté quelque part dans la fin ou le thème de votre boutique Habi Fi. Je sais que cela peut sembler un peu trop théorique ou compliqué pour une première leçon de classe sur Shopify sans code Mais je vous présente ces concepts pour vous aider à comprendre ce qui se passe réellement. Avant de passer des heures investir dans l'apprentissage et le développement applications sans comprendre comment elles affectent réellement votre boutique, laissez-moi essayer de vous simplifier les choses avec un simple tableau vous présentant les options qui s'offrent à vous. La première option consiste à gérer le code du thème. Il s'agit de la seule option dans laquelle vous aurez un contrôle total sur le front-end de votre boutique. Bien que je le recommande, il présente la courbe d'apprentissage la plus abrupte Et comme il s'agit d'un cours sur Shopifi sans code, je vais complètement supprimer cette option pour ce La deuxième option consiste à utiliser les options disponibles dans votre éditeur de thème. C'est le scénario idéal, mais cela dépend totalement des options de votre thème. Un thème peut avoir des centaines et des centaines d'options, voire zéro. Tout dépend du développeur du thème. Et au moment de l' enregistrement de ce cours, les éditeurs de thèmes et les fonctionnalités de glisser-déposer étaient très limités. Vous pouvez réorganiser les sections et les blocs imbriqués Et c'est à peu près tout. Nous en parlerons plus en détail dans la prochaine vidéo. Enfin, la troisième option consiste à installer une application Page Builder. Il s'agit de la méthode native la moins robuste pour personnaliser votre vitrine Mais ces applications sont très populaires en tant que solutions sans code, car elles sont conçues spécifiquement pour les utilisateurs sans code. Au début, ces applications peuvent sembler incroyables, mais au fur et à mesure que vous les approfondirez, vous constaterez peut-être que s' éloigner de la façon native de faire les choses de Shopify peut en fait causer certains problèmes. Dans la vidéo suivante, nous allons parler de la deuxième option, l'éditeur de thème Shop Fi. 3. L'éditeur de thème natif Shopify: Je recommande à tous mes clients et étudiants d' utiliser l' éditeur de thème natif de Shopify tous mes clients et étudiants pour personnaliser leur interface Nous pouvons personnaliser n'importe quel thème en cliquant simplement sur le bouton personnalisé correspondant à ce thème. Avant de commencer à jouer avec cette version de l'éditeur de thème, il est très important de noter ici que Hopefi change et améliore constamment l'expérience utilisateur de l'éditeur de thème Ce que vous regardez aujourd'hui peut être très différent de ce que je vous montre en ce moment. Mais je tiens également à souligner qu'à mesure que le système d'édition de thème natif s'améliore sur Shape Fi, le besoin d' applications de création de pages diminue lentement Shabifai propose prochainement des mises à jour intéressantes pour l'éditeur de thèmes, mais le calendrier de publication de ces mises à jour n'est jamais gravé dans Malheureusement, notre seule option est de rester patients et d' attendre la mise à jour. Dans la prochaine vidéo, je vais aborder une annonce importante à l'éditeur de thèmes qui vient d'être annoncée mais qui n'a pas encore été publiée. Mais comme cela ne s'est pas encore produit, revenons aux options qui à nous pour le moment. Tout d'abord, Shobifi utilise un système de modèles afin que vous n'ayez pas à créer des apparences et des mises en page distinctes pour chaque page de produit, page de collection, article de blog, etc. Par défaut, chaque page de produit utilisera le modèle de produit par défaut. Actuellement, nous sommes sur le modèle de page d'accueil, qui, comme il n'y a qu' une seule page d'accueil pour un site Web, ne s'applique qu'à une seule page. Mais si nous cliquons sur ce bouton, vous verrez la liste des modèles que nous pouvons modifier. Cliquons sur Produit , puis sur Produit par défaut. Nous pouvons voir que ce modèle est attribué à 12 produits de notre boutique. Et qu'il n'y a aucun autre modèle de produit à sélectionner ici. Par conséquent, nous pouvons supposer que ce modèle s' appliquera essentiellement à tous nos produits. Nous pouvons créer un modèle de produit alternatif ici, mais nous y reviendrons dans une seconde, car il s'agit du seul modèle de produit utilisé sur ce thème. Toutes les modifications que nous apportons ici s'appliqueront à toutes les pages de produits situées à côté de la liste déroulante. Pour choisir le modèle à modifier, nous avons une liste déroulante pour les marchés, une nouvelle fonctionnalité qui nous permet d'apporter modifications qui ne s'appliquent qu' à un certain Par exemple, si nous passons à l'Australie, vous verrez le libellé changer pour ajouter une section et ajouter un bloc. Ils deviendront désormais une section à ajouter à l'Australie. Bloquez l'Australie Comme vous pouvez le voir ici, nous recevrons un avertissement avec un lien pour en savoir plus. Comme il s'agit d' un concept plus avancé qui ne s'appliquera pas à la plupart d'entre vous, je ne le mentionnerai pas pour ce cours, mais vous pouvez toujours vous référer à ce document pour savoir comment fonctionne le sélecteur de marché dans votre éditeur de thème Pour en revenir au contexte par défaut, parlons du reste cette barre supérieure. De gauche à droite, nous avons le bouton pour quitter notre éditeur de thème, suivi du nom du thème actuel, suivi du badge indiquant s'il est en ligne ou non. Et puis ces trois points pour développer plus d' informations et d'options, les principales étant le lien direct pour modifier le code du thème ou pour afficher le thème tel qu'il se trouve actuellement sur le front-end. Vous avez évidemment d' autres boutons ici, mais le bouton d'affichage et le bouton édition du code sont les plus pratiques. Cela étant dit, comme il s' agit d'un cours sans manteau, c'est essentiellement le bouton d' affichage qui présente un intérêt. Si nous portons maintenant notre attention sur la droite de cette barre d'outils, ce bouton désactivera l'inspecteur, ce qui ne fera qu'activer ou désactiver cette fonction, où vous pourrez passer le curseur sur chaque section visuellement pour voir le nom de la section et cliquer entre elles pour ajouter Ou cliquez sur la section elle-même pour ouvrir les paramètres de cette section sur le panneau de gauche. En termes de fonctionnalité entièrement visuelle de Dragon Drop Editor, c'est à peu près ce qu'il faut, actuellement avec l'éditeur de thème Shove Fi, mais il est prévu de l' améliorer considérablement Restez connectés à la prochaine vidéo de ce cours pour en savoir plus à ce sujet. Pour l'instant, désactivons-le et utilisons le panneau de gauche pour créer, mettre à jour et déplacer des sections. Mais avant cela, il ne reste que quelques boutons à aborder ici. Tout d'abord, vous avez cette option pour afficher la page sur ordinateur, mobile ou en plein écran, ce qui masque simplement la barre latérale afin que vous puissiez voir le design réparti sur toute la largeur de votre fenêtre Ensuite, vous avez le bouton d'annulation, le bouton rouge et le bouton de sauvegarde. Elles sont assez explicites. Pour les activer, il suffit de modifier notre modèle, puis de l' enregistrer ou de l'annuler. Si nous l'annulons, nous pouvons tout aussi facilement cliquer pour rétablir cette modification OK, donc avec la barre supérieure supprimée, nous pouvons maintenant discuter de ce panneau de gauche où nous allons apporter toutes nos modifications Vous verrez d'abord qu'à partir de ce thème, nous avons un groupe d'en-têtes, un groupe de pieds de page, puis le contenu du modèle Les groupes de sections sont une fonctionnalité relativement nouvelle de Shopify, il est donc possible que vous ne les voyiez pas dans votre thème La possibilité d'ajouter une section et d'organiser les sections ici, sauf si cette fonctionnalité a été ajoutée au thème. Quoi qu'il en soit, il est important de noter que les sections situées en dehors de ce groupe de modèles s'appliquent à ce que l' on appelle la mise en page. Généralement, les thèmes n'ont qu'une seule mise en page, nous pouvons donc simplement dire ici que ces sections resteront les mêmes quel que soit le modèle que nous examinons. Ces sections, en revanche, sont spécifiques à ce modèle. Ainsi, toute modification apportée ici n'affectera que le modèle actuel sur lequel nous nous trouvons. Vous expliquer le fonctionnement des sections dans les sections Shapefi sont donc Shapefi sont principaux éléments de base des thèmes Chapifi Essentiellement, chaque page de habifi n'est qu'une liste de sections empilées les unes sur les autres Par exemple, si je ramène l'inspecteur un instant, nous pouvons voir ces sections dans le groupe d'en-têtes, la section de la barre d'annonces, suivie de la section d'en-tête. Ensuite, nous pouvons voir les sections appartenant au modèle. Nous avons des informations sur les produits suivies de produits connexes. Enfin, nous avons la section Potter, qui fait partie de la mise en page à l' intérieur du groupe de photos. Une chose que je n'ai pas mentionnée avec cet inspecteur, c'est que nous pouvons cliquer sur éléments imbriqués dans la section appelée blocs Comme vous le voyez ici, lorsque je passe le curseur sur ces éléments le bloc correspondant est surligné sous la section Permettez-moi de désactiver l' inspecteur une fois de plus. Et nous pouvons maintenant voir ici que nous pouvons réorganiser les sections d'un modèle ainsi que les blocs une section en cliquant et en faisant glisser le pointeur, cliquant sur la section des annonces Nous pouvons ajouter n'importe laquelle de ces 17 sections à notre thème. Ou si nous avons installé une application particulière qui utilise des extensions d'applications thématiques, nous pouvons également inclure une section d'une application particulière. Voici une application personnalisée que j'ai créée pour un autre tutoriel. De la même manière, nous pouvons ajouter des blocs supplémentaires à notre section jusqu'à ce que Shopify publie la mise à jour dont je parlerai dans la prochaine vidéo La liste des options de blocage ici sera limitée à la liste des options de blocage définies dans la section elle-même. Vous pouvez donc voir ici que, comme cette section n' autorise qu'un seul bloc de boutons et un bloc de titre par section, notre seule option est d'ajouter un bloc de texte ici que nous pouvons agencer à côté des autres blocs. Les sections et les blocs peuvent ou non avoir leurs propres paramètres. Vous pouvez donc voir ici pour la bannière d'image, je peux définir les images que je souhaite utiliser, définir une opacité spécifique pour la superposition, modifier la hauteur de la bannière, etc. Ensuite, si je passe en revue certains des blocs ici, vous pouvez voir qu'ils ont également des paramètres. Je pourrais modifier le texte du bouton, mettre à jour l'adresse vers laquelle ce bouton doit renvoyer. Et pour enregistrer l' une de ces modifications, il me suffit de cliquer sur Enregistrer dans le coin supérieur droit. Et mes modifications seront ensuite appliquées au thème. Enfin, pour n'importe quelle section ou bloc, nous pouvons cliquer sur l'icône de la corbeille pour la supprimer, ou sur l'icône pour maintenir nos paramètres en place, mais simplement la masquer à l'utilisateur final. À ce stade, c'est le bon moment pour mentionner que ces sections et blocs s'appliquent à ce thème spécifique, qui est la version 12.0 0.0 du thème Dawn de Sobi Fi Il est important de noter que chaque thème est différent et que les paramètres de chacune de ces sections et de ces blocs proviennent de schémas écrits dans le thème lui-même Je n'entrerai pas dans le code dans ce cours car il s'agit d'un cours Shopify sans code Mais il suffit de noter ici que si vous connaissez du code, vous pouvez modifier ces schémas pour activer nouvelles options au sein d'un thème existant Pour en revenir à l'éditeur , soyez indulgent, car il n'y a que quelques autres domaines à aborder. Ici, dans le panneau de gauche, vous remarquerez qu'il y a deux autres onglets ici. Dans le deuxième onglet se trouvent les paramètres de votre thème. Ces paramètres ne sont pas liés à une section ou à un bloc en particulier, mais s'appliquent à n'importe quel endroit de votre thème. Par exemple, nous pouvons entrer et modifier des couleurs spécifiques stockées dans le jeu de couleurs du thème. Tous ces éléments sont regroupés dans des accordéons distincts afin que nous puissions naviguer plus facilement entre eux Enfin, le dernier onglet est l'endroit où nous pouvons activer et désactiver certaines applications intégrées sur un seul thème Il s'agit probablement d'un panneau que vous n'aurez pas à toucher à moins d'y être invité par les développeurs de l' une des applications que vous utilisez sur votre boutique. Avant de terminer cette vidéo, j'ai promis de parler des modèles alternatifs. Donc, si vous vous souvenez quand nous avons cliqué ici pour accéder aux produits, vous pouvez voir qu'il n'y a qu' un seul modèle de produit par défaut Mais je peux créer ce bouton pour créer un modèle. Appelons simplement cela une mise en page de produit alternative. OK ? Ensuite, nous pouvons choisir sur quoi nous voulons qu'il soit basé. Et comme il n'y a actuellement qu'un seul modèle dans notre thème, nous n'avons qu'une seule option, qui est le modèle de produit par défaut. Nous allons donc créer, oh, en fait, ce n'est pas le cas. Laissez-moi faire des mises en page. Permettez-moi donc de faire une mise en page alternative. La partie produit peut être supposée. OK, je vais cliquer sur Créer un modèle. Cela permettra de créer un modèle de produit alternatif dans notre thème. Je veux juste te le montrer rapidement. Je sais que c'est une classe sans code, mais juste pour vous montrer ce qu' elle fait dans les coulisses, car vous pouvez également faire exactement ce que je viens de faire dans le code. Il crée ici même. Si nous examinons où se trouvent les produits, ce produit est le modèle de produit par défaut. Mais celui-ci est là, celui que nous avons appelé mise en page alternative. Il s'agit de notre modèle de produit alternatif. D'accord, je vais vous montrer comment l'attribuer dans une seconde, mais revenons ici. Nous l'avons créé à l'aide de l'éditeur de thème. Nous n'avons pas eu à toucher au code, mais juste pour que vous sachiez, comme je l'ai mentionné tout au long de ce cours, le code est toujours créé. C'est donc ce qui se passe sur le back-end. OK, alors maintenant, ce que nous pouvons faire, c'est créer une mise en page complètement différente avec cela. Je ne sais pas ce que nous ferions. Un exemple plus pratique serait que nous ne me laisserons pas supprimer cette section. Mais nous pouvons l'ajouter, par exemple, si nous l'attribuons à un produit très particulier. Nous l'attribuons donc à un seul produit. Et nous pouvons parler davantage de ce produit en particulier. Nous pouvons en dire plus, nous étudions actuellement les airpods en ce moment. Nous pouvons en dire plus sur les airpods, puis entrer dans le vif du sujet. Les Airpods sont géniaux. Je ne suis pas une bonne rédactrice en fait. Nous pouvons demander à Shopify de générer du texte pour nous, une description ou des arguments de vente des airpods Apple Regardez cette expérience, la connectivité fluide et le son cristallin des airpods d'Apple. Est-ce que c'est bon ? OK, puis donnez une étiquette à ce bouton, en fait, nous allons simplement le supprimer. Vous pouvez avoir une page de produit avec ce détail particulier. Et tout ce que nous avons à faire est de l'attribuer à ce produit Air Pods. Je vais appuyer sur Enregistrer dessus , puis je quitterai l'éditeur de thème. Et je vais passer aux produits, trouver ce produit Air Pods dans l'administration de notre boutique. Et puis c'est ici que je peux changer le modèle de thème. Et au lieu du produit par défaut, je peux maintenant passer à celui que nous venons de créer , appelé Alternative Layout. Et j'appuie sur Enregistrer et je clique pour prévisualiser ce produit. le regardant à travers notre thème actuel, Dawn version 12, vous pouvez voir une fois que nous faisons défiler la section Informations sur le produit et les produits connexes Vous pouvez en savoir plus sur l'expérience des airpods, la connectivité fluide et son cristallin des airpods C'est ainsi que nous pouvons influencer la mise en page d'un produit en particulier tout en conservant le même modèle de mise en page que les autres produits. Comme vous pouvez le constater, ils utilisent tous le modèle par défaut. Ils n' auront pas cette section supplémentaire, mais pour le produit en particulier auquel nous avons attribué le modèle alternatif, section que nous avons insérée dans ce modèle est présente sur cette page de produit. OK, donc si nous voulons modifier cela à l'avenir, nous ne le ferons pas à partir d'ici, la liste des produits elle-même. Dans notre interface d'administration, nous devons revenir à notre éditeur de thèmes. Accédez au modèle de produit attribué à ce produit. Vous pouvez maintenant voir qu'il est attribué à un seul produit. Nous sommes en train de prévisualiser les airpods, le produit auquel ils sont assignés Maintenant, si je souhaite modifier le modèle pour ce produit en particulier, je peux le faire via ce modèle. Si je reviens au modèle par défaut, vous pouvez voir ici que cette section ne figure pas sur le modèle de produit par défaut. Alors voilà. L'éditeur de thèmes Shopify L'une des questions que l'équipe Skillshare m'a posées lors de l' examen de mon plan pour ce cours était la raison la déclaration que j'ai faite au début de cette leçon C'est l'éditeur de thème natif de Shopify que je recommande à tous mes clients et étudiants d'utiliser pour personnaliser leur interface C'est une déclaration difficile à expliquer sans entrer dans les détails techniques. Permettez-moi donc plutôt d'utiliser une analogie. Peut-être avez-vous entendu parler d'évasion de prison. C'est la pratique qui consiste à modifier votre téléphone afin que vous puissiez bénéficier d'un accès illimité à l'ensemble du système de fichiers Cet accès permet d' effectuer des modifications qui ne sont pas prises en charge par le téléphone dans son état par défaut. Eh bien, utiliser un générateur de pages sur Chobifi est quelque chose d'un peu similaire C'est une solution de piratage qui pourrait aller à l'encontre du système de conception thématique créé par Chobe Fi sans trop entrer dans les détails Vous constaterez peut-être que le fait de s' éloigner du système standardisé de Chobe Fi peut entraîner des problèmes inattendus Certains d'entre eux apparaîtront peut-être dans le cours une fois que nous aurons commencé à installer certains de ces constructeurs de pages sur votre boutique. 4. Mises à jour annoncées de l'éditeur de thème natif: Deux fois par an. Shobifi fait de nombreuses annonces dans le cadre de ce que l' on appelle les éditions Shapefi Dans l'édition hiver 2024 de Shabifi, Shobifi a annoncé quelques mises à jour intéressantes des thèmes et de l'éditeur de thèmes Bientôt, les blocs seront aussi modulaires que les sections. Et ce qui est peut-être encore plus intéressant, blocs pourront également être imbriqués dans d'autres blocs plutôt que Avant d' approfondir cette fonctionnalité, il est important de noter qu' aucune date précise n'a été fixée pour sa mise à disposition du public. Et deuxièmement, même lorsqu'il sortira, votre thème devra être en mesure de le supporter. Cela signifie que nouveaux thèmes créés après la mise en ligne de cette modification tireront très probablement parti de cette nouvelle fonctionnalité. Mais il y aura beaucoup de thèmes plus anciens qui resteront sur l'ancien système. Alors gardez cela à l'esprit pour le moment. Cette fonctionnalité n'est disponible que lors de la version préliminaire pour les développeurs, ce qui signifie que seuls les partenaires comme moi peuvent l'utiliser. Cela étant dit, permettez-moi de vous donner un petit aperçu de la façon dont cela devrait fonctionner à sa sortie. Très bien les gars, avant de plonger dans le vif du sujet et de vous montrer cette nouvelle fonctionnalité intéressante, je voulais juste vous donner un peu de contexte. Je me trouve actuellement dans une boutique de développement dans laquelle la version préliminaire pour développeurs est activée pour cette nouvelle fonctionnalité. Ce magasin, comme il est dit ici, est donc en cours de développement. Cela ne le dit pas vraiment, mais ce n'est pas une boutique en ligne, comme je ne peux pas réellement vendre produit et l'utiliser pour une entreprise. Ceci est uniquement à des fins de test et de développement et pour prévisualiser cette nouvelle fonctionnalité. J'ai pu le faire parce que j'ai un compte de partenaire Hope Fi. Et à partir de là, vous pouvez créer un magasin de développement. Je n'aborderai pas le processus dans cette vidéo simplement parce que je ne vous demande pas de le faire réellement. Vous pouvez simplement regarder cette vidéo pour voir les modifications à venir et décider vous-même si vous souhaitez attendre qu'elles soient mises en ligne et commencer à les utiliser dans votre flux de travail sans code et chop fi. Mais si vous vouliez en avoir un aperçu à l' avance et que vous avez hâte d'y jeter un œil, vous trouverez sur ma chaîne Youtube, dont je parlerai plus en détail à la fin de ce cours, une vidéo sur Shopper Fire Winter Editions 2024, date à laquelle cette fonctionnalité a été annoncée Dans cette vidéo, je vous montre comment j'ai configuré le Developer Preview Store. OK, donc juste au cas où vous voudriez suivre, c'est comme ça que vous le faites. Et l'autre chose que je voulais juste mentionner ici est que, comme je l'ai dit, pour tirer parti de cette nouvelle fonctionnalité, vous devez non seulement être sur un magasin de développement avec la version préliminaire pour les développeurs activée, mais vous devez également utiliser un type de thème spécifique. Et comme vous pouvez le voir ici, ce thème est appelé thème de référence principal. Il s'agit d'un thème qui a été créé par Hub Fi pour vous montrer comment il va fonctionner lorsqu'il sortira. Vous avez donc besoin du thème et vous avez besoin de la boutique. La mise en place demande un peu de travail, alors j'ai décidé de ne pas le faire pour cette vidéo. Mais si vous voulez savoir comment installer le thème de développement sur un magasin de développement, vous pouvez regarder cette vidéo sur Youtube. Mais sans le mois de février. Ado, passons au personnalisateur ici et vous remarquerez qu'il est un peu différent de ce à quoi nous sommes habitués Vous pouvez donc voir ici que nous avons cette bannière d'image, dont le thème ressemble tout d'abord beaucoup à l'aube. Je pense que c'est basé sur Dawn. Mais il tire parti de ces nouveaux blocs réutilisables du thème. Comme vous pouvez le voir, il y a ici une section de bannières illustrées qui est également présente à l'aube. Mais si nous regardons sous la bannière de l'image, nous pouvons voir qu'il existe un groupe imbriqué appelé groupe Et au sein de ce groupe, nous avons des blocs imbriqués. Maintenant, je ne peux pas ajouter un autre bloc ici. On dirait que je peux utiliser un bouton secondaire. Allons-y. Nous avons maintenant ajouté un bloc dans ce groupe de blocs, n'est-ce pas ? Ensuite, je peux réorganiser ces blocs au sein de ces groupes de blocs Et ce que ce groupe m'offre , c'est un contenant sur fond blanc. Mais je peux changer la position du contenu, je peux modifier certains aspects comme la mise en page ici. Il semble que le passer en horizontal soit un peu bogué car il se trouve dans Developer Preview Mais ce qu'il faut noter ici, c'est qu'auparavant, nous avions une section et que nous pouvions ensuite imbriquer une liste de blocs dans une section. Nous pouvons maintenant mettre une liste de blocs dans un bloc au sein d'une section. Jetons un coup d'œil à un autre exemple. Passons à la section personnalisée. C'est probablement un meilleur exemple car nous avons une section personnalisée ici. Et si nous regardons à l'intérieur, nous avons ce bloc pour le titre, puis nous avons ce groupe. Et puis, au sein de ce groupe, nous avons deux groupes, et en fait, nous avons quelque chose entre les deux. Ah, nous avons donc essentiellement trois colonnes. Nous avons donc ce groupe, qui ressemble essentiellement à une mise en page en trois colonnes. Et puis, à ce troisième niveau, nous avons un groupe d'images de groupe. C'est essentiellement comme nos colonnes. Ensuite, dans le premier, nous pouvons empiler deux blocs pour former une colonne. Je pourrais déplacer celui-ci de l'autre côté. Cela me donne un contrôle plus flexible sur ma mise en page. D'accord, donc oui, comme vous pouvez le voir, dans cette section personnalisée, est là que cela devient beaucoup plus personnalisable. Nous pouvons imbriquer des groupes au sein de groupes, au sein de groupes. Cela nous permet de créer des mises en page personnalisées qui n'étaient jamais possibles auparavant, ayant simplement un seul niveau de blocs imbriqués sous une section OK, donc c'est un truc assez excitant. Cela va être un énorme changement de paradigme dans l'éditeur de thèmes et je pense que cela suffira à beaucoup de gens de ne pas avoir à utiliser des constructeurs de pages parce que je veux faire quelque chose comme avoir ce titre. Je ne dis pas que c'est un exemple pratique, mais il serait presque impossible de placer quelque chose comme un titre au-dessus de l'icône pour l'une de ces colonnes, mais pas pour toutes. Il faudrait par exemple définir une case à cocher. Ce ne serait pas intuitif, car vous deviez intégrer de nombreuses options dans votre thème pour y parvenir. Mais maintenant, avec le fait que les blocs sont réutilisables et qu'ils peuvent être imbriqués les uns dans les autres, cela change vraiment la donne Et j'espère que vous commencez à comprendre ce que je veux dire par tout cela est divisé en différents petits blocs que tout cela est divisé en différents petits blocs sur lesquels je peux ensuite cliquer plus profondément. Donc, ici, nous avons cette section, puis nous avons un bloc, puis dans ce bloc, nous avons ces trois autres blocs. Et chacun de ces blocs et sections possède ses propres paramètres. Donc oui, si vous voulez jouer avec cela, mais cette leçon ou cette vidéo simplement à vous montrer ce qui va arriver afin de déterminer si vous souhaitez toujours investir dans un générateur de pages ou attendre que ces modifications se produisent. C'est donc très encourageant de voir ces fonctionnalités apparaître dans l'éditeur de thème. Plus l'éditeur de thème s'améliore, moins les applications de création de pages deviennent attrayantes. Et c'est toujours le bienvenu pour moi en tant que développeur. Étant donné que cette nouvelle fonctionnalité de bloc a permis de développer une version préliminaire, nous devrions la rendre publique très prochainement. En ce qui concerne les sections flexibles, annoncées six mois avant la dernière édition, nous n'avons pas encore entendu de mise à jour à ce sujet. Pour l'instant, je vais terminer cette vidéo par un extrait de la chaîne Youtube officielle de Have Fi où la vision du nouvel éditeur de thèmes est discutée et où des sections flexibles sont introduites. Bien, revenons à l'éditeur de boutique en ligne, où je sais que beaucoup d'entre vous passent leur temps à améliorer l'apparence de leurs sites. Et je voudrais vous présenter quelques nouvelles fonctionnalités de notre émission, Fire Themes, qui vous aideront à donner un peu plus de vie à votre boutique. Ici, dans l'éditeur, je vais cliquer sur les paramètres de mon thème puis sur Animations. Et il y a quelques petites choses sympas ici. Vous pouvez donc avoir des sections révélées au fur et à mesure du défilement, ce qui me donne cet effet agréable lorsque mes sections apparaissent ce qui me donne cet effet agréable lorsque mes sections apparaissent dynamiquement lorsque je fais défiler la page vers le bas. Et cet autre effet de survol pour un lifting en trois D signifie que lorsque je passe la souris sur les éléments de la page, j'obtiens ce bel effet de scintillement en trois D qui donne simplement vie au site C'est vraiment cool. Le dernier petit effet que je veux vous montrer concerne les sections où vous avez des images Nous avons ce nouvel effet où vous pouvez essentiellement créer une parallaxe en définissant des positions d' arrière-plan fixes Au fur et à mesure que je fais défiler la page, nous obtenons ce bel effet de parallaxe qui, encore une fois, est un excellent effet visuel, rend votre position assise un peu plus animée Maintenant, tout ce que je vous ai montré jusqu'à présent est en direct et disponible pour que vous puissiez tous l'utiliser. Avant de conclure aujourd'hui, je voudrais vous donner un aperçu de quelques nouvelles fonctionnalités qui ne sont pas encore prêtes, mais qui seront bientôt disponibles Et j'ai hâte que vous y jetiez un œil. La première est donc ce que nous appelons les sections flexibles. Ici, dans l'éditeur je vais cliquer pour sortir de la section, comme je le ferais toujours dans le sélecteur de section En fait, je vois maintenant un petit aperçu des sections avant de cliquer dessus. Ce qui est vraiment agréable et utile si je passe beaucoup de temps à essayer des sections de mon thème. Maintenant, j'ai la section sur la page, et elle est plutôt bonne, mais ce n'est pas exactement ce que je veux. Maintenant, avec les sections flexibles, je peux réellement personnaliser cette section avec de nouveaux blocs. Je vais cliquer sur ce bouton plus et dire que je veux une autre image ici. Mettons quelques images réelles dans ces blocs. Je vais choisir les balles de tennis en bas, et peut-être le kit de couture pour le haut. Maintenant, je veux qu'il soit dimensionné un peu différemment. Maintenant, je peux simplement prendre cette poignée et la faire glisser pour obtenir la taille que je souhaite. En fait, je veux des doubles de cette section, donc je vais juste cliquer dessus , appuyer sur Dupliquer. Maintenant, j'en ai deux, mais je veux que celui-ci soit sur la droite. Nous allons donc simplement le prendre et le faire glisser vers la droite. Je veux en quelque sorte que ce soit l'inverse. Je vais le faire glisser vers le bas dans l'autre sens. Je veux la symétrie ici, donc je vais choisir celle-ci et je vais dire, veuillez l'aligner vers la droite. Peut-être. Faisons une petite variation sur cette image. Choisissez un autre kit de couture. Super, j'aime vraiment l'apparence de ces images. Maintenant, allons-y et ajoutons-y une copie, donc nous l'appellerons fabriquée aux États-Unis. Alors, mettons-nous un exemplaire marketing ici. En fait, je ne suis pas très doué pour le marketing. Trouvons-en un exemplaire sur le matériel de tennis fabriqué aux États-Unis chez Shop Fi Magic Copy . Choisissons, je ne sais pas, ludiques, générons. OK, game set match. Pourquoi pas ? Allons-y alors. La dernière chose que je veux réparer , ce sont ces boutons. Ces boutons sont placés les uns sur les autres. Je préfèrerais qu'ils soient réellement côte à côte. OK, j'ai la section ressemble à ce que je veux maintenant. C'est sur ordinateur de bureau. Vérifions-le rapidement. Ça a l'air bien sur mobile. C'est super sympa. Il est simplement conçu de manière réactive. C'est génial. Juste comme ça, c'est terminé. Je vais cliquer sur Enregistrer. C' est ce qu'on appelle Flex Sections, nous avons hâte de vous le remettre très bientôt. 5. Introduction aux applications de création de pages: Idéalement, l'éditeur de thème natif de Chobifi devrait suffire aux marchands Chobifi pour personnaliser le front-end de leur Mais malheureusement, pour les utilisateurs qui souhaitent mieux contrôler leurs conceptions frontales, ils finiront par être obligés d'utiliser une application. Ces applications de création de pages sont logiciels personnalisés qui offrent davantage de contrôles de personnalisation, offrant souvent davantage de fonctionnalités que les marchands souhaitent voir apparaître dans l'éditeur de thèmes Shobifi, comme le glisser-déposer, et des composants standardisés avec de nombreux paramètres de personnalisation Avant de nous plonger dans l'utilisation de quelques-unes de ces applications, j'aimerais simplement vous aider à comprendre ce qui se passe exactement lorsque vous utilisez une application sur Chobfi Passons à notre interface d'administration Shopper Fire et ajoutons notre application de création de première page heure actuelle, vous trouverez le menu des applications sous votre liste de canaux de vente. À partir de là, cliquez sur le mot Apps et le menu déroulant s'agrandira, vous permettant de voir la liste des applications actuellement installées, ainsi que de rechercher de nouvelles applications à installer. Faisons une recherche dans Page Builder et voyons ce qui s'affiche. Cela nous mènera au Shaba Fi App Store où nous pourrons voir les listes correspondantes pour le terme de recherche Page Builder Comme vous pouvez le constater, il existe de nombreuses options ici, mais certaines des principales sont Page fly, Show Gun Composer et Gem Pages. Dans ce cours, nous allons examiner quelques-unes de ces pages de gemmes, Repo et Instant Commençons par les pages Em. Nous allons cliquer sur l' icône ou le titre de la liste des pages Em ici. Cela nous mènera à la page officielle de l'application sur les pages Em de l'App Store de Shopify Nous allons ensuite cliquer sur le bouton pour installer l'application. Cela nous redirigera vers notre boutique Shopify, où Shopify nous demandera d'approuver certains accès requis par l'application N'oubliez pas que même si l'application a été approuvée par l'App Store Shop Fi, il s'agit toujours d'un logiciel tiers. Les autorisations que vous accordez ici permettront à l'application de se connecter à votre boutique Shopify et d'apporter certaines modifications Cliquez sur le bouton d'installation et vous verrez maintenant l'interface l'application dans l'administration de votre boutique Chop Fi. Quelques points à noter ici sont que, tout d'abord, ils ont évidemment conçu leur application pour elle ressemble beaucoup au reste de l'administrateur. Mais ne vous y trompez pas, cette interface est entièrement déterminée par l'application Si vous avez déjà travaillé avec un tas d'applications sur Chop Fi, vous avez peut-être remarqué qu' elles ne semblent pas toutes parfaitement adaptées à l'administration Hopi Fi Et c'est parce qu'ils peuvent être conçus le souhaite le développeur de l'application. Et deuxièmement, il en va de même pour le design, les fonctionnalités et la méthode exacte qu' une application comme celle-ci peut utiliser pour adapter les designs que vous créez au thème réel peuvent et diffèrent souvent entre les applications utilisées. De plus, comme ces applications sont des logiciels tiers, le coût de l'application n'est pas couvert par Habi Fi. La plupart de ces applications auront donc une sorte de prix d'abonnement. Ils facturent les commerçants pour les utiliser. Si je clique sur le badge ici pour développement sur l'application Gem Pages, je peux voir les différents plans disponibles et leurs inclusions pour cette application en particulier Dans ce cours, cependant, nous n' aurons pas besoin de souscrire à forfait payant pour suivre. Mais si vous finissez par vous abonner à une application particulière que vous aimez, vous voudrez peut-être acheter l'un de ces forfaits payants afin de bénéficier des fonctionnalités annoncées Maintenant que nous savons que les applications Page Builder sont des logiciels externes qui se connectent à votre boutique, assument leurs propres coûts et manipulent votre boutique de manière personnalisée, examinons comment nous pouvons utiliser ces applications dans la pratique 6. Gempages: , maintenant que nous avons expliqué comment les applications se connectent à notre boutique Shopify, faisons une démonstration de trois applications différentes qui m'ont le plus plu à mes clients Il s'agit des pages Gem, Replo et Instant. Commençons par les pages de gemmes, que nous avons installées dans la vidéo précédente. Je vais donc cliquer sur les applications et je peux regarder ici mes applications installées. Je vais cliquer sur Em Pages Builder fois que nous lui aurons donné le temps de charger. Vous pouvez voir ici que nous pouvons créer une nouvelle page, mais il y a en fait une nouvelle fonctionnalité ici. Nous pouvons créer des sections. Plutôt que de créer un modèle complet, nous pouvons créer une section qui peut être incluse dans un modèle, probablement dans l'éditeur de thème. Très bien, maintenant je vais cliquer sur Créer une nouvelle page. Ensuite, vous pouvez voir ici que nous pouvons créer à partir d'une gamme de modèles, dont certains ont été entièrement conçus et dotés de fonctionnalités complètes. Si nous avons un produit qui correspond très bien à cela, nous pouvons sélectionner l'un d'entre eux comme point de départ. Très pratique pour de nombreuses personnes qui ne souhaitent pas personnaliser une page de destination ou une page de produit, mais qui ont besoin d'idées. Et c'est l'un des principaux arguments de vente de l'utilisation d'un constructeur de pages. App Shop Pi ne vous fournira pas non plus tout le contenu de démonstration. Cela étant dit, bon nombre de ces éléments sont spécifiques au produit spécifique vendu. Je ne vois donc rien ici pour les snowboards, alors partons de zéro Je vais créer une page produit à partir de zéro. Et ce que je peux faire ici, c'est insérer une ligne à deux colonnes, par exemple, et commencer à créer ma mise en page. Il s'agit d'un système de glisser-déposer , qui convient à de nombreux utilisateurs. Je pourrais donc faire glisser un titre de ce côté, je pourrais faire glisser une image sur cette colonne. Comme vous pouvez le constater, cette fonctionnalité de glisser-déposer n'existe pas réellement dans l'éditeur de thèmes de Shopify C'est l'argument de vente d' une application de création de pages comme celle-ci. Mais comme il s'agit d'une page produit, je souhaite d'abord créer du contenu dynamique. Désolé, je clique dans les mauvaises zones. Je n'utilise pas vraiment les applications de création de pages parce que je suis développeur. Mais laisse-moi voir. Je devrais pouvoir cliquer ici. Et maintenant, nous avons cette section. Je vais supprimer cette section. Je vais faire défiler la page vers le bas jusqu'au produit. Cela nous permettra d'apporter des informations dynamiques sur les produits. Comme vous pouvez le voir ici, elle apporte le t-shirt qui se trouve dans mon magasin. Mais apportons le snowboard complet Oxygen. Je crois que c'est la collection de snowboard Oxygen avec laquelle nous jouions tout à l'heure. Très bien, nous allons donc utiliser ceci comme exemple de produit, n'est-ce pas ? Nous avons donc cette section de produits ici et nous pouvons modifier la mise en page. Nous pouvons le visualiser sur différentes tailles d'écran. Et ce qui est cool avec les pages de gemmes, je suppose, c'est que nous pouvons créer des mises en page en dessous Peut-être voulons-nous un titre de galerie de produits, sélecteur de prix et de quantité comme d'habitude Mais ensuite, nous voulons également ajouter d' autres sections en dessous pour vraiment vendre le produit. Nous pouvons donc apporter, vous savez, quelque chose comme ça avec un modèle prédéfini Tu sais, on peut glisser-déposer ici. Nous pouvons donc vraiment mettre cette image où nous voulons. Nous pouvons le ramener à cette colonne. Nous pourrions réorganiser cela ci-dessus ou ci-dessous. Il y a donc beaucoup de flexibilité ici. Et c'est un très bon système pour les utilisateurs qui apprécient cette fonctionnalité de glisser-déposer. Bien, il ne s'agit évidemment pas de contenu dynamique, nous voudrons donc probablement l'attribuer à un seul produit ou trouver un moyen d'intégrer du contenu dynamique ici. Mais c'est un peu difficile avec les pages de pierres précieuses. Le domaine dans lequel ces applications ont tendance à tomber en panne est celui où nous introduisons du contenu dynamique. Et ce que je veux dire par contenu dynamique c'est qu'il s'agit d' insérer le titre du produit. Vous pouvez voir que je ne peux pas le modifier. Je ne peux pas le modifier. Cela provient du produit lui-même. Il s'agit de données dynamiques, mais ici, je pourrais modifier pour obtenir l'image de mon choix. Remplacez ce texte par le texte que je veux. C'est totalement comestible. Le seul inconvénient est que ce contenu s'appliquera à tous les produits auxquels ce modèle est attribué En parlant de mission, montons ici et cliquons sur aucun produit assigné. Et attribuons-le à ce produit. Donc, je crois que la collection Snowboard, Oxygen s' appelle. Cliquez sur Confirmer. Maintenant, lorsque nous cliquons sur Publier, ce modèle sera attribué à ce produit. Une fois cela fait, nous pouvons cliquer sur Afficher la page en direct. Et maintenant, nous pouvons voir que la page du produit est égale à celle que nous avons créée ici dans les pages de gemmes. Maintenant que je suis développeur et que je pense qu'il est important de comprendre comment cela s'intègre réellement à votre boutique Cela consiste en fait à créer un modèle dans votre thème, puis attribuer ce modèle à votre produit Ce que je veux dire par là. Permettez-moi vous le démontrer dès maintenant. Si je me penche sur les produits et que je trouve la collection snowboard Oxygen dans ma liste de produits ici, je fais défiler la page vers le bas jusqu'à l'endroit où le modèle est sélectionné. Nous avons un template GP pour gem pages, et ce long code qui représente le modèle que nous venons de créer, n'est-ce pas ? Ce n'est donc pas un nom très convivial, mais il nous renvoie directement au modèle que nous venons de créer, n'est-ce pas ? Et puis, si nous examinons le code de notre thème, ne vous inquiétez pas, nous n' écrirons aucun code de thème ici. Mais je veux juste vous montrer l'effet que cela a sur votre boutique. Vous verrez que les pages gem, tout ce qui contient des pages gem ou gem dans cette liste de fichiers , sont des fichiers qui ont été créés par des pages gem simplement en installant l'application et en exécutant certaines fonctions. Vous pouvez donc voir que nous avons quatre fichiers ici et si nous allons dans notre dossier de modèles ici et que nous faisons défiler la page vers le bas, nous pouvons voir ce modèle de produit avec le code qui le suit. Et vous pouvez voir qu'il relie deux sections dont section GP est suivie d'un identifiant unique. Donc, si nous faisons défiler la page vers le bas, vous pouvez maintenant voir que chaque section devient également ce fichier dans notre dossier de sections. J'en parle donc parce que pour le moment, ce n'est pas si compliqué. Mais si vous finissez par créer de nombreux modèles dans votre boutique l'aide de Jam Pages ou d'une application similaire, cela commence à paraître très désordonné. Permettez-moi de vous montrer l'exemple d'un de mes clients. Voici le code du thème d'un de mes clients. Et comme vous pouvez le voir ici, nous avons ces quatre fichiers dans notre dossier de mise en page. Mais si nous faisons défiler la page vers le bas, nous avons des pages de pierres précieuses, des modèles d'articles. Et si nous faisons défiler la page vers le bas pour les collections, nous en avons une tonne même pour le modèle d'index, qui est la page d'accueil, nous avons ici tout un tas de pages personnalisées avec des codes différents. Nous avons essentiellement beaucoup de fichiers de pages de gemmes ici. Nous entrons donc dans la section des produits, examinons tous ces différents modèles de produits sans noms descriptifs. Juste des codes relatifs aux produits figurant dans les pages de pierres précieuses. Il est donc important de noter ici que lorsque vous vous lancez dans ces applications de création de pages, cela ajoute vraiment beaucoup de volume à votre thème. Ici, nous passons en sections ici, et vous pouvez voir si nous faisons défiler la page vers le bas, cela ne crée pas grand-chose en termes de fichiers de sections, heureusement, mais certainement en de modèles ici Maintenant, vous n'allez probablement pas jouer dans cet éditeur de code, mais c'est dans l'éditeur de thème que cela se manifestera. Si vous vous souvenez de cette liste déroulante précédente où nous pouvions voir tous les modèles de produits. Vous verrez ici que nous avons une liste géante et que de nombreux modèles sont attribués à un seul produit. Cela rend les choses un peu plus difficiles à gérer. Si nous voulons utiliser l'éditeur de thème, il est difficile pour nous de déterminer quel modèle de pages gemmes s'applique à quel produit. Et si nous essayions de le modifier dans notre éditeur de thème, vous verrez qu'il n' y a aucune option. Il n'y a même pas de section à utiliser ici. Tout cela passe par des pages de pierres précieuses. Donc, en gros, cela ne fonctionne pas vraiment bien avec l'éditeur de thème si vous utilisez des pages de gemmes. Cela étant dit, si nous voulions créer un modèle applicable à plusieurs produits avec des sections personnalisées que plusieurs produits avec des sections personnalisées nous avons conçues via cette application Page Builder, pages de gemmes ne poseront probablement pas trop de problèmes. Nous pouvons aller ici, cliquer sur Gérer, Produits assignés, et nous pouvons attribuer ce modèle à un tas de produits différents. Nous pourrions donc opter pour un snowboard complet à la place. Si j'entends Publier, le modèle pour le snowboard complet passera du modèle par défaut à ce modèle de pages de gemmes en particulier. Pour le prouver, revenons à notre interface d'administration. Je vais sortir du code du thème ici. Passez aux produits. Et c'était le snowboard complet, n'est-ce pas ? Juste ici. Si je fais défiler l'écran vers le bas, nous pouvons voir que ce produit utilise le même modèle que l' autre produit de Chem Pages. Mais nous pouvons entrer ici et définir ce produit comme produit par défaut, qui le remettra à apparaître dans le modèle par défaut. Si je clique sur Aperçu, il s'agit du modèle par défaut. Si je suis revenu au modèle G em pages, cliquez sur Aperçu. Vous pouvez maintenant voir que le même produit est livré via un modèle différent, celui que nous avons créé dans Gem Pages. Les avantages et les inconvénients de l'utilisation de pages de gemmes sont donc une fois que nous avons créé un modèle de page dans les pages de gemmes, il ne fonctionne pas vraiment bien avec l'éditeur de thème. Bien que l' éditeur de thème ne dispose peut-être pas toutes ces fonctionnalités de glisser-déposer, l'utilisation de pages de gemmes vous donnera moins de contrôle dans l'éditeur de thème. Mais si vous êtes heureux de vous fier à cette application de création de pages de pierres précieuses, alors vous devriez être d'accord pour créer modèles pour une grande partie du contenu dynamique dans les pages de pierres précieuses, cela commence à devenir un peu compliqué. Donc, je recommande davantage les pages Gem pour créer des pages de destination. De toute évidence, une page produit possède ses propres données et est donc très dynamique. Mais une page de destination est une page unique dont le contenu est statique. Em pages est donc un excellent constructeur de pages de destination. Si je vais ici par exemple, je peux cliquer sur Sélectionner pour sélectionner ce modèle de page de destination et créer un modèle de pages Em. Sur cette base, nous obtenons ce magnifique modèle que nous pouvons modifier comme bon nous semble. Nous pouvons organiser une vente Black Friday et disons qu'il s'agit plutôt d'une réduction de 35 %. Et nous pouvons relier ces boutons à l' endroit où nous voulons les lier pour changer cela autant que nous le voulons grâce cette magnifique fonctionnalité de glisser-déposer. OK, si nous devons cliquer sur Publier dessus, ce n'est pas un produit, donc cela ne créera pas de modèle de produit. Mais cela créera un modèle de page. Et pas seulement cela, il créera la page qui va avec. Alors, qu'est-ce que je veux dire par là ? Donc, si nous cliquons à nouveau sur Publier, le bouton a disparu auparavant. Pour la page View Live, c'est ennuyeux. Vous devez appuyer sur Publier pour que ce bouton apparaisse. Mais vous pouvez voir ici que nous avons créé cette page. Le handle n'est pas la meilleure page de destination. 18, 13, 36, 16 mars. Mais nous pouvons évidemment changer cela. Mais maintenant, nous avons cette belle page de destination. Et ce que cela a fait, si nous examinons comment cela a affecté notre boutique en ligne, non seulement elle a créé un modèle, mais elle a également non seulement elle a créé un modèle, créé une page afin de tirer parti de ce modèle. Donc, comme vous pouvez le voir dans la boutique en ligne, nous avons des pages personnalisées et nous pouvons voir que cette page de destination est là. Et dans le modèle de thème, vous pouvez voir qu'il s'agit de ce modèle récemment créé par Em pages. Et comme ce contenu est entièrement statique, il ne s'agit que d'une page de destination. Nous pouvons y mettre ce que nous voulons. Cela a tendance à fonctionner plutôt bien et à ne pas poser beaucoup de problèmes de gestion du code à l'avenir. Cela étant dit, cependant, l'un des plus gros problèmes liés à ces applications de création de pages, j' en suis presque sûr, est que lorsque nous cliquons sur Publier, ces modifications ne s'appliquent qu' au thème actuellement en ligne. Si nous revenons à nos thèmes ici, si nous examinons la version 12 de Dawn, celle qui est actuellement en cours d'exécution, vous verrez que tout le code des pages de gemmes a été inséré ici. Mais si nous examinons nos thèmes de prévisualisation, donc la version 11 qui est en prévisualisation, vous verrez que les pages Jem n' y ont installé aucun de leurs fichiers Donc, si nous voulons utiliser des thèmes d'aperçu pour prévisualiser des éléments, nous voulons apporter une modification à un thème, peut-être mettre à jour les données et l'éditeur de thème, puis les consulter avant de les publier. C'est quelque chose d'un peu difficile à faire avec les pages Jem ou toute autre application Page Builder Ce que je veux dire par là, c'est que si vous voyez ici, tous ces thèmes ont un bouton personnalisé différent. Donc, si je modifie le contenu de ce thème, cela ne s'appliquera qu'à ce thème. Et comme ce thème n'est pas le thème en direct, tout ce que je ferai ici ne sera pas mis en ligne. Je peux tester tout un tas de trucs. Malheureusement, je ne pense pas qu' il existe un moyen d'obtenir pages de pierres précieuses pour créer ce thème au lieu du thème actuellement en ligne. Et en tant que personne ayant travaillé sur des boutiques utilisant des pages de gemmes, tout en essayant de prévisualiser fonctionnalités développées sur mesure sur un thème de prévisualisation, il devient difficile et difficile de faire fonctionner correctement le processus de mise en scène. Voici donc une petite démonstration des pages de gemmes et de leur impact sur votre boutique. Je pense que les principaux arguments de vente des pages de pierres précieuses sont ces modèles prédéfinis que vous pouvez simplement ajouter à votre boutique et réorganiser par glisser-déposer Le Dragon Drop semble plutôt bien fonctionner. Vous savez, je peux faire glisser une image entre n'importe lequel de ces petits bouts de texte, déplacer ces bouts de texte. C'est plutôt sympa pour quelqu'un qui souhaite cette fonctionnalité de glisser-déposer. Et comme vous pouvez le voir ici, nous avons apporté un changement. Nous devons donc republier, ce qui changera notre modèle De toute évidence, l'effet secondaire de tout cela est la façon dont cela affecte votre thème. Mais tant que vous comprenez cela, passons à l'application suivante, qui est Rep Blo 7. Replo: Bien, dans cette vidéo, nous allons examiner une autre application de création de pages appelée Replo. Maintenant que vous avez vu votre première application de création de page, vous pouvez maintenant voir par comparaison avec Repo quelles sont les choses identiques et quelles choses changent en fonction de l'application de création de pages que vous utilisez Très bien, alors allons-y et installons cette nouvelle application de création de pages. Replo, allons-y. Concepteur de page de destination Replo. Je vais cliquer sur Installer, puis cliquer à nouveau sur Installer pour lui donner les autorisations requises. Et Replo fonctionne un peu différemment car vous devez créer un nouveau projet dans Replo Ce projet est ensuite lié à la boutique. Je vais appeler ça, disons la classe de partage des compétences de Chris. Je vais cliquer sur Créer un projet. Avec Replo, vous pouvez désormais créer un modèle généré par l'IA. C'est assez avant-gardiste. Vous pouvez créer une page blanche ou naviguer à partir des modèles. Permettez-moi de jeter un œil à certains de ces modèles ici. Tout comme les pages de pierres précieuses, vous trouverez ici de nombreux éléments prédéfinis que vous pouvez utiliser dans votre boutique afin ne pas avoir à créer vous-même une mise en page. Permettez-moi de cliquer sur celui-ci et de créer une nouvelle page avec celui-ci. Contrairement aux pages de gemmes, Replo souhaite connaître le nom et le pseudo avant de commencer cette page Je dirais page de destination. Et comme vous pouvez le constater, le manche est automatiquement généré. Mais nous pouvons le modifier maintenant, ou nous pouvons le modifier ultérieurement dans l'interface administrateur Shopify De toute évidence, toutes les pages personnalisées doivent être attribuées à une page personnalisée dans le système Shopify Nous pourrons donc également modifier cela dans notre interface d'administration. Je vais donc simplement cliquer sur Créer une page. Et si, comme moi, vous utilisez un magasin de développement, il vous sera demandé de saisir le mot de passe de votre boutique. Tous les magasins de développement sont restreints de l'extérieur via un mot de passe de magasin. Vous pouvez donc accéder aux préférences du canal de vente de votre boutique en ligne et simplement les copier si on vous le demande. C'est également une fonctionnalité si vous avez une boutique en ligne et que vous souhaitez la masquer sauf si vous avez un certain mot de passe qui est également une fonctionnalité des boutiques payantes. Mais comme ma boutique est en cours de développement, je dois restreindre l'utilisation d'un mot de passe. Très bien, ici, vous pouvez voir ici que nous avons du contenu dynamique qui passe. Et vous pouvez voir que nous avons cette mise en page assez spéciale ici. De toute évidence, ce contenu est du contenu de démonstration et provient d'un autre produit. Nous devrions donc modifier tout ce contenu pour qu'il soit pertinent pour notre produit. Mais si vous regardez Rep Blow et que nous le comparons aux pages Jem, vous pouvez voir que nous avons ce panneau sur la gauche qui ressemble plus à l' éditeur de thème que ne l'étaient les pages Jem Et si j'essaie de cliquer et de faire glisser ce contenu, cela fonctionne, mais il est un peu moins cliquable et déplaçable que Je trouve que c'est peut-être un peu plus robuste parce que vous avez ces différents conteneurs ici. Et vous pouvez voir la structure du modèle ici. Et vous pouvez également cliquer et faire glisser le pointeur dans cette section, comme vous le feriez dans l'éditeur de thème. Si vous vous souvenez de ce que nous avons abordé dans la vidéo sur l'annonce de la mise à jour des blocs dans l'éditeur de thèmes Shopify, ce petit panneau correspond plus étroitement à ce qui va arriver dans l'éditeur de thèmes Shopify Il s'agit donc d'un paradigme similaire, ce qui me semble une bonne chose. Mais encore une fois, si vous pouvez attendre jusqu'à ce que ces modifications soient mises en œuvre, vous n'aurez plus besoin de quelque chose comme un coup attendre jusqu'à ce que ces modifications soient mises en œuvre, de relais. Mais l'une des grandes différences ici est que vous verrez que nous avons créé une page ici. Ce n'est pas un produit. Donc, si je clique sur Publier là-dessus, cela va faire, tout d' abord, cela va nous demander de créer un plan, ce que nous n'allons pas faire. Mais si nous devions appuyer sur Publier, cela créerait une page, pas un produit. Si nous voulions utiliser Replo pour affecter une page produit, nous devons d'abord créer une section Maintenant, je ne vais pas commencer à payer, c'était quoi, 300$ par mois 250$ par mois. Juste pour cette vidéo. Et je ne m'attends pas à ce que tu le fasses non plus. Donc, ce que je pourrais faire, c'est passer dans l'un des magasins de mes clients et nous verrons comment cela affecte notre vie. Très bien, vous pouvez voir ici que nous avons un produit similaire entièrement conçu pour un produit spécifique à ce magasin. Comme vous pouvez le constater, c'est juste des fins de démonstration car cela ne se trouve pas réellement sur une page produit. Ce client utilise replo pour le moment pour les pages de produits, je crois, mais principalement pour la page d'accueil. Donc, si je cherche. Dans la section page de la page d'accueil, vous pouvez voir cette icône indiquant que la page est définie sur la page d'accueil. Et si je clique dessus, vous pouvez voir qu'il s'agit d'une mise en page d'accueil complète qui a été créée pour ce client. Je crois que dans ce cas, nous avons fait appel à Repo eux-mêmes pour créer cette mise en page pour nous Tout comme les autres modèles Repo, nous pouvons nous plonger dans n'importe laquelle de ces sections et modifier de nombreuses choses différentes Il existe de nombreuses options différentes ici, mais vous verrez que l'apparence est très différente en termes de mises en page et de manières différentes modifier la largeur par rapport aux pages de pierres précieuses, qui sont peut-être un peu plus lourdes en termes de glisser-déposer Mais encore une fois, chacune de ces applications fait des choses similaires. Ils l'abordent simplement de différentes manières. Pour créer une page produit ou créer quelque chose dans Replo, qui affecterait une page de produit, celle-ci doit être créée en tant que section Je vais cliquer ici pour accéder aux sections. Et vous pouvez voir ici que j'ai cette section actuellement publiée pour MCT Oil, Kickstart, Je crois que cette section est déjà publiée. Donc, si je vais dans le personnalisateur du thème en direct ici, vous pouvez voir la page d'accueil très rapidement Vous pouvez voir ici qu'il n'y a aucune option à personnaliser. C'est uniquement dans Replo, car c'est géré par Repl Mais si nous devions aller sur la page du produit, je ne sais pas sous quel modèle il fonctionne. Cherchons simplement le nom du produit. Mct, Kickstart. Celui-ci est un mauvais exemple car il utilise des pages G em. En fait, permettez-moi de cliquer ici pour modifier, et je pourrai sélectionner un produit dans la liste des produits. Recherchez MCT, Kickstart. J'espère qu'il y en a une qui n'est pas attribuée aux pages Gem. Allons-y. Vous pouvez voir que nous avons actuellement des sections Shove Fi natives ici Et si je devais cliquer sur Ajouter une section, nous pourrions ajouter une section générée par Replo. Dans notre cas, laissez-moi rechercher un MCT Kickstart. Allons-y. Mct Oil Kickstart Et nous pouvons ajouter cette section. Et cela nous permet de les masquer et d' utiliser simplement la section comme modèle de produit. Vous pouvez maintenant voir que nous avons transformé notre page produit pour ce produit. Mais bien entendu, nous utilisons le modèle de produit par défaut. Nous ne voulons pas affecter ce modèle en particulier. Nous aimerions créer un nouveau modèle pour le produit. Ensuite, attribuez la section que nous avons créée à ce produit. Essentiellement, même si nous avons créé une section ici, elle ne contient aucun paramètre. L'avantage d'avoir cette section est uniquement si nous voulions ajouter quelque chose en dessous ou au-dessus. Parce que si quelque chose est une section , nous pouvons empiler plus de sections au-dessus et en dessous. Ainsi, par exemple, je pourrais prendre une bannière d'image ici et placer sous la section générée par Replo. OK, donc pour en revenir à l'interface Replo, personnellement, je ne comprends pas le battage médiatique qui sous-tend celle-ci C'est un système similaire à Em pages. Vous pouvez créer des sections qui, comme nous l'avons vu dans la dernière vidéo avec les pages de gemmes, semblent pouvoir créer des sections dans les pages de gemmes 2. Mais ces sections n'ont pas de paramètres, n' exploitent donc pas vraiment les fonctionnalités natives de l'éditeur de thèmes Shopify Mais l'une des choses que je peux dire que j'aime à ce sujet c'est cette structure arborescente que nous avons ici sur la gauche. Et bien sûr, nous avons de nombreux composants préfabriqués que nous pouvons également utiliser. Il semble qu'ils disposent d'une assez grande bibliothèque de modèles, ce qui représente bien sûr une valeur ajoutée pour de nombreux marchands. Mais de la même les pages Gem, la façon dont elles s'intègrent à votre thème vont créer des fichiers. Avant de terminer cette vidéo, examinons le code de notre thème. Si nous faisons une recherche dans replo, nous pouvons voir que, comme dans Em Pages, cela crée un grand nombre de fichiers Replo avec, eh bien, séquences d' identification non pas aléatoires mais uniques, qui ont l'air plutôt moches et désordonnées dans Mais cela permet à Replo de faire son travail. Cela créera également tout un tas de replochunks dans votre Je veux dire, regardez tous ces relo, repl, replochunk. Si vous êtes d'accord pour salir votre thème, alors lancez-vous dans ces applications. Tout est cool. Mais une fois que vous commencez à regarder le code du thème, cela commence à devenir vraiment compliqué. Quoi qu'il en soit, c'est tout pour Rep Blow. Dans cette vidéo la prochaine portera sur l'application finale, qui est instantanée 8. Instantané: Bien, dans cette leçon, nous allons aborder la dernière application de notre liste pour savoir laquelle est instantanée. Cette application a suscité beaucoup d' intérêt, en particulier avec le plug-in Figma et la fonctionnalité unique de cette application qui permet de créer des paramètres de section pour vous, mais nous verrons comment cela fonctionne dans une seconde Allons-y et installons cette application. C'est ce qu'on appelle simplement instantané. Nous recherchons Instant Page Builder. Je crois qu'aucun résultat n'a été trouvé. Cherchons-le dans l'App Store en cliquant sur ce bouton, Instant Page et Section Builder. Nous allons cliquer à nouveau sur Installer. Cela nous amène à l'application instantanée qui, contrairement aux autres applications que nous avons examinées, ne se charge pas dans votre boutique en ligne. Comme je l'ai déjà mentionné, il s'agit uniquement de logiciels externes, quelle que soit l'application que vous utilisez. Et j'espère que Fi permettra à ces applications de se charger dans la fenêtre, dans votre boutique Fi. Mais cela ne veut pas dire qu'il en fait partie Il est donc intégré instantanément au look de Schopf Cette application vous dirigera vers son propre site Web, vous ne verrez donc pas l'interface utilisateur Shove Pi sur la gauche ici Et l'autre chose qui est différente ici, c'est que nous devons créer un site pour les pages de pierres précieuses. Nous n'avions pas besoin de faire tout cela pour le représentant ci-dessous. Nous avions besoin de créer un projet instantanément. Nous devons créer un nouveau site. Je vais donc appeler cela Christopher's Skillshare Store Étape suivante. Il nous demandera ce que nous voulons vendre. Notre produit est le plus proche du fitness. Je ne sais pas si cela signifie quelque chose. Il ne s'agit probablement que d'une étude de marché instantanée. Je vais donc cliquer sur Fitness et je vais maintenant accéder à l'interface de l'application Instant Page Builder. Maintenant, l'une des choses que j'aime, c'est ce design épuré nous encourage à faire qui nous encourage à faire certaines choses que je considère comme de bonnes pratiques, comme configurer les actifs avant de commencer et configurer certains styles de couleurs que nous pouvons intégrer dans nos différentes mises Et ici, vous pouvez voir que nous pouvons créer des pages ou des sections. Ici, vous pouvez voir le panneau des couches. Mais nous devons d'abord créer une page ou une section réelle afin d'insérer des couches. Il suffit de cliquer ici pour créer à partir de zéro. Ce que nous faisons, c'est cliquer et faire glisser le pointeur de ce panneau vers notre canevas ici. Commençons donc une mise en page en deux colonnes. Ensuite, disons simplement que nous mettrons une image d' un côté et un titre de l'autre côté, juste de ce côté. Réglons l'image. Je vais cliquer sur l'image. Nous pouvons choisir sa source. Nous le pouvons. Téléchargeons cette image qui provient en fait de la boutique, que l'instance essaiera de recréer dans l'une de leurs vidéos Youtube C'est une boutique créée par Beyonce qui s'appelle Sacred. Comme vous pouvez le voir ici, nous pouvons survoler certains éléments, cliquer dessus pour afficher leurs paramètres, et nous pouvons voir qu'ils répondent à nos clics Mais ce que nous ne pouvons pas faire, c'est cliquer sur des éléments et les faire glisser. Vous ne pouvez pas vraiment voir de votre point de vue, mais je suis en train de faire glisser cette image et rien ne se passe Il n'y a donc aucune fonctionnalité de clic et de glissement ici. Mais comme pour Replo, nous avons cette structure arborescente qui, une fois de plus, sera similaire à l'éditeur de thème une fois que cette nouvelle mise à jour sera publiée L'une des fonctionnalités intéressantes est qu'il n'a peut-être pas fonctionnalité glisser-déposer pour déplacer les objets. Mais il est possible de le redimensionner par glisser-déposer, donc je peux redimensionner cette image à l' aide de l'éditeur visuel, ce qui est une fonctionnalité intéressante Comme vous pouvez le voir ici, nous sommes en mode création de page. Les deux options instantanées sont de créer une page ou une section. Donc, si je clique simplement sur Publier dessus, tout d' abord, cela nous demandera de nous connecter à Shove Fi Je ne sais pas pourquoi il nous demande de le faire alors que nous avons déjà installé l'application. Mais peut-être que cela a quelque chose à voir avec le fait que l'application se trouve en dehors de l'administrateur. Je vais donc cliquer sur Connecter. Et je crois que cela reliera notre site que nous avons créé à notre boutique Shove Fi Un site et une boutique semblent être deux choses différentes, mais nous pouvons les relier. Et maintenant, nous pouvons publier cette page sur notre site shop fi. Nous pouvons maintenant cliquer ici pour voir la page. Contrairement à Replo, il ne nous a pas donné la possibilité de personnaliser le titre de la page et le descripteur de page, mais il a créé une page sur notre boutique en utilisant cette mise en page Donc, si nous allons ici et que nous passons aux pages, nous pouvons en voir la preuve ici même. Si je clique ici pour la page, vous pouvez voir que le nom de la page est simplement page. Et si nous y entrons dans le référencement du site Web, nous pouvons voir le handle ici de la page. Et puis, si nous examinons le modèle, vous pouvez voir que nous utilisons similaires à des pages Gem, similaires à Replo Nous utilisons un modèle généré par eux qui se trouvera quelque part dans notre thème appelé instant suivi d'une chaîne unique Très bien, voilà à quel point la création d'une page sur notre boutique est instantanée . Mais ce qui est intéressant à propos de l'instant, ce n'est pas tant que nous pouvons créer des pages comme nous venons de le faire, c'est que nous pouvons créer sections, puis ces sections auront des paramètres intégrés, de sorte qu' une fois que nous les aurons insérées dans notre éditeur de thème, nous pourrons les modifier à l'aide de l'éditeur de thème. Donc, idéalement, nous devrions être en mesure de tirer parti à la fois de l'éditeur de thème et générateur de pages instantané en suivant ce système. Alors testons-le. Créons une section. Disons simplement que nous voulons que cette section soit une section de page produit. Ce que nous pouvons faire, c'est me laisser trouver l'encart sur la page ici. Comment ça s'appelle ? Le menu d'insertion. Et je vais passer aux éléments. Nous pourrions faire une autre mise en page en deux colonnes et y mettre du texte statique, une image statique, un bouton, une vidéo, toutes ces bonnes choses. Mais ce que nous pouvons faire, c'est insérer du contenu dynamique à partir de l'objet produit. Si nous le mettons sur une page produit ou même si nous ne le mettons pas sur une page produit, nous pouvons lier un produit, puis extraire les informations de manière dynamique de ce produit. Nous devrons donc encore créer une mise en page. Je vais donc créer une mise en page en deux colonnes. J'ai juste besoin de le faire glisser sur le canevas. Et au lieu de mettre une image statique de ce côté, je vais mettre l'image du produit de ce côté. Et puis, au lieu d' avoir un titre aléatoire, je vais mettre le titre du produit ici. Mais je n'ai pas compris le point, donc je dois le faire. Il est là-haut, donc je dois juste le faire glisser dans cette rangée. Ensuite, j'ajouterai également, disons le prix ici, prix du produit et la description. Et ajoutez un bouton pour couper en dessous. OK, maintenant, rien ne s' affiche pour le moment parce que nous devons le lier à un produit Shopper Fire Juste ici. Nous pouvons sélectionner Set Source. Faisons la même chose que nous avons toujours faite, à savoir la collection Snowboard Oxygen. Je crois que c'est celui-ci. Ensuite, nous pouvons aller ici pour un titre de produit, changer la source pour la collection snowboard Oxygen. Et je pense que c'est supposé pour le reste, cet ajout au panier est actuellement lié à cet espace réservé Nous voulons donc modifier la source pour collecter également l' oxygène de la planche à neige. OK, et ensuite nous pouvons créer, comme nous le pouvons avec les autres applications de création de pages, créer une autre sorte de série de colonnes en dessous et y mettre plus de contenu. Mais pour l'instant, allons-y, je vais annuler ça. En fait, ça ne me permet pas d'annuler ça. Je vais donc devoir simplement supprimer cette ligne. Cela a-t-il fonctionné ? Non. Il vous suffit de cliquer dessus pour le supprimer. OK, je pense que ça a marché, mais non, il y a une autre chronique. OK. Très bien, maintenant je vais cliquer sur Publier. Et au lieu de publier une page, il va créer une section qui sera ensuite insérée dans notre thème. Et ce que nous pouvons faire à ce stade, c'est intégrer cette section à n'importe quel modèle habituel cadre de notre paradigme de développement de thèmes normal, dans notre éditeur de thème normal. Ensuite, nous pouvons utiliser cette section. Et je pense que cela devrait également créer des paramètres, sorte qu'une fois que nous aurons mis cette mise en page dans notre éditeur de thème, nous pourrons également la modifier avec l'éditeur de thème. Voyons donc comment cela fonctionne. OK, je vais donc retourner dans mon éditeur de thème pour le thème actuel. Cliquez sur Personnaliser pour y accéder, Personnaliser pour y accéder car nous avons créé une section de produits. Passons aux produits. Nous pouvons passer au produit par défaut ici. Disons simplement que nous voulions remplacer cette section pour présenter les informations sur nos produits Je ne vais pas le supprimer, je vais simplement masquer ces deux sections pour qu'elles ne s'affichent pas. Ensuite, dans la publicité, nous n'avons pas vraiment nommé notre section correctement, nous l'avons simplement appelée S. Je crois que c'est le nom qui va apparaître ici. Mais comme vous pouvez le voir, la section que nous avons créée instantanément est maintenant disponible pour que nous puissions l'ajouter dans l'éditeur de thème. Je vais donc cliquer dessus et en parler. Et vous pouvez voir que maintenant que nous avons nos informations ici, le seul problème, c'est que cela concerne la collecte d'oxygène pour les snowboards. Et comme vous pouvez le voir ici, nous présentons un aperçu des AirPods sur le produit par défaut Nous ne voulons donc pas que cela s'applique au produit Airpods et tous les autres produits du modèle de produit par défaut Mais si je clique sur cette section, vous verrez que les paramètres s'ouvriront. Donc, comme promis, Instant nous donnera les paramètres ainsi que le contenu lorsque nous publierons une section dans notre boutique d'I Store, ce qui, à mon avis, est assez unique. Je ne sais pas si les autres font ça. Peut-être que Jem Pages le fait maintenant, je ne suis pas sûre, mais je pense que c' est de là que vient le battage médiatique autour de l' instant Mais malgré tout, ce que je n' aime pas dans ce système c'est qu'il y a trois endroits différents où je peux insérer un produit. J'ai donc lié un produit ici, ai lié à nouveau deux fois. Bouton Ajouter pour couper. Le produit n'a pas été lié, mais tout devrait être lié à un seul produit, n'est-ce pas ? Compte tenu de ce comportement inattendu, j'ai pensé qu'il serait préférable de demander au développeur de l'application lui-même pourquoi nous avons trois champs distincts. Et deuxièmement, comment faire en sorte que le produit soit extrait du modèle de produit ? En ce qui concerne le deuxième point, la personne du support me dit qu'elle ne soutient pas actuellement l'utilisation de la création de pages de produits personnalisées complètes, mais que cela sera bientôt possible Toutes les sections créées doivent donc être utilisées comme extensions de votre page produit actuelle Essentiellement, je pense qu'il veut dire ici, c'est que nous ne pouvons pas extraire le produit du produit que nous consultons sur un modèle de produit. Mais ce que nous pouvons faire, c'est créer des sections qui extraient les informations d'un produit. Nous précisons que nous ne pouvons essentiellement pas utiliser de liens dynamiques ici. Nous devons entrer et définir un produit de manière explicite. Mais en ce qui concerne les trois champs, il mentionne ici qu'actuellement chaque élément est connecté séparément. Ce que nous devons faire, c'est définir la connexion du produit sur la couche parent , puis toutes les couches situées en dessous pourront extraire les données de cette connexion unique. En croisant ces informations avec deux T sur la chaîne Youtube par exemple Je pense que nous devons supprimer ces sections de produits dynamiques individuelles complètement ces sections de produits dynamiques individuelles et y ajouter du contenu statique. Mais reliez ensuite le contenant parent à un produit Shopper Fire Il semble donc que nous ne pourrons pas extraire cette section d'une page produit. Mais au moins, nous pouvons créer une sorte de section de produits en vedette que nous pouvons utiliser sur d'autres pages pour mettre en valeur un produit spécifique. Permettez-moi de revenir à l' éditeur et laissez-moi poursuivre cette idée. Je vais donc supprimer tous ces éléments avec le produit au début. Tous ces éléments de produit dynamiques que j'ai saisis auparavant. Je vais donc simplement utiliser ma touche de suppression pour les supprimer plus facilement. Maintenant, nous venons de retrouver notre mise en page à deux colonnes. Et vous pouvez voir ici que les lignes sont connectées à Shopify Supprimons simplement cette connexion dynamique. Pour l'instant, introduisons notre texte statique. Nous avions, quelle était l'image ici ? Texte ici. Voyons voir. Nous avons maintenant besoin d'un texte d'en-tête pour le titre du produit. Je vais supprimer en fait, cela peut peut-être être notre prix. Je vais laisser ça là. J' adorerais mettre un bouton, mais je ne sais pas si nous pouvons le retirer de la boutique, si je suis là. Essayons-le. Maintenant que nous avons tout le contenu statique, laissez-moi monter ici. Et sur le conteneur parent, la colonne, définissons-le sur un produit en particulier. Nous devrions pouvoir modifier cela ultérieurement dans l'éditeur de thème avec cette source dynamique sélectionnée sur le conteneur parent. Passons à l'image, et vous pouvez voir ici que nous pouvons créer un lien vers la source parent. Ensuite, si nous faisons défiler l'écran vers le bas, le contenu de l'image peut être défini de statique à dynamique. Et prenez l' image du produit qui va être extraite de ce contenant parent, d'où vient le produit, ici. Nous avons la source ici. Ensuite, nous pouvons accéder au contenu ici, faire la même chose, le faire passer de statique à dynamique. Il reste encore une étape, je dois sélectionner ici le champ de l' objet du produit à partir duquel je souhaite extraire. Je vais donc partir du titre. Vous pouvez le voir tirer dynamiquement. Et puis ce petit bout de texte, fixons le juste prix. Et puis, ici en bas, il va puiser dans cette source. Mais je ne pense pas que nous puissions donner à cela une opération personnalisée. Voyons les interactions. Pouvons-nous obtenir cela pour ajouter quelque chose à la découpe ? Allons-y. Action ajouter à la découpe. Eh bien, nous avons notre source ici. Testons cela. Permettez-moi simplement de le renommer. Si je plonge dans le texte, disons ajouter pour couper. Maintenant, cliquez sur Enregistrer, publions cette section, puis nous aurons ce raccourci pratique pour l'ouvrir dans l'éditeur de thème Voyons comment cela change le résultat. Nous sommes donc de nouveau dans l'éditeur de thème. Et passons simplement au modèle de produit. Comme vous pouvez le constater, nous avons deux fois plus d' informations sur les produits, alors masquons-les. Et il ne nous reste que la section. Laissez-moi entrer et vérifier les paramètres et il pourra voir maintenant que nous n'avons qu' un seul champ de produit. Donc, si je change cela en snowboard archivé, nous devrions obtenir les données dynamiques extraites du snowboard archivé, ce qui ne semble pas être le cas. Malheureusement, il y a ce champ ici. Mais si je change le produit ici, d'accord, maintenant il semble fonctionner. OK. C'était donc un petit problème, je suppose Très bien, maintenant nous pouvons changer cela pour le produit que nous voulons. Et tous les détails, l'image, le titre, le prix et le produit ajouté à la découpe, devraient désormais figurer dans le produit que nous sélectionnons ici. Une fois de plus, nous sommes sur la page de la collection snowboard hydrogen. Alors, essayons encore une fois. Si nous pouvons utiliser des liens dynamiques, je sélectionnerai le produit et je verrai si cela change lorsque nous changerons la page que nous prévisualisons Donc, si je l'utilise pour modifier le produit que nous prévisualisons par le biais du produit par défaut, remplacons-le par oxygène D'accord, la liaison dynamique semble fonctionner maintenant que nous avons résolu ce problème avec les entrées. Et vous pouvez voir ici que lorsque nous utilisions les liens dynamiques, on disait « depuis la section actuelle », maintenant « depuis la page actuelle », c'est ce que nous voulions faire. Je pense donc que j' mal interprété l' e-mail envoyé plus tôt Toutes mes excuses pour cela. Mais vous pouvez constater que les liens dynamiques fonctionnent. Nous pouvons donc maintenant créer essentiellement la même chose, une section principale d'informations sur le produit en un instant , la transférer et avoir encore quelques options de personnalisation dans l'éditeur de thème. Nous tirons donc un petit avantage des deux mondes ici. Donc, si je clique sur Enregistrer dessus et que je le prévisualise via ce thème, n'est-ce pas ? Il s'agit donc du modèle de produit par défaut, donc cela devrait vraiment s'appliquer à pratiquement tous les produits. Je vais cliquer dessus, cela ouvrira le produit dans l'interface d'administration. Je ne pense pas qu'il y ait de lien pour ouvrir la page du produit, ce qui est ennuyeux. Mais nous pouvons cliquer à nouveau sur Aperçu pour accéder à la page sur le front-end. Comme vous pouvez le voir ici, nous étions en train de cliquer pour prévisualiser la collection Snowboard Oxygen, et nous l'avons trouvée. Maintenant, si vous cliquez sur un autre produit, disons quelque chose de complètement différent, comme une carte-cadeau. Vous verrez que le même modèle s' applique et que les données dynamiques sont transmises. Et ce bouton Ajouter au panier devrait, espérons-le, fonctionner également. Et c'est le cas, il a identifié que le produit était une carte-cadeau et l'a fait passer. C'est excellent. C'est donc l'avantage d'utiliser quelque chose comme instantané. Vous offre un petit aperçu du meilleur des deux mondes. Donc, si vous voulez créer quelque chose comme une page de produit très dynamique, je vous recommande de faire quelque chose comme celui-ci avec l'instant plutôt que certaines des autres options dont nous avons parlé dans ce cours, pour que ce soit instantané. Dans la vidéo suivante, nous allons résumer tout ce que nous avons appris jusqu'à présent, puis conclure le cours avec votre projet de classe et les prochaines étapes. 9. Résumé: J'ai beaucoup parlé des différentes manières de personnaliser un site Web Hopi Fi sans solutions de code Récapitulons rapidement avant de passer à la conclusion et au projet de classe Comme vous l'avez vu tout au long de ce cours, quelle que soit la solution que vous choisirez, toutes passeront par un thème Shopifi, comme nous l'avons également vu dans ce À l'exception de la création instantanée d'un modèle ou d'une section sur une application de création de page, nous devrons continuer à utiliser cette application pour apporter des modifications à notre interface, les fichiers seront insérés dans notre thème , mais pour modifier le code, nous devrons revenir à l'application qui les a créés. Dans la vidéo suivante, je vais partager mes recommandations personnelles. Mais pour compléter le résumé de cette vidéo, voici quelques points à retenir. Premièrement, le canal de vente de la boutique en ligne Shopify repose sur un système de modèles, de sections et de blocs À l'avenir, vous pourrez imbriquer des blocs dans des blocs pour créer des mises en page plus complexes Mais pour l'instant, les blocs existent sur un seul niveau, imbriqués sous des sections Les constructeurs de pages numéro deux vous aident à créer des modèles personnalisés. Ces modèles ne sont pas divisés en plusieurs sections thématiques et ne tirent donc pas parti des fonctionnalités de l'éditeur de thème. Cela étant dit, les constructeurs de pages numéro trois tournent désormais également vers création de sections thématiques afin de mieux jouer avec l'éditeur de thèmes Mais jusqu'à présent, je n'ai encore vu aucune de ces applications de création de pages générer des blocs pour vous. Les applications de création de pages numéro quatre créent un désordre dans la base de code de vos thèmes, ce qui peut entraîner des problèmes si vous souhaitez personnaliser le code à l'avenir. Et enfin, le numéro cinq. Chaque application de création de page est également un système distinct, ce qui signifie que vous ne pouvez généralement pas migrer un modèle d' une application à une autre. Inversement, si vous créez uniquement avec les sections thématiques natives, vous pouvez partager ces fichiers entre les thèmes et migrer les sections assez facilement entre les thèmes et les autres boutiques. 10. Conclusion: Toutes nos félicitations. Vous avez maintenant atteint la fin du cours Si vous avez regardé toutes les vidéos, vous devriez avoir une bonne idée des options pour personnaliser votre boutique sans code En tant que développeur, je ne peux pas souligner à quel point l'apprentissage d'un peu de code peut vous aider à éviter de nombreux problèmes causés par le recours à des applications externes. C'est pourquoi je vous recommande d'apprendre au moins un causés par le recours à des applications externes C'est pourquoi je vous recommande d'apprendre peu de développement de thèmes Shopify si vous voulez vraiment avoir un contrôle total sur votre boutique hors boutique Si vous êtes curieux de voir à quoi cela ressemble, code de ma chaîne Youtube avec Chris, le freelance, ou consultez certains de mes cours, en particulier sur le développement de thèmes Shopify, ici sur Skillshare.com. Pour l'instant, comme il s'agit d'une classe sans code, je veux que vous choisissiez une solution parmi la classe, soit l'éditeur de thème natif, soit une application de création de pages consultez le code de ma chaîne Youtube avec Chris, le freelance, ou consultez certains de mes cours, en particulier sur le développement de thèmes Shopify, ici sur Skillshare.com. Pour l'instant, comme il s'agit d'une classe sans code, je veux que vous choisissiez une solution parmi la classe, soit l'éditeur de thème natif, soit une application de création de pages, et que vous créiez votre propre section ou modèle personnalisé. Une fois terminé, ajoutez votre travail à la section des projets de classe de la classe pour le partager avec les autres étudiants ou pour obtenir des commentaires de ma part. Si vous avez apprécié ce cours, assurez-vous de laisser un commentaire positif et n'oubliez pas de consulter certains de mes autres cours ici sur Skillshare Merci d'avoir regardé et je vous verrai à la prochaine.