No-Code Shopify: So erstellst du benutzerdefinierte Vorlagen mit Seitenaufbau-Apps + dem Themen-Editor

1. Einführung: Sie möchten also benutzerdefinierte Designs auf Ihrer Shopify-Website erstellen auf Ihrer Shopify-Website Sie möchten sich jedoch nicht mit dem Theme-Code befassen müssen , da Sie vielleicht kein Entwickler sind oder diese Fähigkeiten einfach noch nicht aufgebaut Also, was sind deine Optionen? Nun, in diesem Skillshare-Kurs werden wir genau das behandeln Falls Sie mein Gesicht noch nicht gesehen haben, ich bin Christopher Dodd. Ich bin ein Top-Lehrer hier auf SkillShare.com und vor allem ein Shopify-Experte mit einigen der meistgesehenen Skillshare-Kurse zum Thema Shopify meistgesehenen Skillshare-Kurse zum SkillShare.com und vor allem ein Shopify-Experte mit einigen der meistgesehenen Skillshare-Kurse zum Thema Shopify Development. In diesen Kursen sowie in meinem eigenen Youtube-Kanal. Ich gehe tief in die Entwicklung wenn es um Shape Fi geht, aber in diesem Kurs werden wir unseren Kopf aus dem Code-Editor nehmen und schauen, was mit Shape Fi ohne jegliche Programmierung erreicht werden kann. Ich weiß, dass viele von Ihnen Ladenbesitzer oder Kreative sind , die nicht unbedingt wie ich Entwickler werden wollen Deshalb habe ich diesen Kurs nur für dich erstellt. Natürlich werden wir mit dem rein nativen Ansatz beginnen und den eigenen Theme-Editor von Hope Fi verwenden. Aber dann werden wir uns einige der Apps zum Erstellen von Seiten ansehen , die in Bezug auf die Anpassungsmöglichkeiten unbegrenzter sind . Das Hauptziel dieses Kurses besteht nicht nur darin eine Reihe von Page Builder-Funktionen kennenzulernen, sondern Ihnen auch zu helfen, ein Verständnis dafür zu entwickeln wo diese No-Code-Optionen in Ihren Shop passen. Wir verstehen die Grenzen dieser Apps und erfahren was wirklich hinter den Kulissen passiert. Falls es also soweit ist und du bereit bist zu lernen, wie deinen Shopify-Shop ohne Programmierkenntnisse personalisieren kannst, klicke auf das nächste Video und wir sehen uns im 2. Vorwort: Genau hier können Sie einen meiner Shopify-Shops sehen. Es handelt sich um einen sogenannten Development Store, was bedeutet, dass er fast alle Funktionen eines normalen Shopify-Shops Aber ich kann dort eigentlich nichts verkaufen, es dient nur zu Test- und Entwicklungszwecken Idealerweise hast du deine eigene Hoffnung, mit der du arbeiten kannst. Aber wenn nicht, kannst du wie ich jederzeit einen kostenlosen Development Store einrichten. Ich werde in diesem Kurs nicht den gesamten Prozess durchgehen , da ich das schon mehrfach in anderen Kursen und Klassen behandelt habe . Wenn du dir jedoch ein Tutorial dazu ansehen möchtest, findest du jedes dritte Tutorial hier in meinem vorherigen Kurs mit dem Titel Shopify Store einrichten Wenn du neu bei Shopify bist und eine Einführung in die Funktionsweise benötigst, würde ich empfehlen, dir den gesamten Kurs vor diesem anzusehen , insbesondere die vierte Lektion dieses Kurses, die über die Shopify-Shop-Architektur Ich werde hier für eine Sekunde innehalten, um Ihnen einen kurzen Moment zu geben , um zu überlegen, ob Sie das tun möchten Falls ja, pausiere dieses Video und kehre zu diesem Kurs zurück , nachdem du dir den anderen Kurs angeschaut hast. Okay, bereit weiterzumachen? Konzentrieren wir uns zunächst auf den Vertriebskanal des Onlineshops. Innerhalb des Onlineshop-Vertriebskanals haben wir unsere Themen, unsere Blogbeiträge, unsere benutzerdefinierten Seiten, unsere Linklisten, auch bekannt als Menüs, die sich hier im Navigationsbereich befinden. Und dann einige Einstellungen hier, die sich speziell auf diesen Vertriebskanal beziehen . Wenn wir zu den Themen übergehen, hoffe ich, dass Sie mit den Konzeptthemen vertraut sind . Nehmen Sie im Grunde genommen den Inhalt, den Sie in Ihren Shop gestellt haben , und zeigen Sie ihn im Frontend an. Wenn wir uns zum Beispiel eine Produktseite ansehen, stammen der Titel und der Preis hier von dem, was Sie im Adminbereich für dieses bestimmte Produkt als Preis und Titel festgelegt im Adminbereich für dieses bestimmte Produkt als Preis und Titel haben. Davon abgesehen hängt die Struktur, die diese Informationen umgibt, von dem Thema ab, mit dem Sie sich gerade befassen. Wenn sich am unteren Bildschirmrand keine Vorschauleiste befindet, die Ihnen mitteilt, in welchem Theme Sie sich gerade befinden, dann befinden Sie sich höchstwahrscheinlich im aktuellen Live-Theme Ihres Shops, Sie hier oben auf der Themenseite sehen können. Wenn Sie nun wissen, wie man Frontend-Webentwicklungscode schreibt , sind Themes sehr flexibel da sie alle auf Code basieren. in diesem vorherigen Beispiel Wenn wir uns den Produkttitel und den Produktpreis innerhalb des Themes angesehen haben, können Sie den umgebenden Code sehen. Dieser Teil hier heißt Chop Fi Liquid-Code und weist Shop Fi an, den Titel hier und den Preis hier einzufügen. Es ist wichtig zu beachten, dass unabhängig davon, ob Sie den Code berühren möchten oder nicht, das Endergebnis immer Code ist. Ich meine damit, dass jede der Optionen, die wir verwenden, um Code zu vermeiden, einfach Code für uns erstellt. Wir müssen vielleicht nicht lernen, wie man programmiert, sondern müssen einfach verstehen, dass Code immer erstellt wird. Sie können den Beweis dafür finden, indem beliebige Seite im Internet, auf der Shopify-Website oder auf andere Weise ansehen Shopify-Website oder auf andere Weise Sie müssen lediglich auf Seitenquelle anzeigen klicken. Und wie Sie sehen können, ist das Ergebnis immer Code. Sie verstehen das vielleicht noch nicht, aber das Theme ist der optimale Weg , um das Frontend Ihres Shops anzupassen. Das einzige Problem ist, dass der Theme-Editor , auf den wir in Kürze eingehen werden, für viele Benutzer immer noch sehr eingeschränkt ist. Der Theme-Editor, nur um Ihnen einen Überblick zu geben, ist die Benutzeroberfläche, die angezeigt wird, wenn Sie hier klicken, um Ihr Theme anzupassen. Wenn wir uns den Theme-Code ansehen, die verfügbaren Optionen in Ihrem Theme-Editor wurden die verfügbaren Optionen in Ihrem Theme-Editor tatsächlich in das Theme selbst codiert. Und der Wert dessen, was der Benutzer in einem dieser Felder eingibt, wird einfach in den Code eingefügt. Ähnlich wie wir es zuvor mit dem Produkttitel und dem Preis gesehen haben . Angesichts der Tatsache, dass die einzigen Optionen in Ihrem Theme-Editor diejenigen sind , die der Theme-Entwickler speziell für Sie bereitgestellt hat. Möglicherweise stellen Sie häufig fest , dass die Option zum Anpassen eines bestimmten Teils Ihres Themas nicht verfügbar ist. Und das meine ich damit dass diese Lösung etwas eingeschränkt ist. Aus diesem Grund haben App-Entwickler Anwendungen entwickelt , die als Page Builder bezeichnet werden. Diese Apps wurden von Drittanbietern entwickelt und bieten eine eigene Benutzeroberfläche für Erstellung von Seitendesigns und Layouts in Schobifi Wenn du ein Design erstellst und in einer dieser Apps auf Veröffentlichen klickst, wird der Code für dich erstellt und irgendwo in dein Habi-fi-Store-Ende oder Theme einer dieser Apps auf Veröffentlichen klickst, wird der eingefügt irgendwo in dein Habi-fi-Store-Ende oder Ich weiß, das klingt vielleicht etwas zu theoretisch oder kompliziert für eine erste Lektion im Kurs über Shopify ohne Code Aber ich bringe Ihnen diese Konzepte näher, damit Sie verstehen, was tatsächlich vor sich geht Bevor Sie Stunden damit verbringen , Apps zu lernen und weiterzuentwickeln , ohne zu verstehen, wie sie sich tatsächlich auf Ihr Geschäft auswirken, lassen Sie mich versuchen, dies mit einer einfachen Tabelle zu vereinfachen , die Ihnen Ihre Optionen aufzeigt. Option eins besteht darin, sich mit dem Theme-Code zu befassen. Dies ist die einzige Option, bei der Sie die vollständige Kontrolle über das Frontend Ihres Shops haben . Ich empfehle es zwar, aber es hat die steilste Lernkurve Und da es sich bei diesem Kurs um einen Kurs ohne Code handelt, werde ich diese Option für diesen Kurs komplett streichen Option zwei besteht darin, die in Ihrem Theme-Editor verfügbaren Optionen zu verwenden in Ihrem Theme-Editor verfügbaren Dies ist das ideale Szenario, aber es hängt ganz davon ab, welche Optionen Ihr Theme bietet. Ein Thema könnte Hunderte und Aberhunderte von Optionen oder gar keine haben . Es ist alles Sache des Theme-Entwicklers. Und zum Zeitpunkt der Aufnahme dieses Kurses die Theme-Editoren und Drag-and-Drop-Funktionen sind die Theme-Editoren und Drag-and-Drop-Funktionen sehr begrenzt. Sie können Abschnitte neu anordnen und Sie können Blöcke, die in einem Abschnitt verschachtelt sind, neu anordnen Und das war es auch schon. Darauf werden wir im nächsten Video näher eingehen. Schließlich besteht Option drei darin, eine Page Builder-App zu installieren. Dies ist die am wenigsten robuste und native Methode zur Anpassung Ihrer Storefront Diese Apps sind jedoch als No-Code-Lösungen sehr beliebt, da sie speziell für No-Code-Benutzer Anfangs mögen diese Apps erstaunlich klingen, aber wenn Sie sich eingehender mit ihnen befassen, stellen Sie möglicherweise fest, dass das Abweichen von der nativen Shopify-Vorgehensweise tatsächlich zu einigen eigenen Problemen führen kann Im nächsten Video werden wir nun über die zweite Option sprechen, den Shop Fi-Theme-Editor 3. Der native Shopify-Theme-Editor: Ich empfehle allen meinen Kunden und Studenten, den nativen Shopify-Theme-Editor allen meinen Kunden und Studenten zu verwenden, um ihr Frontend anzupassen Wir können jedes Thema anpassen, indem wir einfach auf die benutzerdefinierte Schaltfläche für dieses Thema klicken Bevor wir anfangen, mit dieser Version des Theme-Editors herumzuspielen , ist es sehr wichtig zu beachten, dass Hopefi ständig ändert und verbessert die Benutzererfahrung des Theme-Editors Was Sie sich heute ansehen, könnte ganz anders sein als das, was ich Ihnen gerade zeige Ich möchte aber auch darauf hinweisen, dass Verbesserung des nativen Theme-Bearbeitungssystems gegenüber Shape Fi der Bedarf an Apps zum Erstellen von Seiten langsam abnimmt. Shabifai hat einige spannende Updates den Theme-Editor auf dem Weg, aber der Zeitplan, wann diese Updates werden, ist nie in Stein gemeißelt Leider besteht unsere einzige Möglichkeit darin, geduldig zu bleiben und auf das Update zu warten Im nächsten Video werde ich über eine große Ankündigung an den Theme-Editor berichten , die gerade angekündigt, aber noch nicht veröffentlicht wurde. Aber da das noch nicht geschehen ist, kommen wir zurück zu den Optionen, die derzeit zur Verfügung stehen. Zuallererst verwendet Shobifi ein Vorlagensystem, sodass Sie nicht für jede einzelne Produktseite, Sammlungsseite, jeden Blogbeitrag usw. separate Looks und Layouts erstellen müssen für jede einzelne Produktseite, Sammlungsseite, jeden Blogbeitrag usw. separate Looks und Layouts Sammlungsseite, jeden Blogbeitrag . Standardmäßig verwendet jede Produktseite die Standard-Produktvorlage. Derzeit befinden wir uns in der Homepage-Vorlage, die, da es nur eine Startseite für eine Website gibt, nur für eine Seite gilt. Wenn wir jedoch auf diese Schaltfläche klicken, wird eine Liste der Vorlagen angezeigt, die wir ändern können. Klicken wir auf Produkt und dann auf Standardprodukt. Wir können sehen, dass diese Vorlage 12 Produkten in unserem Shop zugewiesen ist . Und dass hier keine anderen Produktvorlagen zur Auswahl stehen. Daher können wir davon ausgehen , dass diese Vorlage grundsätzlich für alle unsere Produkte gilt . Wir können hier eine alternative Produktvorlage erstellen, aber dazu kommen wir gleich, da dies die einzige Produktvorlage ist, die zu diesem Thema verwendet wird. Alle Änderungen, die wir hier vornehmen, gelten für alle Produktseiten neben dem Drop-down-Menü. Um auszuwählen, welche Vorlage bearbeitet werden soll, gibt es ein Drop-down-Menü für Märkte Dabei handelt es sich um eine neue Funktion , mit der wir Änderungen vornehmen können , die nur für einen bestimmten Markt gelten Wenn wir dies beispielsweise auf Australien umstellen, werden Sie feststellen, dass sich der Wortlaut für „Abschnitt hinzufügen“ und „Block hinzufügen“ geändert für „Abschnitt hinzufügen“ und „Block hinzufügen“ Diese werden nun zu „Abschnitt für Australien hinzufügen“. Füge einen Block zu Australien hinzu, wie du hier sehen kannst Wir erhalten eine Warnung mit einem Link, über den du mehr erfahren kannst. Und da es sich um ein eher fortgeschrittenes Konzept handelt , das für die meisten von Ihnen nicht zutrifft, werde ich es für diesen Kurs überspringen. Sie können sich jedoch jederzeit auf dieses Dokument beziehen, um zu erfahren, wie der Market Selector in Ihrem Theme-Editor funktioniert Wenn wir zum Standardkontext zurückkehren, lassen Sie uns darüber sprechen, was sich sonst noch in dieser oberen Leiste befindet . Von links nach rechts haben wir die Schaltfläche zum Verlassen unseres Theme-Editors, gefolgt vom Namen des aktuellen Themes, gefolgt von dem Badge hier ob es live ist oder nicht. Und dann diese drei Punkte, um weitere Informationen und Optionen zu erweitern. Die wichtigsten sind der direkte Link, um den Code des Themes zu bearbeiten oder das Theme so anzuzeigen , wie es sich derzeit im Frontend befindet. Natürlich haben Sie hier noch einige andere Schaltflächen, aber die Schaltfläche „Anzeigen“ und die Schaltfläche „Code bearbeiten“ sind am praktischsten. Davon abgesehen, da es sich hier um einen Kurs handelt, bei dem es sich nicht um einen Coat-Kurs handelt, ist hier im Grunde nur der View-Button von Interesse. Wenn wir unsere Aufmerksamkeit nun auf die rechte Seite der Werkzeugleiste lenken, deaktiviert diese Schaltfläche den Inspektor , der lediglich diese Funktion ein- und ausschaltet, bei der Sie den Mauszeiger visuell auf jeden Abschnitt bewegen können, um den Abschnittsnamen zu sehen , und zwischen ihnen klicken können, um neue Abschnitte hinzuzufügen Oder klicken Sie auf den Abschnitt selbst, um die Einstellungen für diesen Abschnitt auf der linken Seite zu öffnen die Einstellungen für diesen Abschnitt auf der linken Seite vollständig visuelle Funktionalität des Dragon Drop Editors angeht , ist dies ungefähr so weit wie es geht, derzeit mit dem Shove Fi-Theme-Editor, aber es gibt Pläne, dies erheblich zu verbessern Seien Sie gespannt auf das nächste Video in diesem Kurs, um mehr darüber zu erfahren Lassen Sie uns dies vorerst ausschalten und die linke Seitenleiste verwenden, um Abschnitte zu erstellen, zu aktualisieren und zu verschieben. Aber bevor wir das tun, müssen wir hier nur noch ein paar weitere Schaltflächen ansprechen. Zunächst haben Sie hier diesen Schalter, um die Seite auf dem Desktop, auf dem Handy oder im Vollbildmodus anzuzeigen . Dadurch wird einfach die Seitenleiste ausgeblendet, sodass Sie das Design über die gesamte Breite Ihres Fensters verteilt sehen können das Design über die gesamte Breite Ihres Fensters verteilt Dann haben Sie die Schaltfläche „Rückgängig“, die rote Schaltfläche und die Schaltfläche „ Diese sind ziemlich selbsterklärend. Um diese zu aktivieren, müssen wir nur eine Änderung an unserer Vorlage vornehmen und dann können wir sie entweder speichern oder rückgängig machen Wenn wir es rückgängig machen, können wir genauso einfach klicken, um diese Änderung zu wiederholen Okay, da die obere Leiste jetzt nicht mehr im Weg ist, können wir uns jetzt mit diesem linken Bereich befassen , in dem wir all unsere Änderungen vornehmen werden Zunächst werden Sie anhand dieses Themes sehen, dass wir eine Kopfzeilengruppe, eine Fußzeilengruppe und dann den Inhalt der Vorlage haben Abschnittsgruppen sind eine ziemlich neue Funktion in Shopify, sodass Sie diese möglicherweise nicht in Ihrem Theme sehen Die Möglichkeit, hier einen Abschnitt hinzuzufügen und die Abschnitte anzuordnen , sofern diese Funktion nicht zum Thema hinzugefügt wurde Unabhängig davon ist es wichtig zu beachten, dass die Abschnitte außerhalb dieser Vorlagengruppe hier für das sogenannte Layout gelten. Normalerweise haben Themes nur ein Layout, daher können wir hier einfach sagen , dass diese Abschnitte gleich bleiben , egal welche Vorlage wir uns ansehen. Diese Abschnitte sind dagegen spezifisch für diese Vorlage. Jede Änderung, die wir hier vornehmen, wirkt sich also nur auf die aktuelle Vorlage aus, auf der wir uns befinden. also die Hauptbausteine der Chapifi-Themen, Sie durch die Funktionsweise von Abschnitten in Shapefi Hauptbausteine der Chapifi-Themen, Sie durch die Funktionsweise von Im Grunde ist jede Seite in Habifi nur eine Liste von übereinander gestapelten Abschnitten Wenn ich zum Beispiel den Inspektor für eine Weile zurückbringe, können wir diese Abschnitte in der Header-Gruppe sehen, dem Bereich in der Ankündigungsleiste, gefolgt vom Header-Bereich gefolgt vom Und dann können wir die Abschnitte sehen , die zur Vorlage gehören. Wir haben Produktinformationen gefolgt von verwandten Produkten. Und dann haben wir endlich den Potter-Bereich , der zum Layout innerhalb der Fotogruppe gehört. Eine Sache, die ich bei diesem Inspektor nicht erwähnt habe , ist, dass wir in verschachtelte Elemente innerhalb des Abschnitts klicken können , die Blöcke genannt werden Wie Sie hier sehen, wenn ich über diese Elemente schlendere, wird der entsprechende Block unter dem Abschnitt hervorgehoben Lassen Sie mich den Inspektor noch einmal deaktivieren. Und wir können hier jetzt sehen, dass wir Abschnitte in einer Vorlage sowie Blöcke innerhalb eines Abschnitts neu anordnen können einer Vorlage sowie Blöcke innerhalb , indem wir auf den Anzeigenbereich klicken und ziehen indem wir auf den Anzeigenbereich klicken Wir können jeden dieser 17 Abschnitte zu unserem Thema hinzufügen. Oder wenn wir eine bestimmte App installiert haben , die Themen-App-Erweiterungen verwendet, können wir auch einen Abschnitt aus einer bestimmten App hinzufügen. Diese hier ist eine benutzerdefinierte App, die ich für ein anderes Tutorial erstellt habe. In ähnlicher Weise können wir unserem Abschnitt weitere Blöcke hinzufügen, bis Shopify das Update veröffentlicht, das ich im nächsten Video behandeln werde Die Liste der Blockoptionen hier wird auf die Liste der Blockoptionen beschränkt , die im Abschnitt selbst definiert Sie können hier also sehen, dass, da dieser Abschnitt nur einen Schaltflächenblock und einen Überschriftenblock pro Abschnitt zulässt , unsere einzige Option hier darin besteht, hier einen Textblock hinzuzufügen , den wir neben den anderen Blöcken anordnen können. Sowohl Abschnitte als auch Blöcke können ihre eigenen Einstellungen haben oder auch nicht. Sie können also hier für das Bildbanner sehen, ich kann festlegen, welche Bilder ich verwenden möchte, eine bestimmte Deckkraft für das Overlay festlegen, die Höhe des Banners ändern usw. Wenn ich dann hier in einige der Blöcke eintauche, kannst du sehen, dass auch diese Einstellungen haben Ich könnte den Text der Schaltfläche ändern und die Adresse aktualisieren, auf die diese Schaltfläche verweisen soll. Und um diese Änderungen zu speichern , müsste ich nur oben rechts auf Speichern klicken . Und meine Änderungen werden dann auf das Thema angewendet. Schließlich können wir bei jedem Abschnitt oder Block auf das Papierkorbsymbol klicken, um ihn zu löschen, oder auf das Symbol, um unsere Einstellungen beizubehalten, es aber einfach vor dem Endbenutzer zu verbergen. An dieser Stelle ist es ein guter Zeitpunkt zu erwähnen, dass diese Abschnitte und Blöcke für dieses spezielle Thema gelten, bei dem es sich um Version 12.0 0.0 des Dawn-Themas von Sobi Fi handelt Es ist wichtig zu beachten, dass jedes Thema anders ist und die Einstellungen in diesen Abschnitten und Blöcken aus Schemas stammen , die in das Thema selbst geschrieben wurden Ich werde in dieser Klasse nicht auf den Code eingehen, da es sich um eine Shopify-Klasse ohne Code handelt Aber nur um hier zu beachten, dass Sie, wenn Sie etwas Code kennen, diese Schemas ändern können, um neue Optionen innerhalb eines vorhandenen Themes zu aktivieren neue Optionen innerhalb eines vorhandenen Zurück zum Editor, haben Sie Geduld mit mir, es gibt nur ein paar andere Bereiche, die angesprochen werden müssen Hier auf der linken Seite werden Sie feststellen, dass es hier zwei weitere Tabs gibt. Auf der zweiten Registerkarte befinden sich Ihre Themeneinstellungen. Diese Einstellungen sind nicht mit einem Abschnitt oder Block verknüpft , sondern gelten für eine beliebige Stelle in deinem Theme. Zum Beispiel können wir bestimmte Farben bearbeiten , die im Farbschema des Themas gespeichert sind . All diese sind in separate Akkordeons gruppiert , damit wir leichter zwischen ihnen navigieren können Schließlich können wir auf der letzten Registerkarte bestimmte App-Einbettungen für ein einzelnes Thema aktivieren und deaktivieren Dies ist höchstwahrscheinlich ein Panel Sie nicht berühren müssen, es sei denn Sie werden von den Entwicklern einer der Apps, die Sie in Ihrem Shop verwenden, dazu einer der Apps, die Sie in Ihrem Shop verwenden Bevor wir dieses Video beenden, habe ich versprochen, über die alternativen Vorlagen zu sprechen . Wenn Sie sich also daran erinnern, als wir hier auf Produkte geklickt haben , können Sie sehen, dass es nur eine Standard-Produktvorlage gibt eine Standard-Produktvorlage Aber ich kann diese Schaltfläche erstellen , um eine Vorlage zu erstellen. Nennen wir das einfach alternatives Produktlayout. Okay? Und dann können wir wählen, worauf es basieren soll. Und weil wir derzeit nur eine Vorlage in unserem Theme haben, haben wir nur eine Option, nämlich die Standard-Produktvorlage. Also werden wir erstellen, oh, das wird es eigentlich nicht. Lass mich Layouts machen. Lassen Sie mich also einfach ein alternatives Layout erstellen. Der Produktteil kann angenommen werden. Okay, ich werde auf Vorlage erstellen klicken. Dadurch wird eine alternative Produktvorlage in unserem Theme erstellt . Ich möchte dir das nur schnell zeigen. Ich weiß, das ist eine Klasse ohne Code, aber nur um dir zu zeigen, was sie hinter den Kulissen macht, weil du genau das tun kannst, was ich gerade im Code gemacht habe. Es entsteht genau hier. Wenn wir darauf eingehen, wo sich Produkte befinden, ist dieses Produkt die Standard-Produktvorlage. Aber diese hier, die, die wir alternatives Layout genannt haben. Dies ist unsere alternative Produktvorlage. Okay, ich werde dir in einer Sekunde zeigen, wie du das zuweist , aber lass uns darauf zurückkommen. Wir haben es mit dem Theme-Editor erstellt. Wir mussten keinen Code anfassen, aber nur damit du es weißt, wie ich in diesem Kurs erwähnt habe, Code wird immer erstellt. Das ist es also, was im Backend passiert. Okay, jetzt können wir ein völlig anderes Layout erstellen . Ich weiß nicht, was wir tun würden. Ein praktischeres Beispiel wäre, wir lassen mich diesen Abschnitt nicht löschen. Aber wir können hinzufügen, sagen wir zum Beispiel, dass wir das einem ganz bestimmten Produkt zuordnen . Also weisen wir das nur einem Produkt zu. Und wir können mehr über dieses bestimmte Produkt sprechen. Wir können mehr darüber sagen, wir schauen uns gerade die Air Pods an. Wir können mehr über die Air Pods sagen und dann hier näher darauf eingehen. Airpods sind unglaublich. Ich bin eigentlich kein guter Texter. Wir können Shopify dazu bringen, Text für uns, Beschreibungen oder Verkaufsargumente von Apple Airpods zu generieren. Lassen Sie uns ihn für uns generieren Schauen Sie sich dieses Erlebnis, die nahtlose Konnektivität und den kristallklaren Sound der Apple Airpods an. Wie gut ist das? Okay, und dann gib diesem Button eine Bezeichnung, eigentlich löschen wir den Button einfach. Sie können eine Produktseite mit diesem bestimmten Detail haben. Und alles, was wir tun müssen, ist es einfach diesem Air Pods-Produkt zuzuweisen . Ich klicke darauf auf Speichern und dann verlasse ich den Theme-Editor. Und ich gehe zu Produkten finde das Air Pods-Produkt in unserem Shop-Adminbereich. Und dann kann ich hier unten die Theme-Vorlage ändern. Und statt zum Standardprodukt kann ich jetzt zu dem Produkt wechseln, das wir gerade erstellt haben und das Alternative Layout heißt. Und ich klicke auf Speichern und klicke , um eine Vorschau des Produkts anzuzeigen. Wenn Sie es in unserem aktuellen Theme, Dawn Version 12, betrachten, können Sie sehen, dass, sobald wir scrollen, der Bereich Produktinformationen und die zugehörigen Produkte Ihr erfahrt mehr über das Airpods-Erlebnis, die nahtlose Konnektivität und den kristallklaren Sound der Airpods die nahtlose Konnektivität und den kristallklaren Sound der Auf diese Weise können wir das Layout eines bestimmten Produkts beeinflussen das Layout eines bestimmten Produkts und gleichzeitig dieselbe Layoutvorlage für die anderen Produkte beibehalten die anderen Wie Sie sehen können, verwenden alle diese die Standardvorlage. Sie werden diesen zusätzlichen Abschnitt nicht haben, aber bei dem bestimmten Produkt, wir die alternative Vorlage zugewiesen haben, ist der Abschnitt , den wir in diese Vorlage eingefügt haben , auf dieser Produktseite vorhanden. Okay, wenn wir das in Zukunft bearbeiten wollen, machen wir das nicht von hier aus, von der eigentlichen Produktliste aus. In unserem Adminbereich müssen wir zu unserem Theme-Editor zurückkehren. Navigieren Sie zu der Produktvorlage , die diesem Produkt zugewiesen ist. Jetzt können Sie sehen, dass sie einem Produkt zugewiesen ist. Wir zeigen eine Vorschau der AirPods an, dem Produkt , dem sie zugewiesen sind Wenn ich nun die Vorlage für dieses bestimmte Produkt bearbeiten möchte , kann ich das über diese Vorlage tun Wenn ich zur Standardvorlage zurückkehre, können Sie hier sehen, dass dieser Abschnitt nicht in der Standard-Produktvorlage enthalten ist . Da hast du es also. Der Shopify-Theme-Editor Eine der Fragen, die mir das Team von Skillshare bei der Überprüfung meines Kursplans gestellt hat, war der Grund für Kursplans gestellt hat, war der Grund die Aussage, die ich zu Beginn dieser Lektion gemacht habe Ich empfehle allen meinen Kunden und Schülern, den nativen Shopify-Theme-Editor empfehle allen meinen Kunden und zu verwenden, um ihr Frontend anzupassen Es ist schwer zu erklären, ohne auf technische Details einzugehen Lassen Sie mich stattdessen einfach eine Analogie verwenden. Vielleicht haben Sie von Jail Breaking gehört. Es ist üblich, Ihr Telefon so zu modifizieren, dass Sie uneingeschränkten Zugriff auf das gesamte Dateisystem Dieser Zugriff ermöglicht Änderungen, die vom Telefon im Standardzustand nicht unterstützt Nun, die Verwendung eines Page Builders auf Chobifi ist ein bisschen ähnlich Es ist eine Hack-Lösung, die gegen das von Chobe Fi entwickelte Themen-Designsystem verstoßen könnte gegen das von Chobe Fi entwickelte Themen-Designsystem , ohne zu sehr ins Detail zu gehen Möglicherweise stellen Sie aufgrund der Erfahrung fest , dass eine Abweichung vom standardisierten System von Chobe Fi zu unerwarteten Problemen führen kann Einige davon werden möglicherweise erst in der Klasse angezeigt, sobald wir mit der Installation einiger dieser Seitenersteller in Ihrem Shop beginnen dieser Seitenersteller in Ihrem Shop 4. Updates des nativen Theme-Editors: Zweimal pro Jahr. Shobifi macht im Rahmen der sogenannten Shapefi-Editionen eine Reihe von Ankündigungen sogenannten Shapefi-Editionen In der Winterausgabe 2024 von Shabifi kündigte Shobifi einige interessante Aktualisierungen kündigte Shobifi einige interessante der Themen und des Theme-Editors an. Bald werden Blöcke genauso modular sein wie Abschnitte. Und vielleicht noch spannender ist, dass Blöcke auch in anderen Blöcken verschachtelt werden können und nicht nur in Abschnitten Bevor wir uns eingehender mit dieser Funktion befassen, sollten wir zwei wichtige Dinge beachten : Erstens wurde kein bestimmtes Datum festgelegt, an dem diese Funktion der Öffentlichkeit zugänglich gemacht werden soll Und zweitens: Selbst wenn es herauskommt, muss Ihr Theme es unterstützen können. Das bedeutet, dass neue Themes, die nach der Veröffentlichung dieser Änderung erstellt wurden , diese neue Funktionalität höchstwahrscheinlich nutzen werden . Es wird jedoch viele ältere Themen geben, die auf dem alten System verbleiben werden. Denken Sie also vorerst daran. Diese Funktion ist nur in der Developer Preview verfügbar, was bedeutet, dass nur Partner wie ich damit herumspielen können. Lassen Sie mich Ihnen jedoch eine kleine Vorschau darauf geben, wie es funktionieren sollte, wenn es herauskommt. Ordnung Leute, bevor ich eintauche In Ordnung Leute, bevor ich eintauche und euch dieses coole neue Feature zeige, wollte ich hier nur ein bisschen Kontext bieten. Ich bin gerade in einem Development Store, in dem die Developer Preview für diese neue Funktion aktiviert ist einem Development Store, in dem die . Dieser Shop befindet sich also, wie hier steht, in der Entwicklung. Es steht nicht wirklich drauf, aber das ist kein Live-Store, ich kann also aber das ist kein Live-Store, nicht wirklich ein Produkt verkaufen und es für ein Geschäft nutzen. Dies dient nur Test- und Entwicklungszwecken und um eine Vorschau dieser neuen Funktion zu erhalten. Ich konnte das tun, weil ich ein Konto eines Hope Fi-Partners habe. Und von dort aus können Sie einen Development Store einrichten. Ich werde in diesem Video nicht auf den Prozess eingehen, nur weil ich nicht von diesem Video nicht auf den Prozess eingehen, nur weil Ihnen verlange, dass Sie das tatsächlich tun. Sie können sich einfach dieses Video ansehen, um zu sehen welche Änderungen bevorstehen, und selbst entscheiden , ob Sie warten möchten , bis diese veröffentlicht werden , und sie in Ihrem No-Code-Chop-Fi-Workflow verwenden möchten. Aber wenn du dir das vorab ansehen wolltest und es dir unbedingt ansehen möchtest , dann findest du auf meinem YouTube-Kanal, von dem ich am Ende dieses Kurses mehr erwähnen werde , ein Video auf Shopper Fire Winter Editions 2024 , wo diese Funktion angekündigt wurde. In diesem Video zeige ich Ihnen, wie ich den Developer Preview Store eingerichtet habe den Developer Preview Store eingerichtet Okay, nur für den Fall, dass du mitmachen willst, so machst du es. Und die andere Sache, die ich hier nur erwähnen wollte , ist, wie gesagt, um diese neue Funktion nutzen zu können, müssen Sie nicht nur in einem Development Store sein und die Entwicklervorschau aktiviert haben, sondern Sie müssen auch einen bestimmten Thementyp ausführen. Und wie Sie hier sehen können, wird dieses Thema als Referenzthema Main bezeichnet. Dies ist ein Thema, das von Hub Fi erstellt wurde , um Ihnen zu zeigen , wie es funktionieren wird, wenn es herauskommt. Du brauchst also das Thema und du brauchst den Laden. Das Einrichten ist ein bisschen aufwändig, also habe ich beschlossen, das für dieses Video zu überspringen. Wenn Sie jedoch wissen möchten, wie das Development Theme in einem Development Store installiert wird, können Sie sich das Video auf Youtube ansehen. Aber ohne Februar. Ado, lass uns hier in den Customizer springen und du wirst feststellen, dass er ein bisschen anders ist als das , was wir gewohnt sind Hier kannst du also sehen, dass wir hier dieses Image-Banner haben, was zuallererst darauf zurückzuführen ist, das Thema sehr nach Dawn aussieht Ich denke, es basiert auf der Morgendämmerung. Aber es nutzt diese neuen wiederverwendbaren Themenblöcke. Wie Sie sehen können, gibt es hier einen Bereich mit Bildbannern auch in der Morgendämmerung verfügbar ist Aber wenn wir hier unter das Bildbanner schauen, können wir sehen, dass es eine verschachtelte Gruppe namens Gruppe Und innerhalb dieser Gruppe haben wir verschachtelte Blöcke. Jetzt kann ich hier unten keinen weiteren Block hinzufügen. Es sieht so aus, als könnte ich die Sekundärtaste drücken. Da haben wir's. Jetzt haben wir einen Block innerhalb dieser Gruppe von Blöcken hinzugefügt, richtig? Und dann kann ich diese Blöcke innerhalb dieser Gruppe von Blöcken neu anordnen diese Blöcke innerhalb dieser Gruppe von Blöcken Und was mir diese Gruppe gibt , ist ein Container mit weißem Hintergrund Aber ich kann die Position des Inhalts ändern, ich kann hier bestimmte Layoutaspekte ändern. Es sieht so aus, als ob die Änderung auf horizontal ein bisschen fehlerhaft sein könnte , da es sich in der Developer Preview befindet jedoch zu beachten Hier ist jedoch zu beachten, dass wir zuvor einen Abschnitt hatten und dann eine Liste von Blöcken in einem Abschnitt verschachteln konnten Liste von Blöcken in einem Abschnitt verschachteln Jetzt können wir eine Liste von Blöcken innerhalb eines Blocks innerhalb eines Abschnitts platzieren . Schauen wir uns ein anderes Beispiel an. Gehen wir runter zum benutzerdefinierten Bereich. Dies ist wahrscheinlich ein besseres Beispiel , da wir hier einen benutzerdefinierten Bereich haben. Und wenn wir hineinschauen, haben wir diesen Block für die Überschrift und dann haben wir diese Gruppe. Und dann haben wir innerhalb dieser Gruppe zwei Gruppen, und tatsächlich haben wir etwas in der Mitte. Ah, wir haben also im Grunde drei Spalten. Wir haben also diese Gruppe, die im Grunde einem dreispaltigen Layout ähnelt. Und dann haben wir auf dieser dritten Ebene eine Gruppen-Image-Gruppe. Das ist im Grunde wie bei unseren Kolumnen. Und dann können wir innerhalb dieses ersten Blocks zwei Blöcke stapeln, um eine Spalte zu bilden. Ich könnte das auf die andere Seite verschieben. Und das gibt mir eine flexiblere Kontrolle über mein Layout. Okay, also ja, wie Sie sehen können, haben wir in diesem benutzerdefinierten Bereich, hier wird es viel anpassbarer. Wir können Gruppen innerhalb von Gruppen, innerhalb von Gruppen verschachteln. Auf diese Weise können wir benutzerdefinierte Layouts erstellen , die noch nie zuvor möglich waren, da nur eine einzige Ebene von Blöcken unter einem Abschnitt verschachtelt Okay, das ist also ein ziemlich aufregendes Zeug. Das wird ein großer Paradigmenwechsel im Theme-Editor sein und ich denke, es wird für viele Leute ausreichen , keine Seitenersteller verwenden zu müssen weil ich so etwas wie diese Überschrift machen Ich sage nicht, dass das ein praktisches Beispiel ist, aber so etwas wie eine Überschrift über dem Symbol für eine dieser Spalten zu haben , aber nicht für alle, das wäre fast unmöglich Sie müssten gerne ein Kontrollkästchen setzen. Es wäre nicht intuitiv, als müsstest du viele Optionen in dein Theme einbauen , um das zu erreichen. Aber jetzt, mit der Tatsache, dass Blöcke wiederverwendbar sind und ineinander verschachtelt werden können, verändert das das Spiel wirklich Und ich hoffe, ihr beginnt zu verstehen, was ich hier damit meine das alles aus verschiedenen kleinen Blöcken besteht, in die ich dann tiefer hineinklicken kann Also hier haben wir diesen Abschnitt, dann haben wir einen Block und dann innerhalb dieses Blocks haben wir diese drei anderen Blöcke. Und jeder dieser Blöcke und Abschnitte hat seine eigenen Einstellungen. Also ja, wenn du damit herumspielen willst, aber diese Lektion oder dieses Video ist eher dazu da, dir zu zeigen, was auf dich zukommt um zu informieren, ob du trotzdem in einen Page Builder investieren oder warten willst trotzdem in einen Page Builder investieren oder , bis diese Änderungen kommen. Es ist also sehr ermutigend zu sehen, dass diese Funktionen im Theme-Editor verfügbar sind. Je besser der Theme-Editor wird, desto weniger attraktiv werden Apps zum Erstellen von Seiten. Und das ist für mich als Entwickler immer willkommen. Angesichts der Tatsache, dass diese neue Blockfunktionalität es geschafft hat, eine Vorschau zu entwickeln sollten wir sie bald der Öffentlichkeit zugänglich machen. Was die Flex-Sektionen angeht, die sechs Monate vor der letzten Ausgabe angekündigt wurden , haben wir noch kein Update dazu gehört. Also werde ich dieses Video vorerst mit einem Clip aus dem offiziellen YouTube-Kanal von Have Fi beenden , in dem die Vision für den neuen Theme-Editor besprochen und Flex-Abschnitte vorgestellt werden. Okay, gehen wir zurück zum Online-Shop-Editor, in dem ich weiß , dass viele von Ihnen ihre Zeit damit verbringen , Ihre Websites großartig aussehen zu lassen. Und ich möchte Ihnen in unserer Show Fire Themes einige neue Funktionen zeigen, die Ihnen helfen werden Ihren Shop ein bisschen mehr zum Leben zu erwecken. Also, genau hier im Editor werde ich in meine Theme-Einstellungen klicken und auf Animationen klicken. Und hier gibt es ein paar coole Kleinigkeiten. Sie können also Abschnitte beim Scrollen sichtbar machen, was mir diesen schönen Effekt gibt, wenn meine Abschnitte quasi dynamisch erscheinen , wenn ich die Seite nach unten scrolle. Und dieser andere Hover-Effekt für Three-D-Lift bedeutet, dass ich, wenn ich mit der Maus über die Elemente auf der Seite fahre, diesen schönen Drei-D-Schimmereffekt erhalte bedeutet, dass ich, wenn ich mit der Maus über die Elemente auf der Seite fahre, diesen schönen Drei-D-Schimmereffekt erhalte, der die Seite einfach zum Leben erweckt Es ist wirklich cool. Der letzte kleine Effekt, den ich Ihnen zeigen möchte, ist in Abschnitten, in denen Sie Bilder haben. Wir haben diesen neuen Effekt, bei dem Sie im Grunde eine Parallaxe erzeugen können , indem Sie feste Hintergrundpositionen festlegen ich also durch die Seite scrolle, erhalten wir diesen schönen Parallax-Effekt, wiederum ein großartiger visueller Effekt Ihre Sitze ein bisschen lebendiger macht Nun, alles, was ich Ihnen heute bis jetzt gezeigt habe , ist live und steht Ihnen allen zur Verfügung Bevor wir heute zum Abschluss kommen, möchte ich Ihnen einen Blick hinter die Kulissen einiger neuer Funktionen geben , die noch nicht fertig sind, aber bald verfügbar sein werden. Und ich freue mich darauf, dass ihr einen Blick darauf wirft. Also die erste ist etwas, das wir Flex-Sektionen nennen. Also werde ich hier unten im Editor aus dem Abschnitt herausklicken, so wie ich es immer in der Abschnittsauswahl tun würde Ich sehe die Abschnitte jetzt tatsächlich einer kleinen Vorschau, bevor ich sie anklicke. Das ist wirklich nett und hilfreich, wenn ich viel Zeit damit verbringe , Abschnitte in meinem Thema auszuprobieren. Jetzt habe ich den Abschnitt auf der Seite, und das ist ziemlich gut, aber es ist nicht genau das, was ich will. Jetzt mit flexiblen Abschnitten kann ich diesen Abschnitt tatsächlich mit neuen Blöcken anpassen. Ich werde auf diese Plus-Schaltfläche klicken und sagen, dass ich hier ein anderes Bild haben möchte. Lassen Sie uns ein paar aktuelle Bilder in diese Blöcke einfügen. Ich nehme die Tennisbälle auf der Unterseite und lass uns vielleicht das Nähzeug für die Oberseite auswählen. Jetzt möchte ich, dass das etwas anders dimensioniert wird. Jetzt kann ich einfach diesen Griff nehmen und ihn auf die gewünschte Größe ziehen. Ich möchte eigentlich doppelt so viele Teile dieses Abschnitts haben, also klicke ich einfach darauf und drücke auf Duplizieren Jetzt habe ich zwei davon, aber ich möchte, dass dieser auf der rechten Seite ist Also nehmen wir es einfach auf und ziehen es auf die rechte Seite. Ich will irgendwie, dass es andersherum ist. Ich werde das andersherum runterziehen. Ich will die Symmetrie hier haben, also wähle ich das und sage, bitte richte es nach rechts aus. Lassen Sie uns dieses Bild etwas variieren. Such dir ein anderes Nähzeug aus. Toll, mir gefällt wirklich, wie diese Bilder aussehen. Lass uns jetzt einfach reingehen und ein Exemplar reinlegen, also nennen wir es „made in the USA“. Dann lassen Sie uns ein paar Marketingtexte hier reinholen. Ich bin eigentlich nicht sehr gut darin, Werbetexte zu veröffentlichen. Holen wir uns etwas von Shop Fi Magic Copy über Tennisausrüstung, hergestellt in den USA. Lass uns wählen, ich weiß nicht, spielerisch, generierend. Okay, Spiel Set Match. Warum nicht? Dann nehmen wir das. Das Letzte, was ich reparieren möchte, sind diese Knöpfe. Diese Knöpfe liegen übereinander. Mir wäre lieber, sie wären tatsächlich Seite an Seite. Okay, der Abschnitt sieht jetzt so aus, wie ich ihn haben möchte. Das ist auf dem Desktop. Lass uns das schnell überprüfen. Auf dem Handy sieht es gut aus. Es ist super nett. Es ist einfach ansprechend gestaltet Das ist großartig. Einfach so, wir sind fertig. Ich werde auf Speichern klicken. Das heißt Flex Sections Wir freuen uns darauf, es bald in Ihre Hände zu legen . 5. Einführung in Seitenerstellungs-Apps: Im Idealfall sollte der native Theme-Editor von Chobifi ausreichen , damit Chofi-Händler das Frontend ihrer Website anpassen können Leider werden Benutzer, die mehr Kontrolle über ihre Frontend-Designs haben möchten , am Ende gezwungen sein, eine App zu verwenden diesen Apps zum Erstellen von Seiten handelt , wie Drag & Drop, sowie standardisierte Komponenten mit vielen Anpassungseinstellungen es sich um maßgeschneiderte Software, die mehr Anpassungsmöglichkeiten bietet und häufig mehr Funktionen bietet, die sich Händler vom Shobifi-Theme-Editor wünschen , wie Drag & Drop, sowie standardisierte Komponenten mit vielen Anpassungseinstellungen Bevor wir uns mit der Verwendung einiger dieser Apps befassen, möchte ich Ihnen nur helfen zu verstehen, was genau passiert, wenn Sie eine App auf Chobfi verwenden Gehen wir zu unserem Shopper Fire-Adminbereich und fügen Sie unsere erste App zum Erstellen von Seiten Derzeit findest du das Menü für Apps unter deiner Liste der Vertriebskanäle Klicken Sie von hier aus auf das Wort Apps und das Drop-down-Menü wird erweitert, sodass Sie die Liste der aktuell installierten Apps sehen und nach neuen Apps suchen können, die Sie installieren möchten. Lassen Sie uns Page Builder durchsuchen und sehen, was dabei herauskommt. Dadurch gelangen wir zum Shaba Fi App Store, wo wir die passenden Angebote für den Suchbegriff Page Builder sehen können die passenden Angebote für den Suchbegriff Page Builder sehen den Suchbegriff Page Builder Wie Sie sehen können, gibt es hier viele Optionen, aber einige der wichtigsten sind Page Fly, Show Gun Composer und Gem Pages In diesem Kurs werden wir uns nur einige dieser Edelsteinseiten ansehen , Replo und Instant Fangen wir mit Em-Seiten an. Wir klicken hier auf das Symbol oder den Titel für die Liste der Em-Seiten. Und das führt uns zur offiziellen App-Seite im Shopify App Store für Em-Seiten Wir klicken dann auf die Schaltfläche, um die App zu installieren. Dadurch werden wir zurück zu unserem Shopify-Shop geleitet, wo Shopify uns auffordert, bestimmte Zugriffe zu genehmigen , die für die App Denken Sie daran, dass es sich bei der App, obwohl vom Shop Fi App Store genehmigt wurde, sie vom Shop Fi App Store genehmigt wurde, immer noch um Software eines Drittanbieters Die Berechtigungen, die Sie hier gewähren, ermöglichen es der App, sich mit Ihrem Shopify-Shop zu verbinden und bestimmte Änderungen vorzunehmen Klicken Sie auf die Schaltfläche Installieren. Jetzt sehen Sie die Benutzeroberfläche für die App im Adminbereich Ihres Chop Fi-Stores Ein paar Dinge, die Sie hier beachten sollten, sind, dass sie erstens ihre App offensichtlich so gestaltet haben, sie erstens ihre App offensichtlich so gestaltet haben dem Rest des Administrators ziemlich ähnlich sieht. Aber lassen Sie sich nicht täuschen, diese Oberfläche wird ausschließlich von der App bestimmt Wenn Sie schon einmal mit einer Reihe von Apps auf Chop Fi gearbeitet haben, haben Sie vielleicht bemerkt, dass nicht alle so aussehen, als ob sie perfekt in den Hopi Fi-Admin passen perfekt in den Hopi Fi-Admin Und das liegt daran, dass sie so gestaltet werden können wie es der App-Entwickler möchte. Und zweitens, ebenso wie das Design, die Funktionalität und die genaue Methode, können sich die Funktionalität und die genaue Methode, mit der eine solche App die von Ihnen erstellten Designs an das tatsächliche Thema anpassen kann, von den verwendeten Apps unterscheiden und tun dies häufig auch. Da es sich bei diesen Apps um Software von Drittanbietern handelt, werden die Kosten der App auch nicht von Habi Fi übernommen. Die meisten dieser Apps werden also Abonnementpreis haben. Sie berechnen Händlern Gebühren, um sie zu nutzen. Wenn ich in der Gem Pages-App auf das Symbol für die Entwicklung hier klicke , sehe ich die verschiedenen verfügbaren Pläne und deren Leistungen für diese spezielle App In diesem Kurs müssen wir uns jedoch nicht für kostenpflichtige Tarife anmelden, um weitermachen zu können Wenn du dich jedoch für eine bestimmte App entscheidest, die dir gefällt, möchtest du vielleicht einen dieser kostenpflichtigen Tarife erwerben , um die beworbenen Funktionen zu erhalten wir nun verstanden haben , dass es sich bei Page Builder-Apps externe Software handelt , die sich in Ihren Shop , eigene Kosten tragen und Ihren Shop auf maßgeschneiderte Weise manipulieren, schauen wir uns an, wie wir diese Apps in der Praxis einsetzen können 6. Gempages: Ordnung, jetzt, wo wir besprochen haben, wie Apps in unseren Shopify-Shop integriert werden, wollen wir drei verschiedene Apps vorführen denen ich festgestellt habe, dass meine Kunden am meisten begeistert waren Das sind Gem Pages, Replo und Instant. Beginnen wir mit den Gem-Seiten, die wir im vorherigen Video installiert haben Also klicke ich auf Apps und ich kann mir hier meine installierten Apps ansehen. Ich werde auf Em Pages Builder klicken nachdem wir ihm etwas Zeit zum Laden gegeben haben. Sie können hier sehen, dass wir eine neue Seite erstellen können, aber hier gibt es tatsächlich eine neue Funktion. Wir können Abschnitte erstellen. Anstatt eine ganze Vorlage zu erstellen, können wir einen Abschnitt erstellen, eine Vorlage aufgenommen werden kann, vermutlich hoffentlich im Theme-Editor. In Ordnung, jetzt werde ich auf Neue Seite erstellen klicken. Dann können Sie hier sehen, dass wir aus einer Reihe von Vorlagen erstellen können, von denen einige vollständig entwickelt wurden und über alle Funktionen verfügen. Wenn wir ein Produkt haben, das sehr gut dazu passt, können wir eines davon als Ausgangspunkt auswählen. Sehr praktisch für viele Leute, die keine Landing Page oder Produktseite individuell gestalten möchten , aber einige Ideen benötigen. Und dies ist eines der größten Verkaufsargumente bei der Verwendung eines Page Builders. App Shop Pi wird Ihnen dies auch nicht mit allen Demo-Inhalten zur Verfügung stellen. Davon abgesehen sind viele dieser Elemente das spezifische Produkt, das verkauft wird. Ich sehe hier also nichts für Snowboards, also fangen wir einfach bei Null an Ich werde eine Produktseite von Grund auf neu erstellen. Und was ich hier tun kann, ist zum Beispiel eine Zeile mit zwei Spalten einzufügen und mit der Erstellung meines Layouts zu beginnen. Das ist ein Drag-and-Drop, dieses System, das für viele Benutzer gut ist. Ich könnte also eine Überschrift auf diese Seite ziehen, ich könnte ein Bild in diese Spalte ziehen. Wie Sie sehen, haben Sie diese Drag-and-Drop-Funktionalität im Shopify-eigenen Theme-Editor eigentlich nicht Das ist das Verkaufsargument einer solchen App zum Erstellen von Seiten Da es sich jedoch um eine Produktseite handelt, möchte ich zuerst dynamische Inhalte erstellen. Entschuldigung, ich habe hier in die falschen Bereiche geklickt. Ich verwende Apps zum Erstellen von Seiten nicht wirklich , weil ich Entwickler bin. Aber lass mich sehen. Ich sollte hier klicken können . Und jetzt haben wir diesen Abschnitt. Ich werde diesen Abschnitt löschen. Ich werde nach unten zum Produkt scrollen. Und das wird es uns ermöglichen, dynamische Produktinformationen einzubringen . Wie Sie hier sehen können, wird das T-Shirt-Produkt eingeführt , das in meinem Geschäft erhältlich ist. Aber lassen Sie uns das komplette Snowboard Oxygen reinbringen. Ich glaube, es war die Kollektion Snowboard Oxygen war die, mit der wir vorhin herumgespielt haben Ordnung, also werden wir das als unser Beispielprodukt verwenden , richtig? Also haben wir diesen Produktbereich hier und wir können das Layout ändern. Wir können es auf verschiedenen Bildschirmgrößen anzeigen. Und was an Edelsteinseiten cool ist, glaube ich, ist, dass wir darunter Layouts erstellen können. Vielleicht wollen wir wie gewohnt eine Produktgalerie, einen Titel, eine Preis- und Mengenauswahl Aber dann wollen wir auch einige andere Abschnitte darunter einfügen, um das Produkt wirklich zu verkaufen Also können wir, du weißt schon, so etwas mit einer vorgefertigten Vorlage Weißt du, wir können das hier per Drag-and-Drop machen. Wir können dieses Bild also wirklich überall platzieren, wo wir wollen. Wir können es zurück in diese Spalte bringen. Wir könnten das oben oder unten neu anordnen. Also viel Flexibilität hier. Und es ist ein wirklich nettes System für Benutzer , die diese Drag-and-Drop-Funktionalität schätzen. Ordnung, das ist offensichtlich kein dynamischer Inhalt, also werden wir ihn wahrscheinlich nur einem einzelnen Produkt zuweisen oder einen Weg finden wollen einem einzelnen Produkt zuweisen oder einen , dynamische Inhalte hier einzufügen. Bei Edelsteinseiten ist es allerdings ziemlich schwierig. Der Bereich, in dem diese Apps dazu neigen, kaputt zu gehen, ist, wenn wir dynamische Inhalte hinzufügen. Und was ich mit dynamischen Inhalten meine ist, dass genau hier der Produkttitel übernommen wird. Sie können sehen, dass ich das nicht bearbeiten kann. Ich kann das nicht bearbeiten. Das liegt am Produkt selbst. Das sind dynamische Daten, aber genau hier könnte ich das in ein beliebiges Bild ändern. Ändere das in einen beliebigen Text, den ich will. Es ist absolut essbar. Der einzige Nachteil dabei ist, dass dieser Inhalt für jedes Produkt gilt , dem diese Vorlage zugewiesen ist Apropos Zuweisung, gehen wir hier hoch und klicken auf Null zugewiesenes Produkt Und lassen Sie uns es diesem Produkt zuweisen. die Kollektion, Snowboard, Ich glaube, die Kollektion, Snowboard, Oxygen, heißt sie. Klicken Sie auf Bestätigen Wenn wir nun auf Veröffentlichen klicken, wird diese Vorlage diesem Produkt zugewiesen. Sobald das erledigt ist, können wir auf Live-Seite anzeigen klicken. Und jetzt können wir sehen, dass die Produktseite dem entspricht , was wir hier auf Edelsteinseiten erstellt haben. Nun, weil ich ein Entwickler bin und ich denke, dass es wichtig ist zu verstehen, wie sich das tatsächlich in Ihren Shop einfügt Das bedeutet eigentlich , eine Vorlage in Ihrem Theme zu erstellen und diese Vorlage dann Ihrem Produkt zuzuweisen Was ich damit meine. Lassen Sie mich Ihnen das jetzt zeigen. Wenn ich unter Produkte gehe und die Kollektion Snowboard Oxygen in meiner Produktliste hier finde die Kollektion Snowboard Oxygen und nach unten scrolle, wo die Vorlage ausgewählt ist Wir haben Template GP, das für Gem Pages steht, und diesen langen Code, der die Vorlage darstellt, die wir gerade erstellt haben, richtig? Es ist also kein sehr benutzerfreundlicher Name, aber er verlinkt uns direkt zu dieser Vorlage, die wir gerade erstellt haben, oder? Und wenn wir uns dann unseren Theme-Code ansehen, machen sich keine Sorgen, wir werden hier keinen Theme-Code schreiben. Aber ich möchte dir nur zeigen , welche Wirkung das auf deinen Shop hat. Sie werden sehen, dass Gem-Seiten, alles mit Gem oder Gem-Seiten in dieser Dateiliste hier Dateien sind, die von Gem-Seiten erstellt wurden, indem Sie einfach die App installiert und bestimmte Funktionen ausgeführt haben. Sie können also sehen, dass wir hier vier Dateien haben. Wenn wir hier in unseren Vorlagenordner gehen und nach unten scrollen, können wir die Produktvorlage mit dem Code dahinter sehen. Und Sie können sehen, dass es zwei Abschnitte miteinander verknüpft, die einen GP-Bereich haben, gefolgt von einer eindeutigen ID. Wenn wir also hier nach unten scrollen, können Sie jetzt sehen, dass jeder Abschnitt auch in unserem Abschnittsordner zu dieser Datei wird. Also spreche ich das an, weil es Moment nicht so chaotisch ist Aber wenn Sie am Ende viele Vorlagen mithilfe von Jam Pages oder einer ähnlichen App in Ihren Shop integrieren , sieht es sehr chaotisch Lass es mich dir anhand eines Beispiels von einem meiner Kunden zeigen. Genau hier ist der Themencode für einen meiner Kunden. Und wie Sie hier sehen können, haben wir diese vier Dateien in unserem Layoutordner. Aber wenn wir nach unten scrollen, haben wir Edelsteinseiten, Vorlagen für Artikel. Und wenn wir für Sammlungen eine Tonne nach unten scrollen, haben wir sogar eine Menge für die Indexvorlage, die die Startseite ist Wir haben hier eine ganze Reihe von benutzerdefinierten Seiten mit unterschiedlichen Codes. Wir haben hier im Grunde eine Menge Dateien mit Edelsteinseiten. Hier gehen wir also in den Produktbereich schauen uns all diese verschiedenen Produktvorlagen ohne beschreibende Namen Nur Codes, die sich auf Produkte auf Edelsteinseiten beziehen. Es ist also wichtig, an dieser Stelle zu beachten, dass, wenn Sie sich mit diesen Apps zum Erstellen von Seiten austoben, dies Ihrem Theme wirklich viel Volumen verleiht. Hier gehen wir auf Abschnitte ein, und Sie können sehen, wenn wir nach unten scrollen, werden glücklicherweise nicht viele Abschnittsdateien erstellt , aber hier definitiv Vorlagen Jetzt wirst du wahrscheinlich nicht in diesem Code-Editor herumspielen, aber wo sich das manifestieren wird, ist im Theme-Editor Wenn Sie sich an dieses Drop-down-Menü von vorhin erinnern, in dem wir alle Produktvorlagen einsehen konnten. Sie werden hier sehen, dass wir eine riesige Liste haben und viele Vorlagen nur einem Produkt zugewiesen sind. Das macht die Verwaltung etwas schwieriger. Wenn wir den Theme-Editor verwenden möchten, ist es für uns schwierig festzustellen welche Vorlage auf Edelsteinseiten für welches Produkt gilt. Und wenn wir versuchen würden, dies in unserem Theme-Editor zu bearbeiten, werden Sie feststellen, dass es keine Optionen gibt. Es gibt hier nicht einmal einen Abschnitt, den wir verwenden könnten. Es kommt alles über Edelsteinseiten. Also im Grunde funktioniert es nicht wirklich gut mit dem Theme-Editor, wenn Sie Gem-Seiten verwenden. Davon abgesehen, für den Fall, dass wir eine Vorlage erstellen wollten , die für mehrere Produkte mit benutzerdefinierten Abschnitten gilt mehrere Produkte mit benutzerdefinierten Abschnitten , die wir mit dieser Page Builder-App entworfen haben, dann werden Gem-Seiten wahrscheinlich nicht allzu viele Probleme verursachen. Wir können hier reingehen, auf Verwalten, zugewiesene Produkte klicken und diese Vorlage einer Reihe verschiedener Produkte zuweisen . Also könnten wir stattdessen komplett Snowboard fahren. Wenn ich „Veröffentlichen“ höre, ändert sich die Vorlage für das komplette Snowboard von der Standardvorlage zu dieser speziellen Vorlage für Edelsteinseiten, um das zu beweisen Gehen wir zurück zu unserem Adminbereich Ich komme hier aus dem Theme-Code raus. Gehe zu Produkten. Und es war das komplette Snowboard, nicht wahr? Genau hier. Wenn ich nach unten scrolle, können wir sehen, dass dieses Produkt dieselbe Vorlage verwendet wie das andere auf den Chem-Seiten. Aber wir können hier reingehen und dieses Produkt auf das Standardprodukt setzen, dann wird es wieder der Standardvorlage angezeigt. Wenn ich auf Vorschau klicke, ist dies die Standardvorlage. Wenn ich wieder zur Vorlage G em Pages gewechselt habe , klicke auf Vorschau. Jetzt können Sie sehen, dass dasselbe Produkt über eine andere Vorlage geliefert wird, die wir in Gem Pages erstellt haben. Die Vor- und Nachteile der Verwendung von Gem-Seiten sind also sobald wir eine Seitenvorlage in Gem Pages erstellt haben, sie nicht wirklich gut mit dem Theme-Editor zusammenspielt. Auch wenn der Theme-Editor möglicherweise nicht über all diese Drag-and-Drop-Funktionen verfügt, durch die Verwendung von Gem-Seiten Sie durch die Verwendung von Gem-Seiten weniger Kontrolle im Theme-Editor. Wenn Sie sich jedoch gerne auf diese App zum Erstellen von Seiten mit Gem-Seiten verlassen , dann sollten Sie keine Probleme haben, wenn es darum geht , Vorlagen für viele dynamische Inhalte in Gem-Seiten zu erstellen. Es wird langsam etwas kompliziert. Ich würde also eher Edelsteinseiten empfehlen ist die Erstellung von Landingpages. Offensichtlich hat eine Produktseite ihre eigenen Daten und ist daher sehr dynamisch. Eine Landingpage ist jedoch eine einzelne Seite statischem Inhalt. Daher ist Em Pages ein großartiger Landingpage-Builder. Wenn ich zum Beispiel hier reingehe und auf Auswählen klicken kann, um diese Landingpage-Vorlage auszuwählen diese Landingpage-Vorlage und eine Em-Page-Vorlage zu erstellen. Auf dieser Grundlage erhalten wir diese wunderschöne Vorlage, die wir nach Belieben ändern können. Wir können einen Black Friday-Verkauf veranstalten und sagen wir, es gibt stattdessen 35% Rabatt. Und mit dieser schönen Drag-and-Drop-Funktionalität können wir diese Schaltflächen mit der Stelle verknüpfen, an der wir verlinken möchten, um dies nach Belieben zu ändern mit der Stelle verknüpfen, an der wir verlinken möchten, um dies nach Belieben . Okay, wenn wir dafür auf Veröffentlichen klicken, ist das kein Produkt, es wird also keine Produktvorlage erstellt . Aber es wird eine Seitenvorlage erstellt. Und nicht nur das, es wird die dazu passende Seite erstellt. Also, was meine ich damit? Wenn wir also erneut auf Veröffentlichen klicken, die Schaltfläche zuvor verschwunden. Für die View Live-Seite ist das nervig. Sie müssen tatsächlich auf Veröffentlichen klicken, damit diese Schaltfläche angezeigt wird. Aber hier können Sie sehen, dass wir diese Seite erstellt haben. Das Handle ist nicht die beste Landingpage. 18., 13., 36., 16. März. Aber das können wir natürlich ändern. Aber jetzt haben wir diese wunderschöne Landingpage. Und wenn wir uns ansehen, wie sich das auf unseren Shop Fi Store ausgewirkt hat, hat er nicht nur eine Vorlage erstellt, sondern auch eine Seite erstellt um diese Vorlage zu nutzen . Wie Sie unter Online-Shop sehen können, haben wir benutzerdefinierte Seiten und wir können sehen, dass diese Landingpage da ist. Und in der Theme-Vorlage können Sie sehen, dass es sich um diese neu erstellte Vorlage von Em Pages handelt. Und weil dieser Inhalt ausschließlich statisch ist, handelt es sich nur um eine Landingpage. Wir können hier alles hineinlegen, was wir wollen. Das funktioniert in der Regel ziemlich gut und verursacht in Zukunft nicht viele Probleme bei der Verwaltung des Codes. Davon abgesehen ist eines der größten Probleme bei diesen Apps zum Erstellen von Seiten, von denen ich mir ziemlich sicher bin von denen ich mir ziemlich sicher bin, dass diese Änderungen, wenn wir auf Veröffentlichen klicken, nur für das aktuelle Theme gelten. Wenn wir hier zu unseren Themes zurückkehren, wenn wir uns die Dawn-Version 12 ansehen, die gerade läuft, werden Sie feststellen, dass der gesamte Code für Gem-Seiten hier eingefügt wurde. Aber wenn wir uns unsere Vorschau-Themen ansehen, also schauen wir uns Version 11 an, die sich in der Vorschauversion befindet, werden Sie feststellen, dass Jem-Seiten keine werden Sie feststellen, dass Jem-Seiten keine ihrer Dateien hier installiert Wenn wir also Vorschau-Themen verwenden wollen, um eine Vorschau von Inhalten anzuzeigen, also wollen wir an einem Theme eine Änderung vornehmen, vielleicht die Daten und den Theme-Editor aktualisieren und uns das dann ansehen, bevor wir es veröffentlichen Das ist etwas, das in Verbindung mit Jem Pages oder einer anderen Page Builder-App etwas schwierig zu bewerkstelligen Was ich damit meine, ist, wenn Sie hier sehen, all diese Themes eine andere benutzerdefinierte Schaltfläche haben Wenn ich also den Inhalt dieses Themes ändere, gilt das nur für dieses Theme. Und weil es sich bei diesem Thema nicht um das Live-Theme handelt, wird alles, was ich hier mache, auch nicht live gehen. Ich kann eine ganze Menge Sachen testen. Leider glaube ich nicht, dass es für uns eine Möglichkeit gibt, Edelsteinseiten so zu gestalten, dass sie sich auf dieses Theme anstatt auf das aktuelle Theme auswirken . Und als jemand, der in Shops gearbeitet hat , die Edelsteinseiten verwenden, aber auch versucht hat, eine Vorschau speziell entwickelten Funktionen in einem Vorschau-Theme anzuzeigen, von speziell entwickelten Funktionen in einem Vorschau-Theme anzuzeigen, wird das ziemlich knifflig und schwierig den Staging-Prozess zum Laufen zu bringen Das ist also eine kleine Demo von Edelsteinseiten und wie sich das auf deinen Shop auswirkt Die größten Verkaufsargumente von Edelsteinseiten sind meiner Meinung nach diese vorgefertigten Vorlagen , die Sie einfach in Ihren Shop werfen und per Drag & Drop neu anordnen können und per Drag & Drop neu anordnen Der Dragon Drop scheint ziemlich gut zu funktionieren. Weißt du, ich kann ein Bild zwischen diese kleinen Textteile ziehen, diese Textteile verschieben. Es ist ziemlich nett für jemanden , der diese Drag-and-Drop-Funktionalität haben möchte. Und wie Sie hier sehen können, haben wir eine Änderung vorgenommen. Wir müssen also erneut veröffentlichen, und das wird unsere Vorlage ändern Der Nebeneffekt all dessen ist natürlich , wie es sich auf Ihr Thema auswirkt Aber solange Sie das verstehen, fahren wir mit der nächsten App fort, nämlich Rep Blo 7. Replo: Ordnung, in diesem Video werden wir uns eine andere App zum Erstellen von Seiten namens Replo ansehen andere App zum Erstellen von Seiten namens Replo ansehen Nachdem Sie Ihre erste App zum Erstellen von Seiten gesehen haben, können Sie nun durch einen Vergleich mit Replo sehen , welche Dinge gleich sind und welche Dinge sich ändern, je nachdem , welche Seitenerstellungs-App Ordnung, also lass uns diese neue Page Builder-App installieren Replo, los geht's. Replo Landing Page Designer. Ich klicke auf Installieren und dann erneut auf Installieren, um ihm die erforderlichen Berechtigungen zu erteilen Und Replo funktioniert ein bisschen anders, weil Sie in Replo ein neues Projekt erstellen müssen in Replo ein neues Projekt erstellen Dann wird dieses Projekt mit dem Shop verknüpft. Ich nenne das, sagen wir mal Chris' Skill-Share-Kurs. Ich werde auf Projekt erstellen klicken. Mit Replo können Sie jetzt eine KI-generierte Vorlage erstellen. Das ist ziemlich topaktuell. Sie können eine leere Seite erstellen oder den Vorlagen stöbern. Lassen Sie mich hier einen Blick auf einige dieser Vorlagen werfen. Genau wie bei Edelsteinseiten gibt es hier eine Menge vorgefertigter Dinge, die Sie in Ihrem Shop verwenden können , sodass Sie nicht selbst ein Layout erstellen müssen. Lass mich einfach auf dieses klicken und damit eine neue Seite erstellen. Im Gegensatz zu Edelsteinseiten möchte Replo den Namen und das Handle wissen , bevor wir mit dieser Seite beginnen Ich sage Landingpage. Und wie Sie sehen können, wird das Handle automatisch generiert. Aber wir können das jetzt ändern, oder wir können es später im Shopify-Adminbereich ändern Natürlich müssen alle benutzerdefinierten Seiten einer benutzerdefinierten Seite im Shopify-System zugewiesen werden einer benutzerdefinierten Seite im Shopify-System Wir können dies also auch in unserem Adminbereich ändern. Also klicke ich einfach auf Seite erstellen. Und wenn du wie ich einen Development Store verwendest , wirst du aufgefordert, dein Shop-Passwort einzugeben. Alle Development Stores sind von außen über ein Store-Passwort gesperrt . Sie können also hier in die Einstellungen Ihres Onlineshop-Vertriebskanals gehen und das einfach kopieren, wenn Sie danach gefragt werden. Dies ist auch eine Funktion, wenn Sie einen Live-Shop haben und ihn vor dem Zugriff verbergen möchten, es sei denn, Sie haben ein bestimmtes Passwort , das auch in kostenpflichtigen Shops verfügbar ist. Da sich mein Shop jedoch in der Entwicklung befindet, muss ich die Verwendung eines Passworts einschränken. Ordnung, hier hinten können Sie sehen, dass der dynamische Inhalt durchkommt. Und Sie können sehen, dass wir hier dieses ziemlich spezielle Layout haben . Offensichtlich ist dieser Inhalt hier Demo-Inhalt und stammt von einem anderen Produkt. Wir müssten also all diese Inhalte ändern , damit sie für unser Produkt relevant sind. Aber wenn du dir Rep Blow ansiehst und wir es einfach mit Jem-Seiten vergleichen, kannst du sehen, dass wir hier links dieses Panel haben, das dem Theme-Editor ähnlicher ist als Jem Und wenn ich versuche, auf diesen Inhalt zu klicken und ihn zu ziehen, funktioniert es, aber er ist etwas weniger anklickbar und ziehbar Ich finde es vielleicht ein bisschen robuster , weil Sie hier diese verschiedenen Container haben diese verschiedenen Und Sie können die Struktur der Vorlage hier sehen. Und Sie können auch in diesem Bereich klicken und ziehen, genau wie im Theme-Editor. Wenn du dich daran erinnerst, was wir in dem Video über das angekündigte Update für Blöcke im Shopify-Theme-Editor behandelt das angekündigte Update haben, dieses kleine Panel hier eher dem, entspricht dieses kleine Panel hier eher dem, was im Shopify-Theme-Editor erscheinen Es ist also ein ähnliches Paradigma, was ich für eine gute Sache halte Aber auch hier gilt: Wenn Sie durchhalten können, bis diese Änderungen in Kraft treten, dann macht das die Notwendigkeit von so etwas wie Aber einer der großen Unterschiede ist, dass Sie sehen werden, dass wir hier eine Seite erstellt haben Das ist kein Produkt. Wenn ich also auf Veröffentlichen klicke , werden wir zunächst aufgefordert, einen Plan zu erstellen, was wir nicht tun werden. Aber wenn wir auf Veröffentlichen klicken, wird eine Seite erstellt, kein Produkt. Wenn wir Replo verwenden wollten, um eine Produktseite zu beeinflussen, müssten wir zuerst einen Abschnitt erstellen Jetzt fange ich nicht an zu zahlen, was war es, 300$ pro Monat 250$ pro Monat. Nur für dieses Video Und ich erwarte das auch nicht von dir. Ich könnte also zu einem meiner Kundengeschäfte wechseln und wir können sehen, wie sich das auf unseren Lebensladen auswirkt. Ordnung, hier können Sie also sehen, dass wir ein ähnliches Ding komplett für ein Produkt entwickelt haben ein ähnliches Ding komplett für ein Produkt entwickelt , das speziell für dieses Geschäft entwickelt wurde. Wie Sie sehen können, dient es nur zu Demo-Zwecken , da es sich nicht wirklich auf einer Produktseite befindet. dieser Kunde verwendet Replo im Moment für Ich glaube, dieser Kunde verwendet Replo im Moment für Produktseiten, aber hauptsächlich für die Startseite . Also wenn ich suche Im Seitenbereich für die Startseite können Sie dieses Symbol hier sehen, können Sie dieses Symbol hier sehen das darauf hinweist, dass die Seite auf die Startseite eingestellt ist. Und wenn ich darauf klicke, können Sie sehen, dass es sich ein vollständiges Homepage-Layout , das für diesen Kunden erstellt wurde. Ich glaube, in diesem Fall haben wir Replo selbst beauftragt , dieses Layout für uns zu erstellen Genau wie bei den anderen Replo-Vorlagen können wir in jeden dieser Abschnitte eintauchen und so viele verschiedene Dinge bearbeiten Hier gibt es viele verschiedene Optionen, aber Sie werden sehen, dass es in Bezug auf all die verschiedenen Layouts und die verschiedenen Möglichkeiten, die Breite zu ändern, ganz anders aussieht all die verschiedenen Layouts und die verschiedenen Möglichkeiten, die Breite zu ändern, ganz anders als bei Gem-Seiten, was vielleicht etwas aufwändiger per Drag-and-Drop ist Aber auch hier macht jede dieser Apps ähnliche Dinge. Sie gehen es einfach auf unterschiedliche Weise an. Um eine Produktseite zu erstellen oder etwas in Replo zu erstellen, das sich auf eine Produktseite auswirken würde, muss sie als Abschnitt erstellt werden Ich werde hier klicken, um zu den Abschnitten zu gelangen. Und Sie können hier sehen, dass ich diesen derzeit veröffentlichten Abschnitt für MCT Oil, Kickstart, habe, oder? Ich glaube, dieser Abschnitt ist bereits veröffentlicht. Wenn ich hier also in den Customizer für das Live-Theme gehe, könnt ihr die Startseite einfach schnell sehen Sie können hier sehen, dass es keine Optionen zum Anpassen gibt. Das gibt es nur in Replo, weil es von Repl verwaltet wird Aber wenn wir auf die Produktseite gehen würden, bin ich mir nicht sicher, unter welcher Vorlage sie läuft Suchen wir einfach nach dem Produktnamen. Mct, Kickstart. Das ist ein schlechtes Beispiel , weil es Gem-Seiten verwendet. Lassen Sie mich hier klicken, um das zu ändern, und ich kann aus der Produktliste auswählen. Suchen Sie nach MCT, Kickstart. Hoffentlich gibt es eine , die keinen Gem-Seiten zugewiesen ist . Los geht's. Sie können sehen, dass wir hier derzeit einige native Shove-Fi-Abschnitte haben Und wenn ich auf Abschnitt hinzufügen klicken würde, können wir einen Abschnitt hinzufügen, der von Replo generiert wurde In unserem Fall ist es so, lassen Sie mich einen MCT-Kickstart suchen Auf geht's. Mct Oil Kickstart Und wir können diesen Abschnitt einbringen. Auf diese Weise können wir diese ausblenden und den Abschnitt einfach als Produktvorlage verwenden. Jetzt können Sie sehen, dass wir unsere Produktseite für dieses Produkt umgestaltet haben . Aber natürlich verwenden wir die Standard-Produktvorlage. Wir möchten diese spezielle Vorlage nicht beeinflussen. Wir möchten eine neue Vorlage für das Produkt erstellen. Und weisen Sie dann den Abschnitt , den wir erstellt haben, diesem Produkt zu. Obwohl wir hier einen Abschnitt erstellt haben, hat er im Wesentlichen keine Einstellungen. Der Vorteil, dies als Abschnitt zu haben besteht nur darin, dass wir etwas darunter oder darüber hinzufügen möchten. Denn wenn etwas ein Abschnitt ist, können wir mehr Abschnitte darüber und darunter stapeln. Also könnte ich mir hier zum Beispiel ein Image-Banner schnappen und unter dem Abschnitt platzieren , der von Replo generiert wurde Okay, wenn ich zurück zur Replo-Oberfläche gehe, verstehe ich persönlich den Hype, der hinter diesem steht, nicht Es ist ein ähnliches System wie Em-Seiten. Sie können Abschnitte erstellen. Wie wir im letzten Video mit Gem-Seiten gesehen haben , sieht es so aus, als ob Sie Abschnitte auf Gem-Seiten 2 erstellen können. Diese Abschnitte haben jedoch keine Einstellungen, sodass die Funktionen, die im Shopify-Theme-Editor enthalten sind , nicht wirklich genutzt Shopify-Theme-Editor enthalten sind , Aber eines der Dinge, die mir daran gefallen, ist diese baumartige Struktur hier, die wir auf der linken Seite haben Und natürlich haben wir viele vorgefertigte Komponenten , die wir ebenfalls verwenden können. Es sieht so aus, als hätten sie eine ziemlich große Vorlagenbibliothek, was für viele Händler natürlich einen Mehrwert darstellt. Aber die Art und Weise, wie es sich in Ihr Theme einfügt, ist es den Seiten mit Edelsteinen sehr ähnlich die Art und Weise, wie es sich in Ihr Theme einfügt, ist es den Seiten mit Edelsteinen Es werden Dateien erstellt. Bevor wir dieses Video beenden, schauen wir uns einfach unseren Theme-Code an. Wenn wir Replo durchsuchen, können wir sehen, dass genau wie Em-Seiten viele Replo-Dateien mit, nun ja, nicht zufälligen, sondern eindeutigen Identifikationssequenzen erstellt werden, die in Ihrem Code ziemlich hässlich und chaotisch aussehen Aber es ermöglicht Replo, ihr Ding zu machen. Es wird auch eine ganze Reihe von Replochunks in Ihrem Snippets-Ordner erstellen Replochunks in Ihrem Snippets-Ordner Ich meine, sieh dir all diese Relo, Repl, Replochunk an. Wenn Sie damit einverstanden sind, Ihr Theme zu beschmutzen, dann lassen Sie sich von diesen Apps austoben. Es ist alles cool Aber sobald Sie anfangen, sich den Theme-Code anzusehen, wird es richtig chaotisch Wie dem auch sei, das ist alles für Rep Blow in diesem Video. Im nächsten wird es um die endgültige App gehen, die sofort verfügbar ist 8. Augenblick: Ordnung, in dieser Lektion werden wir uns mit der letzten App in unserer Liste befassen, die sofort verfügbar ist. Es gab eine Menge Hype um diese App, vor allem wegen des Figma-Plug-ins und der einzigartigen Funktion, mit der diese App Abschnittseinstellungen für Sie erstellt, aber wir werden gleich sehen, wie das funktioniert Lassen Sie uns tatsächlich weitermachen und diese App installieren. Es heißt also einfach Instant. Wir suchen nach Instant Page Builder. Ich glaube, es wurden keine Ergebnisse gefunden. Suchen wir es also im App Store, indem wir auf diese Schaltfläche, Instant Page und Section Builder klicken. Wir klicken erneut auf Installieren. Das bringt uns zur Instant-App, die im Gegensatz zu den anderen Apps, die wir uns angesehen haben, nicht in Ihrem Shop oder Geschäft geladen wird. Wie ich bereits erwähnt habe, handelt es sich dabei ausschließlich um externe Software, unabhängig davon, welche App Sie verwenden. Und ich hoffe, Fi ermöglicht es , dass diese Apps im Fenster, in Ihrem Fi-Shop, geladen werden. Das heißt aber nicht , dass es Teil von ist, also ist es nur für einen Moment in den Look von Schopf integriert für einen Moment in den Look von Schopf Diese App leitet Sie auf ihre eigene Website weiter, sodass Sie die Shove-Pi-Benutzeroberfläche hier links nicht sehen Shove-Pi-Benutzeroberfläche hier links Und die andere Sache, die hier anders ist, ist, dass wir eine Website für Edelsteinseiten erstellen müssen eine Website für Edelsteinseiten erstellen Für den unten stehenden Mitarbeiter mussten wir nichts davon tun. Wir mussten im Handumdrehen ein Projekt erstellen. Wir müssen eine neue Seite erstellen. Also nenne ich das Christopher's Skillshare Store Hit Der nächste Schritt. Es wird uns fragen , was wir verkaufen wollen. Unser Produkt kommt der Fitness am nächsten. Ich weiß nicht, ob das etwas bedeutet. Das ist wahrscheinlich nur Marktforschung für den Moment. Also klicke ich auf Fitness und werde nun zur Benutzeroberfläche für die Instant Page Builder-App weitergeleitet . Eines der Dinge, die ich mag, ist dieses klare Design, das uns dazu ermutigt, bestimmte Dinge zu tun , was ich für eine gute Praxis halte, wie das Einrichten von Assets bevor wir beginnen, und das Einrichten bestimmter Farbstile, die wir in unsere verschiedenen Layouts laden können. Und hier können Sie sehen, dass wir Seiten oder Abschnitte erstellen können. Hier siehst du das Ebenen-Panel. Aber wir müssen zuerst eine tatsächliche Seite oder einen Abschnitt erstellen , um einige Ebenen einzufügen. Klicken wir einfach hier, um hier von Grund auf neu zu erstellen. Wir klicken und ziehen von diesem Panel auf unsere Leinwand genau hier. Beginnen wir also mit einem zweispaltigen Layout. Und dann sagen wir einfach, wir platzieren ein Bild auf der einen Seite und wir fügen eine Überschrift auf die andere Seite, genau auf diese Seite. Stellen wir das Bild ein. Ich klicke in das Bild. Wir können die Quelle wählen. Wir können. Lassen Sie uns dieses Bild hochladen , das tatsächlich aus dem Laden stammt und versuchen , versuchen , in einem ihrer YouTube-Videos nachzubilden Es ist ein Geschäft von Beyonce namens Sacred. Wie Sie hier sehen können, können wir mit der Maus über bestimmte Elemente fahren, sie anklicken, um ihre Einstellungen anzuzeigen, und wir können sehen, dass sie auf unser Klicken reagieren Was wir aber nicht tun können, ist Elemente anzuklicken und sie rüber zu ziehen. Du kannst es aus deiner Sicht nicht wirklich sehen, aber ich ziehe gerade dieses Bild rüber und es passiert nichts Es gibt hier also keine Click-and-Drag-Funktionalität. Aber ähnlich wie bei Replo haben wir diese baumartige Struktur , die wieder dem Theme-Editor ähneln wird , sobald das neue Update herauskommt Eine der coolen Funktionen ist jedoch , dass es vielleicht keine Drag-and-Drop-Funktionalität gibt, um Dinge zu verschieben Aber es hat die Möglichkeit, die Größe per Drag-and-Drop zu ändern, sodass ich die Größe dieses Bildes mit dem visuellen Editor ändern kann, was eine coole Funktion ist Wie Sie hier sehen können, befinden wir uns im Seitenerstellungsmodus. Die beiden Optionen im Handumdrehen bestehen darin, eine Seite oder einen Abschnitt zu erstellen. Wenn ich hier also einfach auf Veröffentlichen klicke, werden wir zunächst aufgefordert, eine Verbindung zu Shove Fi Ich weiß nicht, warum es uns dazu auffordert , obwohl wir die App bereits installiert haben Aber vielleicht hat es etwas damit zu tun, dass die App außerhalb des Adminbereichs sitzt. Also klicke ich auf Connect. Und ich glaube, dass dadurch unsere Website, die wir erstellt haben, mit unserem Shove-Fi-Shop verbunden wird unsere Website, die wir erstellt haben, mit unserem Shove-Fi-Shop Eine Website und ein Geschäft scheinen zwei verschiedene Dinge zu sein, aber wir können sie miteinander verbinden Und dann können wir diese Seite jetzt auf unserer Shopfi-Site veröffentlichen. Jetzt können wir hier klicken, um die Seite anzuzeigen. Im Gegensatz zu Replo gab es uns nicht die Möglichkeit, den Seitentitel und das Seiten-Handle anzupassen, aber es wurde eine Seite in unserem Shop-Fi-Shop mit diesem Layout erstellt unserem Shop-Fi-Shop mit diesem Wenn wir also hier rüber gehen und zu den Seiten gehen, können wir hier Beweise dafür sehen Wenn ich hier für eine Seite klicke, kannst du sehen, dass der Name der Seite einfach Seite ist. Und wenn wir uns mit Webseiten-SEO befassen, können wir hier das Handle der Seite sehen. Und wenn wir uns dann die Vorlage ansehen , können Sie sehen, dass wir ähnliche Seiten wie Gem-Seiten verwenden , ähnlich wie Replo, wir verwenden eine Vorlage, die von ihnen generiert wurde von ihnen generiert irgendwo in unserem Theme namens Instant steht, gefolgt von einer eindeutigen Zeichenfolge Ordnung, so schnell ist das Erstellen einer Seite in unserem Shop Aber das Spannende an Instant ist nicht so sehr, dass wir Seiten erstellen können, wie wir es gerade getan haben, wir können Abschnitte erstellen und dann werden diese Abschnitte sondern wir können Abschnitte erstellen und dann werden diese Abschnitte mit Einstellungen versehen, sodass wir sie, sobald wir sie in unseren Theme-Editor eingefügt haben, mit dem Theme-Editor bearbeiten können. Idealerweise sollten wir also in der Lage sein, sowohl den Theme-Editor als auch den Instant Page Builder zu nutzen sowohl den Theme-Editor als auch den , indem diesem System folgen. Also lass es uns testen. Lassen Sie uns einen Abschnitt erstellen. Sagen wir einfach, wir möchten, dass dieser Abschnitt ein Abschnitt für eine Produktseite ist. Was wir tun können, ist, mich Sache mit dem Einfügen auf der Seite hier suchen zu lassen. Wie heißt es? Das Menü „Einfügen“. Und ich werde auf Elemente eingehen. Wir könnten ein weiteres zweispaltiges Layout erstellen und etwas statischen Text, ein statisches Bild, eine Schaltfläche, ein Video und all das gute Zeug einfügen ein statisches Bild, eine Schaltfläche, . Aber was wir tun können, ist dynamischen Inhalt aus dem Produktobjekt einzufügen. Wenn wir dies auf einer Produktseite platzieren oder auch wenn wir es nicht auf einer Produktseite platzieren , können wir ein Produkt verlinken und die Informationen dann dynamisch von diesem Produkt abrufen . Also müssen wir noch ein Layout erstellen. Also werde ich ein zweispaltiges Layout erstellen. Ich muss es nur auf die Leinwand ziehen. Und anstatt ein statisches Bild auf diese Seite zu legen, werde ich das Produktbild auf diese Seite legen. Und dann werde ich, anstatt einen zufälligen Titel zu haben, den Produkttitel hier drüben platzieren. Aber ich habe das Wesentliche übersehen, also muss ich es tun. Es ist hier oben, also muss ich es nur in diese Zeile ziehen. Dann füge ich auch hinzu, sagen wir mal den Preis hier, Produktpreis und die Beschreibung. Und den Button zum Ausschneiden darunter hinzufügen. Okay, momentan wird nichts angezeigt, weil wir es mit einem Shopper Fire-Produkt verknüpfen müssen es mit einem Shopper Fire-Produkt verknüpfen Genau hier. Wir können Set Source auswählen. Lass uns das machen, was wir schon die ganze Zeit gemacht haben, nämlich die Kollektion Snowboard Oxygen Ich glaube, es ist dieser. Dann können wir hier nach einem Produkttitel suchen die Quelle auf die Kollektion Snowboard Oxygen ändern Und ich denke, der Rest wurde angenommen, dieser Artikel zum Warenkorb verlinkt gerade auf diesen Platzhalter Deshalb wollen wir die Quelle ändern, um Snowboard-Sauerstoff Okay, und dann können wir, genau wie bei den anderen Apps zum Erstellen von Seiten, eine andere Art von Spalten darunter erstellen und mehr Inhalt hineinlegen Aber fürs Erste mache ich das einfach rückgängig. Eigentlich lässt es mich das nicht rückgängig machen. Also muss ich diese Zeile einfach löschen. Hat das funktioniert? Nein. Sie müssen nur darauf klicken, um es zu löschen. Okay, ich denke, das hat funktioniert, obwohl nein, da ist noch eine weitere Kolumne. Okay. Okay, jetzt klicke ich auf Veröffentlichen. Und anstatt eine Seite zu veröffentlichen, wird ein Abschnitt erstellt , der dann in unser Theme eingefügt wird. Und was wir an diesem Punkt tun können, ist, diesen Abschnitt in ein beliebiges Template innerhalb unseres normalen Theme-Entwicklungsparadigmas einzufügen beliebiges Template , in unserem normalen Theme-Editor Und dann können wir diesen Abschnitt verwenden. Und ich glaube, dass dies auch Einstellungen erstellen sollte , sodass wir dieses Layout, sobald wir es in unseren Theme-Editor eingefügt haben, auch mit dem Theme-Editor bearbeiten können. Schauen wir uns also an, wie das funktioniert. Okay, ich gehe zurück zu meinem Theme-Editor für das aktuelle Theme und klicke auf Anpassen, um dorthin zu gelangen , weil wir einen Produktbereich erstellt haben. Gehen wir zu den Produkten über. Wir können hier auf das Standardprodukt eingehen. Nehmen wir einfach an, wir wollten diesen Abschnitt für die Präsentation unserer Produktinformationen ersetzen diesen Abschnitt für die Präsentation unserer Produktinformationen Ich werde ihn nicht löschen, ich werde nur beide Abschnitte ausblenden , sodass sie nicht angezeigt In der Werbung haben wir unseren Bereich nicht wirklich richtig benannt, wir haben ihn einfach S genannt. Ich glaube, das ist der Name , der hier durchkommen wird. Aber wie Sie sehen können, steht uns der Abschnitt, den wir in Instant erstellt haben , jetzt zum Hinzufügen im Theme-Editor zur Verfügung . Also werde ich darauf klicken und es aufrufen. Und jetzt, wo wir unsere Informationen haben, können Sie sehen, dass das einzige Problem darin besteht das Sammeln von Snowboard-Sauerstoff ist Und wie Sie hier sehen können, zeigen wir eine Vorschau der AirPods auf dem Standardprodukt Wir möchten also nicht, dass dies für das Airpods-Produkt und alle anderen Produkte in der Standardproduktvorlage gilt das Airpods-Produkt und alle anderen Produkte in der Standardproduktvorlage Wenn ich jedoch auf diesen Abschnitt klicke, werden Sie feststellen, dass die Einstellungen geöffnet werden Wie versprochen, gibt uns Instant die Einstellungen zusammen mit dem Inhalt, wenn wir einen Bereich in unserem Shop von I Store veröffentlichen, was meiner Meinung nach ziemlich einzigartig ist. Ich weiß nicht, ob einer der anderen das tut. Vielleicht macht Jem Pages das jetzt, ich bin mir nicht sicher, aber ich denke, hier kommt der Hype um Instant her Aber was mir an diesem System trotzdem nicht gefällt, ist, dass es drei verschiedene Stellen gibt, an denen ich ein Produkt einsetzen kann Also habe ich hier ein Produkt verlinkt, es noch einmal zweimal verlinkt. Schaltfläche „Zum Ausschneiden hinzufügen“. Das Produkt wurde nicht verlinkt, aber es sollte sich alles nur auf das einzelne Produkt beziehen , oder? Angesichts dieses unerwarteten Verhaltens dachte ich, es wäre am besten, den App-Entwickler selbst zu fragen , warum wir drei separate Felder haben. Und zweitens, wie bringen wir das Produkt dazu , aus der Produktvorlage zu ziehen? Was den zweiten Punkt anbelangt, teilt mir der Support-Mitarbeiter mit, dass er die Erstellung vollständig benutzerdefinierter Produktseiten derzeit nicht unterstützt, dies jedoch in Kürze der Fall ist, sodass alle erstellten Abschnitte als Erweiterungen für Ihre aktuelle Produktseite verwendet werden sollen als Erweiterungen für Ihre aktuelle Produktseite Ich denke, er meint damit im Wesentlichen, dass wir das Produkt nicht aus dem Produkt herausziehen können aus dem Produkt herausziehen , das wir uns auf einer Produktvorlage ansehen Aber wir können Abschnitte erstellen , die Produktinformationen aus einem Produkt abrufen. Wir spezifizieren, dass wir hier im Wesentlichen keine dynamische Verknüpfung verwenden können. Wir müssen reingehen und explizit ein Produkt festlegen. Aber was die drei Felder angeht, erwähnt er hier, dass derzeit jedes Element separat verbunden ist. Wir müssen lediglich die Produktverbindung auf der übergeordneten Ebene einrichten und dann können alle Ebenen darunter Daten aus dieser einzelnen Verbindung abrufen. Querverweise auf diese Informationen mit zwei T auf dem YouTube-Kanal der Instanz Ich denke, wir müssen diese einzelnen dynamischen Produktbereiche vollständig entfernen diese einzelnen dynamischen Produktbereiche und einige statische Inhalte einfügen Aber dann verknüpfen Sie den übergeordneten Container mit einem Shopper Fire-Produkt Es sieht also so aus, als ob wir nicht in der Lage sein werden, diesen Abschnitt von einer Produktseite abzurufen Aber zumindest können wir einen Bereich mit ausgewählten Produkten erstellen Bereich mit ausgewählten Produkten , den wir auf anderen Seiten verwenden können , um ein bestimmtes Produkt hervorzuheben. Lassen Sie mich hier zum Herausgeber zurückkehren und diese Idee weiterverfolgen . Also werde ich zu Beginn all diese Elemente mit dem Produkt entfernen . All diese dynamischen Produktelemente , die ich zuvor eingegeben habe. Also werde ich einfach meine Löschtaste verwenden , um sie einfacher zu entfernen. Jetzt haben wir wieder unser zweispaltiges Layout. Und Sie können hier sehen, dass die Zeilen Shopify verbunden sind Lassen Sie uns einfach diese dynamische Verbindung entfernen. Lassen Sie uns vorerst unseren statischen Text eingeben . Wir hatten, was war das für ein Bild hier? Text hier. Lass uns sehen. Jetzt benötigen wir einen Überschriftentext für den Produkttitel. Ich werde es tatsächlich entfernen, das kann vielleicht unser Preis sein. Ich lasse das da liegen. Ich würde gerne einen Knopf einbauen, aber ich weiß nicht, ob wir etwas vom Laden kaufen können, wenn ich hier bin. Lass es uns ausprobieren. jetzt, da wir den gesamten statischen Inhalt haben, Lassen Sie mich jetzt, da wir den gesamten statischen Inhalt haben, hierher kommen. Und für den übergeordneten Container, die Spalte, legen wir das auf ein bestimmtes Produkt fest. Wir sollten dies später im Theme-Editor ändern können , wenn diese dynamische Quelle im übergeordneten Container ausgewählt ist. Gehen wir zum Bild, und Sie können hier sehen, dass wir auf die übergeordnete Quelle verlinken können. Und wenn wir dann nach unten scrollen, der Inhalt des Bildes kann der Inhalt des Bildes von statisch auf dynamisch eingestellt werden. Und nehmen Sie das Produktbild, das aus dem übergeordneten Container abgerufen wird , also von dort, wo das Produkt herkommt, hier unten. Wir haben die Quelle hier. Und dann können wir hier in den Inhalt reingehen, wir können das Gleiche tun, es von statisch auf dynamisch umstellen. Es gibt noch einen weiteren Schritt, ich muss hier tatsächlich auswählen , aus welchem Feld auf dem Produktobjekt ich ziehen möchte. Also werde ich vom Titel dort abziehen. Sie können sehen, dass es dynamisch zieht. Und dann dieser kleine Text hier, lassen Sie uns den richtigen Preis ermitteln Und dann hier unten wird es aus dieser Quelle stammen. Aber ich glaube nicht, dass wir dem eine benutzerdefinierte Operation geben können. Schauen wir uns die Interaktionen an. Können wir das bekommen, um dem Schnitt etwas hinzuzufügen? Los geht's. Aktion fügt dem Schnitt hinzu. Nun, wir haben unsere Quelle hier. Lassen Sie uns das testen. Lass mich das einfach umbenennen. Wenn ich in den Text eintauche, sagen wir: Hinzufügen bis Ausschneiden. Klicken Sie jetzt auf Speichern und lassen Sie uns diesen Abschnitt veröffentlichen. Dann erhalten wir diese praktische Verknüpfung, Dann erhalten wir diese praktische Verknüpfung um ihn im Theme-Editor zu öffnen. Lassen Sie uns sehen, wie sich das Ergebnis ändert. Wir befinden uns also wieder im Theme-Editor. Und lass uns einfach zur Produktvorlage gehen. Wie Sie sehen, haben wir doppelte Produktinformationen, also lassen Sie uns diese verstecken. Und was uns bleibt, ist nur der Abschnitt. Lassen Sie mich reingehen und die Einstellungen überprüfen und er kann sehen, dass wir jetzt nur noch ein Produktfeld haben. Wenn ich das also auf archiviertes Snowboard ändere, sollten wir die dynamischen Daten aus dem archivierten Snowboard ziehen lassen, was anscheinend nicht der Fall Leider ist dieses Feld hier. Aber wenn ich das Produkt hier ändere, okay, jetzt scheint es zu funktionieren. Okay. Also das war ein kleiner Fehler, schätze ich Also gut, jetzt können wir auf jedes Produkt ändern, das wir wollen Und all die Details, das Bild, der Titel, der Preis und das Produkt, das dem Schnitt hinzugefügt wird, sollten jetzt für jedes Produkt gelten, das wir hier auswählen. Wir sind wieder auf der Seite für die Kollektion Snowboard Hydrogen Also versuchen wir es einfach noch einmal. Wenn wir dynamische Links verwenden können, wähle ich ein Produkt aus und schaue, ob sich das ändert, wenn wir jetzt ändern, welche Seite wir in der Vorschau betrachten Wenn ich das also verwende, um das Produkt, das wir in der Vorschau sehen, über das Standardprodukt zu ändern Produkt, das wir , ändern wir es auf Sauerstoff Okay, jetzt, wo wir das Problem mit den Eingaben behoben haben, scheint die dynamische Verknüpfung zu funktionieren Und Sie können hier sehen, dass früher als wir dynamisches Verknüpfen verwendet haben, es hieß von aktuellem Abschnitt, jetzt heißt es von der aktuellen Seite, was wir tun wollten. Deshalb glaube ich, dass ich die falsch interpretiert zuvor gesendete E-Mail falsch interpretiert habe Ich entschuldige mich dafür. Aber Sie können sehen, dass dynamisches Verknüpfen funktioniert Jetzt können wir also im Wesentlichen den gleichen Bereich mit den Produktinformationen im Handumdrehen erstellen , ihn überführen und trotzdem einige Anpassungsoptionen im Theme-Editor haben . Wir profitieren hier also ein bisschen von beiden Welten. Also, wenn ich auf Speichern klicke und es in diesem Theme als Vorschau ansehe, richtig? Das ist also in der Standard-Produktvorlage, also sollte das eigentlich für praktisch alle Produkte gelten. Ich klicke darauf, dadurch wird das Produkt im Adminbereich geöffnet. Ich glaube nicht, dass es einen Link zum Öffnen der eigentlichen Produktseite gibt, was nervig ist. Aber wir können erneut auf Vorschau klicken , um zur Seite im Frontend zu gelangen. Wie Sie hier sehen können, haben wir hier geklickt, um eine Vorschau der Kollektion, Snowboard Oxygen, anzuzeigen, und das haben wir Wenn du jetzt auf ein anderes Produkt klickst, sagen wir etwas ganz anderes, wie eine Geschenkkarte Sie werden sehen, dass dieselbe Vorlage angewendet wird und dass dynamische Daten übertragen werden. Und diese Schaltfläche „In den Einkaufswagen“ sollte hoffentlich auch funktionieren. Und das tut es, es hat erkannt, dass dem Produkt um eine Geschenkkarte handelt, und das wurde rübergebracht. Das ist ausgezeichnet. Das ist also der Vorteil, wenn man so etwas wie Instant benutzt. Gibt Ihnen ein bisschen das Beste aus beiden Welten. Wenn Sie also so etwas wie eine Produktseite erstellen möchten , die hochdynamisch ist, würde ich empfehlen, so etwas mit Instant zu machen und vielleicht einige der anderen Optionen, über die wir in diesem Kurs gesprochen haben , vorzuziehen, damit das sofort funktioniert. Im nächsten Video werden wir all unser bisheriges Lernen zusammenfassen und den Kurs dann mit Ihrem Kursprojekt und den nächsten Schritten abschließen Ihrem Kursprojekt und den nächsten Schritten 9. Zusammenfassung: wurde viel über die verschiedenen Möglichkeiten zur Anpassung einer Hopi Fi-Website ohne Codelösungen berichtet Anpassung einer Hopi Fi-Website ohne Codelösungen Lassen Sie uns kurz zusammenfassen, bevor wir zum Abschluss und zum Klassenprojekt übergehen Abschluss und zum Klassenprojekt Wie Sie in diesem Kurs gesehen haben, werden alle Lösungen, unabhängig davon, für welche Lösung Sie sich entscheiden, unabhängig davon, für welche Lösung Sie sich entscheiden, ein Shopifi-Thema verwenden, wie wir es auch in diesem Kurs gesehen Mit Ausnahme der sofortigen Erstellung einer Vorlage oder eines Abschnitts in einer Seitenerstellungs-App werden wir gezwungen , diese App weiter zu verwenden, um Änderungen an unserem Front-End vorzunehmen . Dateien werden in unser Theme eingefügt, aber um den Code zu ändern, müssen wir zu der App zurückkehren , die sie erstellt hat. Im nächsten Video werde ich meine persönlichen Empfehlungen teilen. Um die Zusammenfassung für dieses Video zu vervollständigen, sind hier einige Punkte aufgeführt, an die Sie sich erinnern sollten. Erstens basiert der Vertriebskanal des Shopify Online Shops auf einem System von Vorlagen, Abschnitten und Blöcken In Zukunft wirst du Blöcke innerhalb von Blöcken verschachteln können , um komplexere Layouts zu erstellen Derzeit existieren Blöcke jedoch auf einer einzigen Ebene, die unter Abschnitten verschachtelt Seitenersteller Nummer zwei helfen Ihnen dabei , benutzerdefinierte Vorlagen zu erstellen Diese Vorlagen sind nicht in mehrere Themenbereiche aufgeteilt in mehrere Themenbereiche aufgeteilt und nutzen daher nicht die Funktionen des Theme-Editors. Davon abgesehen sind Seitenersteller Nummer drei nun auch dabei, Themenbereiche zu erstellen um mit dem Theme-Editor besser umgehen zu können Bisher habe ich jedoch noch keine dieser Apps zum Erstellen von Seiten gesehen , die Blöcke für Sie generieren Nummer vier Apps zum Erstellen von Seiten sorgen für Chaos in der Codebasis Ihrer Themes, was zu Problemen führen kann, wenn Sie den Code in Zukunft anpassen möchten. Und schließlich Nummer fünf. Jede App zum Erstellen von Seiten ist ebenfalls ein separates System, was bedeutet, dass Sie eine Vorlage normalerweise nicht von einer App in eine andere migrieren können . Umgekehrt können Sie, wenn Sie nur mit den nativen Themenabschnitten erstellen , diese Dateien für mehrere Themes gemeinsam nutzen und Abschnitte ganz einfach zwischen Themes und anderen Stores migrieren zwischen Themes und anderen Stores 10. Schlussbemerkung: Herzlichen Glückwunsch. Sie haben es jetzt bis zum Ende des Kurses geschafft es jetzt bis zum Ende des Kurses Wenn Sie sich alle Videos angesehen haben, sollten Sie jetzt eine gute Vorstellung von den Optionen zur Anpassung Ihres Shops ohne Code Als Entwickler kann ich jedoch nicht betonen, wie sehr das Erlernen von ein bisschen Code Ihnen helfen kann, viele der Probleme zu vermeiden, die Abhängigkeit von externen Apps verursacht werden. Genug. Deshalb empfehle ich, zumindest etwas Shopify-Theme-Entwicklung zu lernen , wenn Sie wirklich die volle Kontrolle über Ihren Shop außerhalb des Ladens haben möchten. Wenn du neugierig bist, wie das aussieht, schau meinen YouTube-Kanalcode mit Chris, dem Freelancer, oder sieh dir einige meiner Kurse an, speziell zu Shopify Theme Development hier auf SkillShare.com. Da es sich um eine Klasse ohne Code handelt, möchte ich, dass du vorerst Da es sich um eine Klasse ohne Code handelt, möchte ich, eine Lösung aus der Klasse auswählst, entweder den nativen Theme-Editor oder eine App zum Erstellen von Seiten, und deine eigener benutzerdefinierter Abschnitt oder Vorlage Sobald Sie fertig sind, fügen Sie Ihre Arbeit dem Abschnitt mit den Klassenprojekten der Klasse hinzu, um sie mit den anderen Schülern zu teilen oder um Feedback von mir zu erhalten. Wenn dir dieser Kurs gefallen hat, hinterlasse eine positive Bewertung und sieh dir einige meiner anderen Kurse hier auf Skillshare Danke fürs Zuschauen und wir sehen uns beim nächsten.