Shopify Theme-Entwicklung: Erstellen und anpassen eines eigenen Online-Shops

1. Einführung: Hallo und willkommen bei Shopify Theme Development: Wie Sie Ihren eigenen Online-Shop erstellen oder anpassen. Ich bin Chris, ich bin ein Top-Lehrer hier auf Skillshare.com behandelt Themen wie Web-Entwicklung und Online-Freelancing. Und im heutigen Kurs werde ich Sie durch einen effizienten Prozess zum Aufbau und Anpassen von Online-Shops mit der Shopify-Plattform führen. Shopify ist eine der führenden E-Commerce-Plattformen der Welt mit über 800.000 aktiven Shopify Stores und meiner Meinung nach der ideale Ort, um Ihren ersten Online-Shop zu bauen. Als Designer oder jemand mit grundlegenden Webentwicklungswissen benötigen Sie nur einige grundlegende Kenntnisse der Plattform selbst und ihrer Templating-Sprache namens Liquid, um die Macht von Shopify zu entfalten . Und genau darauf werden wir in diesem Kurs eingehen. In den folgenden Lektionen konzentrieren wir uns auf den Aufbau und Anpassung Ihrer Store-Front durch die Verwendung eines Shopify-Themes, das im Grunde wie eine Vorlage ist, die bestimmt , wie Ihr Online-Shop aussieht und fühlt. Wir erfahren mehr über die Theme-Struktur einschließlich Layouts, Vorlagen, Abschnitte und Snippets, wie Sie Ihren Code effizient bearbeiten und sofort aktualisieren können, und schließlich, wie die Bearbeitung Ihres Codes nicht nur das Aussehen von Ihre Website, sondern auch Optionen innerhalb Ihres Shopify-Admins bereitstellen , um Inhalte dynamisch hinzuzufügen und anzupassen. Am Ende des Kurses sollten Sie ein solides Verständnis davon haben, was Sie mit Shopify-Themes tun können und das Vertrauen haben, Änderungen bei Bedarf vorzunehmen. ob Sie Ihre eigenen Produkte verkaufen oder diese Fähigkeiten nutzen möchten, um Unternehmen als Freiberufler oder Agentur zu unterstützen, dieser Kurs bringt Sie mit Shopify auf den richtigen Weg. Also, wenn Sie bereit sind, loszulegen, klicken Sie auf das nächste Video und ich sehe Sie auf der Innenseite. 2. Erforderliche Kenntnisse und Tools: Bevor wir anfangen, unseren Online-Shop zu drehen und unser Thema zu bearbeiten, ist es wichtig zu besprechen, für wen diese Klasse ist und welche Fähigkeiten Sie in diese kommen sollten. Zunächst einmal, wenn Sie jemand sind, der EVA ist, bereits online verkauft, Begriff ist, ihren eigenen Online-Shop zu starten oder in einer Rolle zu arbeiten, in der Sie viel mit der Shopify-Plattform arbeiten; es hilft definitiv zu wissen, wie Ihr Schaufenster generiert wird, , damit Sie den richtigen Ort finden können, um Änderungen vorzunehmen. Auf der anderen Seite, könnten Sie jemand wie ich sein, der vielleicht nicht über ihren eigenen Laden, aber sind begeistert über Catering auf die 800.000 plus Verkäufer auf Shopify, die wahrscheinlich etwas Hilfe mit ihrem Thema an einem bestimmten Punkt benötigen. Für mich ist das Lernen der Shopify-Themenentwicklung eine großartige Gelegenheit, eine wertvolle Fähigkeit zu erwerben, die Sie verwenden können, um Shopify-Verkäufern Dienstleistungen anzubieten. Wie ich jedoch im vorherigen Video angesprochen habe, wird dieser Kurs denjenigen zugute kommen, die bereits einige Kenntnisse und Fähigkeiten in HTML und CSS haben . Wenn Sie völlig neu in diesen Sprachen sind, empfehle ich Ihnen, ein wenig von diesen beiden zuerst zu lernen, und scheinbar sind Sie genau hier auf Skillshare bereits, ein guter Ort, um zu beginnen ist mein vorheriger Kurs, Web Development Grundlagen HTML und CSS. Abgesehen davon wird es helfen, einige Erfahrungen mit einer Programmiersprache wie JavaScript oder PHP zu haben , da Shopifys Templating Language Liquid grundlegende Control-Flow- und Iterationsblöcke verwendet, um Inhalte anzuzeigen. Ich spreche von einfachen Dingen wie vier Schleifen und If-Anweisungen, die super vertraut sein sollten, wenn Sie in der Vergangenheit programmiert haben. Wenn nicht, sind Schleifen und Konditionale ziemlich einfach und besonders leicht zu verstehen und flüssig. Du solltest nicht allzu viel Ärger haben. Etwas, das offensichtlich ist, aber immer noch erwähnenswert ist, ist, dass Sie eine gewisse Vertrautheit mit der Shopify-Plattform selbst haben sollten. Ob das so einfach ist, wie zu wissen, was es ist und was es tut oder noch besser, einige Erfahrungen mit dem Hinzufügen und Organisieren von Produkten, Seiten und Blogbeiträgen innerhalb des Admins. Je vertrauter Sie mit der Plattform natürlich sind, desto einfacher wird es sein zu verstehen, was vor sich geht. Shopify macht die Verwaltung Ihres Online-Shops so einfach wie möglich Sie müssen also nicht unbedingt mit Shopify zusammengearbeitet haben um zu erfahren, was ich Ihnen in dieser Klasse beibringen werde. Schließlich, um die technischen Anforderungen kurz abzudecken, genau wie jeder meiner Webentwicklungsklassen, sind die einzigen Tools, die Sie benötigen, einen Webbrowser und einen Code-Editor. Sie werden auch die Befehlszeile ein wenig in diesem Kurs verwenden, aber das ist eine Software, die in jedem Betriebssystem Standard ist. Nun, wenn eines davon schon verwirrend klingt, dann empfehle ich Ihnen, einen Schritt zurück zu gehen, einige Web Development Basics zu lernen und zu einem späteren Zeitpunkt zu dieser Klasse zurückzukehren. Ein guter Ausgangspunkt ist mein Kurs hier auf Skillshare.com, Web Development Fundamentals, ein Anfänger-Leitfaden für das Web. Um schnell zusammenzufassen, brauchen Sie nur einige grundlegende Webentwicklungsfähigkeiten mit HTML und CSS, einem Webbrowser und dem Code-Editor, und Sie sollten bereit sein zu gehen. 3. Erstellen eines Entwickler-Shops: Um mit dem Erstellen und Anpassen unseres eigenen Shopify-Themes zu beginnen, brauchen wir einen Shopify-Shop. Zum Glück können wir mit dem Konto eines Shopify-Partners einen kostenlosen Store aufbauen. Jetzt ist dieses Konto völlig kostenlos und wir müssen dem Partnerprogramm beitreten, um es zu bekommen. Alternativ, wenn Sie bereits ein Geschäft haben, wird dieser erste Teil, dem wir uns bei Partnern anmelden und sich über das Konto des Partners im Shop anmelden, nicht für Sie gelten. Aber alles, wenn wir in unseren Entwicklungsstore kommen , wird sich für Sie und Ihren Shop bewerben. Alles, was Sie tun müssen, ist sich in Ihrem Shop anzumelden. Andernfalls sollten Sie, wenn Sie noch keinen eigenen Store haben, einen Entwicklungsspeicher erstellen. Was ist ein Entwicklungsgeschäft? Nun, ich habe hier einen Artikel von Shopify zum Nachsehen. Es ist im Grunde ein Thema, das wir all die verschiedenen Dinge tun können , die wir in einem normalen Shopify-Thema tun würden, aber mit einigen Einschränkungen direkt hier. Die Idee eines Development Stores ist als Shopify-Partner, als jemand, der Shopify-Themes entwickelt oder mit Shopify-Kunden arbeitet , einen Store erstellen, daran arbeiten , ihn entwickeln und ihn später an den Kunden weitergeben und dann wird das zu ihrem Geschäft, an welchem Punkt dann der Kunde oder der Verkäufer, wer auch immer es ist, der diesen Laden besitzt, wird für diesen Laden bezahlen, der sich vorwärts bewegt. Es ist eine Möglichkeit, Stores zu entwickeln, ohne noch ein Shopify-Konto oder einen Shopify-Plan zu haben. Dies ist perfekt für unsere Zwecke, weil wir lernen, wie man Themen entwickelt. Wir wollen nicht unbedingt die $30-300 pro Monat an Shopify zahlen , um zu spielen und Themen zu entwickeln. Ich habe bereits ein Shopify-Partnerkonto. Alles, was ich tun muss, ist auf Login zu klicken. Ich werde nicht durch den gesamten Anmeldeprozess gehen, sollte ziemlich gerade jetzt sein, weil ich ein Affiliate bin, es wird in meine geworbenen Stores gehen. Aber wenn ich oben hier bei Development Stores klicke, können Sie sehen, dass wir einen Button hier haben, um einen neuen Store zu erstellen. Ich werde darauf klicken, und ich werde dem Laden einen Namen geben , Chris 'Skillshare Store. Ich werde ein Passwort mit meinem Passwort-Manager erstellen. Dieser wird es tun, legen Sie es hier ein und stellen Sie sicher, dass Sie das Passwort irgendwo speichern. Es wird Ihre Shop-Details erfordern, also werde ich hier einige gefälschte Details eingeben, und ich werde einen Store Zweck wählen. Wir können uns entscheiden, herumzuspielen. Ich klicke auf Speichern und sobald ich auf Speichern klicke, muss ich das Passwort natürlich speichern. Ich werde überall ein neues Dokument erstellen, Sie können das trotzdem notieren, und ich werde dieses Passwort, Shopify Store, Passwort notieren. Sieh mal, wie schnell das war. Wir haben bereits ein Geschäft, und dieser Laden ist kostenlos zu verwenden. Wir mussten keinen Plan erstellen oder so. Offensichtlich, wenn wir wollten, dass dies ein legitimer Laden ist, müssten wir für einen Plan bezahlen und dann wahrscheinlich unsere eigene Domain bekommen. Aber jetzt können wir mit so ziemlich einem voll funktionsfähigen Thema arbeiten und alles lernen, was wir über die Shopify-Themenentwicklung in dieser Umgebung wissen müssen. Zu diesem Zeitpunkt, wenn Sie bereits ein Geschäft hatten, sollte es so aussehen, wenn Sie sich in Ihrem Shop angemeldet haben. Wir sollten jetzt alle auf derselben Seite sein. Um uns mit der Shopify-Plattform vertraut zu machen, werde ich in einem späteren Video über diese Menüpunkte sprechen und was Sie in Shopify tun können. Aber vorerst liegt der Fokus auf Themen. Wir können unsere Themen finden, indem Sie auf Online-Shop klicken und zum ersten Menüpunkt namens Themes gehen , der automatisch ausgewählt wird. Wenn wir unseren Shop ansehen möchten, können wir hier auf „View Your Store“ klicken. Es wird mit unseren Shop-Namen kommen, die durch hyphens.myshopify.com getrennt sind. Wie Sie sehen können, haben wir sofort ein voll funktionsfähiges Thema. Was Shopify getan hat, ist, dass sie in ein kostenloses Design geladen haben, das wir verwenden können. Dies ist das Debut-Thema, aber es wird nicht unbedingt der Fall für Sie sein. Dies kann sich ändern, aber es spielt keine Rolle, mit welchem Ausgangspunkt Sie beginnen. Alles, was wir von diesem Punkt lernen, wird dasselbe sein. Derzeit können Sie sehen, dass wir Debut Thema laufen, und hier haben wir Aktionen, so können wir das Thema Vorschau. Wir können das Thema umbenennen, duplizieren, das gesamte Thema herunterladen. Wir können den Code bearbeiten, und wir können die Sprachdatei bearbeiten. Wir können auch hier klicken, um anzupassen und das gibt uns eine Benutzeroberfläche, die wir Dinge über eine Website ändern können, ohne in irgendeinen Code zu graben. Es ist wirklich cool. In unserer Theme-Entwicklung zeigen wir Ihnen, wie Sie Ihre eigenen Anpassungsoptionen erstellen, was wirklich einfach ist und eine der großartigen Dinge über Shopify ist. Wir werden in einer Sekunde in Customizing kommen, und das werde ich Ihnen zeigen. Aber bevor wir darauf eingehen, wollte ich schnell etwas abdecken das Sie stürzen könnte und das in Ihren Präferenzen liegt, haben Sie standardmäßig den Passwortschutz aktiviert. Das bedeutet, dass, wenn Sie den Store mit anderen teilen möchten, um ihn anzusehen, dieser dieses Passwort benötigen wird. Dies wird Anmeldebildschirm sein, der auftaucht und sie müssen dieses Passwort eingeben, um es zu sehen. Wenn Sie damit einverstanden sind, dass Benutzer es sehen, können Sie den Passwortschutz deaktivieren. Für unsere Zwecke glaube ich nicht, dass wir wirklich Passwortschutz brauchen, aber es ist da, wenn Sie möchten, und es ist standardmäßig aktiviert. Gehen wir zurück in unseren Themenbereich und klicken Sie auf Anpassen, und ich kann Ihnen die super leistungsstarken Anpassungsoptionen in Shopify zeigen. Standardmäßig werden Sie die Startseite Ihres Themes anpassen, aber Sie können auf diese Liste klicken und es gibt Ihnen alle verschiedenen Vorlagen, die Sie bearbeiten können , je nachdem, welches Thema Sie verwenden oder wie viele Vorlagen Sie eingerichtet haben innerhalb Ihres Themas. Diese Liste kann lange werden, aber für unser Starterthema, Debutthema, das ist alles, was verfügbar ist. Um Ihre Aufmerksamkeit hier auf die linke Seite zu lenken, haben wir Zugriff auf alle Bereiche auf unserer Seite. Die Kopf- und Fußzeilenabschnitte, die in jeder Seite enthalten sind Wenn ich also in, sagen wir, Sammlungsseiten gehe, werden auch Kopf- und Fußzeile angezeigt. Das bleibt auf allen Seiten Standard, solange es in der Designdatei eingerichtet ist. Wir werden darauf eingehen, die tatsächliche Codestruktur in einem späteren Video, aber hier ist die visuelle Darstellung. Wenn ich auf einen dieser Abschnitte klicke, habe ich anpassbare Optionen. Ich kann ein Logo-Bild anstelle des Namens des Ladens hinzufügen. Ich kann das Menü anpassen, und das ist alles aus dem Code gesetzt, Sie haben Zugriff auf diese Anpassungsoptionen, die wirklich cool ist. Offensichtlich ist die Fußzeile die gleiche Sache, aber unten auf der Seite und hier können Sie sehen, was Blöcke genannt wird. Wir werden lernen, wie man Blöcke in einem späteren Video verwendet, aber im Wesentlichen können wir hier einen zusätzlichen Block hinzufügen. Ich weiß nicht, ob es sofort aktualisiert wird. Ja, schnelle Links sind hier. Wenn wir diesen Inhalt entfernen, sehen Sie, dass wir hier weniger Spalten haben. Wir können tatsächlich durchgehen, hinzufügen und löschen verschiedene Bits von Inhalten. Wir können den Newsletter löschen und dann haben wir jetzt zwei Blöcke und sie füllen automatisch den Raum gleichmäßig, was wirklich cool ist. Ich werde neu laden, weil ich nicht möchte, dass diese Änderung gespeichert wird, und dann werden wir über die Abschnitte zwischen Kopf- und Fußzeile sprechen. Jetzt ist dieser Teil hier unserer Abschnitte Customizer wird auf verschiedenen Seiten unterschiedlich sein. Wenn wir zu Sammlungsseiten oder Sammlungen Liste oder einer dieser gehen, werden Sie sehen, dass es einen einzelnen Abschnitt gibt, und wir können diesen Abschnitt nicht von der Seite hinzufügen oder entfernen. Das liegt daran, dass dieser Abschnitt fest in die Seite codiert ist und wir werden das später sehen, wenn wir uns den Code ansehen. Der Unterschied zwischen so ziemlich jeder anderen Seite in Ihrer Shopify-Website im Vergleich zur Homepage ist, dass wir diesen Inhalt für den Indexbereich haben. Ich sollte den Wortbereich nicht benutzen, weil ich dich verwirren werde. Aber wir haben diesen Teil der Abschnitte Sidebar, dass wir einen Abschnitt durch diese verschiedenen Voreinstellungen hinzufügen können. Nehmen wir an, wir wollten eine Karte hinzufügen. Wenn dieser Abschnitt in unserem Code eingerichtet ist, dann können wir es hinzufügen und wir haben alle diese Anpassungsoptionen. Wir können die Abschnitte neu anordnen, damit ich die Karte an die Spitze stellen kann, falls ich das prominent machen möchte. Ich kann den Abschnitt ein- und ausblenden und dann kann ich ihn entfernen. Grundsätzlich auf der Homepage, wie es eingerichtet ist, ist, dass Sie Ihre Kopfzeile haben, Sie haben Ihre Fußzeile, und dann haben Sie eine Liste von Abschnitten, die übereinander stapeln , die Sie anpassen können. Versuchen wir ein praktischeres Beispiel, es gibt keine About Seite, aber sagen wir, dass Sie sich auf einer About Seite befinden und Sie diese Karte einfügen wollten. Sie könnten diesen Abschnitt definitiv einfügen, aber Sie würden es innerhalb des Codes tun. Ich werde Ihnen zeigen, wie Sie das tun, sobald wir uns in unseren Theme-Code eingraben. Ich bin ein bisschen besorgt, weil dieses Video wahrscheinlich ein bisschen lang ist. Aber um die andere Registerkarte zu decken, ist dies Ihre Theme-Einstellungen, und wir können auch bearbeiten welche Einstellungen in diesem Abschnitt sowie durch unseren Theme-Code. Aber diese Cover-Einstellungen, die auf der gesamten Website verwendet werden, so Überschriften und Links, Körpertexte, Verkaufspreis, was die Farbe der Tasten sein wird. Dies ist site-weites Zeug, also können wir, was wir wollen, hier durch unsere eigene Theme-Entwicklung setzen, aber wir haben hier einige Standardoptionen, und dies wird die gesamte Seite beeinflussen. Wir haben die Registerkarte „Abschnitte“, die Registerkarte „Designeinstellungen“. Wir haben diesen Selektor hier, um verschiedene Seiten auszuwählen, die angepasst werden sollen. Hier oben können wir unsere Website auf verschiedenen Bildschirmgrößen sehen. Wenn wir es vollständig erweitert sehen wollen, können wir auf diese Schaltfläche klicken und es wird die volle Breite des Bildschirms erweitern. Das einzige Problem dabei ist, dass Sie keinen Zugriff auf Ihren Customizer erhalten. Alternativ können Sie auf diese klicken und Sie können sehen, wie Ihre Website auf Mobilgeräten aussieht. Möglicherweise haben Sie unterschiedliche Anpassungsoptionen für Mobilgeräte oder Desktop Sie können daher eine Vorschau anzeigen oder sehen, wie Ihre Website auf Mobilgeräten aussieht. Viele Online-Shops, der Traffic ist mehr als 50 Prozent mobil, so ist es sehr wichtig, einen Blick auf diese Registerkarte zu haben. Wenn Sie mit dem Anpassen fertig sind, klicken Sie dann auf Speichern. Eine mehr Sache, die ich, Themenhandlungen nicht bedeckt habe. Dies ist das gleiche Menü wie das, was Sie hatten. Wenn wir zurück, wo wir vorher waren, ist dieses Thema Aktionen die gleiche, oder vielleicht ein wenig weniger Optionen, aber es ist im Wesentlichen das gleiche wie Aktionen hier. Wir werden in Aktionen wahrscheinlich im nächsten Video klicken, aber ich wollte Ihnen den Customizer zeigen. Wenn wir auf Speichern klicken, werden diese Änderungen zu diesem Thema live sein. Aber ich möchte keine Änderungen vornehmen, also werde ich auf Reload klicken und dann sind wir alle am selben Ausgangspunkt. Im Wesentlichen ist dies die Benutzeroberfläche, die Sie mit Ihrem Thema interagieren müssen. Nun, was wir tun werden, ist in den Code Ihres Themas graben. In Kombination mit dem, was Sie in Ihrem Code tun und was Sie in Ihrem Customizer tun, haben Sie praktisch die volle Kontrolle über Ihr gesamtes Thema, Ihr ganzes Aussehen und Gefühl Ihres Online-Shops. Wir haben den Customizer in dieser Lektion durchgegangen. Lassen Sie uns in den nächsten Videos in den Code eintauchen. 4. Einführung in Online Store 2.0: Im vorherigen Video erwähnte ich, dass es nur die Homepage ist , auf der Sie Abschnitte anpassen und neu anordnen können. Das ist jetzt bei Shopifys Onlineshop 2.0 Updates nicht mehr der Fall. Sie werden feststellen, dass mein Auftritt in seinem Video ganz anders ist als das Intro, und das liegt daran, dass dieses Video, sowie einige andere, die in der ganzen Klasse verstreut sind, einige Jahre nach der ersten Veröffentlichung dieser Klasse aufgenommen wurden. Allerdings sollten diese Videos ziemlich nahtlos in die Struktur der Klasse passen und eine gute Ergänzung zu den bestehenden Videos bieten. Etwas, das Sie vielleicht bemerkt haben, ist, dass der Theme-Customizer, der jetzt in den meisten Videos dieser Klasse als Theme-Editor bezeichnet wird, ganz anders aussehen wird als Ihre. Wenn Sie sich diese Klasse zum Beispiel im Jahr 2021 ansehen, werden Sie feststellen, dass Blöcke jetzt in dieser Strukturansicht angezeigt werden, während in den meisten Videos dieser Klasse sie wie folgt erscheinen. Es ist wichtig zu beachten, dass Shopify ständig die Benutzeroberfläche des Theme-Customizers verändert , und es gibt keine Notwendigkeit für sofortige Besorgnis, da die grundlegenden Grundlagen von Abschnitten und Blöcken im Laufe der Zeit gleich geblieben sind. Die große Änderung, die Theme-Entwickler bewusst sein müssen ist etwas namens „JSON-Vorlagen“. Wir werden später in dieser Klasse tiefer in JSON-Vorlagen eingehen, aber jetzt verstehen, dass Vorlagen entweder von zwei Typen sein können, Liquid oder JSON. Dies ist ein bisschen vor uns selbst, aber es ist wichtig zu beachten, als ob Sie JSON-Vorlagen über Liquid Templates verwenden, Sie werden Themekit nicht verwenden können, was ich Ihnen im nächsten Video zeigen werde. Stattdessen können Sie etwas namens Shopify CLI verwenden, das ich direkt danach im Video verwenden werde. Ich denke, es ist eine gute Idee zu wissen, wie man Themekit benutzt. Wenn Sie mit modernen Themen arbeiten, sind dies die Themen, die nach dem 29. Juni 2021 erstellt wurden , können Sie das nächste Video überspringen. 5. Themekit einrichten: In diesem Video werden wir etwas namens Theme Kit einrichten um unseren Code auf unserem eigenen Computer zu entwickeln und zu bearbeiten. Wenn Sie eine Webentwicklung in der Vergangenheit gemacht haben, verstehen Sie, dass die Bearbeitung von einem Online-Webbrowser wie eine Schnittstelle wie wir hier haben, nicht Best Practice sein wird. Wir können natürlich, wenn wir irgendwelche Änderungen an unserem Thema vornehmen wollten, gehen Sie hier hinein, dann haben wir Zugriff auf jede Theme-Datei innerhalb unseres Themas und wir können die Dinge ändern. Aber es ist viel sauberer und viel besser Workflow in der Regel lokal zu entwickeln. Deshalb werden wir Theme Kit verwenden. Um Sie im Voraus zu warnen, erfordert Theme Kit ein wenig Konfiguration. Ich weiß, dass Konfiguration mein am wenigsten beliebter Teil der Webentwicklung ist. Ich bin mir sicher, dass ihr es auch nicht liebt. Aber nur damit Sie es wissen, ist dies eine Lektion hier über das Einrichten von Theme Kit und dann werden wir direkt in die Entwicklung und Änderung unseres Online-Shops. Um mehr über Theme Kit zu erfahren und was es ist, werde ich nur in Shopify Theme Kit in Google eingeben. Das erste Ergebnis, wenn Sie Ihre Abfrage richtig formuliert haben, ist diese hier richtig. Dies wird uns in einem Wort sagen, was Theme Kit tut. Es ist ein Kommandozeilentool für Shopify-Themes. Wir laden einfach die Anwendung herunter und mit ein winziges bisschen Setup bist du weg zu den Themen Kreation Rennen. Nur um etwas Kontext zu geben und zu erklären, warum wir ein Tool wie Theme Kit brauchen und was es tut. Im Wesentlichen verwenden wir ein proprietäres System von Drittanbietern mit Shopify. Wenn Sie andere Apps und Websites entwickeln, können Sie Ihren eigenen Server auf Ihrem eigenen Computer starten. Dann wird Ihr Code auf diesem Server ausgeführt und Sie können ihn direkt von Ihrem Computer aus bearbeiten. Der Ort, an dem Ihr Code bereitgestellt wird, und der Ort, an dem Sie Ihren Code bearbeiten, ist derselbe. Mit Shopify können Sie das nicht genau tun, weil Sie einen Shopify-Shop nicht auf Ihrem eigenen Computer betreiben können und daher kein Shopify-Theme auf Ihrem eigenen Computer ausführen können. Wie es funktioniert, werden wir mit dem Code interagieren , den ich Ihnen gerade in unserem Shopify-Thema gezeigt habe. Um alle unsere Änderungen zu sehen, die wir am Code vornehmen, müssen wir das Thema tatsächlich auf Skillshare Servern ausführen und es so ansehen, wie wir es vorher getan haben. diesem Hintergrund, bevor Sie mit Ihrem Thema herumspielen und Änderungen an Ihrem Code vornehmen, was Ihre Website brechen könnte, werden Sie dies in einem anderen Thema tun wollen als das, was Sie gerade ausführen. Wenn Sie mit Staging und Webentwicklung vertraut sind, können Sie Ihre Änderungen im Wesentlichen mit der Theme-Entwicklung inszenieren. Was ich tun werde, ist, anstatt dieses Thema zu bearbeiten , das derzeit auf der Website live ist, ich weiß, dies ist nur für die Praxis und wir verwenden es nur für die Praxis und niemand wird diese Seite zu sehen. Aber sagen Sie zum Beispiel, Sie wollten ein Thema bearbeiten, das bereits live war. Sie möchten den Code, der bereits ausgeführt wird, nicht bearbeiten, den Designcode, der bereits auf Ihrer Website ausgeführt wird. Vielleicht sind die Leute bereits auf Ihrer Website surfen und Einkäufe tätigen. Sie möchten diese Änderungen in einem separaten Design erstellen und sie dann verschieben, wenn Sie mit ihnen vertraut sind. Die Art und Weise, wie wir das tun werden, ist alles, was Sie tun müssen, klicken Sie in Aktionen und klicken Sie dann auf Duplizieren. Nun, was passieren wird, ist es wird ein Thema zu erstellen und es wird standardmäßig kopieren, den Namen des Themas. Aber da sich das dreht, können wir es umbenennen. Ich werde dieses Skillshare Dev Theme nennen. Ich werde das umbenennen. Um zu sehen, wie unsere Website oder wie unser Shop mit diesem Thema aussehen würde, klicken wir auf Aktionen, Vorschau, anstatt auf Ansicht. Dann, wenn wir es betrachten, wird die URL die gleiche sein, was verwirrend ist. Aber genau hier wissen wir, dass wir unsere Skillshare Dev Theme ansehen , weil wir diese Bar hier haben. Also, wenn Sie diese Vorschau mit jemandem teilen möchten, können Sie tatsächlich klicken, Vorschau teilen und Sie erhalten diesen Link, um mit jemandem für die nächsten 14 Tage zu teilen. Sie können auch die Leiste ausblenden, die ich nicht empfehlen würde, es sei denn, Sie wollen nicht verwirrt darüber, welches Thema Sie gerade bearbeiten. Sie können auch auf „Vorschau schließen“ klicken, um zu Ihrem tatsächlichen Shop zurückzukehren, auf dem das Live-Design ausgeführt wird. Weil wir das Thema nur dupliziert haben und keine Änderungen vorgenommen haben, wird es genau gleich aussehen. Also, zurück zum Theme Kit, was wir tun werden, ist zuerst installieren und dann werden wir Theme Kit konfigurieren, so dass wir mit diesem bestimmten Thema interagieren. Dann werden wir unser Thema auf unseren Computer herunterladen und dann können wir anfangen, es zu bearbeiten. Die Dinge, die wir brauchen, um es zu installieren, sind wahrscheinlich ein Paketmanager. Ich benutze Homebrew auf macOS. Möglicherweise verwenden Sie Windows, in dem Sie Chocolatey empfehlen. Ich habe das Theme Kit bereits installiert, daher werde ich die Installation nicht selbst durchführen. Hoffentlich, indem Sie diese Anweisungen durchlaufen, können Sie herausfinden, wie Theme Kit zu installieren, aber es sollte ziemlich einfach sein. Ich habe gerade diese Befehle ausgeführt und es hat für mich funktioniert. Jetzt habe ich Theme Kit auf meinem Computer installiert. Wenn wir in Befehle gehen, können wir den Befehl configure sehen. Jetzt, wenn wir unser Terminal öffnen. Also ist es Terminal auf Mac und Eingabeaufforderung, glaube ich unter Windows. Aber im Wesentlichen was auch immer Ihr Befehlszeilentool ist, meins ist eigentlich iTerm nicht Terminal, aber es ist alles dasselbe. Ich werde zu dem Verzeichnis navigieren, in dem mein Thema gehen soll. Ich werde Code machen. Ich glaube, ich habe es in persönlicher Strömung. Jetzt sind wir in diesem Unterverzeichnis meines Code-Ordners, wo ich meine persönlichen aktuellen Projekte abstelle. Was wir von hier aus tun müssen, ist eine Datei namens config.yml mit diesen Details einzurichten , um Theme Kit zu sagen, welches Thema wir eigentlich bearbeiten wollen, denn im Moment haben wir es gerade heruntergeladen. Es weiß noch nicht, mit diesem Thema zu verbinden. Deshalb müssen wir es konfigurieren. Sie werden hier sehen, wir brauchen ein Passwort, wir brauchen eine Theme-ID, und wir brauchen die Shop-URL. Also das erste, Ihr API-Passwort. Es könnte ein bisschen schwierig sein, den Kopf als Nicht-Entwickler herumzubringen, aber im Wesentlichen steht eine API für eine Anwendungsprogrammierschnittstelle. Vor allem mit etwas wie Skillshare , einem proprietären System von Drittanbietern, werden wir Zugriff auf die API benötigen, um etwas über unseren Shop zu ändern. Moment haben wir nur Zugriff auf das, was in diesem Menü ist, um unseren Shop zu bearbeiten. Wir haben nur Zugriff auf die Optionen, die Skillshare uns über diese Benutzeroberfläche bietet, über dieses Back-End-Dashboard. Um jedoch außerhalb dieser Änderungen vorzunehmen, muss dies über eine App erfolgen. Also, wenn ich hier auf Apps klicke, gibt es ein paar verschiedene Arten von Apps. Einer von ihnen ist eine öffentliche App. Jeder kann eine App erstellen und sie für den Kauf oder die Verwendung im App Store zur Verfügung stellen. Hier können Sie ein paar beliebte sehen. Diese erhalten Zugriff auf die Shopify-API und können Änderungen an Ihrem Shop vornehmen. Für uns wollen wir nur unser Thema ändern. Also müssen wir eine sehr einfache App einrichten, die uns im Grunde die Möglichkeit bietet, unsere Theme-Dateien zu bearbeiten. Wenn ich hier runter gehe und diesen Link unter denen versteckt finde, genannt private Apps verwalten, kann ich in diese Schnittstelle gehen, die uns erlaubt, unsere eigene private App zu erstellen. Sie können sich diese private App als nur die Schnittstelle für uns vorstellen , um mit unserem Theme-Code auf unserem eigenen Computer interagieren zu können. Ich werde dies einen beschreibenden Namen nennen, Theme Kit Verbindung, weil das wirklich alles ist, wofür wir es verwenden. Ich muss eine Notfall-Entwickler-E-Mail eingeben, obwohl wir nur rumspielen. Es lässt mich einfach nicht das Formular anderweitig einreichen, und wir müssen Zugriff auf diese App geben, um die Bearbeitung von Theme-Vorlagen und Theme-Assets zu ermöglichen. Andernfalls wird diese App für uns nutzlos sein, wenn wir diese Theme-Vorlagen nicht bearbeiten können. Wenn ich auf Speichern klicke, werde ich hier sehen, dass es mich warnt, dass, wenn ich diese API-Anmeldeinformationen erstelle, jeder, der diese Details hat, den Theme-Code lesen und schreiben kann. Das ist cool. Ich verstehe. Erstellen Sie die App und jetzt haben wir das Passwort. Die anderen Details werden Ihre Theme-ID und Ihr Shop sein. Der Laden ist sehr einfach. Es ist nur, wenn Sie auf View Store klicken, das ist der Name davon direkt dort. Die Theme-ID kann leicht gefunden werden, indem Sie in den Customizer gehen. Gehen wir zurück zu Themen, haben zu viele Registerkarten geöffnet hier. Denken Sie daran, dass wir dieses Thema bearbeiten möchten, nicht das Live-Thema jetzt. Also, wir wollen hier gehen und wir wollen hier klicken und klicken Sie auf anpassen. Im Customizer können Sie diese Nummer in der URL verborgen sehen, und das ist die, die wir für unsere Theme-ID verwenden möchten. Wie ich bereits sagte, können Sie entweder diese config.yml Datei selbst erstellen oder Sie können diesen Befehlszeilenbefehl verwenden , um diese Datei automatisch für Sie zu erstellen, unter Berücksichtigung der Details. Es liegt an dir, wie du es machen willst. Ich werde den Befehl selbst verwenden. Jetzt, da ich in dem Verzeichnis bin, in das mein Projekt gehen soll, kann ich diesen Befehl ausführen. Nur um es dir zu zeigen, haben wir jetzt ein leeres Verzeichnis. Das aktuelle Verzeichnis ist komplett leer. Sobald wir diesen Befehl ausführen, wird es eine neue Datei für uns erstellen. Also zeige ich dir das in einer Sekunde. Lassen Sie uns durchlaufen, Thema konfigurieren, Bindestrich Passwort gleich. Dann gehen wir in unsere private App, finden Sie das Passwort, wir können einfach hier kopieren klicken. Fügen Sie das ein. Die nächste Variable wird gespeichert sein. Sie können hier klicken, um diese Filialadresse zu erfassen. Die letzte ist die Theme-ID. Wie ich Ihnen im Customizer gezeigt habe, können wir es einfach von der URL kopieren. Lassen Sie uns unseren Code überprüfen, um sicherzustellen, dass wir alles richtig eingerichtet haben. Ja, sieht gut aus. Jetzt werde ich „Enter“ drücken. In wenigen Sekunden sollte es ohne Fehler zurückkommen. Wenn wir uns unser Verzeichnis anschauen, werden wir sehen, dass die Datei config.yml dort ist. Wenn ich das mit meinem Code-Editor öffne, kann ich sehen, dass die Datei, über die wir hier gesprochen haben, genau da ist. Wenn ich nun Theme Kit Befehle in diesem Verzeichnis ausführe, weiß es, mit welchem Thema ich eine Verbindung herstellen möchte. Der nächste Schritt ist, unser Thema herunterzuladen. Das ist wirklich einfach. Der Befehl dafür ist Theme Download. Da das läuft, zeige ich es dir hier. In der Dokumentation können Sie Theme herunterladen, und dann können Sie bestimmte Dateien nach, dass angeben, oder einfach nur Theme herunterladen und es wird das gesamte Thema herunterladen. Hier können Sie sehen, dass es jetzt heruntergeladen wird und es ist bei 28 Prozent. Lasst uns einfach weiterspringen, bis das beendet ist. Das endete ohne Fehler. Wenn wir das Verzeichnis jetzt überprüfen, können wir die Ordner sehen, die wir gesehen haben. Wenn ich zurückgehe, auf welche möchte ich klicken? Es gibt so viele verschiedene Links hier oben. Wir brauchen das private App-Passwort nicht mehr, also kann ich diesen Tab verwenden. Gehen Sie zurück, klicken Sie auf „Code bearbeiten“. Sie können sehen, dass wir die gleiche Struktur haben. Wenn ich das zur Seite schiebe, können Sie sehen, dass wir den Assets-Ordner hier drin haben, config, locales, Abschnitte, all das Zeug, das im Skillshare Dev Theme Code war , ist jetzt hier in unserem Verzeichnis. Eine Sache, die Shopify Theme Kit nicht tut, ist, alles in einen neuen Ordner zu legen. Ich werde dieses Skillshare-Thema aufrufen, und ich muss hier in meinen Code-Editor gehen und Verzeichnisse in dieses Skillshare-Thema ändern. In Ordnung, ich sollte auch erwähnen, dass es eine andere Option namens Thema neu gibt. Sie können tatsächlich ein neues Design erstellen. Anstatt eine Theme-ID einzugeben, fügen Sie einfach einen Namen von dem ein, was Sie wollen, dass dieses Thema sein wird, und es wird es für Sie erstellen. Wenn Sie das tun, wird es Sie mit einem Starter-Thema eingerichtet , das nicht alle Funktionen von Debut hat. Ich würde empfehlen, dass Sie das Thema duplizieren, das es Ihnen gibt, und dann bearbeiten Sie es, anstatt ein neues Design von Grund auf neu zu starten. Das ist meine Empfehlung. Im späteren Video werden wir Slate abdecken, was noch komplexer ist als das. Wenn Sie tatsächlich Ihr eigenes Thema von Grund auf neu erstellen wollten, bleiben Sie auf jeden Fall bis zum Ende dieser Klasse. Es wird ein Bonus-Video auf Slate geben. Wenn Sie den vollständigen Prozess der Entwicklung Ihrer eigenen Shopify-Themen gehen möchten, bleiben Sie auf jeden Fall für diese Lektion herum. Für diesen Skillshare Kurs wollte ich Ihnen zeigen, wie Sie so schnell wie möglich aufstehen und laufen können. Ich denke nicht, dass es notwendig ist, alles neu zu gestalten , alles von Grund auf neu zu erstellen, deshalb verwenden wir Debut als Ausgangspunkt. Wie ich Ihnen kurz zuvor gezeigt habe, haben wir unseren Theme-Code hier auf unserem lokalen Computer, und wir können diese bearbeiten, wie wir wollen. Was ich tun werde, um das zu tun, ist Atom dot auszuführen, aber dieser Befehl hängt vollständig davon ab, welche Software Sie ausführen. Ich benutze Atom, also kann ich einfach Atompunkt auswählen. Jetzt habe ich Zugriff auf das gesamte Projekt. Ich kann hineingehen, auf verschiedene Vorlagen klicken und sie bearbeiten. Ich kann hier reingehen und Änderungen vornehmen, die ich will, aber natürlich werde ich sehen wollen, was das mit meinem eigentlichen Thema ausmacht. Das letzte, was ich tun möchte, ist Theme Watch laufen, so dass, wenn ich Änderungen an meinen lokalen Theme-Dateien vornehme, es geht, um mein eigentliches Thema zu aktualisieren, und dann kann ich es im Browser betrachten und sehen, welche Änderungen vorgenommen wurden. Um das zu tun, muss ich nur einen einfachen Befehl ausführen, Theme Watch. Wie Sie in nur einer Sekunde sehen werden, sagt jetzt, Dateiänderungen an dem Thema zu achten, und dann hat es die ID dort. Lassen Sie uns einfach eine einfache Änderung vornehmen, um zu zeigen, wie das funktioniert. Ich erwarte nicht, dass Sie wissen, wie Sie durch die Theme-Vorlagen navigieren , nur noch, da ich Ihnen das in einem späteren Video zeigen werde. Aber sagen wir einfach, wir wollen diese Symbole in der Kopfzeile loswerden. Sie können in Abschnitten in die Header.Liquid Vorlage gehen und nach diesem bestimmten Teil der Kopfzeile suchen. Es sieht so aus, als wäre es genau hier. Ich werde das öffnende und schließende div-Tag finden und das einfach alles zusammen löschen. Ich werde sparen auf das treffen. Wenn wir zu unserem Terminal gehen, werden Sie sehen, dass es begonnen hat, diesen Header zu verarbeiten, und dann hat es es auf unserem Live-Thema aktualisiert. Wenn Sie dies nicht bereits haben, müssen Sie in Ihr Design gehen, mit dem Sie tatsächlich arbeiten, und klicken Sie auf Vorschau. Ich habe es hier, und Sie können sehen, dass ich auf jeden Fall eine Vorschau dieses SkillShare Dev-Thema hier. Wenn ich die Seite aktualisiere, sollten unsere Symbole verschwunden sein. Da gibt es keine Symbole. Offensichtlich ist dies eine Änderung, die Sie wahrscheinlich nicht machen wollen. Wir können zurückgehen und Z steuern, um es wieder einzubauen, und dann werden diese Änderungen ziemlich schnell aktualisiert. Ich bin beeindruckt, wie schnell Shopify das macht. Es verlangsamt die Entwicklung nicht zu sehr, aber da gehst du, sie sind jetzt zurück. Jetzt können Sie sehen, dass wir in der Lage sind, Code auf unserem lokalen Computer zu bearbeiten, und es wird auf unser Thema aktualisiert. Dies ist der Workflow. Wir haben unser Entwicklungsthema läuft, was nur ein schickes Wort für ein Thema ist, das nicht das aktuelle Thema ist, weil wir das aktuelle Thema nicht bearbeiten möchten, wenn es sich um einen Live-Store handelt. Wir führen unsere Vorschau, und dann haben wir Theme-Uhr läuft, und wir bearbeiten einfach den Code und tun, was wir wollen. Wir haben die Umwelt im Wesentlichen eingerichtet. Nun, eine letzte Anmerkung, bevor wir zum nächsten Video übergehen , ist, dass Sie immer noch Zugriff haben, um hier zu gehen und Ihren Code von der Shopify-Website aus zu bearbeiten. Ich würde dagegen empfehlen, da dies Diskrepanzen zwischen dem Code, den Sie auf Ihrem Computer haben, und dem Code für Ihr tatsächliches Thema verursachen würde Diskrepanzen zwischen dem Code, den Sie auf Ihrem Computer haben, . Sie können eingehen und dies ändern, aber es wird nicht in Ihren lokalen Dateien aktualisiert, es sei denn, Sie führen Theme Download. Um klar zu sein, dieser Prozess der Themen-Uhr geschieht nur eine Möglichkeit. Es ist nur, wenn Sie Ihre Dateien lokal bearbeiten, aber wenn Sie sie auf Ihrer Shopify-Website bearbeiten, wird es nicht auf Ihren lokalen Computer kommen. Ich würde wählen, wo Sie Ihren Code bearbeiten möchten und bleiben Sie dabei. Wenn Sie es auf Ihrem eigenen Computer bearbeiten möchten, was ich sehr empfehlen möchte, dann bearbeiten Sie es hier nicht. Wenn Sie dies tun, wissen Sie nur, dass Sie es auf Ihrem eigenen Computer aktualisieren müssen. Jetzt haben wir unsere Umgebung eingerichtet, und wir haben alle Tools, die wir benötigen, um unsere Shopify-Website zu ändern und unser eigenes Thema anzupassen. Im nächsten Video machen wir eine Pause vom eigentlichen Code. Sprechen Sie über die Shopify-Plattform selbst, weil es gut ist, etwas Vertrautheit zu haben, und dann im Video danach werden wir tatsächlich eingehen und all diesen Code erklären, den wir gerade angefangen haben zu betrachten. Wir sehen uns im nächsten Video. 6. Neue Befehle in Shopify CLI v3: Hallo Schüler. In diesem Video werde ich kurz auf die Veränderungen im Jahr 2023 eingehen. Was passiert ist, war, dass Shopify CLI auf eine neue Version zwei aktualisiert wurde, Version drei, was bedeutet, dass einige der Befehle im folgenden Video, ich werde ein bisschen anders sein Ich habe auf meinem YouTube-Kanal über die Migration und die verschiedenen Arten von Befehlen im Vergleich zu Version zwei berichtet . Also kannst du dir das Video ansehen. Im Allgemeinen ist es eine gute Idee, wenn du über die Änderungen von Shopify auf dem Laufenden bleiben willst , da sich die Plattform stark verändert, auf meinem kostenlosen YouTube-Kanal nachzusehen und du kannst sehen, was herauskommt Neues, Shopify. Ich aktualisiere das häufiger, als ich hier auf Skillshare Klassen erstelle Also, was Sie gleich sehen werden, einige der neuen Befehle in CLI-Version drei Wenn Sie aus irgendeinem Grund CLI-Version zwei verwenden, können Sie das nächste Video wie gewohnt verfolgen Aber einige dieser Befehle werden in Version drei anders sein, die zum Zeitpunkt der Aufnahme die neueste Version ist. Also werde ich es mir Anfang des Jahres überlegen, für euch über diese Befehle zu sprechen , damit ihr im nächsten Video nicht in Schwierigkeiten gerät, okay. Durch eine Bewertung von einem von Ihnen wurde ich darauf aufmerksam gemacht , dass die Befehle, die wir haben, veraltet sind. Also wollte ich nur dieses Video reinwerfen , um sicherzugehen, dass ihr merkt, dass es eine neue Version und einige Befehle gibt. Ich habe mich verändert. Also schau dir diesen zuerst an. Wenn Sie CLI-Version drei verwenden, jetzt, wo wir alle bei Version drei sind, nächste Schritt darin, die neuen Befehle zu verstehen Um eine Liste der Theme-Befehle abzurufen. In Version drei können wir entweder die offizielle Dokumentation überprüfen oder den Befehl Shopify Theme in der CLI selbst ausführen Shopify Theme in der CLI Das Erste, was Ihnen vielleicht auffällt, ist, dass es keinen Serve-Befehl mehr gibt. Mit diesem Befehl haben wir unseren Theme-Code lokal ausgeführt, aber er wurde jetzt durch den Befehl dev ersetzt , der fast genauso funktioniert. Der große Unterschied besteht darin , dass Sie nicht zuerst einen separaten Befehl ausführen müssen , um sich in einem Shop anzumelden. Stattdessen fügen Sie dem Befehl das Store-Flag mit der Adresse des Stores hinzu, in dem Sie sich anmelden möchten, um die Eingabetaste zu drücken. Und sobald Sie authentifiziert sind, die CLI, werden wir damit beginnen, diesen Theme-Code bereitzustellen Sie können diesen und einige andere Unterschiede sehen hier im offiziellen Migrationsleitfaden dokumentiert sind. Und Sie können die vollständige Liste der Befehle hier auf dieser Seite sehen. Ich ermutige alle, die gerade migrieren, sich einfach die Tabelle der Workflow-Änderungen in der Dokumentation anzusehen Und sobald Sie diese verinnerlicht haben, sollte es einfach sein, sich an die neuen Änderungen anzupassen 7. Shopify CLI für Online Store 2.0 Theme-Entwicklung: Im vorherigen Video haben wir gelernt, wie man Theme Kit einrichtet. Aber leider ist Theme Kit nicht kompatibel mit dem neuen JSON Templating System, das in modernen Themen vorhanden ist. Um zu überprüfen, ob Ihr Theme JSON-Vorlagen verwendet, können Sie zum Themenbereich Ihres Shopify-Admins gehen und auf „Code bearbeiten“ auf das Thema klicken, das Sie überprüfen möchten. Dann schauen Sie einfach in das Template-Verzeichnis und sehen Sie, ob Ihre Templates am Ende von ihnen oder.liquid haben. Sie können ein paar hier sein, die haben.liquid auf ihnen im Kundenbereich und vielleicht die Geschenkkarten-Vorlage. Aber wenn Ihre wichtigsten Artikel article.json, cart.json, index.json, pageproduct.json haben cart.json, index.json, , wenn diese all.json sind, arbeiten Sie mit einem Thema, das JSON-Vorlagen verwendet. In diesem Fall sollten Sie die Shopify CLI anstelle des Theme Kit verwenden . So machen wir das. Was ich tun werde, ist der Kopf zurück zum Thema Abschnitt hier, und ich werde den offiziellen Artikel über die Verwendung von Shopify CLI für Themen öffnen. Ich werde das buchstäblich in Google Shopify CLI für Themen eingeben. Sie sollten feststellen, dass dieser Artikel nach oben kommt. Klicken Sie auf die offizielle Shopify Entwickler-Website. Hier können Sie alles über Shopify CLI für Themen lesen. Shopify CLI gibt es schon seit einiger Zeit, aber erst vor kurzem zum Zeitpunkt der Aufnahme ermöglicht auch die Theme-Entwicklung. Wie Sie hier sehen können, ersetzt Shopify CLI Theme Kit für die meisten Theme-Entwicklungsaufgaben. Sie sollten Shopify CLI verwenden, wenn Sie an Online Store 2.0-Themes arbeiten. Das sind im Wesentlichen Themen mit JSON-Vorlagen. Lassen Sie uns runtergehen und schauen, wie wir Shopify CLI installieren. Ich werde das nur in einem neuen Tab öffnen, um das hier offen zu halten. Hier können Sie die Anleitung für die Installation sehen. Wir werden in diesem Video nicht tief in die Installation geraten. Hier sind die Anweisungen hier, je nachdem, ob Sie auf einem Windows-, Mac- oder Linux-Computer sind, stellen Sie sicher, dass Ruby 2.7 oder höher auf Ihrem Computer installiert ist. Wie Sie überprüfen, dass das Terminal geöffnet werden soll. Für die meisten Benutzer verwenden Sie die Terminal-App. Aber ich habe etwas namens Item, das ist meine Terminal-App. Ich werde den Befehl ruby-v ausführen, um meine Version herauszufinden. Wie Sie hier sehen können, verwende ich Ruby 3.0.2, das größer als 2.7 ist, also sind wir gut. Hier sehen Sie die Anweisungen auf dem Mac. Ich habe Homebrew installiert, also habe ich gerade diese Installationsanweisungen durchlaufen und es war ziemlich einfach. Ich gebe Ihnen eine Sekunde, um es zu installieren, wenn Sie es noch nicht getan haben. Halten Sie dieses Video an und kehren Sie zurück, wenn Sie die Installation abgeschlossen haben. Um zu überprüfen, ob Sie installiert haben, geben Sie einfach die Shopify-Version ein und Sie sollten eine Versionsnummer erhalten, wenn Sie die CLI erfolgreich installiert haben. wir nun die CLI installiert haben, schließen Sie dieses Fenster und gehen Sie zurück zu unserem Handbuch Erste Schritte. Ich werde hier nach unten zu den Befehlsreferenzen scrollen, wie Shopify CLI funktioniert. Es ist ein wenig anders zu Shopify Theme Kit in dem Sinne, dass Theme Kit, Sie haben diese eine Konfigurationsdatei, die config.yamlfile. Sie geben in diese Datei ein Passwort, eine Theme-ID und den Store, mit dem Sie eine Verbindung herstellen möchten und wie es sich authentifiziert, erfolgt über eine private App, in der Sie dieses Kennwort aus der privaten App in diese Datei config.yaml einfügen. Du hättest das alles im vorherigen Video gesehen , also wenn du nicht weißt, wovon ich rede, geh zurück zu diesem. Aber wie Shopify CLI es tut, ist, dass sie sich am Anfang authentifizieren. Sobald Sie authentifiziert sind, können Sie damit beginnen, Themen lokal bereitzustellen. Wie wir das machen, gehe ich zuerst in die Shopify CLI Core-Befehlsreferenz. Lassen Sie uns auf das klicken und schauen Sie sich Login an. Login authentifiziert Sie bei der Shopify CLI. Dies ist der erste Schritt, um im Grunde alles auf Shopify CLI zu tun. Wichtig ist hier, dass Sie die CLI nicht mit Entwicklungsgeschäften verwenden können , wenn Sie nur Zugriff auf Partnermitarbeiter haben. Was das bedeutet, ist, wenn ich zu partners.shopify gehe, was ich oft tue, und mich über mein Partnerkonto in den Laden einlogge, also werde ich in die Geschäfte gehen und dann hier sehen, Chris Testing Shop. Wenn ich über diesen Link auf Login klicke, werde ich über das Partnerkonto eingeloggt und werde wahrscheinlich einen Fehler erhalten, wenn ich versuche, mich mit der Shopify CLI zu authentifizieren. Das ist eine wichtige Sache zu beachten. Wenn Sie mit einem Entwicklungsspeicher arbeiten, können Sie Ihre Partner-Login nicht verwenden. Was Sie stattdessen sicherstellen müssen, wenn ich hier zurück zu meinem Shopify Store gehe und in meine Einstellungen gehe, ist, dass ich mit dem Admin- oder Store-Benutzerkonto eingeloggt bin. Klicken Sie auf Plan hier, sorry nicht planen, Benutzer und Berechtigungen, Sie können hier sehen, dass der Shop-Besitzer Chris Testing Shop admin ist, und das ist das Konto, das ich angemeldet bin. Das sollte funktionieren. Gehen wir zurück zu Onlineshop-Designs, lassen Sie uns den Shopify-Anmeldebefehl ausführen. Ich werde hier zurück zu meinem Terminal gehen, löschen, diese vorherigen Befehle zu löschen und lassen Sie uns Shopify Login mit dem Umfang des Ladens ausführen und dann kopieren wir einfach die meine Shopify-Adresse des Ladens. Ich gehe hier rein, kopiere das. Drücken Sie „Enter“ und es beginnt, uns anzumelden. Jetzt eingeloggt. Normalerweise ist ein separater Tab geöffnet, denke ich, weil ich bereits im Store angemeldet bin. Es kam nicht mit diesem Tab, sondern nur um es dir zu zeigen. Wenn ich mich also abmelde, Shopify Logout, können Sie sehen, dass ich das Konto erfolgreich abgemeldet habe. Ich werde erneut löschen und dann diesen Befehl ausführen, Shopify Login mit der Shop-Adresse. Drücken Sie das und Sie werden sehen, es öffnet sich eine neue Registerkarte für mich anmelden. Aus dieser Liste von Konten hier muss ich diejenige auswählen, die der Shop-Besitzer ist, was ich glaube, dass es dieser ist und es sagt, jetzt erfolgreich authentifiziert, können Sie diese Seite schließen. Ich werde nur in meinem Terminal suchen und Sie können hier sehen, dass Sie sich im Laden angemeldet haben. Ich sollte jetzt alles gut gehen. Das ist alles, was wir wirklich brauchen von den Kernbefehlen, Login, Logout. Sie können Ihren Shop auch mit Daten füllen. Viele coole kleine Features dieses Tools hier. Ich ermutige Sie, die Dokumentation zu überprüfen. Aber ich gehe rückwärts und gehe jetzt in die Theme-Befehlsreferenz. Die Schaltfläche direkt unter der Kernbefehlsreferenz. Gehen wir hier rein und Sie können alles über die verschiedenen Befehle lesen. Das erste, Shopify-Theme darin tut im Wesentlichen, was es hier sagt, klont ein Git-Repository zu Ihrem lokalen Computer und es erstellt auch eine Kopie des Dawn Beispielthemas. Wenn Sie die Theme-Entwicklung von Grund auf starten möchten, ist dies ein guter kleiner Befehl zu verwenden. Aber was ich stattdessen tun werde, ist genau wie wir in Theme Kit, Ich werde zu einem bestehenden Thema verbinden. Der Weg, das zu tun, ist durch Shopify Thema dienen. Aber wir brauchen den Code von diesem Thema zuerst auf einem lokalen Computer heruntergeladen, bevor wir ihn bedienen können. Wenn ich hier zurück gehe, können Sie sehen, obwohl dieser Laden vor dem 29. Juni 2021 erstellt wurde , habe ich das Dawn-Thema installiert. Dies ist das neue Thema, das das Online Store 2.0-Paradigma verwendet. Wie wir zuvor gesehen haben, ist es eines dieser modernen Themen, das JSON-Dateien im Vorlagenordner hat, wie Sie hier sehen können. Das ist, was ich als mein Thema verwenden werde, an dem ich mit der Shopify CLI arbeiten werde. Was ich tun werde, ist genau wie wir mit Theme Kit tun, ich werde die Theme-ID dieses Themas finden, die ich finden kann, indem ich in den Customizer gehe und diesen Teil der URL greifen. Das habe ich jetzt in meiner Zwischenablage. Was ich hier schreiben werde, ist einer der Befehle, die Sie hier sehen können, was Shopify Thema Pull ist. Um diesen Befehl zu verwenden, schreiben Sie einfach Shopify Theme pull und fügen Sie dann diesen Parameter —themeid ein, gefolgt von der Theme-ID. Was ich tun werde, ist zuerst ein Verzeichnis in diesem Skillshare Verzeichnis zu erstellen. Ich kann das über den Befehl auf Mac, MKDIR tun. Das ist der Befehl, um ein Verzeichnis zu erstellen. Ich nenne es das gleiche wie das Thema, Morgendämmerung. Jetzt muss ich den Befehl CD dawn-main ausführen, um darin zu navigieren. Von hier aus kann ich den Befehl ausführen. Ich werde Shopify Theme Pull machen —themeid gleich gefolgt von der Theme-ID, die ich hier verloren habe. Nur gehen, um schnell greifen Sie es wieder und drücken Sie „Enter“ auf, dass. Sie können sehen, dass es die Theme-Dateien aus diesem bestimmten Thema zieht. Ziehen bedeutet nur Herunterladen. In ein paar Sekunden werden wir sehen, dass das beendet wird. Ich gehe voran und treffe dich am Ende. Das ist jetzt fertig heruntergeladen, also werde ich in dieses Verzeichnis gehen. Sie werden in meinem Skillshare Ordner hier sehen, gibt es ein Verzeichnis namens dawn-main. Das ist der, den ich mit diesem mkdir dawn-main Befehl erstellt habe. Darin können Sie sehen, dass ich meinen ganzen Theme-Code habe. Jetzt, da wir in diesem Ordner sind, können wir starten, um den Befehl Shopify Theme dienen, um diesen Theme-Code lokal zu dienen. Aber bevor ich das tue, weil wir etwas Code bearbeiten werden, werde ich aufhören, iTerm zu verwenden und Befehle in meiner Code-Editor-App auszuführen. Das ist ein bisschen anders, denke ich, von den Originalvideos in der Klasse. Aber ich verwende jetzt ein Tool namens VS Code, das von Microsoft bereitgestellt wird. Ich werde das öffnen. Es sieht etwas anders aus als die anderen Code-Editoren in dieser Klasse. Aber dennoch gelten alle dieselben Prinzipien. Wir haben nur dieses Terminal hier, das wir innerhalb des Code-Editors laufen können. Ich werde dieses Terminal löschen, genau wie wir es auf iTerm getan haben und von innen hier, was ich tun werde, ist den Befehl Shopify Theme serve ausführen. Shopify Theme dienen und während das geladen wird, wie Sie hier sehen können, werde ich in die Dokumentation gehen und uns darüber sprechen, was das tut. Es wird das aktuelle Thema hochladen. Wo auch immer Ihr Terminal läuft, wenn es Theme-Code gibt, wird es das ausführen und es wird ein Entwicklungsthema erstellen. Nun, das ist ein neues Konzept. Entwicklungsthema ist wie ein Pseudo-Phantom-Thema. Sie werden in nur einer Sekunde sehen, dass es eine Theme-ID erstellt und wir können sie anzeigen und den Code bearbeiten. Aber Sie werden es nicht wirklich in der Theme-Bibliothek in Ihrem Shopify Store sehen. wirst du in nur einer Sekunde sehen. Stattdessen erhalten Sie einen Link zum Entwicklungsthema und einen Link zum Online-Editor, wie ich gerade erwähnt habe, und einen Vorschau-Link. Für alle Absichten und Zwecke erhalten Sie die gleichen Funktionen wie ein normales Vorschaudesign, wie wenn Sie Themes im Theme Kit verwenden und mit ihnen arbeiten würden. Aber diese wird generiert, wenn Sie Shopify Theme dienen ausführen und verschwindet, wenn Sie Shopify Logout ausführen, wie es hier heißt. Natürlich bleibt der Theme-Code weiterhin auf Ihrem Computer und Sie können den Code auch schieben und veröffentlichen, sobald Sie bereit sind, live zu gehen. Aber das werden wir in einer Sekunde sehen. Wenn ich jetzt zu meinem Code-Editor zurückgehe, werden Sie sehen, dass der Prozess jetzt abgeschlossen ist. Ich werde nur ein Terminal öffnen, damit Sie hier mehr sehen. Sie können sehen, dass es zu dieser lokalen Adresse dient, die wir im Browser betrachten können. Interessant ist hier, können Sie sehen, dass wir eine Theme-ID haben. Sie können sehen, dass der Vorschau-Link diese Theme-ID hat und der Theme-Editor-Link auch diese ID hat. Wir können in gehen, wir können das Thema anpassen, wie wir in der Regel mit dem gleichen Theme-Editor, die wir auf jedem Thema verwenden würde, und wir können das Thema mit diesem Link Vorschau und teilen Sie es mit Menschen im Internet. Wenn wir diesen Link mit ihnen teilen, werden sie ihn nicht wirklich sehen können, da dies ein lokaler Link ist. Aber dieser hier ist ein öffentlicher Link, den wir mit Menschen teilen können. Wie Sie hier sehen können, haben wir diesen seltsamen kleinen Themennamen, Entwicklung gefolgt von einem kleinen Code. Wie ich bereits erwähnt habe, wenn wir hier in unsere Themenbibliothek gehen, auch wenn wir die Seite aktualisieren, das Thema nicht in unserer Themenbibliothek erscheinen. Es ist wie ein Einweg-Theme, das eine ID hat, einen Customizer hat, aber nicht wirklich in Ihrem Shopify Store gespeichert wird. Wenn wir zurück zu diesem Thema Customizer-Link , können wir natürlich einige Sachen hier verschieben und bearbeiten. Aber was seltsam an diesem Theme-Editor im Entwicklungsthema ist, dass es nicht scheint , dass diese Änderungen außerhalb dieser Sitzung gespeichert werden, die wir ausführen. Wenn ich zu meinem lokalen Link umschalte, werden Sie sehen, dass die Änderung stattfindet. Ich spreche über die Änderungen des Theme-Editors hier. Sie werden sehen, dass es auftritt, aber wenn wir unsere Theme-Code-Änderungen später in den Store schieben, werden Sie sehen, dass dies nicht wirklich in den Laden schieben wird. Wir können hier anpassen und spielen mit dem Theme-Editor, aber das wird nicht wirklich speichern, wenn wir drücken. Seien Sie sehr vorsichtig damit mit der CLI. Ich bin mir nicht sicher, was das Denken hier von Shopify ist, aber ich habe es getestet und die Daten ändern sich nicht wirklich, wo es sollte. Dies sind nur alle Wegwerfdaten. Ich werde das schließen und diesen öffentlichen Link schließen , sowie wir brauchen ihn nicht mehr. Ich werde nur unseren lokalen Entwicklungslink aktualisieren. Nun ist die coole Sache über Shopify CLI im Vergleich zu Shopify Theme Kit, was passiert mit Theme Kit ist, dass es nicht tatsächlich einen Server überhaupt läuft. Was es tut, ist die Bearbeitung von Dateien direkt in Ihrem Shopify Store. Dann müssen Sie natürlich auf View oder Preview zu diesem Thema klicken, um diese Änderungen zu sehen , und es wird alles über den Shopify Store serviert. Shopify CLI ändert dies jetzt, weil wir dieses Thema lokal bedienen können und was dies bedeutet, ist, dass es viel schneller aktualisiert wird. Lassen Sie mich Ihnen zeigen, was ich damit meine, denn das ist ein bisschen Entwickler-Pick und für diese Anfänger da draußen, können Sie vielleicht nicht ganz verstehen, wovon ich hier spreche. Aber wenn ich reingehe und lass uns eine Bearbeitung machen. Nehmen wir an, wir bearbeiten diese Leiste hier oben. Wir suchen nach Ankündigung-bar__message. Ich werde nur meinen Code-Editor verwenden, um diesen Code zu finden. Anstatt block.settings.text zu entkommen, werde ich nur einlegen. Ich möchte dir das nur nebeneinander zeigen, damit du das sehen kannst. Schließen Sie das, schließen Sie das. Schauen wir uns an, was passiert, wenn ich diesen Code ändere. Lassen Sie uns dies in den Text der Ankündigungsleiste ändern, etwas allgemeines wie das. Ich werde jetzt auf Speichern klicken und schauen, was passiert. Sie werden sehen, dass, ohne dass ich die Seite hier drüben neu lade, es ändert sich. Es erkennt Änderungen und aktualisiert sie hier auf unserem lokalen Server. Denken Sie nun daran, dieses Thema existiert nicht in unserer Themenbibliothek hier drüben. Es existiert nur auf unserem lokalen Computer. Natürlich haben wir diese Links hier, wir mit anderen teilen können. Aber wir beeinflussen nicht tatsächlich Code zum Thema eines Themas , das in unserer Themenbibliothek hier gespeichert ist. Dies wird alles nur vor Ort serviert. Ich sage das ein paar Mal, nur damit es einsinkt. Aber Sie werden mit Erfahrung sehen, wenn es noch nicht ganz sinnvoll ist, was das bedeutet, wenn Sie die Arbeit mit Theme Kit im Vergleich zu Shopify CLI vergleichen. Ich werde hier noch eine Änderung vornehmen. Lassen Sie uns einfach die Hintergrundfarbe dieser Ankündigungsleiste auf etwas zufällig wie Blau ändern. Drücken Sie auf Speichern auf das. Sie werden sehen, dass das auch aktualisiert wird. Das ist eine ziemlich offensichtliche Veränderung. Öffnen wir diese wieder im Vollbildmodus. Was ich tun werde, ist, diese Änderungen in unseren Shopify Store zu schieben. Gehen wir zurück zur Dokumentation. In unseren Theme-Befehlen können Sie diesen Befehl hier für Push sehen. Bevor wir das tun, gibt es jedoch auch diesen Befehl hier, den wir vielleicht mit dem Namen Theme Check ausführen möchten. Wir haben nur eine sehr kleine Änderung vorgenommen. Aber wenn wir viele Änderungen vorgenommen haben, möchten wir vielleicht diesen Befehl ausführen, der unser Thema auf Fehler überprüft. Ich werde nur den Server schließen, weil wir bereit sind, diese Änderung live zu machen. Starten Sie Shopify Theme Check. Sie werden sehen, dass es eine Reihe von Straftaten gibt. Vieles davon ist nicht besonders kritisch. Offensichtlich liefen diese Fehler wahrscheinlich, bevor ich diese Änderungen vorgenommen habe. Ich bin mir nicht sicher, was du damit machen willst, aber das ist eine Option. Wenn Sie Theme Check ausführen möchten, bin ich sicher, dass es mit kritischen Fehlern kommt. Wenn Sie irgendwelche in Ihrem Code haben, ist es die meiste Zeit jetzt ziemlich klar zu sehen, wann diese Fehler in Ihrem Browser auftreten. Aber was ich jetzt tun werde, ist Kopf über zu schieben und hier können Sie sehen, dass wir lokale Themen zu Shopify hochladen können, wenn angegeben, überschreiben Sie das Remote-Thema. Wir können hier ein Optionsobjekt einfügen, oder wir können einfach Shopify schreiben. Ich glaube, ich werde diese wieder nebeneinander laufen, damit Sie sehen können. Lassen Sie uns die Größe davon erhöhen. Ich werde ein Shopify-Thema machen, schieben. Wenn ich hier keine Optionen angebe, wird es mich tatsächlich fragen, wohin ich diesen Code schieben möchte. Ich kann es zu einem der Themen bereits in meiner Theme-Bibliothek schieben, was ziemlich cool ist. Ich werde Command oder Control C drücken, um daraus auszubrechen, und was ich tun werde, ist Shopify Theme Push - unveröffentlicht zu tun. Hit das und es wird jetzt ein neues Thema in meiner Theme-Bibliothek erstellen, um eine neue Version dieses Themes mit zu erstellen. Es wird den Code, den ich mein lokales Thema erstellt habe, in die Themenbibliothek schieben. Ich nenne es Morgendämmerung zwei, nennen wir es einfach so. Jetzt wird es im Grunde diesen Code für ein neues Thema namens Dawn-two in meiner Theme-Bibliothek im Laden bereitstellen , mit dem wir verbunden sind. Das wird ein wenig Zeit in Anspruch nehmen, also werde ich Sie sehen, nachdem das abgeschlossen ist. Nun heißt es, dass mein Thema erfolgreich geschoben wurde und dass ich es jetzt anzeigen oder anpassen kann. Aber ich kann auch in meinen Laden gehen, meine Fenster hier erweitern und im Laden erfrischend. Sie werden jetzt sehen, dass ich ein neues Thema namens Morgendämmerung zwei hier habe. Wenn ich auf Vorschau klicke, enthält es alle Änderungen, die wir auf dem ursprünglichen Dämmerungsthema vorgenommen haben, das wir früher in diesem Video gemacht haben. Wir haben im Wesentlichen gerade ein neues Vorschauthema erstellt. Letzter Schritt hier, und das ist nicht wirklich notwendig, um die CLI zu verwenden, aber wir können auch die CLI verwenden, um Themen zu veröffentlichen. Wenn ich hier wieder in mein Terminal gehe, werde ich Clear ausführen und dann Shopify Theme ausführen, veröffentlichen ohne Optionen. Es wird mich fragen, welche der Themen, die derzeit nicht veröffentlicht sind, ich veröffentlichen möchte. Ich werde Dämmerung zwei hier auswählen und es fragte mich: Bist du sicher, dass du Dawn-zwei zu deinem neuen Live-Thema machen willst? Wenn ich auf Ja klicke , wird der Prozess jetzt abgeschlossen. Wenn ich zurück zur Theme-Bibliothek gehe und die Seite aktualisiere, wirst du sehen, dass die Morgendämmerung zwei jetzt mein Live-Thema ist, und die Morgendämmerung wurde auf meine Vorschau-Themen umgeschlagen. So verwenden Sie die Shopify CLI für die Theme-Entwicklung. Es ist ein bisschen komplizierter als Theme Kit, würde ich sagen. Aber es hat modernere Funktionen und es ist entwicklerfreundlicher, also nehmen Sie sich etwas Zeit, um sich daran zu gewöhnen. Wenn Sie irgendwelche Fragen haben, lassen Sie es offensichtlich in den Kommentaren. Aber das ist die Shopify CLI. In den nächsten Videos werden wir etwas über einige grundlegende Shopify-Admins lernen und dann in unsere Theme-Struktur einsteigen. Nachdem wir über unsere Theme-Struktur gesprochen haben, werden wir ausführlicher über diese neuen JSON-Vorlagen sprechen. Wir sehen uns im nächsten Video. 8. Produktorganisation, Varianten und der Customiser: Bevor wir in diesen Code eintauchen und lernen, wie alles eingerichtet ist, gibt es noch eine Sache, die Speicher fehlt und das sind Produkte. Ein Online-Shop ohne Inhalt ist nicht sehr gut, und der Hauptinhalt, den Sie in einem Online-Shop von Natur aus haben, sind Produkte. Genau hier können Sie sehen, dass Shopify Ihnen wenigstens einige Platzhalter gibt, aber wenn Sie auf diese klicken, sind es keine tatsächlichen Produkte, mit denen Sie interagieren können. Was wir brauchen, sind einige Produkte. Wenn Sie jetzt Ihr eigenes Shopify-Theme entwickeln und diesen Kurs gerade verfolgen , um mehr darüber zu erfahren, wie Sie Ihr Thema anpassen können. Vielleicht haben Sie bereits einige Produkte. Vielleicht ist jetzt ein guter Zeitpunkt, um Produkte in Ihrem Geschäft hinzuzufügen. Aber wenn Sie nur hier sind, um Shopify Theme Entwicklung zu lernen, und Sie haben nicht eine gespeichert oder arbeiten gerade jetzt, Sie werden einige Demo-Produkte benötigen. So glücklich für uns, Shopify bietet eine kleine Reihe von Demo-Produkten durch ihr Holzthema. Wenn wir gehen und nach Shopify Holz oder Shopify Holzthema in Google suchen, sollte es der erste Link sein, der auftaucht. Ich werde darauf klicken, um Ihnen ein wenig Kontext zu geben, Holz ist Archive jetzt ist es nicht mehr in Gebrauch, aber das war früher, was jetzt Slate ist. Es war früher dieses Starter-Thema, das Shopify zur Verfügung gestellt , jetzt verwenden sie Slate , was ich zuvor erwähnt habe, aber wir werden auf Slate und in späteren Video näher eingehen. Der Grund, warum ich Sie hier zum Timbre-Thema Git-Repository bringe, ist, dass sie es immer noch haben und sie diese CSV-Datei haben, um einige Produkte in Ihre Website zu importieren. Wenn wir diese CSV-Datei herunterladen, habe ich sie bereits heruntergeladen, also werde ich sie nicht erneut herunterladen, und dann gehen wir zurück zu unserem Online-Shop. Wir gehen in unser Produktmenü und wir klicken auf Importieren, direkt unter Produkte. Wir können uns die Akte holen. Klicken Sie auf Hochladen, klicken Sie einfach auf Import starten. Es könnte ein wenig Zeit dauern, um das auszuführen, aber wenn das fertig ist, werden Sie jetzt Produkte importiert sehen, und Sie haben eine Reihe von Beispielprodukten, alle von ihnen, im Grunde Schuhe. Wenn wir in einer dieser gehen, können wir auf Ansicht klicken. Es öffnet sich eine neue Registerkarte, in der wir die Produktseite mit diesem bestimmten Produkt einsehen können . Wir haben bereits eine ziemlich schöne Produktseite, weil wir ein Duplikat des Debüt-Themes verwenden, aber Sie können dies so viel wie Sie wollen bearbeiten. Sie können das Layout anders haben. Es liegt an Ihnen, Sie haben jetzt Zugriff auf den gesamten Theme-Code. Eine Sache, die wir haben, sind die Eingangsunterbrechungen mit der Varianz. Wir werden hier zurück gehen müssen, und in der Varianz werden wir nur alle Varianz löschen. Während Sie einen Onlineshop betreiben, sind Produkte zentral in Ihrem Shop. Dieses Video wird sich hauptsächlich auf Produkte konzentrieren. Hier auf Ihrer Produktseite im Shopify-Admin haben Sie die Möglichkeit, die Ansicht zu duplizieren und zu bewerben. Sie können den Titel, die Beschreibung ändern. Hier fügen Sie Ihre Produktbilder hinzu. Ziemlich einfach, ziemlich selbsterklärend, setzen Sie Ihre Preise, aber die Teile Ihrer Produktseite, auf die ich mehr in dieser Lektion eingehen und diskutieren möchte , sind Varianz und Organisation, also Produkttyp, Anbieter, Sammlungen und Tags. Zuallererst Varianz. Eine Variante sind im Grunde die verschiedenen Variationen des Produkts. Du wirst in nur einer Sekunde anfangen zu sehen, was ich damit meine. Wenn ich auf Variante hinzufügen klicke, gibt es mir die Möglichkeit, einen Optionsnamen und eine Liste möglicher Werte festzulegen. Ein ziemlich Standard ist Größe, und es ist definitiv relevant für ein Produkt wie dieses, nicht jeder wird die gleiche Größe von Sneaker wollen. Was wir tun können, ist in verschiedene Werte gesetzt, die durch ein Komma getrennt sind, und Sie werden sehen, was passiert, wenn ich das Komma einlege. Wenn ich 8, 9, 10, 11, 12 drücke , können Sie sehen, dass ich diese Option Größe habe und ich fünf mögliche Werte habe. Ich sage also, dass diese Schuhe in diesen fünf Größen erhältlich sind. Wenn Sie hier nach unten gehen, wurde eine Varianztabelle erstellt. Da ich nur eine Option habe und fünf Optionswerte habe, bekomme ich nur fünf Varianzen, weil man den Schuh nur in fünf möglichen Variationen bestellen kann. Aber wenn ich eine andere Option hinzufügen sollte, sagen Sie für Farbe. Nehmen wir an, ich kann alle Größen entweder in rot oder schwarz bekommen. Dann erweitert sich plötzlich meine Liste der Varianz und verdoppelt sich. Das liegt daran, dass wir die Anzahl der Werte in einem Optionsfeld mit den restlichen Optionsfeldern multiplizieren müssen , was Ihnen die Gesamtmenge der möglichen Variationen , da wir in der Lage sind, rot in neun, schwarz in acht. Alle diese verschiedenen Optionen zusammen erzeugen unterschiedliche Varianzen. Wir können hier ein drittes hinzufügen, sagt Material standardmäßig. Ich weiß nicht, aus welchem Material Schuhe hergestellt sind. Lassen Sie uns einfach mit einem gemeinsamen Material Baumwolle gehen. Das wird nicht die Menge der Varianz erhöhen , die wir hier haben, weil es nur einen möglichen Wert gibt, den gesamten Zweck der Verwendung von Varianz besiegt, wenn es nur ein Wert sein wird, also müssen wir mehr eingeben. Sagen wir, Lycra, macht wahrscheinlich keinen Sinn für Schuhe. Aber ich habe nur Zeug von meinem Kopf ausgedacht. Drei Optionen ist das Maximum in Shopify. Wenn ich mehr Werte zu all diesen hinzufüge, kann es beginnen, sich zu multiplizieren und ziemlich schnell aus der Hand zu kommen und Shopify begrenzt Ihnen zu 100 mögliche Varianz für jedes Produkt. Dies hängt natürlich davon ab, ob ich jede mögliche Kombination auf Lager habe, und da dieses Produkt verfügbar ist, habe ich Baumwolle rote Größe acht Turnschuhe und rot-schwarze 10 Turnschuhe. Das liegt an mir, herauszufinden, welche Variablen oder welche Variationen ich in meinem eigenen Geschäft habe, und diese einzufügen. Das ist irrelevant, also werde ich das entfernen. Mit diesen verschiedenen Optionen wird es 10 Varianten für uns erstellen. Der Punkt, den ich hier rüber kommen will, und die Sache, die mich ausgelöst hat, ist, das sind die Varianz hier. Das sind deine Optionen. In Ordnung. Das sind Varianz, das sind. Wenn ich auf Speichern klicke, werden Sie sehen, dass wir diese nette kleine Tabelle hier bekommen und wir können SKUs hier aktualisieren oder in Variantenbilder für bestimmte Abweichungen hinzufügen. Wir können auch die Auswahl filtern, indem Sie auf einen Optionswert klicken. Gehen Sie hier rein und überprüfen Sie einfach die, die wir bearbeiten möchten und bearbeiten möchten. Aber um zu sehen, wie das am Frontend aussieht, was ich tun werde, haben wir bereits auf Speichern geklickt, damit wir auf Ansicht klicken können, und wir können sehen, wie das für den Benutzer aussehen wird. Wie Sie hier am Frontend sehen können, bekommt der Benutzer nur zwei Optionen, und ich möchte es in Größe neun, und ich wollte sie schwarz. Dann werden sie zum Code hinzugefügt. Für uns, um die Bedürfnisse des Kunden zu erfüllen, der diese Optionen haben kann, werden wir alle diese in schwarz und alle in rot benötigen, also brauche ich insgesamt 10 verschiedene Schuhe. Aber für den Benutzer erhalten sie nur mehr Anpassungsoptionen. Hoffentlich klärt das die Varianz auf und macht das ziemlich klar. Es gibt noch eine Sache, die wir tun können, um ein besseres Kundenerlebnis zu bieten, und das ist die Verwendung von Variantenbildern. Ich habe ein zufälliges Bild von schwarzen Schuhen auf meinem Desktop. Was ich tun werde, ist auf Schwarz zu klicken, und ich werde Bilder für alle schwarzen Schuhe aktualisieren. Ich klicke auf Bild hinzufügen, und ich habe diese Nike Turnschuhe hier, die eine schwarze Farbe haben. Es wird sie hochladen. Du musst nur die Tatsache ignorieren, dass es sich hier nicht um denselben Schuh handelt. Wenn ich die Seite speichere und mit der rechten Maustaste auf „Ansicht“ klicke und „Schwarz“ auswähle, wird angezeigt, dass sie automatisch zu dem Produktbild wechselt , das diese Variante darstellt. Die Größe wird so ziemlich gleich aussehen, also macht es keinen Sinn, aber Farbe ist ein perfektes Beispiel dafür, wenn Sie dies ändern, möchten Sie, dass sich Ihre Produktbilder ändern. Es funktioniert nur auf eine Weise, ich habe vergessen, das auf Rot zu setzen, also funktioniert es auch rückwärts, aber du verstehst den Punkt, okay? Eigentlich gehe ich einfach da rein und mache das jetzt, nur um gründlich zu sein, aktualisiere Bilder von all dem Rot und setze das als Variantenbild. Die nächste Sache ist Organisation und die wichtigsten hier sind Sammlungen und Tags. Dies sind die wichtigsten, bei weitem außerhalb Ihrer Organisationsoptionen. Dies sind zusätzliche Organisationsoptionen, die Sie für Produkttyp und Lieferant haben. Anbieter ist ein guter Ort, um Ihren Lagerbestand nach der Marke zu kategorisieren Vielleicht möchten Sie also den Anbieter dieses, Nike und Produkttyps machen , vielleicht möchten Sie Schuhe einlegen. Meiner Erfahrung nach ist, was ich gefunden habe, Sammlungen und Tags sind die wichtigsten Möglichkeiten, um Ihre Inhalte zu kategorisieren. Apropos Wort Kategorie, Sie können Sammlungen wie Kategorien denken, aber im Gegensatz zu Kategorien in anderen Arten von Plattformen wie WordPress, zum Beispiel, mit denen ich in der Vergangenheit gearbeitet habe, können Sie nicht -Kollektionen. Sie müssen strategischer sein, wie Sie Ihre Produkte in verschiedene Kategorien verschachteln. Ganz oben in Ihrer Organisationsstruktur sollten Sammlungen sein. Wenn ich hier zu meinem Shop gehe und sicherstelle, dass ich in der Vorschau bin und ich meine URL-Sammlungen eintippe, werden Sie sehen, dass es eine Sammlung gibt, die standardmäßig mit der Shopify-Plattform kommt und das ist die Gesamtsammlung. Sie müssen es nicht in Ihrem Backend einrichten, Sie werden es nicht wirklich in Ihrem Backend sehen, aber wenn Sie zu Kollektionen/alle auf einer Shopify-Website gehen, werden Sie alle Produkte sehen, die auf dieser Website öffentlich sind. Sie können durchgehen und sie auschecken. Dies zeigt übrigens Ihre Sammlungsvorlage an, so dass wir darauf eingehen, wenn wir in Code kommen. Aber wenn Sie hier in Ihre Vorlagen gehen, den Code, den Sie hier festgelegt haben, es ist eine Verknüpfung zu einem Abschnitt, also lassen Sie mich einfach in diesen Abschnitt gehen, dies ist der Code, der jedes Mal ausgeführt wird, wenn Sie eine Sammlungsseite treffen. Nun, offensichtlich können sich die Produkte und andere Funktionen ändern, aber das ist dynamisch basierend auf dem Code, den Sie in dieser Vorlagendatei und Abschnitt einfügen. Es tut uns leid, ein bisschen voran zu springen, wollte nur notieren, dass Sie jedes Mal, wenn Sie eine Sammlung anzeigen, sie in einer Sammlungsvorlage anzeigen. Wie ich gerade erwähnt habe, ist dies eine automatische Standard-Sammlungsseite, die Sie mit jedem Shopify-Theme erhalten. Aber wenn wir unsere eigene Sammlung erstellen möchten, können wir dies tun, indem wir in das Menü Produkte gehen und auf „Kollektionen“ klicken. Wir können gehen Sammlung erstellen und nennen wir dieses ein, vorgestellte Produkte. Wir können eine Beschreibung hinzufügen, wenn wir wollen, und dann wählen wir die „Sammlungstyp.“ Sie können die Produkte entweder manuell einzeln hinzufügen, und Sie können dies entweder im Produkt selbst oder direkt hier tun, nachdem wir gespeichert haben, oder Sie können es basierend auf bestimmten Bedingungen automatisch machen. Sie können Produkt-Tag, Preis, Lieferant, Typ, Preis vergleichen, Gewicht verwenden Preis, Lieferant, Typ, Preis vergleichen, , um Ihren benutzerdefinierten Filter zu erstellen und diesen dann in eine Sammlung aufzunehmen. Sie könnten den Preis verwenden, um vielleicht alle Produkte zu zeigen , die für weniger als $10 zum Verkauf stehen und vielleicht, das ist eine Sammlung, die Sie erstellen möchten. Aber für unsere Zwecke, ich werde nur mit Handbuch gehen und ich werde auf „Speichern“ klicken und das wird die Seite aktualisieren, damit wir einige Produkte hinzufügen können. Sie können dies verwenden, um zu suchen oder klicken Sie auf „Durchsuchen“. Ich möchte diese am Ende auswählen, ich muss auf jeden Fall „Gnarly Shoes“ auswählen, mein Gott, gute alte Schuhe, oh ja. Ich will die Wahnsinnigen Schuhe, mein Gott, das klingt großartig. Wir haben unsere fünf verschiedenen Produkte in unserer Kollektion, und es sieht so aus, als ob das automatisch gespeichert wird. Wenn ich jetzt auf dieser Kollektion auf „Ansicht“ klicke, erhalten wir eine ähnliche Seite wie das , was wir zuvor gesehen haben, aber jetzt hat es unseren benutzerdefinierten Kollektionsnamen, und es hat die Schuhe oder Produkte, die wir in dieser Kollektion selbst hinzugefügt haben. Jetzt genau hier, Sie haben sortieren nach und das kommt ziemlich Standard mit den meisten Themen, aber wir können wieder filtern mit Tags. Gehen wir zurück zu unserem Sneaker und anstatt Nike, der scheinbar die Marke zu sein scheint, mit diesem dort getickten Nike, anstatt den in Vendor zu setzen , der ein guter Ort wäre, um eine Marke zu setzen, Sagen wir einfach, wir wollen, dass es ein Tag ist, weil das einfacher zu filtern ist und Tags sehr mächtig sind, wie Sie während Ihrer Shopify-Reise sehen werden. Lasst uns nur Nike als Etikett eintragen. Ich werde auf „Speichern“ klicken. Nun, ich möchte, dass Sie bemerken, was mit dieser Leiste passiert, wenn wir die Seite aktualisieren. Sie werden jetzt sehen, wir können nach Tag filtern, und dies ist in unser Thema integriert. Wir können hier reingehen, wieder filtern, und das andere, was ich möchte, dass Sie bemerken, ist unsere URL. Denken Sie daran, bevor wir auf Kollektionen/alle gingen, jetzt sind wir auf Kollektionen/featuredproducts, das ist der Name unserer Kollektion, und dann haben wir Nike. Wir können tatsächlich den Tag-Namen in die URL setzen. Wenn ich das mit jemandem teilen würde, dann würden sie den gleichen Filter sehen. Es ist eine ziemlich coole Art, Ihre Produkte zu filtern und im Grunde fast wie verschachtelte Sammlungen zu erstellen. Obwohl dieser Titel immer noch vorgestellte Produkte sagt, wird hier nach Nike gefiltert, so dass Sie dieses Feedback dort sehen können, aber dies ist eine Möglichkeit, aus Ihren größeren Sammlungen heraus zu filtern. Am Ende des Tages könnten wir auch eine neue Kollektion für vorgestellte Nike erstellen. Wir können in Kollektionen gehen, eine Sammlung erstellen und sagen wir, wir nennen, dass vorgestellten Nike Schuhe oder Produkte. Nehmen wir an, in unserem Kopf ist es eine verschachtelte Kategorie dieser anderen Sammlung. Nun, leider, wie ich bereits erwähnt habe, können Kollektionen nicht verschachteln, aber was wir tun können, ist eine Bedingung, dass das Produkt-Tag Nike gleich sein muss, und dann könnten wir eine andere Bedingung einrichten und alle diese Produkte in die vorgestellte Sammlung mit einem anderen Tag, das sagt vorgestellt, sagen wir. Lass uns das jetzt machen. Ich habe das noch nicht, also werde ich nur den Nike retten. Oh, los geht's, wir müssen das entfernen. Dies wird nur zeigen, alle Produkte, die Nike in ihnen haben, und Sie können hier sehen, es ist autopulating, aber sagen wir einfach, dass wir all diese wollen. Auch hier ist dies nicht super sauber, aber wenn ich ging in all diese Produkte und dann gab ihnen ein Tag der vorgestellten. Wenn, ich werde nur durch diesen Teil eilen. Jetzt, da ich das vorgestellte Tag zu allen vorgestellten Produkten hinzugefügt habe, kann ich in die vorgestellten Nike Produkte gehen eine weitere Bedingung für das Produkt-Tag hinzufügen. Drücken Sie „Speichern“. Jetzt können wir sehen, dass tolle Turnschuhe kommt durch, weil es gekennzeichnet ist und es ist Nike. Um zurück zu gehen und diese Logik auf unsere vorgestellten Produkte anzuwenden, möchten wir dies vielleicht automatisch machen. Glücklicherweise haben wir es bereits manuell eingestellt. Das müssten wir löschen. Lassen Sie uns eine andere erstellen, die Featured Collection genannt wird. Wenn das Etikett angezeigt wird, werden wir alle diese Produkte in die Featured Collection aufnehmen. Jetzt können wir in Featured Collection gehen, die wir zuvor hatten, aber jetzt ist es automatisch basierend auf Tags. Und wir können nach Nike filtern. Oder wenn wir wollten, um einige benutzerdefinierte Inhalte haben, wie eine Beschreibung oder wir wollten, dass dieser Titel ändern, wir könnten gehen, wie, Ich denke, es war, gehen wir zurück und wir können es einfach von innen sehen hier, Featured Nike Produkte. Wie Sie sehen werden, ist dies ähnlich, aber es ist nur auf eine etwas andere Weise eingerichtet. Wenn wir eine Sammlung haben, stehen uns weitere Optionen zur Verfügung, um den Titel anzuzeigen, der erscheint. Wir haben auch Zugriff auf das Sammlungsobjekt, das es uns ermöglicht, alle Produkte innerhalb dieser Sammlung zu greifen. Wieder, das ist mir ein bisschen voraus. Aber Sie können ganz oben sehen, Sammlungen ist eine Möglichkeit, Ihren Laden zu organisieren. Sie könnten Ihren Shop immer nur mit Tags organisieren, so wie das möglich ist. Aber die meisten Themen, sie haben eine Sammlungsseite und dann filtern Sie nach Tag, was die Standard-shopify-Art ist, dies zu tun. Das ist im Wesentlichen, wie Sie Ihre Produkte in der Regel organisieren würden. Wie gesagt, Sie können auch nach Produkttyp und Anbieter organisieren, aber das ist für uns nicht besonders wichtig. Nur eine andere Möglichkeit, die Sie filtern und andere Variablen, auf die Sie innerhalb Ihres Theme-Codes zugreifen können. Ich habe viel Zeit auf der Produktseite verbracht. Es gibt natürlich andere Menüpunkte hier im shopify-Dashboard. Bestellungen, die nicht wirklich viel Sinn machen, bis jemand ein Produkt bestellt. Kunden sind die Details der Personen, die eine Bestellung bei Ihnen aufgegeben haben, und Analysen, die Sie einsehen können, wer Ihren Shop verwendet und wie viele Verkäufe Sie getätigt haben, Marketing. All diese Art von beziehen sich auf den täglichen Betrieb Ihres Geschäfts. Nicht unbedingt mit Ihrem Thema verwandt. Aber was ich tun wollte, war in Produkte gehen, weil Produkte Art, das ist wie der Inhalt Ihrer Website. Es bezieht sich sehr auf die Themenentwicklung und deshalb wollte ich mich ein wenig mehr mit Produkten und Kollektionen auseinandersetzen . Zurück zu unserem Online-Shop hier, können Sie sehen, dass wir auch andere Inhalte in der Art von Blog-Posts und Seiten erstellen können. Jetzt werden wir eine Seite später in dieser Klasse und einen Blog-Beitrag hinzufügen , wenn Sie eine andere Art von Plattform verwendet haben, die Bloggen tut. Ein Blogbeitrag ist im Wesentlichen eine Seite mit einem Zeitstempel darauf und dann wird er in einen Feed eingefügt, der zuerst den neuesten Artikel anzeigt. Du kennst einen Blog. Technisch gesehen ist es wirklich das gleiche wie eine Seite, hat aber nur einen anderen Zweck. Sie können auch hier eingehen, und hier aktualisieren Sie Ihre Navigation, die in Ihrem Code als verknüpfte Liste bezeichnet wird. Sie können hier reingehen und in ein Menü hinzufügen. bin mir nicht sicher, ob wir in dieser speziellen Klasse darauf eingehen werden. Aber jetzt können Sie sehen, dass wir laufen, welches Menü ich laufen werde, das Hauptmenü hier. Also in unserem Customizer haben wir gesetzt, es ist in Hauptmenü ziehen. Wenn wir hier in die Navigation gehen, können wir sehen, dass es Haus und Katalog hat, was wir dort haben. Das stimmt überein. Domänen, Präferenzen. Einstellungen, die wir zuvor gesehen haben, als wir das Passwort für die Website deaktiviert haben. Hier gibt es einige andere Dinge, die Sie in Google Analytics-Code einfügen oder Ihre SEO-Daten ändern können. Aber das letzte, was ich in dieser speziellen Lektion beenden wollte und der Teil Ihres Geschäfts, der sich am meisten auf das Thema bezieht, natürlich, wird Ihr Thema Customizer sein. Wir haben diesen Customizer bereits kurz in einer vorherigen Lektion durchgegangen. Ich will nicht zu viel Zeit damit verbringen, über die gleichen Details zu gehen. Aber im Wesentlichen haben wir die Sammlungsseite bereits erwähnt. Sie können direkt hier reingehen und ändern, dass es standardmäßig Nike-Produkte enthält. Aber wir können reingehen, das Gitter wechseln. Wir können Produktlieferanten zeigen und es wird die Tets zeigen. Ich weiß nicht, was tets ist, aber das ist die Freude an Demo-Produkten. Sie können das Sammlungsbild anzeigen, das wir für diese Sammlung nicht haben. All dies wird innerhalb eines Abschnitts namens Sammlungsseiten oder in unserem Back-End eingerichtet, es heißt Sammlungsvorlage. Ich zeige Ihnen, dass alle diese Optionen durch ein Schema kommen, das wir hier geschrieben haben. Das ist nur, um Ihnen eine Vorschau zu geben, was in dieser Klasse kommen wird. Ich denke, das ist ein ziemlich guter Überblick über Ihr Shopify-Back-End. Offensichtlich sind Produkte die Hauptsache, dass Ihre Website wird zu fördern und die Hauptsache, mit der Sie interagieren werden, mit Ihrem Code, wird es Ihre Anpassung Ihres Geschäfts wird in der Regel um präsentieren Ihre Produkte in der besten Weise mit den besten Optionen, Filterung in einer Weise, die für den Benutzer sinnvoll ist. Dann gute Navigation zu haben, was ziemlich selbsterklärend ist. Richten Sie gute Seiten ein, mit denen diese Navigation verknüpft werden soll. Wenn Sie eine About Seite oder eine Kontakt-Us-Seite haben. Aber ja, diese Art von deckt einen Überblick über die Shopify Online-Shop Erfahrung aus der Sicht des Verkäufers. Jetzt in den nächsten Videos, werden wir uns mit Ihrem Theme-Code auseinandersetzen. Hier kommen wir also in die eigentliche Shopify-Themenentwicklung oder Theme-Anpassung ein, weil wir nicht etwas von Grund auf neu entwickeln. Aber wir werden in den Code gehen und wie Sie im Grunde alles über Ihr Thema bearbeiten können und tatsächlich wo Sie den Code finden, den Sie bearbeiten möchten. Wir sehen uns im nächsten Video. 9. Theme Code – Assets, Konfiguration und Sprachen: Willkommen zurück alle. In diesem Video werden wir endlich in unseren Theme-Code eintauchen und darüber reden, was los ist. Lassen Sie uns unseren Code-Editor öffnen, oder wenn Sie im Editiercode Abschnitt Ihres Themas folgen möchten, ist entweder in Ordnung. Wie ich bereits erwähnt habe, empfehle ich Ihnen, alle Ihre Änderungen hier vorzunehmen. Aber nur für den Blick auf den Code, können Sie ihn hier betrachten, wenn Sie es bevorzugen. Ich werde es nur im Code-Editor betrachten , weil wir dort bearbeiten werden, aber Sie werden hier sehen, dass, wenn ich all diese übergeordneten Tabellen zusammentrage, wir Assets, Konfiguration, Layout, Gebietsschemas, Abschnitte, Snippets und Vorlagen. Vorlagen, Snippets, Abschnitte und Layout sind die Hauptordner Ihres Designs. Das sind die, die Sie bearbeiten werden, um das Aussehen und das Gefühl Ihrer Website zu bearbeiten, was Sie von einem Thema erwarten würden. Aber es gibt andere wichtige unterstützende Ordner hier: Assets, Config und Locales. In dieser Lektion werden wir diese zuerst behandeln, und dann gehen wir zu den wichtigsten, teilen sie in den folgenden zwei Lektionen auf. Um mit Assets zu beginnen. Assets, wenn Sie neu in der Webentwicklung sind, Dinge wie Bilder, Stylesheets und JavaScript-Dateien. Das ist wirklich das, was wir hier haben. Wir haben Bilder, die wir innerhalb des Themas verwenden, können wir hier einfügen. Wir haben JavaScript-Dateien. Dieser ist für, wenn Sie Geschenkkarten machen. Wir haben SCSS-Dateien und Sie können sehen, dass es eine.liquid am Ende gibt. Die wichtigste in Ihrer Asset-Datei wäre wahrscheinlich Ihre theme.scss.liquid. Etwas, mit dem Sie vielleicht nicht vertraut sind, ist eine Technologie namens SAS. SAS ist im Grunde eine CSS-Kompiliersprache. Es kommt im Grunde vor CSS und ermöglicht es uns, Dinge wie Funktionen und Variablen und Verschachtelung aufzurufen . Was es tut, ist es kompiliert oder verwandelt sich in reguläres CSS, wenn wir es entweder kompilieren, oder, und das ist das Tolle an Shopify, ist, dass SCSS für uns kompiliert wird. Wenn Sie eine SCSS-Datei sehen, können Sie im Grunde das CSS einfügen, das Sie wollen. CSS ist abwärtskompatibel mit SCSS, aber dies ist im Grunde Ihr Stylesheet Ihres gesamten Themes. Der Grund, warum es am Ende flüssig ist, ist, weil wir in der Lage sind, es in flüssige Variablen zu setzen. Wir werden in einem späteren Video in Flüssigkeit gehen, aber ich kann das hier suchen. Sie können hier sehen, dass wir einige SAS-Variablen mit Variablen laden , die in unserem Customizer festgelegt sind. Wir werden uns das auch in einer Sekunde in unserer Konfiguration ansehen. Aber Einstellungen hier, das globale Einstellungsobjekt, sind unsere Themeneinstellungen. Wenn wir zurück hierher gehen, geht es zu schnell etwas zu tief, aber wir werden dort sein. Wenn wir hier hineingehen, so werden wir auf den Customizer-Teil davon gehen, dann gehen wir in Theme-Einstellungen. Hier bei Einstellungen Farbtext, das wird in Farben sein, und es wird wahrscheinlich einer dieser sein, wahrscheinlich der Körpertext. Es setzt im Wesentlichen, welche Auswahl Sie hier in Ihrem Customizer in eine SAS-Variable haben . Dann, was Sie tun können, anstatt eine bestimmte Farbe aufzurufen, können Sie dies nennen. Sie können nach Verwendungen dieser Variablen suchen. Wie Sie hier sehen können, ist dies ziemlich normales CSS abgesehen von den SAS-Variablen. Wenn Sie mit SAS nicht vertraut sind, empfehle ich definitiv, es nachzuschlagen. Es ist nicht zu kompliziert zu lernen, wenn Sie CSS bereits kennen. Wenn Sie davon überwältigt sind und nicht erwartet SAS zu lernen und Shopify-Entwicklung zu lernen, sich keine Sorgen, Sie müssen SAS nicht verwenden. Sie können hier reguläres CSS einwerfen. Wenn Sie dies als Ihre Haupt-CSS-Datei betrachten möchten, können Sie direkt voran gehen und das tun. Sie sich keine Sorgen um SAS, wenn Sie neu sind. Aber wenn Sie mit SAS vertraut sind oder es lernen möchten, ist es großartig, dass Shopify SAS kompiliert und Ihnen erlaubt, Dinge zu tun, wie ich Ihnen gezeigt habe, wo, mal sehen, ob ich es wieder finden kann, es ist zu schwer zu finden, aber im Grunde, wo Sie eine Variable in Ihren Designeinstellungen auf eine Variable in Ihrem Stylesheet setzen und sie dann in Ihrem Stylesheet aufrufen können. Sehr cool. Die andere ist Ihre theme.js. Nun könnte dies leicht theme.js.liquid sein, aber mit diesem Thema scheint es, dass es keine flüssigen Variablen gibt, die in diese Datei eingefügt werden. Es ist nur theme.js, und das gilt auch für hier. Wenn Sie keine Flüssigkeit hineinlegen, müssen Sie nicht.liquid am Ende setzen. Dies wird alle Ihre Themes JavaScript zu halten. Wenn Sie mit JavaScript nicht allzu vertraut sind, könnte dies auch ein wenig knorrig werden. Am besten lassen Sie dies, es sei denn, Sie müssen in das JavaScript eingraben. Hier haben Sie einige andere JavaScript-Bibliotheken. Lazysizes ist etwas, das viele Shopify-Themen verwenden, um Bildgrößen auf verschiedenen Bildschirmen zu optimieren. Nochmal, du musst dir keine Sorgen machen, was hier vor sich geht. Was Sie wissen müssen, ist, dass der Ordner „Assets“ vorhanden ist, und dort finden Sie Ihr Stylesheet, das Sie wahrscheinlich bearbeiten werden, und Ihre JavaScript-Datei. Weiter, wir haben einen anderen Ordner hier namens config. Config ist interessant, weil Sie wissen, wie wir darüber gesprochen haben , wie dieser Farbtext in Ihrem Customizer in settings.colortext eingestellt wurde. Nun, Sie können diesen Wert tatsächlich in Ihren setting_data nachschlagen. Wenn wir das tun sollten, finden Sie heraus, wie es Farbtext nennt. Wenn ich das kopiere und in unsere Daten gehe, kann ich tatsächlich herausfinden, wo das gesetzt ist. Hier können Sie sehen, dass es dreizehn von ihnen gibt. Schauen wir uns mal an. Aktuell. Hier auf aktuelle, was wir gerade verwenden, können Sie sehen, dass der Farbtext auf diesen spezifischen Wert eingestellt ist. Aber wenn wir hineingehen und es hier ändern, wird es in diesem Thema zu aktualisieren settings_data.json. Alle Daten in Shopify sind im JSON-Format eingerichtet, also ist das J-S-O-N. Auch wenn Sie neu in der Webentwicklung sind, könnte das etwas sein, mit dem Sie nicht vertraut sind, aber es ist ziemlich einfach, Sie nisten in diesen geschweiften Klammern. Sagen Sie zum Beispiel, Sie wollten zu current.colortext gelangen, in aktuelle gehen, in Farbtext gehen, und da haben Sie es. Ziemlich einfaches Zeug. In settings_schema ist dies der Layer, der außerhalb der Daten liegt, die Sie hier haben. Sie haben hier den Wert für Farbtext, aber in Ihrem Schema legen Sie diesen Wert als Wert fest, den Benutzer im Anpassungsprogramm bearbeiten können. Wie Sie hier sehen können, Einstellungen, ID, color_text, dies ist, was es als eine Customizer-Option eingerichtet, und der Typ ist eine Farbauswahl. Um Ihnen zu zeigen, wenn wir diese Option vollständig löschen würden, werden Sie sehen, dass sie nicht einmal mehr im Customizer angezeigt wird. Drücken Sie auf Speichern. Ich schaue mir die Themen-Uhr an. Übrigens, wenn Sie irgendwelche Fehler gemacht haben, sollte es hier kommen. Behalten Sie das auf jeden Fall im Auge. Wenn es irgendwelche Fehler gibt, es tatsächlich nicht kompiliert und an den Store gesendet. Aber wenn ich den Editor hier aktualisieren und in meine Theme-Einstellungen gehen möchte, in Farben gehen, können Sie sehen, dass Farbe verschwunden ist, und es war nicht wirklich der Körpertext, es war der darüber. Ich kann mich nicht erinnern, wie dieser genannt wurde, aber wenn wir das zurückbringen, können Sie sehen, dass das Etikett Überschriften und Links war. Wenn ich das speichere, was ich getan habe, wird es erneut hochgeladen. Aktualisieren Sie die Seite, Thema , Einstellungen, Farben, und da Sie gehen, diese Option ist wieder da. Dies ist eine erste Einführung in die Schemata für uns. Wir haben im Grunde ein riesiges Schema, das auf dem ganzen Thema mit einer Reihe von verschiedenen Einstellungen sitzt , und dies spiegelt das wider, was wir in unseren Themeneinstellungen haben. Dies ist wie die Entwickler-Backend-JSON-Darstellung aller Daten, die wir hier haben. Ich könnte es hier sogar ändern, und es wird sich hier in unserem aktuellen Thema aktualisieren. Oder ich kann es hier ändern, und das wird in unserem Thema hier aktualisiert. Beide sind miteinander verbunden. Wenn ich das vorher gelöscht habe und es zurückgebracht habe, werden Sie feststellen, dass es immer noch diesen Wert hat. Nun, das ist wahrscheinlich der Standardwert, der hier festgelegt wird. Aber selbst wenn es nicht war, selbst wenn es keinen Standardwert gab, werden die Daten immer noch gespeichert. Wenn Sie in Ihr Schema gehen und etwas löschen, wie wir es getan haben, werden die Daten nicht auch gelöscht, und vielleicht möchten Sie das löschen. Aber normalerweise, wenn Sie Theme-Entwicklung machen, ist dies spezifisch für den Store und Sie möchten dieses Zeug nicht unbedingt bearbeiten. Ich würde das Zeug generell in Ruhe lassen. Es ist nützlich, wenn Sie vielleicht einen Store migrieren und einige Änderungen an den Einstellungen vorgenommen haben. Sie können die Einstellungen kopieren, die alle hier aufgelistet sind, wenn Sie diese Änderungen vornehmen. Wenn das ein bisschen überwältigend war oder es ein bisschen über den Kopf ging, mach dir keine Sorgen. Der Hauptgrund, über dieses Zeug zu wissen, ist, sagen wir zum Beispiel, wenn Sie Ihre eigene Einstellung erstellen wollten. Wenn Sie Ihre eigene Einstellung erstellen möchten, könnten Sie hierher kommen, vielleicht möchten Sie einen anderen Farbtexttyp erstellen. Sie könnten das einfach dort hineinwerfen, die ID umbenennen, das Label ändern, und dann hätten Sie plötzlich das in Ihrer Liste der Optionen hier und dann in Ihrem Code, Sie könnten es genau wie in unserem Beispiel hier. Sie können auf die neue Variable verweisen, die Sie an einer beliebigen Stelle in Ihrer Vorlage festlegen. Das ist der eigentliche Vorteil, dass das Schema hier bearbeitet werden kann. Sie können Designeinstellungen aus dieser Datei erstellen und dann speichert diese nur Ihre Daten. Sie sollten hier wahrscheinlich nichts ändern müssen , es sei denn, Sie wollten eine Migration durchführen und Sie wollten nicht alle diese verschiedenen Werte selbst über den Customizer aktualisieren müssen. Endgültige und dann werden wir auf die tatsächliche wie Layout-Dateien gehen ist Locales. In Gebietsschemas sind es im Grunde Ihre Sprachen. Wenn wir zurück in unseren Online-Shop gehen und im Themenbereich auf Aktionen klicken und Sprachen bearbeiten, können wir eine Benutzeroberfläche für uns sehen, um alle Sprachoptionen zu ändern. Was sind diese Sprachoptionen? Nun, wenn wir unseren Code durchschauen, also lasst uns einfach in gehen, lasst uns einfach Header wählen und wir können hier schon eine Reihe von ihnen sehen. Wir können sehen {layout. navigation.search} und dann können wir dieses Pfeifen-Symbol hier mit a' T sehen . ' Das 'T' sagt im Grunde, Filter nach Sprache. Warum das wichtig ist, ist, anstatt Werte hier hart zu codieren, können wir sie in Sprachen einrichten und dann können wir sie übersetzen. Hoffentlich wird das Sinn ergeben, ich könnte später in der Klasse ein Beispiel geben, aber schauen wir uns ein offensichtlicheres an, nur zu Demonstrationszwecken. Eine gemeinsame ist Cart-Sprache. Wenn ich auf Ich werde es mit meinem Kunden tun, ich könnte es genauso gut hier tun. Wenn ich hier reingehe und ich sehe Ihren Warenkorb auf der Kinderbett Vorlage. Lassen Sie mich in Vorlagen gehen, Warenkorb und es Links direkt zu einem Abschnitt namens Warenkorb Vorlage. Ich werde in diesen Abschnitt gehen. Wenn ich versuche, Ihren Warenkorb zu finden, ist er nicht da, ich kann ihn nicht finden und der Grund dafür ist, dass Ihr Warenkorb in den Spracheinstellungen eingestellt ist, so dass Sie hier Ihren Warenkorb sehen. Wenn wir dieses Label ändern wollten, könnten wir hier reingehen und herausfinden, wo die Sprachvariablen vorkommen. Ich glaube, es ist dieser Wagen. General. Titel}. Lass uns einfach reingehen und das ändern. Ich werde dieses Flüssigkeits-Tag loswerden und einfach einlegen, > das ist der Wagen <. Ich werde das speichern, überprüfen, dass alles gut funktioniert mit Theme-Kit und dann [unhörbar]. Lassen Sie mich einfach von hier aus darauf klicken, um sicherzustellen, dass wir auf das richtige Thema sind. Es ist nicht so, also haben wir offensichtlich das Falsche bearbeitet, aber ich kann wirklich finden, was es hier drin ist. Dies ist die englischsprachige Datei und wir laufen Englisch im Moment, wie Sie sehen können, und wenn ich gehen, um Titel zu finden. Lassen Sie mich einfach nach Warenkorb suchen und sie werden allgemeine Titel haben, Ihren Warenkorb. Ich muss den allgemeinen Titel des Einkaufswagens finden. Einige Produkttitel, sorry, es gibt ein paar Verwendungen des Wortes Titel hier. Es scheint, dass wir die richtige bearbeitet haben, aber wir haben nur keine Artikel in unserem Warenkorb, weshalb diese Kopfzeile nicht wirklich angezeigt wird. Lassen Sie uns einfach etwas zu unserem Warenkorb hinzufügen, um dies zu demonstrieren, so dass wir noch nicht ganze Produkte auf einer Homepage zeigen, aber wir können zu der alten Kollektion gehen. Lassen Sie uns das einfach in unseren Warenkorb legen. Jetzt sind wir in unserer Warenkorbseite und wie Sie sehen können, der Text, den wir in, dies ist der Warenkorb zeigt. Wir können natürlich Code-Werte in unser Projekt direkt hier einbauen. Nur um dies zu zeigen, ist der Warenkorb, um es klar zu machen, als würde ich diese bestimmte Seite bearbeiten. Ich bearbeite es hier, wir wollen das nicht tun und der Grund warum ist, wenn wir zum Beispiel Deutsch sagen und wir diese Website auch in Deutsch anbieten und wir wollen eine bestimmte Sprache haben , die leicht ist übersetzt in diese Sprache durch zu kommen und in dieser Sprache zu sein, wird kommen mit diesem Warenkorb Warenkorb, während alles andere übersetzt wurde. Deshalb verwenden wir Sprachen. Wenn sagen, zum Beispiel und Sie können nicht über andere Sprachen kümmern, können Sie nur Werbung für den einen Markt sein. Vielleicht interessieren uns Sprachen überhaupt nicht, aber trotzdem ist es eine bewährte Methode, diese Variablen zu verwenden. Ich werde hier hineingehen und Anstatt dies im Code hier zu ändern, werde ich die Variable aktualisieren. Anstelle von Ihrem Warenkorb, legen Sie in, dies ist Warenkorb. Ich mache es nur offensichtlich, dass wir es ändern. Weil niemand sagen würde, dass das Karren ist, ganz offensichtlich. Wenn wir die Seite aktualisieren, wird es mit diesem Warenkorb kommen. Im Wesentlichen das gleiche Ergebnis, aber nur eine bessere Übung, um alle diese gemeinsamen Wörter in einer Datei in Ihren Gebietsschemas zu haben, dann diese Variable in Ihrer Vorlage aufzurufen. Sie werden hier sehen, dass wir eine Menge Standardsprache verwenden und es könnte Sie ein wenig stürzen, wenn Sie nicht über diese Sprachdateien wissen , weil Sie vielleicht gehen und wie, na ja, ich möchte diesen Text ändern. Lassen Sie es uns wieder auffrischen, zurück zu Ihrem Warenkorb. Weißt du, es könnte dich stolpern, wenn du weitermachen willst, nun, ich möchte dieses Wort in meinem Shopify-Thema ändern. Lassen Sie mich für Ihren Warenkorb in Warenkorb Vorlage suchen. Was zur Hölle, ich kann es nicht finden. Wie soll ich das ändern? Deshalb müssen wir über Sprachvariablen sprechen , denn wenn Sie so etwas ändern möchten, müssen Sie es hier ändern. Alles hartcodiert, wie gesagt, harte Codierung ist keine Best Practice. Wenn Sie die Sprache so ändern möchten, diesen Standard über das Thema hinweg, ändern Sie es hier und wenn Sie jemals in Zukunft, wenn ich es in eine andere Sprache übersetze, haben Sie diese anderen Dateien hier. Sie können Warenkorb allgemeine Titel sehen und das ist, was es in Englisch ist. Wenn wir in das, was ich glaube, Deutsch ist,gehen Sie Warenkorb allgemeinen Titel und dieser gehen Sie Warenkorb allgemeinen Titel und Wert auf ein Deutsch [unhörbar] wird stattdessen dieses Wort sein, das ich nicht einmal versuchen, auszusprechen, weil es hart aussieht und ich nicht Deutsch spreche. Das sind Gebietsschemas, das ist Konfiguration und das sind Assets. Vielleicht bin ich ein bisschen durchgeeilt, weil es viel mit Shopify-Themes zu decken gibt, aber im Wesentlichen speichern Sie hier Variablen, die mit der Sprache zusammenhängen. Hier speichern Sie Schemadaten oder allgemeine Einstellungsdaten. Hier legen Sie fest, welche Optionen in Ihrem Schema verfügbar sind, die direkt in Ihren Customizer übersetzt werden. Schließlich, um Assets zu überprüfen. Assets ist, wo Sie Ihr Stylesheet, Sie JavaScript-Datei und alle Bilder oder andere Dateien, die Sie in Frontend-Assets aufrufen müssen, die Ihren Shop laufen helfen. Aber wieder, Sie sollten keine von diesen bearbeiten müssen, es ist nur Thema. SCSS. Flüssigkeit, die die wichtigste ist, weil Sie zwangsläufig etwas CSS auf Ihrer Seite ändern wollen. Sie können das mit Flüssigkeit tun, Sie können das mit SAS tun. Aber Sie können auch einfach in einfaches altes CSS einfügen, das funktioniert, alle diese Optionen stehen Ihnen zur Verfügung. Im nächsten Video freue ich mich, in die anderen Teile Ihrer Theme-Vorlage zu gelangen. Ich freue mich darauf, Sie im nächsten Video zu sehen. 10. Theme Code – Layout und Vorlagen: Um uns für die nächsten zwei Lektionen über die Bearbeitung unseres Theme-Codes einzurichten, habe ich eine Reihe von Tabs geschlossen und jetzt habe ich nur meinen Shop, mein Partnerkonto und dieses Diagramm, das ich vorbereitet habe, um aufzuschlüsseln, was mit unserem Thema passiert. Nun, das mag null aussehen, aber es sollte einen guten Überblick darüber geben, wie alles funktioniert. Im Wesentlichen haben wir diese farbigen Boxen und diese repräsentieren eher die vier großen Abschnitte, über die wir reden werden. Wenn wir zurück in unseren Code, Abschnitte, Snippets, Vorlagen und Layout gehen. Ganz oben ist dies der Einstiegspunkt. Jeder, der unsere Website betritt wird das Layout bekommen. Dann innerhalb des Layouts haben Sie möglicherweise Snippets, weshalb Sie diese Zeile hier unten haben. Sie könnten Abschnitte in der Tat haben, Sie sind sehr wahrscheinlich, dass Sie Abschnitte haben. Innerhalb des Layout-Inhalts, sich in der Mitte Ihres Layouts befindet, erhalten Sie eine Vorlage. Diese Linien zeigen den Fluss der Vorlagenstruktur. Unten haben Sie Abschnitte hier, dann fließen Abschnitte in diese Vorlage, aber sie können auch in das Layout fließen, sie können auch in den Inhalt für den Index fließen. Dann haben Sie diese Vorlage, die in das Layout fließt. So sitzt das Layout an der Spitze. Der Versuch, ein anderes Wort als Layout zu finden, aber es ist im Grunde die Struktur, die oben auf jeder Seite sitzt. Dann erhalten Sie die Vorlage serviert und dann Abschnitte sind wirklich coole dynamische Codestücke, dynamische Abschnitte, die wir in unsere Homepage einfügen können, in unser Layout werfen, in unsere Vorlage und dann Snippets sind nur wiederverwendbare Code-Bits, die wir grundsätzlich sowieso einwerfen können. Jetzt habe ich auch diese Wolken hier drin. Ich habe es zu einer Cloud gemacht, weil es sich um dynamische Inhalte handelt. Wir können eine Theme-Vorlage für Header-Inhalt oder Inhalt des Indexes nicht wirklich bearbeiten. Es Links zu verschiedenen Teilen Ihres Themas mit dieser doppelten Linie. Die doppelte Linie ist nur, um eine dynamische Verbindung zu bedeuten. In Ihrem Layout ist es eine Verknüpfung mit Header-Inhalt, , weil es mit einer Cloud bezeichnet wird kommuniziert, dass wir dies nicht wirklich speziell bearbeiten können, aber es ist eine Out-Layer. Dasselbe für den Inhalt für den Index. Eigentlich sollte diese Linie hier wahrscheinlich nicht hier sein. Dies ist nur auf einer bestimmten Vorlage, der Homepage. Also könnte ich diesen Link löschen. Aber wie Sie bald sehen werden, und etwas, das ich kurz berührt habe, ist, dass der Inhalt für den Index die Sache ist , die auf Ihrer Homepage sitzt und Sie können in Abschnitten dynamisch hinzufügen. Dieses Diagramm könnte zunächst ein wenig null aussehen, aber nach diesen beiden Lektionen hoffentlich sollte die Beziehung zwischen all diesen Teilen ziemlich deutlich Sinn ergeben. In diesem Video werden wir über Layouts sprechen und wir werden über Vorlagen sprechen, und dann werden wir es aufteilen, so dass wir in der nächsten Lektion über Abschnitte und Schnipsel sprechen. Beginnen wir am Einstiegspunkt. Lassen Sie uns einfach eine Vorschau auf unser Thema gehen. Wenn der Benutzer in unseren Laden kommt, er mit diesem präsentiert, was eine Mischung aus allem ist, was wir hier drin haben. Zuallererst wird es eine Layoutdatei treffen. Deshalb sitzt das Layout, wenn wir zurück zum Diagramm gehen, an der Spitze. Wir gehen in unser Layout-Foto. Normalerweise haben Sie nur ein Layout und es ist theme.liquid. Wie Sie in diesem Video sehen, sind wir in der Lage, unsere eigenen Layouts zu erstellen, aber das Standardlayout ist theme.liquid. Wenn Sie kein benutzerdefiniertes Layout festgelegt haben, wird es zu theme.liquid gehen. Nehmen wir einfach an, dass Sie kein benutzerdefiniertes Layout festgelegt haben. Es wird theme.liquid gehen. Dies ist der Code, der generiert, was Sie hier sehen. Das gilt nicht nur für die Homepage, es gilt für so ziemlich jede Seite, die kein alternatives Layout hat. Dies ist die Skin, die auf jeder Seite Ihrer Website ausgeführt wird. Aber wie wir sehen werden, gibt es hier einige dynamische Inhalte. Wir haben flüssige Tags, wie Sie hier sehen können, die durch die beiden geschweiften Klammern gekennzeichnet sind, die in geschweifte Klammern enden. Es gibt noch einen, den Sie sehen könnten, der anstelle von zwei geschweiften Klammern hat, geschweifte Klammern und ein, da gehen wir. Geschweifte Klammern, Prozentzeichen und ein Bindestrich, um Leerraum zu beseitigen, werden wir in Flüssigkeit gehen und wie es in einem späteren Video funktioniert. Aber ich wollte nur durch und lassen Sie uns sehen , wo diese Seite Links zu anderen Teilen in unserem Thema. Wir haben hier eine flüssige Logik. Mach dir deswegen keine Sorgen. Was ich suche, ist dieser erste Tag-Inhalt für Header. Im Grunde, indem Sie den Inhalt für den Header hier kurz vor dem schließenden Head-Tag setzen, ist es, was wir haben, zu nehmen und es direkt hier zu setzen. Wieder, scheinbar kann es nicht bearbeiten, es könnte schwer sein zu verstehen, was tatsächlich hier drin geht, und deshalb habe ich diese Box hier geschrieben. Dies ist laut Shopify-Dokumentation, dass der Inhalt für den Kopf der Variablen zwischen den öffnenden und schließenden Tags platziert werden muss. Es fügt die notwendigen Shopify-Skripte in den Kopf ein, die Skripte für Google Analytics, Shopify-Analysen für Shopify-Apps und mehr editierbare Einstellungen enthält Shopify-Analysen für Shopify-Apps . Das beantwortet die Frage, wohin würde ich gehen, um das zu bearbeiten? So kann ich hineingehen, klicken Sie auf Einstellungen. So Dinge wie Google Analytics-Code. Wenn ich einen Google Analytics-Code hätte, würde ich ihn hier einfügen. Das würde dynamisch in den Inhalt für den Header gehen. Dann mit diesem flüssigen Tag, im Grunde zu steuern, wo es in unserem flüssigen Layout geht. Aber es ist etwas, mit dem man sich nicht wirklich anlegen sollte. Ich lasse Sie nur wissen, dass es dort einfügt. Es macht nicht wirklich Sinn, es zu bewegen, weil es in diesem Head-Tag sein muss. die Seite hinunter gehen, können wir dieses Wort einschließen und einschließen, gefolgt von einer Zeichenfolge hier sehen. Was das tut, ist ein Snippet einschließen. Wenn ich in den Ordner „Meine Snippets“ gehe, werden wir in diesem Video keine Snippets abdecken, aber Sie können sehen, ob ich nach unten suche, gibt es viele verschiedene Symbole hier. Genau da ist es. Es ist nur eine SVG-Datei, aber ich kann sie grundsätzlich überall in meinem gesamten Thema einfügen. Zurück zu theme.liquid. Lassen Sie mich erneut nach unten scrollen, indem Sie include und dann den Namen des Snippets einfügen. zurück zum Diagramm gehen, können Sie sehen, dass wir Snippets überall in unserem Theme-Code, Layout, Vorlage oder Abschnitten einfügen können . Deshalb verbindet sich die Zeile mit diesen drei. Wenn wir die Seite nach unten scrollen, können wir ein anderes Schlüsselwort hier sehen, die Abschnitt ist. Genau wie Include, können wir in den Header Abschnitt bringen, indem wir den Abschnitt Wort verwenden. Also Include, um in ein Snippet zu bringen, Abschnitt in einen Abschnitt zu bringen. Wenn wir in unseren Abschnitten Ordner gehen, sollte es eine Datei namens header.liquid geben. Denken Sie daran, dass wir die.liquid nicht verwenden müssen, um einen Abschnitt Snippet oder eine Vorlage aufzurufen, wir fügen einfach das Wort ohne die.liquid ein. Liquid weiß, was du zu tun versuchst. Wie Sie sehen können, haben wir einen weiteren Abschnitt hier, und dazwischen haben wir dieses andere dynamische Flüssigkeits-Tag namens Inhalt für Layout. Zurück zu meinem Diagramm hier können wir lesen, was Inhalt für das Layout ist. Der Inhalt für die Layoutvariable muss zwischen dem öffnenden und schließenden Körper-Tag platziert werden. Es gibt dynamische Inhalte aus, die von allen anderen Vorlagen generiert werden. Index.Flüssigkeit, Produkt.Flüssigkeit und so weiter. Wie Sie sehen können, habe ich diese Box zwischen Layout und Vorlage. Das liegt daran, dass hier die Vorlage ins Spiel kommt. Wenn wir hier in unsere Vorlagen gehen, wird der Code in diesen Vorlagen in hier geladen werden. Sie fragen sich vielleicht, wie wissen wir, welche Seite wir hier laden sollen? Die Antwort ist, es hängt von der URL ab, in der Sie sich befinden. Wenn ich hier bin und ich gehe zu collections.all, wie wir vorher haben. Ich bin immer noch auf dem Thema Layout. Ich bin immer noch in dieser Layoutdatei. Aber wenn ich dann auf Inhalt für das Layout klicke, sieht es, dass ich auf einer Sammlungsseite bin. Laden Sie die Sammlungsvorlage. Wir sind gerade in der Sammlung Vorlage. Wie Sie sehen, gibt es hier so ziemlich nichts außer einem Abschnitt. Wir werden auf mehr Details oder mehr Gründe, warum das im nächsten Video ist. Aber im Wesentlichen ist der Hauptgrund, warum, und wenn wir kurz in diesen Abschnitt eingehen, und wenn wir kurz in diesen Abschnitt eingehen,weil wir den gesamten Abschnitt anpassbar mit einem Schema machen wollen. Wir können hier eine Reihe von Optionen festlegen, und dann können wir das innerhalb des Codes verwenden. Wenn Sie jemals neugierig sind, warum Sie eine Vorlagendatei haben und sie dann plötzlich nur mit einem Abschnitt verknüpft haben, warum ist das der Fall? Deswegen. Denn in unseren Vorlagen haben wir kein Schema, um etwas zu bearbeiten. Wie ich Ihnen bereits gezeigt habe, wenn wir in den Customizer gehen, so werde ich aus den Präferenzen und ich werde auf unser Thema anpassen klicken. Ich gehe auf die Sammlungsseite. Sie können hier sehen, dass wir diesen Abschnitt Block hier haben. So sind wir in der Lage, Einstellungen innerhalb dieser Sammlung zu bearbeiten. Wir können auch in einem zufälligen Abschnitt hinzufügen, wenn wir wollten, was wir nur in einer Sekunde tun werden, oder wir können dies vollständig entfernen und es gibt keinen Inhalt in der Vorlagendatei. Aber nur um zu zeigen, ob ich diesen Abschnitt loswerden und vielleicht ein zufälliges div setzen sollte. Vielleicht bringe ich immer noch in der Sammlung Inhalt, weil wir in der Vorlage sind hier. So kann ich eine Sammlung mitbringen. Ich werde nicht, ich werde nur hallo eingeben. Nur um zu demonstrieren. Themen-Uhr läuft gut. Ich werde eine Vorschau des Themas anzeigen, damit Sie den Customizer nicht verlassen müssen. Gehen Sie wieder auf diese Seite, collections.all. Jetzt können Sie sehen, dass wir nur Hallo haben. Du bist okay, das macht Sinn, aber jetzt, wenn wir in unserem Customizer auf Sammlungsseiten gehen, werden Sie sehen, dass es nur Sammlungsinhalte hat. Es gibt keinen kleinen Abschnitt hier, in dem wir gehen und Einstellungen bearbeiten können. Hoffentlich macht das es ein bisschen klarer, warum es nur direkt zu einem Abschnitt verlinkt. Es gibt uns die Möglichkeit, in einen Tab direkt hier zu gehen und nicht nur unsere Inhalte dort zu haben, sondern auch Optionen zu haben, um es von innen zu bearbeiten. Das deckt so ziemlich das Layout ab. Wenn wir zurück zur Flüssigkeit gehen. Sie können es hier im Code selbst lesen oder Sie können sich das Diagramm ansehen, aber die wichtigsten flüssigen Tags, die Sie haben, sind Header-Inhalt, Inhalt für das Layout hier und alle Snippets oder Abschnitte, die Sie in Ihr Layout einfügen möchten. Ich werde alternative Layouts in nur einer Sekunde demonstrieren, aber lassen Sie uns mehr über Vorlagen sprechen. Wir haben ein kurzes Beispiel für die Sammlungsseite gezeigt, aber was ich tun möchte, ist eine Vorlage für die Seite Info zu erstellen. Lassen Sie uns in unsere Vorlagen gehen hier und wie Sie sehen können, haben wir Seite, wir haben Passwort, Produkte, Suche. Vielleicht möchte ich eine neue Seite erstellen. Lassen Sie mich hier in mein Backend gehen, klicken Sie in Seiten, fügen Sie eine Seite und das sollte ziemlich vertraut aussehen. Es ist ziemlich ähnlich wie Produkte, es ist nur Titel und Inhalt. Ich werde About Us und ich werde ein paar Lorem Ipsum generieren, nur um es zu füllen. Ich werde nur nach einem zufälligen Lorem-Ipsum-Generator suchen, schnappen Sie sich einfach einen Haufen Dummy-Text, um dort hineinzulegen. Ich werde auf Speichern klicken und was ich möchte, dass Sie hier bemerken, weil es eine Seite ist, wir haben das Suffix Seitenvorlage, das ist standardmäßig. Wenn wir gehen und klicken Sie auf Seite anzeigen, können Sie hier sehen, dass wieder, es lädt unser Theme-Layout, das wird auf jeder Seite passieren, es sei denn, wir spezifizieren etwas anderes und dann, weil es eine Seite ist, es lädt diese. Dann haben wir hier unsere dynamischen Inhalte, die wir gerade in unserem Backend hier eingerichtet haben, einen Titel und Inhalt. Sie können hier zwischen den h1-Tags sehen ist Titel und in unserem div ist hier Inhalt. Wir könnten das ändern, wir könnten das so strukturieren, wie Sie es wollen. Vielleicht wollen wir das hier nehmen und die erste Zeile, die wir sagen wollen, das ist die Seite für Save und wir gehen zurück zu hier und Sie können sehen, dies ist die Seite für Über uns und dann geht es weiter mit dem Inhalt. Nicht sehr praktisch, aber Sie können hier sehen, wir können diese beiden Variablen nehmen und wir können sie verwenden, wie wir wollen, das ist völlig anpassbar. Aber ich möchte Ihnen ein praktischeres Beispiel zeigen, und das ist in der Lage, einen Abschnitt in diese Vorlage aufzunehmen. Dafür werde ich meine eigene benutzerdefinierte Vorlage erstellen. Ich kann das tun, indem ich „Neue Datei“ gehe, und hier ist, wie Sie eine alternative Seitenvorlage erstellen würden. Sie tun Seite, dann würden Sie einen Punkt danach platzieren, und dann setzen Sie den Namen Ihres Alternativen ein. Meiner wird über sein und dann müssen Sie natürlich mit.liquid enden. Wenn eine Seite über, Ich werde den exakt gleichen Inhalt wie Seite kopieren, aber ich werde eine Änderung vornehmen und das heißt, ich möchte in einem Kartenabschnitt bringen. Wenn wir in unseren Abschnitten hier schauen, haben wir diesen Abschnitt namens Karte. Wie ich Ihnen in einem späteren Video zeigen werde, sind Abschnitte großartig, weil wir sie durch Vorlagen in jeden Bereich unserer Website ziehen können . Ich werde in einem Abschnitt hinzufügen, wie wir zuvor gesehen haben, die Abschnittskarte, drücken Sie Speichern und sehen, ob das funktioniert hat. Jetzt wird es einen zweistufigen Prozess geben, um diese Seite in die Vorlage „Über uns“ zu ändern. Das ist, was Sie erwarten würden, dass das Verhalten sein wird. Sie würden erwarten, in der Lage sein, hier rein zu gehen und einfach Ihre Info zu ändern. Sie haben es in Ihrem Theme-Code. Sie sollten in der Lage sein, hier zu gehen und dieses Vorlagen-Suffix zu aktualisieren. Nun, das gotcha hier und etwas, das Sie nur daran denken müssen, zu tun, wenn Sie jemals auf diesem Schritt erwischt werden, ist die alternative Vorlage muss tatsächlich auf dem Live-Thema als auch sein. Das ist kein Problem, es ist nur ein zusätzlicher Schritt. Wenn wir in unser aktuelles Thema gehen, klicken Sie auf Aktionen, klicken Sie auf Code bearbeiten. Wir können eine Vorlage mit dem gleichen Namen erstellen und es muss nicht den gleichen Inhalt haben. Es muss nur den gleichen Namen haben, so dass wir es aus diesem Admin-Bereich auswählen können. Ich weiß, das klingt albern, aber das ist, was Sie in Shopify tun müssen, weil dieses Seitenmenü hier, das ist für alles. Dies ändert nicht die Seiten, die Blog-Beiträge, die Sie auf Ihrer Website haben, basierend auf welchem Thema Sie haben. Dadurch wird die Frage beantwortet, warum es nicht mit dem von Ihnen veröffentlichten Thema zusammenhängt , da es die Vorlagen aus dem veröffentlichten Design abrufen wird. Auch hier denke ich, es sollte alle Vorlagen haben, die in allen Themen verfügbar sind, aber das ist einfach nicht, wie Shopify funktioniert. immer, nur ein bisschen ein bisschen ein Problem und die Art und Weise, wie wir umgehen können , ist das gleiche zu erstellen, aber wir verwenden diese Benutzeroberfläche hier auf der Shopify-Website und was wir tun können ist, wählen Sie einfach Seite und die alternate wird über aufgerufen, und dann wird Shopify es mit dem richtigen Namen, page.about.liquid, erstellen. Sobald das getan ist, können wir die Seite aktualisieren und wir können hier nach unten kommen, um Vorlage Suffix und wir haben diese Seite.about. Ich werde darauf klicken, klicken Sie auf Speichern. Wenn wir nun auf unsere Seite „Über uns“ zurückkehren, werden wir einen Kartenabschnitt darunter haben. Sieh dir das an, ist das nicht toll? Nun, was wir auch haben werden, weil wir in der Lage sein wollen, dies anzupassen. Leider können wir den Abschnitt innerhalb dieser Seite nicht innerhalb unserer Seiten anpassen , da wir nur Titel und Inhalte bearbeiten können, aber was wir tun können, ist diese Vorlage in unserem Theme-Customizer zu finden, indem Sie hier klicken. Leider ist es nicht da, wir werden nur die Seite aktualisieren. Klicken Sie wieder dort und wie Sie sehen können, haben wir diesen neuen Abschnitt hier für Seiten mit Über uns. Jetzt können wir hineingehen und wir sehen diesen Abschnitt hier, wir können tatsächlich gehen und den Abschnitt bearbeiten. Store ist der Skillshare Store oder was auch immer Sie es auf Fake St. Toronto, Kanada nennen möchten und Sie können dort ein Bild hinzufügen oder was auch immer Sie wollen. Das ist ein großartiges Beispiel dafür, dass Sie vielleicht einen Abschnitt in eine bestimmte Seite einfügen möchten. Sie möchten nicht, dass dies auf allen Seiten geschieht, so dass Sie eine alternative Vorlage erstellen und dann können Sie diese alternative Vorlage auf jeder Seite aufrufen. Denken Sie daran, ich sagte, dass ich auch über alternative Layouts sprechen würde , denn was ist der Sinn, diese Layoutdatei hier in einem Ordner zu haben , wenn Sie das Layout nicht ändern können? Die Art und Weise, wie wir dies tun, ist auch in der Seitenvorlage. Wir haben zu Beginn der Vorlage ein wenig Flüssigkeit zu verwenden. Wir werden ein wenig Flüssigkeit zu Beginn unserer Vorlage verwenden, um das Layout aufzurufen, das wir verwenden möchten. Wie ich schon sagte, standardmäßig ist es theme.liquid, aber wir können eine andere wählen, wenn wir es so wählen. Was ich tun werde, ist, dass ich das in jeder Reihenfolge tun kann. Dies ist wahrscheinlich die Rückwärtsreihenfolge, aber was ich tun kann, ist, dass ich zuerst das Tag schreiben und dann das Layout erstellen kann. Ich werde das nackt nennen, und der Grund, warum ich eine Reihe von Sachen aus dem Standard-Theme.liquid entfernen werde. Ich werde ein Duplikat davon erstellen und anstelle von theme.liquid werde ich es naked.liquid nennen und ich werde die Kopf- und Fußzeile entfernen. Frag mich nicht, warum ich das tue. Ich mache es nur zu Demonstrationszwecken. Wenn ich auf Speichern auf, dass, wenn ich zurück hier, keine Fehler und ich aktualisieren Sie die Seite, weil denken Sie daran, dass wir bereits mit dieser Vorlage. Sie werden sehen, dass die Kopf- und Fußzeile verschwunden sind und das liegt daran, dass ich diese bestimmte Vorlage signalisiert habe , um das Layout von nackt zu verwenden. Genau hier setzen wir ein alternatives Layout basierend auf dem theme.liquid, das das Standardlayout ist. Entfernen Sie die Kopf- und Fußzeile davon. Jetzt sind wir in der Lage, das Layout für diese bestimmte Vorlage zu aktualisieren. Das ist im Grunde die wichtigsten Punkte mit Theme-Vorlagen und Theme-Layouts. Finishing auf dem Diagramm hier, hoffentlich beginnt dieses Diagramm jetzt ein bisschen mehr Sinn zu machen. Wir haben den Header-Inhalt, von Präferenzen und anderen Bereichen kommt, die in unser Layout kommen. Wir haben den Inhalt für das Layout, das bringt in die Vorlage und dann können wir Abschnitte entweder in der Vorlage oder im Layout kleben und wir können auch Snippets in überall kleben. Im nächsten Video gehen wir hier weiter in die Kette, sprechen über Abschnitte und Snippets. Snippets sind ziemlich einfach, aber Abschnitte sind wirklich spannend und leistungsstark. Ich denke, wir können beide im nächsten Video abdecken. Ich freue mich, Ihnen das zu zeigen und diesen Abschnitt über den Theme-Code abzuschließen. Wir sehen uns im nächsten Video. 11. Theme Code – Abschnitte und Snippets: In dieser Lektion gehen wir über Abschnitte und Snippets. Offensichtlich haben wir in den vorherigen Lektionen bereits Abschnitte und Snippets angesprochen . In der Tat wird es einige Überlappungen in dieser ganzen Struktur geben, aber lassen Sie uns tiefer darüber eingehen, genauer über Abschnitte und Schnipsel in dieser Lektion zu sprechen . Eine der Vorlagen, die ich Ihnen in der vorherigen Lektion nicht gezeigt habe , war die Vorlage für die Homepage, was interessant ist. Wenn ich in ADAM zurückgehe und Sie hier sehen können, verwendet Sammlung diese Auswahl-Sammlungsvorlage. Ich muss das aus Versehen reingesteckt haben, lassen Sie mich das retten. Wenn Sie auf viele von ihnen gehen, haben sie entweder eine Reihe von eigenen benutzerdefinierten Inhalten oder sie verlinken nur auf einen Abschnitt wie die Sammlungsseite, nur Links zu der Sammlungsvorlage, die Blogseite geht nur zur Blogvorlage. Wie wir bald herausfinden, so dass wir die Funktionen der Abschnitte verwenden können , die Customizing im Customizer enthalten. Wir hatten uns das ein wenig angesehen, aber ich möchte Ihnen zuerst die index.liquid Vorlage zeigen. Dies ist die Vorlage, die auf unserer Homepage geladen und es enthält diesen dynamischen Tag-Inhalt für den Index. Wenn wir zurück zu Owl Theme-Struktur, Ich hatte diese Vorlage mit Inhalten aus Index verknüpft, aber ich löschte es zu Beginn von zwei Lektionen vor. Das liegt daran, dass es nicht mit jeder einzelnen Vorlage zusammenhängt, aber es wird in einer Vorlage angezeigt, und das ist die Homepage-Vorlage. Aber weißt du was, ich könnte falsch liegen, weil wir vielleicht Inhalte für den Index in jede Vorlage einfügen könnten . Lassen Sie uns dieses Experiment jetzt ausführen und ehrlich gesagt, ich habe das noch nie versucht, also weiß ich nicht, ob es funktionieren wird, aber mal sehen, ob wir das einfach in eine unserer Vorlagen schieben können. Das ist die Sammlungsvorlage. Wenn ich in meinen Customizer gehe. Seien Sie interessant zu sehen, was mit diesem dynamischen Tag passiert. Irgendwelche Fehler in unserer Themen-Uhr? Nein. Lassen Sie uns in die Liste der Sammlungen gehen. Tut mir leid, das ist das Falsche. Wir wollen Sammlungsseiten. Interessanterweise haben wir hier diesen Abschnitt , der hart in die Sammlung eingeschrieben ist. Aber dann haben wir auch die Auswahl, die wir auf unserer Homepage Inhalt für Index hatten, die es uns ermöglicht, Abschnitte dynamisch hinzuzufügen, zu entfernen und zu bestellen. Ziemlich cool. Ich habe das noch nie versucht und ich weiß nicht, ob das zu praktisch ist, aber wie es standardmäßig eingerichtet ist. Ich werde das wieder so machen, wie es vorher war. Ist auf der Homepage, haben Sie diesen Inhalt für Index. Vielleicht muss ich das Ding wieder in mein Diagramm setzen, wo wir gehen. Sie haben Zugriff auf dieses super tolle Tag namens Inhalt für Index, dem Sie eine dynamische Liste von Abschnitten haben können und wenn es sinnvoll ist, für Sie auf eine andere Seite als die Homepage zu setzen. Fühlen Sie sich frei, dies zu tun , aber auf der Homepage haben Sie standardmäßig Inhalte für den Index. Jetzt können Sie natürlich gehen und diese Vorlage wie jede andere Vorlage erstellen. Diese Vorlage ist hier für Sie, um sie zu verwenden, muss nicht nur Inhalt für den Index sein, aber der Inhalt für den Index ist cool, weil wir, wie ich bereits erwähnt, Abschnitte hinzufügen können . Jetzt werden wir tiefer in Abschnitte in einem späteren Video gehen, indem wir unseren eigenen Abschnitt erstellen und dann werden Sie wirklich die Macht der Abschnitte lernen. Aber jetzt tauchen wir in den Code eines von ihnen ein. wir haben bereits ein bisschen in das eingegangen, aber wenn wir in Vorlagen gehen und uns eine Vorlage für den Warenkorb ansehen, ist alles in einem Abschnitt enthalten. Wenn wir hier Abschnitt für Warenkorb Vorlage gehen, dann haben wir alles, was in unserem Warenkorb Seite mit einem Schema zur Bearbeitung angezeigt wird. Dies ist im Grunde der Teil, der Abschnitte von anderen Dateien in Owl Theme-Code trennt . Das Schema mag zunächst ein wenig entmutigend aussehen, aber es ist eine erstaunliche Möglichkeit, anpassbare Optionen hinzuzufügen, die wir in unserem gesamten Code hier verwenden, und wir erlauben dem Benutzer, sie zu bearbeiten. Wie Sie hier sehen können, gibt es eine Reihe verschiedener Sprachdaten und dies konvertiert das Label oder den Namen des Schemas basierend auf Ihrer Sprache. Aber Sie müssen das nicht tun, Sie können dieses Objekt einfach alle zusammen loswerden. Wenn Sie es nur in einer Sprache tun wollen, können Sie Seite ausgeschnitten haben. Die meisten Themen, an denen ich tatsächlich arbeite, sind so. Es gibt nicht so viele verschiedene Optionen für Sprachen. Ich werde dieses Objekt einfach loswerden und es vereinfachen und Sie können hier sehen, wir haben die oberste Ebene unseres Schemas. Wir haben den Namen dieses Abschnitts, Einstellungen, und dann haben wir in unseren Einstellungen alle verschiedenen Einstellungen, die wir ändern können. Genau wie wir hier in unserem settings.schema hatten, können wir für jeden einzelnen Abschnitt ein Schema erstellen und dann nur diese Optionen aufrufen, wenn wir sie brauchen. Es funktioniert in ähnlicher Weise wie das Schema in unserem Einstellungsschema, dies ist für das gesamte Thema. Wenn wir in einen bestimmten Abschnitt gehen, was hatten wir vorher? Wir hatten Sammlungsvorlage, nicht wahr? Wie auch immer, es spielt keine Rolle. Sie sind alle ähnlich, wie sie funktionieren. Es war nicht dieser hier, aber lassen Sie uns auch einen Blick darauf werfen. Wir haben einen Namen, Sammlungsseiten, und hier sind unsere Einstellungen. Wir haben verschiedene Eingabetypen hier, und die verschiedenen Eingabetypen, die wir zur Verfügung haben, können wir jetzt übergehen. Ich werde nur in die Dokumentation gehen. Tippen Sie einfach in Google, Shopify-Eingabetypen, Konfigurieren von Themeneinstellungen. Lassen Sie mich sehen, ob dies das Dokument ist, nach dem wir suchen. Eingabe-Einstellungen, wenn ich das anklicke, gehen wir. Jetzt haben wir in der Dokumentation die verschiedenen Eingabeeinstellungen. Sie können verschiedene Eingaben erstellen, basierend darauf, ob wir Texte verwenden werden, ob wir ein Bild auswählen, ob es eine wahre oder falsche boolesche Auswahl wie die eine oder andere sein wird, ob es sich um eine Auswahl handelt , Kontrollkästchenbereich. Wir können sehen, dass dies funktioniert, wenn wir in unseren Customizer gehen und wir können uns die reiche Auswahl an verschiedenen Eingabetypen, die wir hier haben, ansehen. Das wird ein Bild eins sein. Wenn ich hier gehe, wird das Bildauswahl sein. Ich gehe zurück zu meinem Customizer, das sind Auswahlen. Wenn ich hier reingehe, ist das ein Text. Dies ist ein Textbereich, und dies ist tatsächlich ein Link- oder URL-Feld. Lassen Sie mich den Namen auf diesem überprüfen, um zu sehen, ob es sich um einen Link oder URL, Link-Liste handelt. Es gab eine URL. Also der Eingabetyp für diesen , der hauptsächlich wie ein Standard-Lehrbuch aussieht, ist es aber nicht. Wenn Sie tatsächlich darauf klicken, kommen einige Optionen auf und wir können das mit dem Eingabetyp der URL einstellen. Ok? Also schauen wir uns die Diashow an, okay? Weil das ein ziemlich gutes Beispiel ist. Wenn ich hier hineingehe und diesen Abschnitt in unserem Theme-Code finde. Und ich schaute nach unten auf das Schema. Dieses Schema stellt direkt dar, was hier vor sich geht. Wenn ich also die Dinge oben anschaue, muss es einen Namen haben und es muss Einstellungen haben. Der Name ist also Diashow, und das kommt hier auf. Die Klasse ist für die Einstellung von CSS-Klassen auf dem eigentlichen Abschnitt. Also können wir es hier nicht sehen, aber es ist da drin. Und dann gehen wir in unsere Einstellungen. Okay, das wird unsere erste Kulisse sein. Und es ist wählen Sie die ideale Diashow-Höhe und das Etikett ist Folienhöhe. Also, wenn wir hier reingehen, da ist es, Schiebehöhe. Und was definiert dann diese Optionen hier? Nun, das ist auch im Schema. Und wir können zu diesem Feld namens Optionen gehen. Und dann haben Sie hier eine Liste von Optionen. Auch hier haben Sie so viele Sprachinformationen, die es nur verwirrend machen. Also werde ich nur etwas davon löschen, um es für euch einfacher zu machen. Wir sprechen hier alle Englisch. So werden Sie immer noch in der Lage sein zu verstehen, was hier vor sich geht, ohne es auf so viele verschiedene Sprachen einzustellen. In Ordnung, also erste Option, das Etikett ist ein erstes Bild anzupassen und der Wert, wenn sie das auswählen, wird angepasst werden. Ok? An das erste Bild anpassen. Und dann wird es diesen Wert setzen, den der Benutzer nicht sieht. Aber das ist der Wert, den wir in unseren Vorlagen betrachten können. Wenn ich jetzt nach adaptieren suche, sehe ich, dass, wenn wir nach suchen, das kein großartiges Beispiel ist. Aber wir müssen einen Blick darauf werfen, wo das verwendet wird. Lassen Sie uns einfach nach der Diashow-Höhe suchen , weil es keinen Sinn hat, sie zu setzen, wenn sie nicht im Code verwendet wird. Das sollte also irgendwo anders im Code sein. Und Sie können hier sehen, wir können diese Option aufrufen, indem Sie es zuerst Objektabschnitt aufrufen, dann in Einstellungen gehen und dann nach der Diashow-Höhe suchen. Und tatsächlich gab es Adapter genau dort. Es sagt also, ob die Diashow-Höhe eingestellt ist, um sich anzupassen, diese Option, die wir uns vorher angesehen haben. Hier, passe dich an. Dann wollen wir das alles machen, okay? Wir verwenden also den Wert, den wir in unserem Schema festgelegt haben , den der Benutzer hier bearbeiten kann. Und wir setzen das direkt in den Code. Also hoffentlich könnt ihr anfangen zu sehen, dass das wirklich mächtig ist. Sie können eine Reihe von Anpassungen in Ihrem neuen Code erstellen, die Sie einmal erstellt haben, tatsächlich hier eingehen und eine Benutzeroberfläche verwenden können, um mit der zu interagieren. Und das wird gut sein, wenn Sie eine Website zum Beispiel einen Kunden entwickeln. Und es wird gut sein, auch nur für dich selbst. Sie bauen es einmal und dann müssen Sie nicht mehr in den Code gehen. Es ist eine Option, die Sie anpassen können. Vielleicht möchten Sie es immer wieder zurückwechseln, das ist eine Option für Sie. Also weiß ich, dass das Schema ein bisschen verwirrend aussehen könnte und ehrlich gesagt, wenn Sie beginnen, in tieferen Ebenen verschachtelt zu werden, beginnt noch schwieriger zu lesen. Aber im Laufe der Zeit sollten Sie anfangen, das, was Sie hier sehen, mit dem zu verbinden , was Sie hier sehen. Und es sollte einfach sein, mehr Optionen zu erstellen. In Ordnung? Also, als Beispiel, was ist etwas, das wir dieser Diashow als Anpassung hinzufügen können ? Vielleicht möchten wir die Textgröße ändern. Das war meine Idee, aber jetzt sehe ich, dass es schon fertig ist. Ja, alles, was Sie im Grunde über alle ändern möchten oder uns eine Anpassungsoption im Customizer geben möchten, können Sie in Ihrem Schema einrichten und dann in Ihrem Abschnittscode referenzieren. Alles klar, nur um zusammenzufassen, wie wir Abschnitte verwenden können. Wir können sie entweder im Inhalt für den Index auswählen. Wir können sie speziell im Code in eine Vorlage schieben, oder wir können den Abschnitt in ein Labor schieben. Und natürlich, Kopf- und Fußzeile, warum sie auf jeder Seite erscheinen, ist, weil sie Abschnitte im Layout enthalten sind. Diese Kopf- und Fußzeilen werden auf jeder Seite sein, es sei denn, wir gingen rein. Und sagen wir, wir haben Abschnittskopf von theme.liquid gelöscht. Wir aktualisieren die Seite. Nachdem wir bestätigt haben, dass die Seite aktualisiert wurde, laden wir die Seite neu. Wir werden jetzt sehen, dass Header weg ist und es ist für jede Seite weg, die diese Vorlage verwendet, die, wie ich bereits erwähnt habe, für theme.liquid Standard ist. Also auch Kopf- und Fußzeile, die Sie in das Designlayout einfügen, ist ein Abschnitt als auch. Wenn Sie zum Diagramm zurückkehren, können Sie Abschnitte dynamisch in den Inhalt für den Index einfügen, in Vorlagen, indem Sie sie hart codieren, oder auch in Layouts, indem Sie sie hart codieren. Und nur um zusammenzufassen, wie wir das machen, ist es nur mit diesem flüssigen Tag hier. Die geschweiften Klammern, der Abschnitt Prozentzeichen und dann der Name des Abschnitts. Also, hoffentlich bekommen Sie es jetzt, dass Abschnitte ziemlich mächtig sind und sie sitzen irgendwie im Herzen Ihres Themas. Wie ich bereits erwähnt habe, werden wir unsere eigene Abteilung bauen, und das wird Ihnen diese Theorie ein bisschen mehr zuschlagen. So werden Sie einige Erfahrungen mit diesem Abschnitt sammeln und wirklich lernen, die Macht und wie Sie Ihre eigenen benutzerdefinierten Abschnitte entwickeln können. Aber wir haben noch eine Sache zu übergehen, und das sind Snippets. So Snippets, Sie können sich fast wie ein dummer Abschnitt vorstellen. Grundsätzlich nur ein Stück Code, den Sie auf verschiedenen Teilen Ihrer Website wiederverwenden möchten. Normalerweise ist hier drin nichts zu schickes los. Alles, was es tut, ist zu bringen, sagen wir, das sind Produkte. Wie heißt das hier? Produkt-Preis.liquid. Wenn ich also in meinem Thema suchen möchte, im Ordner nach Produktpreis suchen möchte, wird es mir alle Referenzen zeigen und ich kann hier sehen, wo dieses Snippet enthalten ist. Also, ich kann in die Sammlung zu gehen.Flüssigkeit. Und Sie können hier sehen, dass ich das Snippet einschließe. Also, wenn ich den Inhalt hier bearbeiten wollte, muss ich in das Snippet eintauchen und diesen Code innerhalb des Snippets bearbeiten. Nur um Ihnen zu zeigen, dass Sie im Grunde unser eigenes Snippet erstellen, basierend auf Inhalten, die wir bereits haben. Sagen wir einfach, wir wollten einen Abschnitt in hier wiederverwenden und es war nur sinnvoller, ihn als Snippet zu haben. Sagen wir einfach, wir wollen, dass diese Suchschublade ein Snippet ist. Also könnte ich das alles nehmen, es entfernen. Legen Sie ein flüssiges Etikett. Richtig. Fügen Sie Suchschublade ein. Also nenne ich es Suchschublade. Okay, speichern Sie das und stellen Sie sicher, dass Sie den Code in Ihrer Zwischenablage gespeichert haben. Oder Sie können einfach Strg+Z, um es zurück zu bekommen. Und was ich tun werde, ist, gehen Sie voran und erstellen Sie dieses Snippet jetzt. Also werde ich es mit dem exakt gleichen Namen nennen, den ich neben dem Include gesetzt habe. Suche drawer.liquid. Vergiss die Flüssigkeit nicht, und ich lege sie da rein. Also, jetzt, wenn wir zurück zu unserer Website gehen. Ich frage mich, ob das immer noch das Nackte benutzt, dass man immer noch das nackte Layout benutzt. Aber wenn wir zurück zu unserer Homepage gehen, haben wir wieder einen Header. Und die Suchschublade ist, was auftaucht, wenn Sie darauf klicken, glaube ich. Lasst uns das einfach überprüfen . Es ist hier oben. Suche Schublade ist dieses Ding, das oben kommt. Und Sie können sehen, obwohl der Code nicht mehr da drin ist, fügen wir ihn immer noch aus einer anderen Quelle ein. Wie Sie sehen können, könnten Sie wirklich ohne Snippets davonkommen, aber es ist eine wirklich gute Praxis, sie zu verwenden, wenn Sie Code wiederverwenden möchten oder vielleicht nur diese Datei bereinigen möchten und nicht so viele verschiedene Komponenten darin haben. Vielleicht liest sich das ein bisschen besser für dich. Also, Sie gehen in Ihre theme.liquid, Sie sehen alles beinhaltet Suche Schublade, dann geht es in die Kopfzeile. Ok, cool. Auf der anderen Seite bedeutet dies, dass Sie mehr Dateien finden müssen , wenn Sie mehr Snippets verwenden. Also, das ist der Handel da draußen mit der Verwendung von Snippets. Ist Sie bekommen, um sie in einem schönen kleinen Ort, den Sie später wiederverwenden können. Aber dann wirst du offensichtlich reingehen und das Snippet finden müssen, was ich jetzt versuche. Und du wirst es dort bearbeiten müssen, cool. Das deckt so ziemlich alles in diesem Diagramm ab. Also, wir haben über Layout gesprochen, wir haben über diese dynamischen flüssigen Tags, Header-Inhalt und Inhalt für den Index gesprochen . Wir haben über Inhalte für Layout gesprochen. Und wir haben darüber gesprochen, wie die vier Hauptbereiche Ihres Themas, Layouts, Vorlagenabschnitten und Snippets miteinander interagieren. Und sobald Sie anfangen, mit Shopify herumzuspielen, macht es wirklich Sinn, warum es auf diese Weise erstellt wird. Und es gibt Ihnen eine gute Struktur, um wirklich alles zu tun, was Sie mit Ihrem Thema wollen. Also ist es wirklich cool. Die eine Sache, die Sie durch all das verwirrt haben könnte, ist natürlich die Flüssigkeit. Also haben wir eine Menge von dieser Templating-Sprache gesehen, die als flüssig bezeichnet wird. Hier ist ein tolles Beispiel, viel Flüssigkeit hier drin. Im nächsten Video tauchen wir tief in Flüssigkeit ein. Also, keine Sorge, wir werden abdecken, was mit diesem flüssigen Code vor sich geht. Vielleicht nicht speziell auf dieser Vorlage, aber wir werden über Flüssigkeit im nächsten Video sprechen. Also, ich freue mich, auf diese Reise fortzusetzen, und ich werde Sie im nächsten Video sehen. 12. Theme Code – JSON-Vorlagen: In diesem Video werden wir über JSON-Vorlagen sprechen. JSON-Vorlagen sind eine neuere Alternative zu Liquid Templates, die für eine größere Flexibilität im Theme-Editor sorgen, so dass wir reorderable Abschnitte im Admin nicht nur für die Homepage, sondern auch für die anderen Vorlagen erstellen können. Wenn wir uns die Indexdatei im vorherigen Standardthema von Shopify Debut ansehen, sehen Sie den Tag-Inhalt für den Index. Dieses Tag generiert dynamisch unsere Homepage basierend auf einer Liste von Abschnitten. Diese Liste der Abschnitte können wir sowohl im Admin, als auch innerhalb der Datei settings_data.json bearbeiten . Wenn Sie die Datei settings_data.json auschecken, sehen Sie hier die Liste der Abschnitte auf der Homepage unter dem aktuellen Objekt. Wenn ich zum Inhalt für den Index scrolle, können Sie sehen, dies ist die Liste der Abschnitte, die auf der Homepage für dieses bestimmte Thema erscheint. Beachten Sie, wenn wir hier zur index.liquid-Datei zurückkehren, gibt es keinen flüssigen Code in dieser Datei außer diesem singulären Tag-Inhalt für den Index. Was passiert, wenn wir anstelle dieses Tags hier die Liste der Abschnitte gespeichert haben, die wir auf settings_data.json in dieser Datei gefunden haben ? Dies ist im Wesentlichen, was Shopify in ihrem neueren Thema, Dawn, getan hat. Wenn ich zu dem Dawn-Theme navigiere, das ich hier gespeichert habe, klicken Sie auf Code bearbeiten, Sie werden sehen, dass die Indexvorlage jetzt eine JSON-Datei ist. Genau wie unsere settings_data.json Datei in unserem Debut-Thema können Sie sehen, dass ähnliche Daten jetzt in der Vorlage selbst vorhanden sind. Hier ist die Reihenfolge der Abschnitte, genau wie wir im Inhalt für Index-Array auf dem vorherigen Thema hatten, das wir uns angesehen haben. Die Indexvorlage ist jetzt eine JSON-Datei, in der die Liste der Abschnitte sowie die Produktvorlage, die Artikelvorlage, die Seitenvorlageusw. gespeichert die Produktvorlage, die Artikelvorlage, die Seitenvorlage werden. Dies ist es, was reorderable Abschnitte in allen unseren Vorlagen jetzt ermöglicht, nicht nur die Homepage-Vorlage. Die Folge davon ist, dass Sie den gesamten flüssigen Code, der möglicherweise in diesen Vorlagen gespeichert wurde , stattdessen in Abschnitte verschieben müssen, selbst wenn Sie nur einen Abschnitt in Ihrer Vorlage haben möchten. Werfen wir einen tieferen Blick auf den Code, der in diese JSON-Vorlagen geht. Hier habe ich das Dämmerungs-Thema, das ich früher in dieser Klasse eingerichtet habe. Es ist genau das gleiche wie das Dawn Hauptthema mit einer kleinen Bearbeitung, aber scheinbar ist es veröffentlicht und es ist genau hier, ich werde dieses bearbeiten. Wenn ich in Code bearbeiten gehe und dann hier klicke, um eine neue Vorlage hinzuzufügen, wird Ihnen jetzt eine Option angezeigt, um Ihre Vorlage entweder als flüssige Vorlage oder als JSON-Vorlage zu erstellen . Lassen Sie uns die JSON-Option hier auswählen, und anstelle von Artikel werde ich dies auf Produkt umstellen. Wir haben product.json, und ich werde es mit diesem Standardnamen alternate belassen. Lassen Sie uns das erstellen und wie wir vor ein paar Videos über Vorlagen gesehen haben, können wir auch alternative Vorlagen mit JSON erstellen. Ich werde Ihnen zeigen, wie das in der neuesten Theme-Customizer in nur einer Sekunde angezeigt wird. Nun, wie immer, was ich gerne mache, ist, die Dokumentation zu öffnen und wir hatten das gerade vor einer Sekunde auf unserem Bildschirm. Gehen wir jetzt zurück, und was ich tun werde, ist, diese Seite an Seite zu stellen. Legen Sie das nach links und dann werde ich das schließen, das nach rechts stellen und unseren Code vergrößern. Leider scheint es, dass ich das nicht loswerden kann, also werde ich das einfach überlegen, und da gehen wir. Lassen Sie uns über JSON-Vorlagen lesen. Wie hier steht, können Sie mit JSON-Vorlagen das Aussehen verschiedener Seiten des Online-Shops mithilfe von Abschnitten steuern , und es handelt sich nun um Datendateien, die die Liste der zu rendernden Abschnitte speichern , anstatt Vorlagen, die Flüssiger Code. Ich ermutige Sie, alles auf dieser Seite zu lesen, aber lassen Sie uns zu den wichtigen Dingen, der Template-Struktur, scrollen. JSON-Vorlagen müssen gültige JSON-Dateien sein, der Stamm sollte ein Objekt mit den folgenden Attributen sein, also haben wir einige hier, die erforderlich sind, und einige hier, die nicht obligatorisch sind. Offensichtlich müssen wir die erforderlichen Felder in unserem Objekt hier drüben ausgefüllt haben . Aber für diejenigen, die nicht obligatorisch sind, müssen wir sie nicht unbedingt in das Objekt setzen, aber wir können es, wenn wir wollen. Wie Sie hier sehen, ist dies bereits mit dem Objekt eines Abschnitts und einem Order-Array gefüllt. Was fehlt, ist die Namenszeichenfolge hier, also werde ich das jetzt hinzufügen. Name, und ich werde es Alternate Template nennen , weil ich im Moment nichts anderes einfallen kann. Lassen Sie uns auf Speichern drücken, stellen Sie sicher, dass wir keine Probleme haben. Los geht's. Abschnitte können nicht leer sein und die Reihenfolge kann nicht leer sein. Daher erhalten Sie dies, wenn es gestartet wird. Aber wenn Sie versuchen, es zu speichern, wird es mit einem Fehler kommen. Um diese Fehler zu beheben, müssen wir dieses Objekt und dieses Array ausfüllen. Ich werde dieses Objekt öffnen und innen, was wir tun müssen, ist ein Abschnittsobjekt zu erstellen. Was wir tun müssen, bevor wir das tun, ist zu entscheiden , in welchen Abschnitt wir laden werden, weil wir mindestens einen Abschnitt benötigen, und im Dawn-Thema haben wir einen Abschnitt namens Hauptprodukt, der auch in der Hauptproduktvorlage geht. Lasst uns das einfach benutzen, und so werde ich das eine Haupt nennen. Lassen Sie uns ein Objekt für diesen Hauptabschnitt öffnen und hier drinnen, was wir tun, ist Scrollen nach unten und schauen Sie sich die Abschnittsdaten an. Auch hier haben wir diese Tabelle der verschiedenen Felder, die erforderlich sind, und im Grunde alles, was innerhalb dieses Abschnitts selbst erforderlich ist, es sei denn, wir kommen in Blöcke, ist der Abschnittstyp. Wie hier steht, ist es der Dateiname dieser Abschnittsdatei, die ohne die Erweiterung gerendert werden soll. Das ist sehr einfach. Alles, was wir tun müssen, ist das Hauptprodukt ohne die.liquid hier reinzubringen. Wir haben Typ und dann innerhalb Typ, wir haben Hauptprodukt. Nun, natürlich, der andere Fehler, den wir beheben müssen, ist, dass die Reihenfolge nicht leer sein kann, also müssen Sie einfügen, selbst wenn es nur einen Abschnitt gibt, wir müssen in das, was hier ist , den Namen, wie wir hier im Abschnittsobjekt definiert haben, wir müssen das in unser Order Array setzen. Wenn ich auf Speichern klicke, sollten wir keine Fehler bekommen. Wir sind alle gut, und jetzt, wenn ich gehe zu Customize Thema, öffnen Sie das, Ich werde zu öffnen, um dies zu voll, minimieren ein wenig, und klicken Sie dann hier oben, um die Vorlage, die wir bearbeiten zu wählen. Ich werde in Produkte gehen. Hier können Sie die alternative Vorlage sehen, die wir gerade erstellt haben, die wir einfach alternate genannt haben. Wenn ich darauf klicke, werden Sie jetzt sehen, dass wir diese Produktinformationen Abschnitt hier haben , die in der Tat Haupt ist. Wir haben jetzt unseren Abschnitt hier und wir können damit beginnen, neue Abschnitte hinzuzufügen. Es ist wichtig zu beachten, dass alle Änderungen, die wir hier vornehmen , jetzt in der Vorlage selbst gespeichert werden , da diese JSON-Vorlage die Liste der Abschnitte speichert und auch die Einstellungen speichert. Jetzt müssen wir nicht mehr so viele Daten in dieser einen JSON-Datei gespeichert werden. Die Daten für jede einzelne Vorlage und ihre Anpassungen werden in der Vorlage selbst gespeichert. Selbst wenn wir auf settings_data.json klicken, sehen Sie, dass dieses aktuelle Objekt komplett leer ist , da diese Daten in die spezifische Produktvorlage verschoben wurden. Was ich hier tun werde, ist in einem zusätzlichen Abschnitt hier hinzuzufügen, und Sie werden dies im Customizer sehen. Ich werde dieses Objekt hier kopieren und was sollen wir hinzufügen? Lassen Sie uns in einem Newsletter-Abschnitt hinzufügen. Wir werden nur diesen Newsletter anrufen und dann innerhalb des Typs, denken Sie daran, dass wir den Namen der tatsächlichen Datei abzüglich der.liquid verwenden müssen. Newsletter.liquid, entferne die.iiquid und da ist unser Typ genau da. Natürlich müssen wir das zu unserer Bestellung hier hinzufügen, also werde ich Komma hinzufügen und dann werde ich Newsletter setzen. Ich werde auf Save drauf drücken. Jetzt gehen wir zu unserem Customizer und aktualisieren, stellen Sie sicher, dass wir auf der alternativen Vorlage sind, und hier können Sie sehen, wir haben Produktinformationen und E-Mail-Anmeldung. Denken Sie daran, dass ich sagte, dass alle Änderungen, die wir hier vornehmen , auch in unserer Datei wiedergegeben werden. Sie haben gerade gesehen, dass wir hier eine Bearbeitung an der Datei selbst vorgenommen haben und diese Änderungen wurden im Theme-Editor widergespiegelt. Nun, es funktioniert in beiden Richtungen in dem Sinne, dass, wenn wir die Reihenfolge dieser ändern oder Blöcke hinzufügen, es auch in der Datei reflektiert wird. Wenn ich auf Speichern klicke, bestelle ich die E-Mail-Anmeldung über den Produktinformationen neu. Dies ist sowieso alles kaputt, aber wir werden hier aktualisieren, und wie Sie sehen können, haben wir jetzt Newsletter zuerst und Haupt zweite in unserer Reihenfolge, und wir haben auch einige Standardeinstellungen zu unserem Objekt hier hinzugefügt. Ich werde Newsletter eingeben, die wir vorher hatten. Es ist jetzt an der Spitze und wir haben einige Standardeinstellungen in diesem Einstellungsobjekt aufgefüllt. Wie ich bereits erwähnt habe, haben wir hier eine bidirektionale Datenbindung, also wenn ich dies hier ändern würde, würde es sich im Customizer widerspiegeln. Wenn ich bis zur E-Mail-Anmeldung gehe, können Sie alle diese Farbschemata sehen, Hintergrund eins, Hintergrund auch. Ich gehe davon aus, dass die ID für die zweite Hintergrund-2 ist, also werde ich das in der Datei selbst ändern. Drücken Sie auf Speichern, gehen Sie zurück in die Customizer-Aktualisierung und Sie werden sehen, dass Hintergrund 2 jetzt gespeichert ist. Dann kann ich das wieder in Hintergrund 1 ändern, gehen zurück hierher und Sie werden sehen, dass diese Einstellung in der Datei gespeichert ist. Der Paradigmenwechsel ist dies. JSON speichert Daten, wobei Liquid Dateien flüssigen Code enthalten. Hier können Sie sehen, dass das neue System von Vorlagen als Daten hat, nicht flüssig. Das ermöglicht es uns, sie dynamischer zu machen und sie so zu gestalten, dass wir unsere Abschnittsdaten und Abschnittsreihenfolge im Customizer bearbeiten können. Dies ermöglicht es uns, dies auf jeder Vorlage jetzt zu tun, da wir Vorlagendaten auf der Vorlage selbst. Nun, was wir haben, sind Daten in Vorlagen statt Liquid gespeichert, und was das uns erlaubt, ist Anpassung auf jeder Seite zu haben, während wir früher in Abschnitt-Tags in verschiedenen Teilen des Liquid Codes hart codieren, um zu sagen Legen Sie den Abschnitt hier. Jetzt sind es nur Daten und es ist viel dynamischer. Eine weitere Sache, die hier zu beachten ist, sind die Blockdaten, und ich empfehle nicht, dies manuell in der Datei zu tun. Gehen Sie einfach direkt in Ihren Customizer hier, Block hinzufügen. Nehmen wir an, wir wollen hier eine Überschrift haben, abonnieren Sie unsere E-Mail. Dies sind alle Standardeinstellungen und setzen Sie es in E-Mail-Form. Lassen Sie uns auf Speichern drücken und schauen wir uns einfach an, wie sich das auf unser JSON-Objekt auswirkt. die Seite hier aktualisieren, werden Sie sehen, dass genau wie es in der Dokumentation mit den Blöcken und usw. steht. Lassen Sie mich das hier überziehen. Sie können sehen, dass wir eine Blockkennung für den Block haben. Wir haben den Blocktyp, der willkürlich ist. Es ist genau was auch immer Ihr Code reagiert und dann haben wir ein Einstellungsobjekt, um die Einstellungen in diesem Block zu speichern. Die gesamte Dokumentation ist hier, und unsere Dokumentation kann für einige Anfänger schwer zu lesen sein, daher, warum ich hier bin, um dieses Tutorial. Aber im Wesentlichen sind die wichtigsten Punkte, die hier zu verstehen sind, dass wir Daten speichern, nicht Liquid Code in unseren Vorlagen, wenn wir JSON verwenden. Dies ist der Weg vorwärts, so dass wir die größtmögliche Flexibilität für unsere Administratoren haben können , hier zu gehen und zu bearbeiten, was sie wollen und Abschnitte in verschiedenen Vorlagen neu anzuordnen. Es war eine große Frustration Shopify-Benutzer eine Homepage haben, auf der sie Abschnitte wie diese Funktion für eine lange Zeit auf der Homepage neu bestellen können , aber es ist nicht auf anderen Vorlagen verfügbar bis jetzt, bis JSON-Vorlagen und dies ist die Technologie, die es ermöglicht. Natürlich können Sie auch weiterhin Liquid Templates verwenden, wenn Sie dies wünschen. Aber wir haben jetzt diese JSON-Vorlagen und Sie werden anfangen zu sehen, dass dies im Laufe der Zeit die moderne Art ist, dies zu tun. Daher habe ich diesen Abschnitt der Klasse hinzugefügt. Alle Fragen, natürlich, lassen Sie sie in den Kommentaren, und im nächsten Video, werden wir ein wenig tiefer in Shopify Flüssigkeit eintauchen. 13. Liquid: Shopify’s ’Programmiersprache’: Na gut, Leute, willkommen zurück. In dieser Lektion werden wir alles über Liquid sprechen. In den vorherigen Lektionen haben wir uns unseren Theme-Code angesehen und über die Struktur gesprochen, und ich habe Ihnen dieses Diagramm gezeigt, aber während unseres Theme-Codes, wenn wir zu einem unserer Vorlagen Abschnitte oder Snippets gehen, Wir werden unweigerlich etwas Flüssigkeit sehen. Schau dir das zum Beispiel an. Die Vorlage für das Produkt. Wir haben Linien und Linien von Liquid. Sie sollten mit HTML vertraut sein. Sie können hier sehen, es gibt HTML, aber es gibt auch viel Flüssigkeit um ihn herum und es gibt auch Flüssigkeit im Inneren. Liquid ist wie die Vorlagensprache Ihres Shopify-Themes. Es ist wie eine dumme Programmiersprache, die Ihnen, wie es hier sagt, eine Programmierlogik gibt, die einer Vorlage sagt, was zu tun ist. Tags werden in diese Zeichen eingeschlossen, außer wenn wir nur eine einfache Variable ausgeben. Anstatt das Prozentzeichen zu verwenden, löschen wir eine zweite geschweifte Klammer. Wenn Sie sich fragen, was der Unterschied zwischen diesen ist, die mit zwei geschweiften Klammern beginnen und enden , und dieser, die mit einer geschweiften Klammer und einem Prozentzeichen beginnt, ist dies, wenn wir Logik ausführen, und Dies ist, wenn wir nur eine Variable auf den Bildschirm ausgeben. Dieser Strich hier auch, ich habe kürzlich gelernt, dass, Das entfernt Leerzeichen. Also, wenn ich das einfach von beiden Seiten entferne, wird es eine neue Zeile in Ihrem Code registrieren und so erhalten Sie einige Leerzeichen. Es hat keinen Einfluss auf die Logik, es wird immer noch funktionieren, aber Sie werden in Ihrer Ausgabedatei sehen, wenn Sie diese Bindestriche nicht verwenden, dass Sie eine Menge Leerzeichen erhalten und das könnte Ihre Site langsamer laden. Genau wie eine Nebennotiz. Wie werden wir diesen Abschnitt aufteilen? Offensichtlich gibt es viel zu bedecken mit Liquid. Wir werden über variable Tags, Theme-Tags, Steuerfluss-Tags und Iteration-Tags sprechen , eine Art breiter Ebene, und wenn Sie tiefer in eines dieser gehen möchten, müssen Sie dies zwangsläufig tun, die tiefer gehen Sie in die Themenentwicklung, das ist der Ort, den Sie suchen möchten. Es gibt auch eine kurze Referenz namens Shopify Liquid Spickzettel. Wenn ich einfach Liquid Spickzettel eintippe, kann ich das packen. Dies ist das Original, glaube ich, aber es ist jetzt kaputt, so dass die, die auf der Shopify-Website ist, es wird wahrscheinlich besser sein. Jetzt kannst du den Spickzettel sehen , der im Grunde alle verschiedenen Optionen hat und was sie tun. Sagen Sie zum Beispiel, wenn ich einfach Befehls-F oder Strg-F unter Windows drücke, kann ich jetzt die Seite durchsuchen und vielleicht möchte ich den Titel eines Produkts finden. Ich werde eingeben, Produkte Punkttitel, und dann kann ich mehr darüber erfahren, was es tut. Gibt einfach den Titel des Produkts zurück. Ich dachte, vielleicht ist es ein Produktname, suchen, dass, das kommt nicht, Titel. Das ist das Schlüsselwort, das ich verwenden muss oder vielleicht gehe ich einfach zum Produkt und sehe welche Variablen ich für das Produktobjekt zur Verfügung habe, und dann, wie ich sehe, ist das, nach dem ich suche. Das Spickzettel ist wirklich wertvoll. Einige Leute empfehlen, es auszudrucken und es auf Ihrem Desktop zu haben, aber Sie haben diesen Link jederzeit hier und zumindest können Sie suchen, ob er sich in Ihrem Browser befindet. Ich halte das Spickzettel immer griffbereit, aber zum Glück ist es nur eine kurze Google-Suche entfernt. Beziehen Sie sich auf jeden Fall als eine kurze Referenz, und dann haben Sie Ihre Shopify-Dokumentation für tieferes Lernen. Was ich tun werde, ist von unten nach oben anzufangen. Ich werde zuerst auf variable Tags klicken, und lasst uns mehr über unsere Variablentags erfahren. Wie Sie hier sehen können, gibt es eine Zusammenfassung und wir können zu jeder dieser verschiedenen Arten der Interaktion mit Variablen gehen . Der Hauptmann wird Asset sein. Wenn Sie in der Vergangenheit eine Programmierung durchgeführt haben, sollten Sie mit der Zuweisung vertraut sein. In Liquid müssen wir nur das Wort zuweisen und dann einen Variablennamen, dann das Gleichheitszeichen und dann den Wert verwenden und dann einen Variablennamen, , den wir ihm zuweisen möchten. Wie Sie hier sehen können, ein sehr einfaches Beispiel, weisen Sie Äpfel zu Lieblingsessen, und dann, wenn wir die doppelte geschweifte Klammern Syntax verwenden, können wir einfach den Wert davon ausgeben, und dann wird Ihre Ausgabe dies sein. Wenn wir in unseren Code gehen, können wir hier eine Menge der Zeichen für Produkt, Bindestrich, Vorlage sehen. Zuweisungen machen es uns einfacher zu sagen, zum Beispiel haben wir einen Wert, den wir mehrmals auf der Seite verwenden möchten. Vielleicht ist es eine gute Idee, es oben als Variable zuzuweisen und dann können Sie es an einer Stelle ändern oder vielleicht haben eine sehr lange Zeichenfolge wie dieser Produktpunkt ausgewählt Unterstrich oder Unterstrich zuerst, so weiter, so weiter, so weiter. Sie möchten das nicht jedes Mal schreiben müssen, also können Sie es in einen kleineren Variablennamen einfügen, der vielleicht beschreibender ist. Hier haben wir eine Fallaussage, die wir in einer Sekunde erreichen werden, wo ich den Wert der Dinge basierend auf verschiedenen Fällen zuweise. Wenn ich das nehme, ist dies offensichtlich, wo es zugewiesen wird und ich suche es nach anderem Code. Das hier ist offensichtlich, wo es ausgegeben wird. Sie können Variablen selbst zuweisen, aber wahrscheinlicher werden Sie Variablen verwenden, die sich auf Objekten befinden. Wenn wir zu unserer Referenz zurückkehren und in unser Thema Spickzettel gehen , können wir nach unten gehen und uns die verschiedenen Objekte anschauen und welche Variablen ihnen zur Verfügung stehen. Also, wir haben ein Objekt für Schnitt, wir haben ein Objekt für die Kasse, Objekt für Artikel, Objekt für Adresse. So viele verschiedene Objekte. Die offensichtlicheren Produkte widersprechen hier. Wenn wir mit den Produkten arbeiten, möchten wir in der Lage sein, auf all diese verschiedenen Variablen innerhalb eines Produkts zuzugreifen. Wir haben das Seitenobjekt genau hier. Das Tolle an Shopify ist, dass es ziemlich logisch in dem Sinne ist, dass ich, wenn ich in der Seitenvorlage bin, Zugriff auf das Seitenobjekt habe. Wenn ich in der Produktvorlage bin, habe ich Zugriff auf das Produktobjekt. Nur als Beispiel, wir hatten einen Blick auf die Seitenvorlage zuvor. Wenn ich zu diesem hier gehe, sehen Sie, dass wir gerade in einer Seitenvorlage sind. Wir haben Zugriff auf das Seitenobjekt, und dann können wir eine Variable des Seitenobjekts direkt hier aufrufen, indem wir Punkt Titel. Sie können hier sehen, ich habe keinen Titel der Seite zugewiesen. Es gibt keine Zuweisung im Code selbst. Was es tut, ist, dass es auf der Seite, auf der wir gerade sind, und den Titel zu finden, wie wir in unseren Seiten Admin-Bereich gesagt haben. Das ist wahrscheinlich häufiger, zumindest am Anfang, als Ihre eigenen Variablen zuzuweisen. Sie werden Variablen betrachten, die auf dem Objekt kommen, mit dem Sie es zu tun haben , und Sie werden entweder sie oder andere Operationen mit ihnen durchführen. Das deckt „variable Tags“ ab. Offensichtlich waren da noch ein paar andere drin. Tut mir leid, ich gehe einfach zurück. Vielleicht möchten Sie sich „Capture“, „Inkrement“, „Dekrement“ ansehen, aber „assign“ ist die wichtigste. Ich empfehle Ihnen auf jeden Fall, diese Dokumentation zu lesen, aber wir werden das in dieser Lektion durchbrechen weil es nur eine Lektion ist, die gesamte Liquid durchzugehen. In Ordnung. Wenn wir also in unseren „Theme“ -Tag-Abschnitt gehen, sind dies Dinge wie „include“, „layout“, die wir zuvor gesehen haben, „section“, also jedes Mal, wenn wir ein „Snippet“ eingefügt haben. Wenn ich zu „theme.liquid“ gehe, werden wir wahrscheinlich das beste Beispiel für all diese sehen. Denken Sie daran, dass wir dieses „Snippet“ früher erstellt haben, das als „Theme“ -Tag gilt. Und natürlich, wenn wir nach unten gehen, haben wir „Abschnitte“ und dann war „Layout“ eines, das wir in unserer „page.about“ verwendet haben. Wir haben uns entschieden, ein alternatives „Layout“ zu verwenden, das wir in unserem „Layout-Ordner“ dargelegt haben, okay? Welche anderen haben wir hier? Wir haben auch „Kommentar“. Also, wenn wir einen Kommentar im Code machen wollen, können wir dies tun mit dem „Kommentar“ -Tag ziemlich üblich in jeder Programmiersprache. „ Include“ für „Snippets“. Wir können auch Variablen an das „Snippet“ senden. Wenn ich diesen Snippet-Namen einschließe, wird es offensichtlich den Inhalt davon enthalten, aber dann wird es auch diesem „Snippet“ Zugriff auf Variablen geben, die ich an ihn gesendet habe. Ok. Wenn Sie ein „Formular“ erstellen, anstatt ein Standard-Tag „form“ in HTML zu verwenden, können Sie eine intelligentere Version in Liquid verwenden, indem Sie die Tags „form“ und „endform“ verwenden. Ok. Wir werden das überwältigen, weil wir für eine ganze Weile an sich „Formulare“ erwischt werden könnten . Es gibt eine Reihe von verschiedenen „Formen“ in Shopify. Und wenn wir diese Syntax verwenden, können wir einige der integrierten Logik von Shopify nutzen. In Ordnung. „Layout“, die wir zuvor verwendet haben. „ Paginierung.“ Das ist wirklich cool, weil „Paginierung“ ein Schmerz im Hintern sein kann, um sich selbst zu programmieren, aber in Liquid ist es ziemlich einfach. Wir müssen nur das, was wir in diesem „paginieren“ und „Ende paginieren“ -Tags „paginieren“ „wollen. In Ordnung. Dann können wir „paginieren“ um fünf oder welchen Wert wir wollen. „ Raw“ ermöglicht es uns, Flüssigkeit in roher Form zu löschen. Ich weiß nicht, warum du das jemals tun müsstest. „ Abschnitt“ wir sahen und wir können „Stil“ verwenden, um einige Stile in einer tatsächlichen Vorlage auszugeben. Der Grund, warum Sie das tun möchten, ist, weil es uns erlaubt, Live-Farb-Updates aus dem Theme-Editor ohne eine vollständige Seitenaktualisierung zu machen . Also, wenn Sie vorher gesehen haben, als wir mit unserem „Customizer“ arbeiteten und wir etwas bearbeitet haben und dann kam es „live“. Wie wenn wir eine Farbe geändert haben und direkt daneben in der Vorschau, wird sie sofort aktualisiert. Es liegt daran, dass wir diese „flüssigen Stil“ -Tags verwenden. Ich bin mir ziemlich sicher, wenn Sie Ihre eigenen „Style“ -Tags einfügen, die nicht flüssig Wenn Sie also nur die Standard-HTML-Dateien einfügen, die so aussehen, es nicht automatisch aktualisiert, aber es wird immer noch funktionieren. Es ist besser, dies nur zu verwenden, denn dann erhalten Sie sofortiges Feedback. „ Theme“ -Tags sind praktisch. Sie werden während Ihres Themas verwendet. Sie sind diejenigen, die mehr der „Programmiertyp“ sind , die Sie in jeder Programmiersprache sehen würden. „ Steuerungsfluss und Iteration“. Lasst uns die jetzt durchgehen. „ Kontrollfluss“ ist im Grunde Bedingungen. Wenn Sie also vorher eine Programmierung durchgeführt haben, hätten Sie eine „if then“ -Anweisung gesehen. Also genau hier, es heißt „wenn Produkttitel gleich genial Schuhe sind“, dann wird es das ausgeben. Wenn das der Fall ist, bekommst du das. Wenn nicht, bekommst du nichts, es sei denn, es ist wie das Gegenteil von „wenn“. Es ist im Grunde das gleiche wie „wenn Produkttitel nicht gleich genial Schuhe sind“, dann bekommst du das. Sie können auch ein „else if“ hinzufügen. Wenn es dies trifft und nicht, dann gehen Sie diese, und wenn es dem entspricht, dann geben Sie dies aus. Aber wenn nicht, dann können Sie zu einem „else“ gehen und dann beenden Sie das „if“. Das ist in jeder Programmiersprache ziemlich Standard. Auch eine „Fall“ -Anweisung. Wenn Sie eine Variable haben und den Wert darauf für eine andere Variablen überprüfen möchten . Dies ist eine schönere Art, bedingt zu schreiben, anstatt „if“, „else-if“ und weiter und weiter und weiter zu tun . Wenn Sie mehrere Bedingungen haben möchten, können Sie die Schlüsselwörter „und“ und „oder“ verwenden , was gut ist, weil es nur Standardsprache ist. Es ist keine Pipe oder andere Art von seltsamen Charakteren. Das liest sich ziemlich schön. „ Wenn line_item.grams größer als 2 Tausend ist und customer_address.city gleich Ottawa ist“, wird dieser Code zwischen diesen Tags ausgegeben. Das liest sich ganz schön. Es macht nur Sinn, wenn man es liest. Auf der Kehrseite können Sie „oder“ verwenden. In nur einer Sekunde sehen wir uns ein paar Beispiele an. Lassen Sie uns endlich in „Iteration“ -Tags gehen. Das ist Zeug wie Schleifen. Die wichtigste, die Sie immer und immer wieder in Flüssigkeit sehen werden, ist „für“. Die Sprache für „für“ in Flüssigkeit ist auch ziemlich selbsterklärend. Sie werden jedes Produkt in „collections.products“ durchlaufen und Sie werden dieses bestimmte Produktobjekt mit diesem Wort greifen. Dieses Wort könnte alles sein, was du willst. Es ist einfach am besten, ein beschreibendes Wort zu verwenden. Für Produkt in „collection.products“ haben Sie jetzt innerhalb dieses Schleifenzyklus Zugriff auf das bestimmte Produkt, auf dieses bestimmte Objekt, und dann können Sie Dinge damit machen. Ich weiß, das ist vage, aber es gibt eine Menge Dinge, die Sie hier einfügen können, aber das ist ein großartiges Beispiel dafür, dass Sie eine Sammlung von Produkten irgendwann durchlaufen wollen . Dies ist ziemlich Standard in Liquid und jeder Programmiersprache für diese Angelegenheit. Sie können auch eine „else“ -Anweisung innerhalb eines „for“ setzen. Sie können die Schleife brechen, wenn sie der Schallbedingung entspricht. Sie können auch einen Zyklus der Schleife überspringen, wenn etwas einer bestimmten Bedingung entspricht und Sie können den Offset begrenzen, einen Bereich verschiedener Dinge mit „for“ definieren. Aber normalerweise ist es genauso einfach wie hier, indem Sie einfach eine Liste von Objekten durchlaufen und dasselbe für jedes dieser Objekte in dieser Objektsammlung ausgeben . Wie ich schon sagte, es macht wahrscheinlich sinnvoller, es tatsächlich zu sehen. Werfen wir einen Blick auf einen zufälligen Liquid Code jetzt und sehen, was los ist. Eigentlich, bevor wir das tun, gibt es noch eine Sache, die wir mit Liquid betrachten müssen , die Sie stolpern wird, wenn Sie es nicht wissen, und das ist „Filter“. Schnell werden wir nur einen Blick auf „Filter“ werfen, bevor wir in den Code eintauchen. „ Filter“ ist eine Art einzigartige Sache für Liquid. Wenn Sie mit anderen Programmiersprachen vertraut sind, würden Sie normalerweise Funktionen oder Methoden verwenden um das gleiche Ergebnis zu erzielen, wie ein „Filter“ in Flüssigkeit tut. Sobald Sie sich an „Flüssigfilter“ gewöhnt haben, werden Sie feststellen, dass sie eigentlich ziemlich einfach sind und es ist ziemlich einfach, Inhalte „filtern“ zu können, die tatsächlich sinnvoll sind. Schauen wir uns ein Beispiel hier an. Wir haben den Produkttitel, den wir nur auf dem Bildschirm ausgeben möchten. Aber jetzt haben wir einen „Filter“, der „Upcase“ sagt. Was das tut, ist, dass es alles braucht, was hier ist, und es Großbuchstaben machen wird. Ihre Ausgabe wird sein, wenn der Produkttitel „awesome Schuhe“ war, die es hier ist, wird es eine Großbuchstaben Version davon erstellen und dann auf dem Bildschirm ausgeben. Es gibt natürlich viele verschiedene „Filter“. Einer von ihnen ist „entfernen“. Dieser Filter wird „awesome“ aus dem „product.title“ entfernen, so dass Sie nur Schuhe bekommen. Sie können auch mehrere Filter miteinander „verketten“. Sie haben „Produkttitel“ „upcase“ und „remove“. Wir werden „upcase“ den „product.title“ und danach werden wir „awesome“ daraus entfernen. Dann bekommst du nur „Schuhe“ in Großbuchstaben. Schauen wir uns ein paar andere an. Offensichtlich werden wir nicht in der Lage sein, alle durch zu kommen. Ja, eigentlich gibt es viel zu viele, um sie anzusehen. Lassen Sie mich einen Blick auf einige werfen, die wir oft sehen könnten. „ Image“ -Tag ist ein gutes. Wir können einfach den Namen des Bildes setzen und wir können die „Asset URL“ davon greifen. Wir können das auch in ein „Bild“ -Tag „packen“ und so erhalten Sie das, was ziemlich cool ist. Das ist ein Beispiel, in dem Tags wirklich nützlich sind, anstatt zu versuchen, die Adresse dieses Bildes zu finden und dann Tags um es herum setzen zu müssen, können Sie buchstäblich einfach den Bildnamen in Ihren Assets definieren und dann finden Sie die „Asset-URL“, um das herum und finden Sie dann „image“ -Tag, wickeln Sie das um die Ausgabe dieser und Sie haben dies. Sie können einen Haufen von ihnen „verketten“. Manchmal möchten Sie einen Doppelpunkt und einige Optionen einfügen. Andere Male setzen Sie einfach den „Filter“ von selbst, aber ohne tief in all die verschiedenen „Filter“ zu gehen , ist das im Wesentlichen, was passiert, wenn Sie eine „Pipe“ sehen. Sie sehen ein Stück „Inhalt“, dann sehen Sie eine „Pipe“ und dann einen „Filter“ -Namen. Wenn du nicht weißt, was los ist, musst du nur nachsehen. Wenn ich das in unserem Spickzettel durchsuche. Ich kann hier hineingehen und sehen, dass es die URL einer Datei im Assets-Ordner eines Themas zurückgibt. Sehr beschreibend, und es zeigt uns ein ziemlich gutes Beispiel hier. Also, das ist das letzte Ding. Wir haben unsere Tags, und wir sprachen über Objekte und Filter ist auch wichtig, aber Filter geht ziemlich tief. Lassen Sie uns jetzt in den Code eintauchen und einige Beispiele sehen, weil ich denke, dass es dort am sinnvollsten ist und am meisten nach Hause kommt. Okay, genau hier haben wir eine wirklich einfache Vorlage. Ich mag es, die Seitenvorlage zu zeigen, weil es ziemlich einfach ist, aber wir werden unweigerlich bekommen, die ein wenig komplizierter sind. Wenn ich in die Produkt-Strichvorlage in Abschnitten gehe. Sie werden hier sehen, wir haben eine Reihe von Variablen, die wir zuweisen. Dann haben wir eine case-Anweisung, und die case-Anweisung ist herauszufinden, was wir diesen Variablen basierend auf der Bildgröße in unseren Abschnittseinstellungen zuweisen werden. Denken Sie nun daran, wenn wir sehen Abschnitt Punkteinstellungen, Das ist im Schema unten festgelegt. Ordnung, wir werden tiefer in die Abschnitte der nächsten Lektion eintauchen. Wir werden also etwas mehr Exposition gegenüber Abschnitten haben, so dass Sie mehr darüber erfahren, was hier vor sich geht und wie Sie es verwenden. Hier können wir eine for-Schleife sehen. Und diese for-Schleife, wie wir wahrscheinlich nur beim Lesen erkennen können, nimmt sie das Bild aus den Produktbildern heraus. Für jeden von ihnen macht es eine Reihe von Sachen unter nur die Anzeige des Bildes. Wenn Sie sich fragen, was das alles ist, so funktioniert es reaktionsschnelle Bilder. Anstatt nur Bild SRC zu machen, ist dies wie eine New Age HTML Sache, wo wir viele verschiedene Bilder basierend auf der Bildschirmgröße und Auflösung ausgeben können . Nur eine Randnotiz für diejenigen, die nicht mit reaktionsfähigen Bildern vertraut sind, okay? Wir können in unserer Vorlage sehen, wir bekommen nur Variablen, die wir in verschiedene Abschnitte von HTML ausgeben möchten, und wir können sehen, dass die Schleife hier endet. Jetzt können wir hier ein if-Tag sehen. Also, wenn Produkte, Punktbildgrößen, Punktgröße. Das ist im Grunde, wenn die Länge der Produktbilder oder wie viele Produkte Bilder es gibt, wenn das größer als eins ist, dann tun wir all dies, und wenn es größer als drei ist, dann wollen wir Thumbnails aktivieren. Also, eine Menge Logik hier drin. Sie werden nicht in der Lage sein, Ihren Kopf sofort auf etwas so Komplexes wie diesem zu bekommen . Aber wir werden bald sehen, wenn wir mit Blöcken in einem Abschnitt in der nächsten Lektion arbeiten, werden Sie beginnen zu sehen, dass for-loops, case-Anweisungen, wenn Anweisungen sie sehr häufig sind und dann nicht so beängstigend. Es ist nur in diesem hier, wir sehen eine Menge davon alles zusammen. Hier sehen Sie einen Filter. Hier ist ein Beispiel für einen Filter, den Sie während Ihres Projekts sehen werden, ist der Übersetzer. Dieser ist eine besondere, weil er diese Variable in unserer Sprachdatei nachschlägt und den Text basierend auf der Sprache ausgibt, in der wir uns befinden. Ein häufiger Filter, schauen wir uns an, entkommen. Mit dem, was ich dir vorher gezeigt habe, wenn wir herausfinden wollten, was dieser Filter tut. Offensichtlich geben wir einen Wert aus, aber wir wollen sehen, was Flucht tut. Gehen wir zu unserem Spickzettel und tippen Sie in Flucht. Los geht's, Saitenfilter. Flucht. Maskiert eine Zeichenfolge. Das ist ein schlechtes Beispiel, weil im Grunde das, was wir tun, ist, wir nehmen die Zeichenfolge und wir wollen tatsächlich die HTML-Tags ausgeben. Lasst uns nach einem anderen suchen. Noch ein Filter. Los geht's, Pipe Json. In Ordnung, also schauen wir uns hier rein. Wir können allgemeine Filter sehen. Also, was macht der JSON-Filter? Es konvertiert eine Zeichenfolge in JSON-Format. Wieder, nicht das beste Beispiel, weil es ein wenig kompliziert ist, aber wir nehmen hier ein Stück String, konvertieren es in json und Sie werden hier sehen, dass wir diese JSON-Version des Objekts erhalten. Versuchen wir, einen einfacheren Filter zu finden, denn ich will dich nicht mit diesen verrückten Filtern überwältigen und du denkst einfach, dass sie zu hart oder zu kompliziert sind. Wir können die Bild-URL hier sehen. Wir nehmen das Logo, das wir in unseren Abschnittseinstellungen festgelegt haben. Wir führen es durch einen Filter von Bild-URL, mit dem Argument von eins nach dem anderen. Schauen wir uns das im Spickzettel an. Bild-URL. Klicken Sie auf diesen, gibt die URL eines Bildes zurück, akzeptiert Bildgröße als Parameter. Also, wenn wir eins nach dem anderen einfügen, wird es ein Bild nach dem anderen einfügen. Du fragst dich vielleicht, warum wir eins nach dem anderen reinlegen. Nun, wir führen es durch Ersetzen wieder durch eine dynamische Breite. Wahrscheinlich ein weiteres kompliziertes Beispiel, aber wir werden versuchen, einige einfachere Filter in einem späteren Video zu verwenden. Hier ist eine, die ein bisschen einfacher ist, anhängen. Wenn wir nach append suchen, hängt es nur ein Zeichen an eine Zeichenfolge an. Also, Verkäufe hängen JPEG an, es fügt es nur der Zeichenfolge hinzu. Also, das ist ein einfacher. Wir nehmen das nur und fügen am Ende ein X hinzu. Das ist ziemlich einfach, lassen Sie uns damit enden. Zurück zu unserer Dokumentation, wenn Sie mehr über Flüssigkeit überprüfen müssen, empfehle ich Ihnen auf jeden Fall, gehen Sie hinein und lesen Sie mehr. Wahrscheinlich werden Sie besser lernen, indem Sie in den Code gehen und nur versuchen, es herauszufinden. Beginnen Sie mit den weniger komplizierten Vorlagen zuerst, und wenn Sie einen Filter sehen, den Sie nicht erkennen, was ziemlich alle von ihnen sein wird, wenn Sie neu sind. Geh rein, schaue es im Spickzettel oder in der Dokumentation nach. Manchmal benötigen Sie möglicherweise mehr Informationen. Der Spickzettel ist gut, denn wenn Sie mehr erfahren klicken, wird es Sie zu diesem Teil der Dokumentation führen. Aber die Spickzettel eine gute Referenz, weil du alles auf einer Seite hast und du kannst einfach danach suchen. Offensichtlich gibt es eine Menge auf dieser Seite und es gibt eine Menge in der Dokumentation, wir müssen nicht ewig jede Option in Flüssigkeit durchgehen. Aber ich denke, es ist eine gute Idee, so viel wie möglich zu tun, wenn Sie Ihr Thema entwickeln. Und wenn Sie auf etwas stoßen, schauen Sie sich die Spickzettel an, schauen Sie sich die Dokumentation an, und hoffentlich können Sie beginnen, ein Verständnis darüber zu bekommen, welche Flüssigkeits-Tag Sie benötigen oder welche flüssigen Tags, die bereits in Ihrem Projekt sind. Also, das ist flüssig. Im nächsten Abschnitt bringen wir unser Wissen über die Struktur unseres Template-Codes und das, was wir gerade mit Flüssigkeit gelernt haben , um unseren eigenen benutzerdefinierten Abschnitt zu erstellen, und dann werden wir es in eine Vorlage aufnehmen. Also freue ich mich darauf, zu binden und was wir bereits gelernt haben und Ihnen die spannende Kraft der Sektionen im nächsten Video zeigen zu können. Also sehe ich dich dort. 14. So erstellt man einen benutzerdefinierten Abschnitt: Für diese Lektion habe ich unsere flüssige Dokumentation und unseren Spickzettel geschlossen, und ich habe unseren Online-Shop zurückgebracht, weil wir in dieser Lektion lernen werden, wie wir unseren eigenen speziellen Shopify-Abschnitt für unser benutzerdefiniertes Thema hier entwickeln können. Ich habe das Gefühl, dass Abschnitte der beste Ort für uns sind, um zu gehen und einige benutzerdefinierte Entwicklung zu tun , weil Abschnitte wirklich das Zentrum Ihres gesamten Themas sind. Es ist der Ort, an dem Sie tatsächlich Schemas einfügen können, so dass Sie diese Anpassungsoptionen in Ihren Seiten und Ihren Vorlagen haben können . Also als ein gutes kleines Projekt für diese bestimmte Klasse, was ich tun möchte, ist tatsächlich einen Team-Mitglieder-Abschnitt auf unserer Über Seite zu erstellen. Ok. Also, wenn wir zurück zu hier, klicken Sie auf anpassen. Ich werde es in einem neuen Tab öffnen. Wir gehen auf die Seite Über uns, die wir zuvor erstellt haben. Denken Sie daran, dass wir in einem Abschnitt für die Karte fest codiert haben. Ich möchte das durch unseren eigenen Abschnitt für Teammitglieder ersetzen, da wir auf unserer About Seite vielleicht einen Abschnitt über die verschiedenen Teammitglieder haben möchten, sagen wir, wir sind eine Firma, ein Unternehmen oder ein Geschäft oder ein Geschäft, offensichtlich ein Shopify Shop. Vielleicht möchten wir einige wichtige Teammitglieder oder die Leute hervorheben, die für unser Unternehmen arbeiten. Zuallererst werde ich dieses Layout-Tag loswerden, weil ich denke, dass es keinen Sinn macht, keine Kopf- und Fußzeile zu haben. Ich gehe zum Seitenpunkt über, entferne dieses Layout-Tag, speichere das. Ich werde auch Abschnittskarte loswerden und ich werde es im Grunde zurücknehmen, genau das gleiche wie die reguläre Seite. Ok. Aktualisieren Sie die Seite in unserem Customizer. Sie können hier sehen, wir haben eine Standardseitenvorlage und zwischen Kopf- und Fußzeile haben wir gerade Seiteninhalt. Der Inhalt unserer Seite, natürlich, können wir in unseren Seiten Menüpunkt hier ändern. Klicken Sie dann auf die Seite. Hier bearbeiten wir diesen Inhalt. Ok. Was ich also tun werde, ist wieder in den Code-Editor zu gehen. In Abschnitten werde ich einen Abschnitt mit dem Namen des gewünschten Abschnitts erstellen. Ich nenne es Teammitglieder Dot Liquid. Man könnte es Stab Dot Liquid nennen, was auch immer man für einen guten Namen hält. Ok. Jetzt, um diesen Abschnitt für Teammitglieder zu erstellen, werde ich auf andere Bereiche unseres Codes verweisen und wir können eine Struktur kopieren, die bereits vorhanden ist. Um uns anzufangen, was wir brauchen, ist eine Art Div, in dem wir unseren Code einfügen werden. Dann brauchen wir ein Schema. Denken Sie nun daran, was das Schema ist, ist die Optionen in unserem Customizer. Dafür haben wir hier noch keinen dynamischen Abschnitt, aber Sie haben auf anderen Seiten gesehen, wie die Produktseite, wir haben hier einen anpassbaren Abschnitt. Dies ist alles durch das Schema definiert. Hoffentlich wurde das schon nach Hause gehämmert. Wenn wir zurück zur Seite „Über uns“ gehen, werden wir hier unser eigenes Schema einfügen, wie dieses. Dann brauchen wir ein Ende Schema-Tag. Innerhalb dieser öffnenden und schließenden Schema-Tags möchten wir ein JSON-Objekt einfügen. Ok. Jetzt sind Sie vielleicht nicht mit JSON vertraut, aber wie ich in den vorherigen Lektionen sagte, ist es ziemlich einfach. Es beginnt mit geschweiften Klammern, und jetzt müssen wir ein paar Attribute unseres Schemas definieren. Ich werde tatsächlich auf die Dokumentation in dieser Lektion verweisen , weil es manchmal gut ist, den Speicher zu aktualisieren und ich die ganze Zeit vergessen, welche Attribute wir für unser Schema benötigen. Lassen Sie mich einfach nach Themen, Schema und Shopify suchen. Theme-Abschnitte. Lassen Sie uns hier springen, Schema in den Themenabschnitten Teil. Ok. Abschnitte sollten einen Namen haben. Also geben Sie einen Namen ein und wir werden ihn Teammitglieder nennen. Was braucht es noch? Wir können eine Klasse einfügen, und das ist die CSS-Klasse, die in das div geht. Wir geben ihm eine Klasse von Teammitgliedern Abschnitt. Dies ist die Klasse, auf die wir in unserem CSS verweisen können. Dann, natürlich, Einstellungen. Nun können wir die Einstellungen wahrscheinlich schreiben, bevor wir überhaupt einen der tatsächlichen HTML-Code schreiben. Um unsere Einstellungen zu definieren, die ein Array sein werden, müssen wir eckige Klammern öffnen und schließen, und dann können wir einige weitere JSON-Objekte hinzufügen. Für jede der Einstellungen benötigen wir eine ID, einen Typ und eine Beschriftung. Es gibt andere Dinge, die wir wie einen Standardwert einfügen können, aber wir werden eine ID, Typ und Beschriftung für jede Abschnittseinstellung benötigen . Der Typ ist der Eingabetyp, den wir in einer vorherigen Lektion nur kurz übergegangen sind. Das Label ist das, was im Customizer angezeigt wird und die ID ist die Variable, die wir innerhalb unseres Codes verwenden werden um zu verweisen, was der Benutzer in dieses Feld gesetzt hat , oder die Standardeinstellung, falls nichts darin eingefügt wurde. Sie werden sehen, dass alles passiert, während wir bauen. Das erste, was wir brauchen, ID und die erste Einstellung, die ich für unsere Teammitglieder Abschnitt will, ist ein Abschnitt Titel. Ich werde es Titel nennen. Für den Typ wird es Text sein und Label wird Abschnitt Titel sein. Sie können dies einrichten, wie Sie wollen, es muss nur Sinn ergeben. Der Typ muss definitiv Text sein , da dies der Eingabetyp sein wird, der im Customizer angezeigt wird. Alles andere, was Sie auf alles einstellen können, was Sie wollen. Diese Variable kann etwas anderes genannt werden. Was auch immer dem Benutzer am Front-End angezeigt wird, das kann auch sein, was Sie wollen. Notieren Sie das einfach. Zeit, um in ein anderes Objekt hinzuzufügen. Dort definiere ich die Blöcke. Was ich tun möchte, ist, wir in diesem Kurs noch nicht sehr viele Blöcke betrachtet haben. In der Tat haben wir es kaum berührt. Was Blöcke uns erlauben, und ich habe Ihnen in der Diashow-Abschnitt gezeigt, ist es uns erlaubt, Inhalte im Grunde in Blöcken hinzuzufügen. Ich weiß nicht, wie ich es sonst sagen soll, aber es erlaubt uns im Grunde, Inhaltsblöcke hinzuzufügen , die wir entweder entfernen oder mehrere hinzufügen können. Die Grenze, wie viele Blöcke wir hinzufügen können, wird von uns definiert. Ich denke, dass Blöcke im Abschnitt eines Teammitglieds Sinn machen, weil Nummer eins, wir werden wahrscheinlich mehr als ein Teammitglied haben. Nummer zwei: Möglicherweise müssen wir zukünftig Teammitglieder hinzufügen oder entfernen. Ich denke, es macht total Sinn, einen Block zu verwenden. kommen zurück zu Über uns. Ich weiß nicht, warum ich immer wieder darauf klicke, weil wir noch keinen Abschnitt importiert haben. Lasst uns das jetzt wirklich machen. Dies ist noch nicht vollständig gebildet, aber ich werde ein wenig voran springen und diesen Abschnitt hier hineinwerfen , denn wenn es bereit ist zu gehen, wird es direkt in dieser Vorlage sein, bereit für uns, anpassen. Dieser Abschnitt wird als Teammitglieder bezeichnet. Das Wort dort bezieht sich auf das, was wir unseren Abschnitt in unserer Sektionsdatei beschriftet haben, offensichtlich ohne die Punktflüssigkeit. Ich werde tatsächlich einen Standard dafür erstellen, so dass, sobald wir die Seite ausführen, wir einen Wert erhalten, ohne dass wir etwas schreiben müssen. Ich werde nur sagen, es ist unser Team, Team in Hauptstädten. Das wird der Standardwert sein. Lassen Sie uns hier für eine Sekunde mit dem Schema pausieren. Schließen Sie das mit nur einer Einstellung und verwenden Sie diese Einstellung jetzt, damit wir tatsächlich sehen können, dass es im Customizer passiert. Was ich dafür tun werde, ist, dass ich die Struktur aus einem anderen Abschnitt in unseren Abschnitten stehlen werde . Zu viele Abschnitte. Lassen Sie mich hier ein gutes Beispiel finden. Vielleicht, Feature-Kollektion, Feature-Spalten. Sie können hier sehen, dass, wenn der Abschnittstitel nicht leer ist, wir es auf dem Bildschirm herausgeben möchten und wir diese HTML-Struktur verwenden möchten, weil es CSS bereits damit verbunden ist, wir werden einige automatische Stile direkt aus das Tor. Lass uns das machen. In der Tat, lassen Sie uns auch diesen Seitenbreite Container verwenden. Dadurch wird sichergestellt, dass der Inhalt, den wir haben, der Seitenbreite entspricht. Dafür haben wir bereits das schließende div-Tag. Ich habe gerade im Grunde die Klassenseitenbreite hinzugefügt. Dann, im Inneren habe ich, wenn Abschnitt Einstellungen Punkt Titel nicht leer ist, dann setzen wir es in und wir entkommen jedem HTML, der dort platziert wird. Weil wir unseren Titel als ID des Titels gekennzeichnet haben, ist dies eigentlich alles, was wir tun müssen. Wir müssen den Variablennamen nicht ändern. Wenn ich das speichere, überprüfen Sie, dass wir keine Fehler mit der Theme-Uhr gemacht haben, wir sind alle gut, und ich aktualisiere diese Seite im Customizer, was Sie jetzt sehen werden, ist ein Teammitglied Abschnitt für uns zur Verfügung passen Sie zwischen Kopf- und Fußzeile an. Wenn ich darauf klicke, können Sie unsere einzelne Option sehen, die wir für Abschnitt Titel definiert. Anstelle von „Meet the Team könnte ich vielleicht unser Team sagen. Dies wird dynamisch direkt vor unseren Augen aktualisiert. Wie cool ist das? Ich bin glücklich mit „Meet the Team“. Jetzt möchte ich ein paar Blöcke definieren. Lass uns hier reinschauen und nach Blöcken suchen. Rendern von Schnittblöcken Das ist nicht, dass wir hinter uns her sind. Blöcke. Los geht's. Abschnitte können Blöcke in ihren Schemas und ihren Containern mit Einstellungen und Inhalten definieren , die innerhalb eines Abschnitts hinzugefügt, entfernt und neu angeordnet werden können. Das ist eine ziemlich gute Erklärung für das, was ich früher erklären wollte. Ein Block muss einen Namen und einen Typ haben, und dann geben Sie ihm einige Einstellungen, genau wie Sie es normalerweise tun würden, auf die gleiche Weise, wie wir es für unsere Abschnittseinstellungen getan haben. Nach unseren Einstellungen hier, nach dieser kleinen eckigen Klammer, was wir tun wollen, ist in Blöcke zu setzen. Es funktioniert ähnlich wie Einstellungen. Wir müssen ein Array einfügen und so werden wir wieder quadratische Blöcke verwenden. Übrigens, ich habe das gerade erweitert und zusammengezogen, nur um es uns leichter zu machen, aber ich werde es noch einmal erweitern. Innerhalb von Blöcken haben wir ein Objekt. In diesem Objekt brauchen wir, wie es heißt, einen Namen und einen Typ. Name wird Teammitglied sein, weil es ein einzelnes Teammitglied ist. Eigentlich können wir es einfach in lesbarem Englisch schreiben. Dann müssen wir den Typ einstellen und der Typ ist, was wir wollen, denn das ist ein Block. Es liegt an uns, unsere eigenen Typen festzulegen. Ich werde es Personalprofil nennen. Jetzt definieren wir Einstellungen. Genau wie wir hier oben mit Einstellungen getan haben, werden wir in die Einstellungen für jeden Block setzen. Wir werden eine eckige Klammer öffnen und wir werden ID-Typ und Etikett wieder brauchen. Die erste Einstellung ist der Name des Mitarbeiters. Ich werde es Personalname nennen. Der Typ, der nur ein Textfeld sein wird. Das Label wird Name sein. Weil jeder, jeder Name anders sein wird, gibt es keinen Sinn, einen Standard zu haben. Also nächste Option, werde ich als Staffeltitel setzen. Das ist ihre Rolle im Unternehmen. Lassen Sie es auch als Text eingeben. Label wird Jobtitel sein. Scrollen Sie nach unten, um uns mehr Platz zu geben. Wir geben ihm noch ein Setting und das wird Bio sein. Wir werden es Personal-Bio nennen. Dieses Mal werden wir Textbereich anstelle von Text verwenden und der Grund, warum wir Textbereich verwenden, ist es das gleiche Denken wie in normalem HTML, es wird eine mehrzeilige Bio sein, höchstwahrscheinlich. Wir wollen eigentlich keinen Text haben , weil das uns nur eine einzeilige Eingabe geben wird. Wir wollen ein bisschen einen Bereich für uns, um die Bio zu schreiben. Nun, da wir diese Attribute haben, was wir tun wollen, ist es hier oben in HTML zu setzen. Was ich tun werde, ist die for-Schleife zu verwenden, die wir früher gesehen haben. Was wir tun müssen, ist durch die Blöcke in diesem Abschnitt zu laufen und dann alle aus. Ich werde für Block in section.blocks tun , glaube ich, und dann werde ich meine Schleife beenden. Dieses Objekt hier im Schema, wenn Sie entlang folgen, ist der Abschnitt selbst und dann in hier Dinge, die wir referenzieren können. Der Abschnittpunktname, die Abschnittpunktklasse, Abschnittseinstellungen, die Abschnit Eigentlich eine Sache, die ich ändern werde, ist, diesem Namen einen beschreibenden Namen zu geben. Ich werde es Personal in Sektion.blocks nennen. Weil wir nur einen Block und ein Mitarbeiterprofil haben und wissen, dass all diese Blöcke einen Mitarbeiter repräsentieren werden. Ich nenne es nur Stab. Eigentlich können Mitarbeiter Plural sein, also sage ich vielleicht nur Mitglied. Auch hier können Sie das benennen, was immer Sie wollen, genau das, was es für Sie sinnvoller und lesbarer macht. Was ich tun werde, ist in ein div für jedes Teammitglied und in diesem div werde ich diese drei Variablen ausgeben, die wir hier definiert haben. Was ich dafür tun werde, ist ein h3 für den Namen des Mitarbeiters. Ich werde eine Spanne für den Titel der Mitarbeiter machen und dann werde ich ein Absatz-Tag für ihre Bio setzen. Hier haben wir unsere flüssigen Tags gesetzt und wir wollen nur ausgeben, was in den Block-Einstellungen ist. Also werde ich das Objekt des Mitglieds nehmen, was wir hier oben haben, gehen Sie durch seine Einstellungen und wählen Sie den Namen des Mitarbeiters aus. Ich werde dies kopieren, weil das einzige, was wir ändern müssen , ist der Endteil und anstelle des Personalnamens, werde ich in Mitarbeiter Titel setzen wahrscheinlich nicht brauchen, um in das Personal zu Beginn der es setzen. Eigentlich könnte ich jetzt reingehen und das ändern. Wahrscheinlich macht es keinen Sinn zu haben. Ich werde einfach reingehen und das Personal loswerden, weil wir es nicht wirklich brauchen. Wir können einfach Namen, Titel und Biografie machen. Jetzt sollten wir genug für eine Zwei-Funktion haben. Wir werden noch ein paar Änderungen vornehmen müssen, aber zumindest um es auf dem Bildschirm zu bekommen, schauen wir uns nach dem Speichern an. Es gibt keine Fehler in unserer Themen-Uhr. Wir sollten süß sein und wenn wir auf unsere Seite in den Anpassungen gehen, aktualisieren Sie die Seite. Wenn ich nun in Teammitglieder gehe, werden Sie sehen, dass wir einen Block hinzufügen können. Ich füge ein Teammitglied hinzu. Ich gebe dem Teammitglied den Namen, geben wir ihm einfach meinen Namen. Webentwickler Wie Sie sehen können, kommt es sofort raus. Ich werde in einigen Lorem ipsum hinzufügen, kopieren Sie es einfach von oben hier als Käufer und da gehen Sie. Wir haben einige Inhalte in die Seite eingefügt. Wenn ich noch ein Teammitglied hinzufüge, sagen wir einfach wieder, es ist Christopher Dodd. Ich habe nicht mit anderen Mitarbeiternamen in Vorbereitung gekommen, also müssen Sie sich nur mit meinem Namen zweimal beschäftigen. Aber wie Sie sehen können, fügt es ein weiteres div mit allen Inhalten hinzu, die wir hier festgelegt haben. Es durchläuft die Blöcke und fügt dann diesen Inhalt hinzu. Sehr cool. Ich werde auf „Speichern“ klicken, obwohl es wie Mist aussieht. Lass uns etwas Styling machen. Wir können das Grid-System in unserem Thema nutzen. Dies ist eine leichte Sache, die auf so ziemlich jedem Thema passiert, das Licht verwendet wird, um gebaut zu werden oder die Shopify kostenlosen Themen werden mit dem leichten Raster. Was ich tun kann, ist das in ein Raster zu wickeln. werde ein div um das herum setzen, es Gitter nennen. Für dieses div werde ich ihm eine Klasse von Rasterelement geben, und ich werde auch eine Klasse hinzufügen, um Spalten zu definieren. Es gibt ein paar Bildschirmgrößen, die im Grid-System entwickelt wurden. Wenn Sie etwas über das Schieferraster erfahren möchten, lassen Sie mich einfach sehen, ob Informationen verfügbar sind. Schiefer-Gitter Möglicherweise sind einige Informationen auf Google verfügbar. Hier Stile mit Flüssigkeit. Nein. Lassen Sie mich aus der leichten Dokumentation raus. Klicken Sie auf „CSS Examples“. Los geht's. Genau hier haben wir unsere CSS-Haltepunkte, mittel, groß, Breitbild, Rinne ist der Raum zwischen Rasterelementen. Wenn ich hier nach unten scrolle, können Sie einige Beispiele des Rastersystems sehen. Zum Beispiel, wenn wir wollten, dass die Spalte eine Hälfte der Seite auf Bildschirmgrößen aufnimmt , die mittlerer und höher sind. Dies ist die Klasse, die wir verwenden würden. In der Tat ist das genau die Klasse, die ich für unsere kleinen Teammitglieder verwenden möchte. Ich werde das da reinlegen. Wie Sie sehen können, ist es ähnlich dem, was sie hier definiert haben, sie haben ein Raster und dann haben sie Gitterelemente, und dann haben sie die Spaltenspezifikation. Sie können diese mit kleinen ein Drittel, ein Sechstel stapeln. Sie können festlegen, wie breit die Spalte auf der Bildschirmgröße ist. Aber für uns, mittelhoch, eine Hälfte sollte gut sein. Gehen Sie zu meinem Thema, sehen Sie alles süß. Ich gehe hierher zurück und aktualisiere die Seite. Jetzt werden Sie sehen, dass unsere Teammitglieder Abschnitt in diesem schönen Zwei-Säulen-Raster ist. Wenn ich ein drittes Teammitglied hinzufügen sollte, sagen Sie, es ist wieder mein Name. Sie können sehen. Dass wir hier noch einen Abschnitt haben. Offensichtlich gibt es hier Abstandsprobleme. Eine einfache Möglichkeit, dies zu beheben, besteht darin, all diesen Rasterelementen nur einen Rand oben zu geben. Wieder sollten wir dies wahrscheinlich in CSS tun, aber nur im Interesse der Zeit werde ich es hier in Einklang bringen. Ich werde ihm einen Rand oben von 15 Pixeln geben. Speichern Sie das. Theme Uhr ist glücklich, aktualisieren Sie die Seite und jetzt haben wir ein bisschen mehr von einem Rand. Wir können diese Marge um alles erhöhen, was wir hier setzen. Vielleicht wollen wir es stattdessen um 30 Uhr, keine große Sache. Es liegt an Ihnen, was Sie mit Ihrem Styling machen möchten. Zurück zu unserem Abschnitt über uns gibt es noch eine Sache, die ich fühle, dass unsere Teammitglieder Profile brauchen, und das ist ein Bild. Jetzt habe ich das Bild verloren gelassen, weil es ein wenig komplizierter ist als das Hinzufügen eines Textfelds. Betrachten Sie unsere Eingabemöglichkeiten. Ich bin mir nicht sicher, ob es hier Eingabemöglichkeiten gibt, lass mich einen Blick werfen. Eingabetypen Ich denke, wir sind auf der falschen Seite für Eingabetypen. Wenn ich die Dokumentation durchsuche, ist es das? Grundlegende Eingabe-Einstellungstypen? Los geht's. Hier sehen Sie, dass wir eine Bildauswahl für Bild-Uploads verwenden können. Es gibt zwei Teile, offensichtlich muss ich die Option in unserem Block hinzufügen und dann muss ich sie in unser tatsächliches HTML hinzufügen. Ich werde es eigentlich über Namen setzen. Ich werde ein neues Objekt hier und innen erstellen, ich werde die ID des Fotos haben, Typ wird sein, was ich Ihnen vor der Bildauswahl gezeigt habe, und Label ist Foto. Wir können sagen, was wir wollen. Ich speichere das und jetzt haben wir diese Option in unseren Einstellungen. Der nächste Schritt wird sein, es in unseren eigentlichen Inhalt zu setzen. Ich werde hier oben ein Bild-Tag einfügen und die Art und Weise, wie ich das tun werde , besteht darin, einen Filter zu verwenden, den wir früher gesehen haben. Ich werde eine Öffnung öffnen, die geschweifte Klammern schließt, und ich werde Mitgliedereinstellungen greifen. War es Bild oder Foto, das wir es nannten? Foto. Foto der Mitgliedereinstellungen. Dann werde ich es durch den Bild-URL-Filter laufen, um die URL dieses Fotos zu erhalten. Dann werde ich es durch das Bild-Tag laufen, um das Tag auf dem Bildschirm auszugeben. Wenn ich das speichere, überprüfen Sie, ob ich Fehler gemacht habe, sehen Sie so gut aus. Aktualisieren Sie die Seite auf der Theme-Uhr. Sie werden hier sehen, dass wir einen Haufen Kein Bild haben. Was wir eigentlich tun sollten, ist zuerst zu überprüfen, ob es ein Bild gibt. Sonst bekommen wir das hässliche Kein Bild. Dies ist ein optionaler Schritt, aber es wird es schöner aussehen lassen. Wir werden ein bedingtes hier setzen, Mitglied, Einstellungen, Foto. Wir legen es rein und wenn nicht, wird nichts auftauchen. Speichern Sie das. Sehen Sie, ob wir irgendwelche Flüssigkeitsfehler haben, nein, wir sind alle gut. Aktualisieren Sie die Seite. Jetzt können Sie keine Bilder sehen, bis wir sie selbst hinzufügen. Wenn ich in diesen Abschnitt gehe, gehe ich in einen Block. Sie können jetzt sehen, dass ich diesen Foto-Eingang habe. Ich kann freie Bilder über Shopifys Datenbank erkunden, oder ich kann mein eigenes Bild auswählen. Was ich tun werde, ist ein Bild von mir zu finden und das hochzuladen. Los geht's. Sobald das drin ist, wird es in den Inhalt gehen. Wenn ich hier gehe und Bilder für die anderen Abschnitte hinzufüge. Fügen wir einfach das gleiche hinzu. Sie werden sehen, dass es hier im eigentlichen Block auch kommt, was ziemlich cool ist. Sie können die verschiedenen Teammitglieder leichter identifizieren. Sie werden jetzt sehen, dass ich das Foto, den Namen, den Titel und einen Käufer habe. Nun, natürlich, wollen wir diese Polsterung und Abstände beheben. Wir können das in CSS tun, aber das ist nicht der Sinn dieser Lektion. Der Punkt ist, Ihnen diese Blöcke zu zeigen, und wie wir unsere eigenen Einstellungen im Customizer durch unseren Code erstellen können. Jetzt gibt es noch ein Problem, das wir damit haben, und dass die Bildgröße sehr klein ist. Das liegt daran, wenn Sie Bild-URL ohne Parameter verwenden, wird es mit einem Bild angezeigt, von dem ich glaube, dass es ein 100 mal 100 ist, ziemlich klein. Was wir tun werden, um zu beenden, ist, fügen Sie hier einen Parameter hinzu , der Liquid sagen wird, wie groß wir das Bild wollen. Ich werde 500x sagen. Das wird ein Bild mit 500 mal 500 machen. Speichern Sie das, aktualisieren Sie die Seite, und jetzt können Sie sehen, dass wir ein Bild von 500 mal 500 auf jedem unserer Teammitglieder haben. Das ist eigentlich ein bisschen zu groß, also werde ich das auf 300 skalieren, und ich werde ein anderes Teammitglied hinzufügen, das nur wieder ich sein wird, um Ihnen das Ausmaß des Rasters zu zeigen. Christopher Dodd, Job Titel: Web Developer, Bio, wir werden nur von den anderen kopieren. Da gehst du. Speichern Sie das, und jetzt können Sie sehen, dass wir dieses zweispaltige Raster mit unseren Teammitgliedern haben. Wir können hineingehen, wir können Blöcke löschen, wir können sie neu anordnen, oder wir können neue Teammitglieder hinzufügen und all das ohne Code zu verwenden. Wie Sie sehen können, haben wir es einmal im Code eingerichtet. Wir haben unsere Optionen eingerichtet. Wir haben eingerichtet, wo wir wollen, dass diese Werte, die wir festgelegt haben, in unserem Code angezeigt werden, und wir haben unseren eigenen Abschnitt entwickelt. Nun, es gibt noch eine Sache, die ich Ihnen zeigen möchte, und das ist das Hinzufügen einer Voreinstellung, so dass wir diesen Abschnitt in unserem Inhalt für Index-Tag verwenden können. Gehen wir zurück zu unserer Dokumentation hier, und vielleicht finden wir sie an dieser Stelle, Presets. Nein, also müssen wir zurück zu der Seite gehen, auf der wir vorher waren. Theme-Einstellungen konfigurieren, war es das? Theme-Abschnitte. Los geht's. Voreinstellungen Los geht's. Wenn wir auf „Presets“ klicken, können wir diesen Abschnitt sehen , den wir einen Namen und eine Kategorie für uns definieren können, um auf unseren Inhalt für den Index Abschnitt verwenden zu können. Wenn wir in unsere Homepage gehen, wo der Inhalt für den Index läuft, und wir klicken auf „Abschnitt hinzufügen“, lassen Sie uns sehen. Es gibt benutzerdefinierte Inhalte. Das ist nicht das, was wir suchen. Rich-Texte, Karte, Newsletter. Sehen Sie, wir haben hier nicht wirklich unsere Teammitglieder. Wenn wir es als einen unserer Abschnitte im Inhalt für den Index hinzufügen wollten, müssen wir nur eine Voreinstellung hinzufügen. Ich werde das als Beispiel nehmen, nur um Zeit zu sparen. Geh hier rein. Schließen Sie Blöcke, um es ein wenig leichter zu lesen, und setzen Sie Voreinstellungen ein. Jetzt brauchen wir keine Blöcke, weil dies nur eine Voreinstellung auf unseren Blöcken setzen wird, was wir tun können, wenn wir wollen, aber nicht notwendig. Alles, was ich tun möchte, ist, ihm einen Namen und eine Kategorie zu geben, damit wir es in unseren Inhalten für den Index verwenden können. Diese Kategorie sollte mit einer dieser Kategorien hier übereinstimmen. Ich denke, die am besten geeignete vielleicht Store Information. Lass uns einfach damit gehen. Ich werde es Store Information nennen, und weil es in Hauptstädten ist, bin ich mir nicht sicher, ob ich meine Hauptstädte setzen soll oder nicht. Ich werde nur sehen, wie sie es mit der Kartenvorlage machen. Gehen Sie nach unten zur Karte und scrollen Sie nach unten, um die Voreinstellung zu sehen, können wir sehen, der Name ist Karte und die Kategorie ist Shop-Informationen. Genau wie wir es geschrieben haben. Kategorie, Store-Informationen und der Name wird Teammitglieder sein. Drücken Sie dazu auf „Speichern“. Haben wir die Fehler bekommen? Nein, haben wir nicht. Eigentlich tun wir das. Wir haben einen ungültigen JSON. Das liegt daran, dass wir das nicht geschlossen haben und wir die eckige Klammer auch nicht geschlossen haben. Wie können wir das hochfahren? Hoffentlich haben wir jetzt keine JSON-Fehler. Aktualisiert. Wenn ich nun unsere Startseite im Customizer aktualisiere, klicken Sie auf „Abschnitt hinzufügen“. Jetzt bei den Shop-Informationen, ich weiß nicht, warum es zweimal kommt, aber zumindest haben wir sie hier. Wir können unseren Abschnitt „Meet the Team“ hinzufügen. Unten unten können wir Teammitglieder hinzufügen, genau wie wir es vorher getan haben, und es wird in einem netten kleinen Raster erscheinen. Wenn wir den Inhalt aktualisieren, wird er automatisch angezeigt, und wir können diesen Abschnitt in allen unseren anderen Abschnitten neu anordnen . Da gehst du. Wie gut ist das? Ich werde das eigentlich nicht speichern, weil ich diesen Teambereich nicht auf meiner Homepage treffen möchte . Aber das schließt ziemlich das Booten Ihres eigenen Shopify-Abschnitts. Nun, wie ich bereits sagte, werden Sie es ein bisschen anders gestalten wollen. Sie sollten entweder einige Inline-Stile hinzufügen oder in Ihre theme.scss.liquid gehen und einige Stile mit Klassen hinzufügen, um das zu zielen, was Sie in diesem neuen Abschnitt eingefügt haben. Vielleicht setzen Sie in Klasse von Teammitglied, Unterstrich, Unterstrich Namen, und tun Sie dann das gleiche für Ihren Titel und Ihre Bio. Dies wäre eine gute Möglichkeit, Ihr CSS mit BEM zu formatieren, Block Element Modifier ist das, wofür das steht. Wenn Sie mehr darüber erfahren möchten, warum wir Unterstriche verwenden, unterstreichen Sie hier und warum es überall in der FEM verwendet wird, ist BEM genau das, was Sie brauchen, um zu recherchieren. Aber das ist leider außerhalb des Geltungsbereichs dieser Klasse. Was ich gerade hier gemacht habe, ist in einigen Klassen zu setzen, die wir in theme.scss.liquid anvisieren können . Dies ist nicht speziell eine CSS-Klasse, also werde ich nicht darauf hineinkommen. Aber ja, das war's. Das ist Ihr benutzerdefinierter Abschnitt. Hoffentlich zeigt Ihnen das die Macht der Sektionen. Ich habe in der Vergangenheit mit anderen Plattformen gearbeitet, und ich habe so etwas nicht gesehen, wo Sie einfach eine Reihe von Optionen in einem JSON-Block definieren können, und dann können Sie es plötzlich direkt darüber verwenden und so eine schöne Benutzeroberfläche für die Anpassung. Wenn wir zurück zu dieser Seite über uns gehen, wo wir diesen Abschnitt dort fest codiert haben. Wir sind in der Lage, diese schöne Benutzeroberfläche zu verwenden, die aktualisiert, was wir hier in der Vorschau live haben. Das ist echt cool. Ich hoffe, ihr habt es genossen zu lernen, wie man das macht. In den nächsten Videos werden wir diese Seite einschließen und Ihnen zeigen, wie Sie es an eine Kundenseite oder an ein richtiges Geschäft senden , in dem Sie tatsächlich für einen Plan bezahlen, wenn Sie dies wünschen. Bleiben Sie dafür herum. Wir sehen uns im nächsten Video. 15. So kannst du deine Kenntnisse erweitern: In diesem Kurs haben wir gelernt, wie man schnell einen Shopify-Entwicklungsspeicher aufbaut, wie man den Code des Debüt-Themes bearbeitet, das mit dem Store geliefert wurde, und dabei haben wir gelernt, wie Themen funktionieren und welche Optionen uns zur Anpassung zur Verfügung stehen praktisch alles, was mit unserem Online-Shop Freund zu tun hat. Jetzt könnte dieses Wissen allein ausreichen, um Ihre grundlegenden Shopify-Bedürfnisse zu befriedigen. Aber zwangsläufig müssen Sie Änderungen vornehmen, die über den Rahmen dieses Kurses hinausgehen. Jetzt in der nächsten Bonusstunde werde ich Ihnen eine viel komplexere Art vorstellen, Shopify-Themes zu entwickeln, fast von Grund auf neu beginnen. Aber davor gehe ich davon aus, dass das Debütthema oder ein anderes Thema, das Ihre Phantasie nimmt, eine gute Basis dafür bietet, wie Sie Ihre Website funktionieren soll. Und das ist definitiv das, was ich jedem empfehlen, der Shopify-Themes entwickelt. Es gibt viele tolle Themen da draußen und vor allem, wenn ich mit Kunden arbeite, benutze ich normalerweise ein vorhandenes Thema als Ausgangspunkt. Es macht nicht immer Sinn, das Rad neu zu erfinden, es sei denn, Sie brauchen wirklich etwas Gewohntes. Und deshalb werden wir in der Bonusstunde über Schiefer sprechen. Wir werden auch nach dieser Lektion darüber sprechen, wie Sie Ihre Website live aufnehmen können. Ich habe tatsächlich diese Lektion vor, die eine, denn sobald Sie tatsächlich den Besitz Ihres Ladens übertragen, können Sie den Zugriff darauf verlieren. Es sei denn, die Person oder das Konto, auf das Sie das Eigentum übertragen haben , beginnt mit einem Zahlungsplan. Wenn Sie also bereit sind, auf einen Zahlungsplan zu gelangen, können Sie im nächsten Video definitiv darüber erfahren, wie Sie Ihre Website auf Ihren tatsächlichen Shopify-Plan verschieben können. Aber vorerst wollte ich kurz darüber reden, wie Sie den nächsten Schritt machen würden , um zu lernen, was Sie mit Ihrem Shopify-Theme als nächstes tun möchten. Also lasst uns einfach in unser Thema eintauchen und ein wenig über vielleicht einige Anpassungen reden, die wir machen möchten. Nun ist die erste Anpassung, die Sie vielleicht machen möchten, eine Styling-Änderung. Und das ist sehr normal , und das wird wahrscheinlich irgendwann mit Ihrem Thema passieren. Vielleicht möchten Sie den Rand zwischen dieser Überschrift und dieser hier direkt ändern. Also gehen Sie in Ihren Abschnitt und Sie suchen nach dieser Option in Ihrem Customizer und Sie haben keine Option in Ihrem Customizer, um den Rand hier zu ändern. Sie haben also zwei Möglichkeiten. Sie können entweder eingehen und einfach die Änderung erstellen, oder Sie können eine Option in Ihrem Abschnittscode erstellen , um dies in Ihrem Customizer zu ermöglichen. Also, wenn es eine Styling-Änderung ist und Sie es nur seitlich anwenden möchten , ohne es zu einer anpassbaren Option zu machen, was Sie tun können, ist es einfach in Ihre theme.scss.liquid zu werfen. Also lassen Sie uns einfach das Beispiel verwenden, über das ich gerade gesprochen habe. Lasst uns herausfinden, was das ist. Also sind wir im Bild mit Text-Overlay-Abschnitt, und leider können wir es nicht nach dem Vorlagennamen nachschlagen. Wir müssen den Ordner durchsuchen und Bild mit Text-Overlay finden. So Bild mit Text-Overlay und dann hier können wir sehen, wo das erscheint und dieser Name erscheint im Schema dieses Abschnitts direkt hier, Held Punkt Flüssigkeit. Das ist also der Abschnitt, den wir uns gerade ansehen. Wenn wir es hier betrachten, ist es vielleicht nicht klar, welche dieser divs sich tatsächlich auf das beziehen, was wir auf der Seite sehen. Also wollen wir vielleicht inspizieren und das ist etwas, was ich oft tue. Mit unseren Entwicklungstools können wir sehen, was das ist. Und wie Sie hier sehen können, ist es dieses div mit einer Klasse von R-T-E Bindestrich Einstellung Mega Bindestrich Untertitel, Mega Dash Untertitel, Bindestrich, Dash, groß. Also, wenn ich hier in meinen Code schaue, kann ich nach Mega-Untertiteln suchen. Ich kann es schon sehen, aber nur um es klar zu sein. Also haben wir Mega-Untertitel und Mega-Titel. Los geht's. Wir haben es an ein paar verschiedenen Orten, aber das ist der, den wir suchen. Also, wenn wir es zu einer Option im Customizer machen wollten, was wir tun könnten, ist, einen Inline-Stil hinzuzufügen und Rand oben zu setzen und wir würden es vielleicht als definieren, also gehen wir in Abschnitt Punkteinstellungen und vielleicht nannten wir es oberen Rand. Nun wollen wir auch überprüfen, ob wir tatsächlich den oberen Rand zuerst gesetzt haben. Also würden wir eine if-Anweisung um diese herum setzen wollen. Aber sagen wir einfach, wir wollen den oberen Rand standortweit ändern. Also würden wir in unser Thema Punkt S-C-S-S Punkt Flüssigkeit gehen, scrollen den ganzen Weg nach unten. Dies ist eine sehr große Datei und lassen Sie uns eine Regel für Mega-Strich-Untertitel erstellen. Und hier drinnen werden wir den Rand oben auf etwas lächerliches setzen, nur damit wir sehen können, dass es funktioniert. Also werde ich auf Speichern drauf drücken. Vergewissern Sie sich, dass wir keine Fehler gemacht haben. Ja, es wird jetzt aktualisiert und wenn ich diese Seite aktualisiere, können Sie jetzt sehen, dass wir dieses lächerliche Rand oben haben, das jedes Element mit einer Klasse von Mega-Strich-Untertiteln betrifft, was hoffentlich nur dieser Abschnitt sein sollte innerhalb dieses Abschnitts oder jenes Textstück innerhalb dieses Abschnitts. Also habe ich das gerade entfernt. Es hat unseren Code aktualisiert. Wenn ich die Seite erneut aktualisiere, sind wir wieder normal. Das ist also ein Szenario. Vielleicht möchten Sie das Styling aktualisieren. So können Sie das mit CSS tun. Vielleicht möchten Sie etwas aktualisieren, das mit JavaScript passiert. Ich bin mir nicht sicher, wie viel Ajax wir hier haben. Wenn ich das bis zu drei setze, sieht so aus, als ob das Debütthema nicht schwer auf dem JavaScript ist. Ich muss hier auf Aktualisieren klicken, wenn die Menge aktualisiert wird. Aber dies könnte eine Anpassungsoption sein. Anstatt auf Update klicken zu müssen, möchten wir vielleicht, dass dies aktualisiert wird, wenn wir darauf klicken. Und da es sich um eine Live-Seitenänderung handelt, möchten wir das mit JavaScript tun. Also würden Sie nachforschen, wie das geht und dann würden Sie gehen, und wahrscheinlich legen Sie es in Ihr Thema dot js. Sagen wir, wir wollen das tun, wie würden wir dieses Problem sagen? Öffnen Sie einen neuen Tab und suchen Sie in Google, machen Menge aktualisieren Preis automatisch, und dann natürlich, wir müssen in die Plattform setzen, die wir verwenden; Shopify. Ok. Es gibt also eine Reihe von verschiedenen Artikeln hier. Ich habe das vorher noch nicht durchsucht, aber das ist der Prozess, den ich gehen würde, um die Antwort zu finden. Das ist also nicht der beste Thread. Sie werden nicht immer die perfekte Antwort auf Ihre erste Suche finden. Los geht's. Hier ist etwas, das richtig aussieht. Also, nach meinem Wissen über JavaScript bereits zu urteilen, und natürlich ist dies kein JavaScript-Kurs Wenn Sie also tiefer in JavaScript einsteigen wollen, habe ich auch hier auf skillshare.com einen Kurs zu JavaScript. Aber Sie werden hier einen Ereignis-Listener einrichten wollen, um zu überprüfen, wann sich dies ändert, und dann müssen wir diese Teile hier aktualisieren, anstatt es aktualisiert zu haben, wenn Sie auf die Update-Schaltfläche klicken, die Sie hier sehen können, ist die ganze Seite neu laden. Das ist also eine Anpassung, die Sie vielleicht tun möchten. Natürlich, bevor Sie etwas mit Code anpassen, sollten Sie überprüfen, ob Sie es tatsächlich nur mit den Eingaben anpassen können , die Sie bereits in Ihrem Theme-Customizer haben. Ich meine, deshalb sind sie für Sie da, ohne sich in Ihren Code eingraben zu müssen. Und als Randnotiz, wenn Sie in Ihren Code graben und Sie etwas erstellen, das Sie später ändern möchten, machen Sie es zu einer Option in Ihrem Schema und auf diese Weise können Sie es hier bearbeiten und umdrehen, ohne jemals den Code zu berühren. Das ist einer der Gründe, warum dieses Schema überhaupt verwendet wird. Es könnte also eine Styling-Änderung sein, könnte eine Änderung sein, die Sie leicht mit Ihrem Schema beheben könnten, könnte ein dynamisches JavaScript-Zeug sein. Aber es ist wahrscheinlich, dass du auf etwas stoßen wirst , das du noch nicht weißt, wie du es tun sollst. Wieder, wie ich in diesem Kurs erwähnt habe, haben wir nur genug Zeit, um einen Überblick zu machen. Also, Ihre besten Orte, um zu gehen, finden Sie einige Antworten Wenn Sie mit dem Lesen der Dokumentation einverstanden sind, gehen Sie wieder zur Shopify-Dokumentation und gehen Sie zu Themen. Hier können Sie nach allen Informationen suchen, die Shopify Ihnen zur Verfügung stellt, um Themen zu entwickeln. Wenn wir also mehr über Abschnitte erfahren möchten, suchen Sie nach Abschnitten in der Dokumentation. Klicken Sie auf Theme-Abschnitte. Und dann können Sie etwas über das Schema lernen. Sie können über das Einschließen von JavaScript-Stylesheets, Rendern von Abschnittsblöcken, allerlei Sachen lernen. Also sollte die Themendokumentation Ihre Bibel sein, sollte Ihr Lehrbuch zu diesem Zeug sein. Und dann auch der Shopify Spickzettel, den wir uns vorhin angeschaut haben. Wenn Sie also auf den ersten Link klicken, ist dies wie eine zusammengefasste Version der Dokumentation und konnte Befehl F oder Control F auf einem Windows verwenden, um nach den verschiedenen Variablen für ein bestimmtes Objekt wie Produkt. Das sind also die beiden wichtigsten Orte, die Sie vielleicht suchen möchten. Offensichtlich gibt es zwei weitere Kurse auf Shopify, auf dieser Plattform, skillshare.com. Sie sind ein wenig veraltet und das eine ist ziemlich einfach, und das andere geht einfach wirklich schnell fortgeschritten. Also wähle ich wohl deine Richtung damit aus. Aber ansonsten dachte ich eigentlich daran, einen Start-zu-Ende Shopify-Kurs zu erstellen. Wenn es genug Interesse gibt, wenn Sie das lernen möchten, lassen Sie es mich definitiv in der Diskussionsbox unten wissen und wenn Sie irgendwelche Probleme oder Anpassungen haben , die Sie in Shopify tun möchten , dass Sie kämpfen, um herauszufinden, auf jeden Fall lassen Sie es als Kommentar in der Diskussionsbox unten und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Wie ich im nächsten Video erwähnt habe, werden wir darüber reden, Ihre Website live zu nehmen und dann im Video danach werden wir einen Bonus auf Slate machen. Also Slate ist, wenn Sie wirklich ernst mit der Theme-Entwicklung zu bekommen und von Grund auf neu beginnen wollen , das ist, wo Sie suchen wollen. Also noch zwei Lektionen und dann werden wir einpacken. Ich hoffe, ihr genießt den Kurs. Wir sehen uns im nächsten Video. 16. So schaltest du deine Website live: Ordnung, für diese Lektion habe ich die Tabs wieder geschlossen und habe uns wieder in unseren Laden gebracht. Wir haben auch die Registerkarte für unser Shopify-Partnerkonto noch geöffnet. Was ich in dieser Lektion tun werde, ist Ihnen zu zeigen, wie Sie Ihre Website im Wesentlichen live nehmen oder migrieren. Oder machen Sie es bereit, ein Live-Thema im Internet zu werden. Um Benutzer kommen zu lassen, verwenden Sie das Thema auf einer echten Store-Front. Es gibt also eine Reihe von verschiedenen Möglichkeiten, wie wir das tun würden. Das erste Szenario, sagen wir, ist, dass dies ein bestehender Laden ist. Chris Skill Share-Store ist also ein Geschäft, der läuft. Es gibt Bestellungen, da sind bereits Produkte hier drin, Kunden. Das ist ein Live-Store. Ordnung, also haben wir unsere Entwicklung in einem separaten Thema gemacht, das nicht live ist, wie wir es tun sollten. Wenn wir bereit sind, dass dieses Thema live geschaltet wird, müssen wir nur in Aktionen klicken und dann auf Veröffentlichen klicken. Wenn Sie nun in einem vorhandenen Store arbeiten, möchten Sie vorsichtig mit den Dingen sein, die Sie bearbeiten, die nicht das Thema selbst sind. Wenn Sie also eine Website neu entwickeln und Seiten hinzufügen, werden diese Seiten in dem Moment, in dem Sie sie erstellen, live auf der Website sein. Aber es ist nicht so eine große Sache, es sei denn, Sie brauchen wirklich diese Seiten, um privat zu sein , weil Sie nicht gehen, um zu diesen Seiten zu verlinken höchstwahrscheinlich. Die andere Sache, Navigation. Daher müssen Sie möglicherweise einige neue Menüs erstellen. In Ihrem Thema werden Sie auf diese Menüs verlinken. Diese Menüs werden mit den vorhandenen Menüs, die im Live-Store alle an der gleichen Stelle sind, da sein. So Dinge wie Blogs, Seiten, Navigation und Produkte sind in Ihrem Shop selbst. In Ordnung, sie sind nicht speziell mit dem Thema verwandt, also müssen wir auch vorsichtig sein. Szenario Nummer zwei, Sie arbeiten mit einem Clientspeicher, aber Sie entwickeln Ihr Design in einem Entwicklungsspeicher. Jetzt möchten Sie das aus diesem besonderen Grund tun, den ich gerade erwähnt habe, weil sie ihre eigenen Produkte, Blog-Post-Seiten und Navigation bereits eingerichtethaben Blog-Post-Seiten und Navigation bereits eingerichtet und Sie etwas erstellen möchten, das völlig getrennt ist. Also, was Sie tun wollen, ist vielleicht verpackt dieses Thema. Also laden Sie es herunter und laden Sie es dann den anderen Store hoch und migrieren Sie dann die anderen Sachen, die Sie auch sehen möchten, wie Produkte, Blog-Beiträge, Seiten und Navigation. Das wäre der zeitaufwendigste und manuelle Weg, dies zu tun. Normalerweise würden Sie versuchen, das zu vermeiden. Eine gute Mischung zwischen diesen beiden Szenarien besteht also darin, sich auf einem tatsächlichen Geschäft zu entwickeln. Aber seien Sie vorsichtig, was Sie in den Produkten, Blog-Beiträgen und Seiten erstellen , und wenn möglich, verstecken Sie sie oder verdecken Sie sie oder nicht haben Sie sie irgendwo auf Ihrer aktuellen Website verlinkt. Wenn sie noch in der Entwicklung sind und noch nicht bereit sind, live zu gehen möchten Sie sicherstellen, dass sie für die Öffentlichkeit fast unsichtbar sind. Aber wenn dies Ihr Geschäft war und Sie noch nicht einmal live gegangen sind, haben Sie Ihr Thema entwickelt. Du drückst gerade auf Veröffentlichen. So einfach wie das. Sagen wir mal, Szenario drei, Sie haben nur das Konto Ihres Partners und Sie haben diesen Shop gerade als Entwicklungsgeschäft entwickelt und jetzt möchten Sie, dass es ein echter Laden ist, in dem Sie Bestellungen annehmen und im Grunde ein legit Store seiner eigenen Domain. Oder vielleicht willst du diesen Laden auf jemanden übertragen, der das tun wird. Vielleicht haben Sie das für einen Kunden entwickelt und Sie können diesen Shop auf sein Konto übertragen , damit er damit beginnen kann, für Shopify zu bezahlen. Jetzt haben sie ein Duplikat des Stores, den wir gerade auf ihrem eigenen Konto erstellt haben. Das ist wirklich das, wofür Entwicklungsthemen gebaut werden. Sie sind so konstruiert, dass wir ein Thema entwickeln es für den Kunden vorbereiten können. Ob das eine andere Person ist, oder es könnte nur wir sein. Holen Sie sich das Thema bereit und dann geht es über zu einem kostenpflichtigen Shopify-Plan. Also, eine Warnung, bevor wir dies demonstrieren sobald Sie dies tun, wird es übertragen werden. Es besteht die Wahrscheinlichkeit, dass Sie den Zugriff verlieren. In der Tat bin ich mir ziemlich sicher, dass, sobald Sie diesen Entwicklungsspeicher von Ihrer Liste der Entwicklungsgeschäfte auf den Plan eines Kunden übertragen haben, solange sie dauern, um tatsächlich aufhören, für diesen Plan zu bezahlen, keiner von Ihnen Zugriff auf diese Website. Also warnen Sie, migrieren Sie nicht oder übertragen das Eigentum an einer Website, bis jemand bereit ist, für Shopify zu bezahlen. Also, wenn [unhörbar] aus dem Weg, gehen wir durch den Prozess. Also schließe ich den Laden und gehe zur Partnerzählung. Aktualisieren Sie dies einfach, da die Links tatsächlich ablaufen. Wir wollen also sicherstellen, dass wir die neueste Seite haben. Wie Sie hier sehen können, haben wir Chris Skill Share-Store unter Entwicklungsgeschäften. Nun, um das zu einem echten Laden zu machen, wollen wir das Eigentum an jemanden übertragen. Genau hier warnt es uns, was passieren wird, und dieser Punktpunkt hier ist die Warnung, die ich kurz zuvor gegeben habe. den Store kann erst zugegriffen werden, wenn der neue Besitzer einen Plan auswählt. In Ordnung, also gehen wir hier rein. Im Moment können wir keinen neuen Besitzer auswählen , weil wir ein Mitarbeiterkonto hinzufügen müssen. Also werde ich auf „Ein Mitarbeiterkonto hinzufügen“ klicken und es wird uns zurück zu unserem Shop bringen. Also werde ich mich als Mitarbeiterkonto erstellen, Freelancer.com. Dieses Mitarbeiterkonto verfügt über volle Berechtigungen. Ich werde also auf Einladung senden klicken. Ich habe das eigentlich schon getan. Also mal sehen, ob ich eine andere E-Mail finden kann, um dies in zu tun. Ich habe ein paar verschiedene E-Mails, zum Glück. Jetzt habe ich die Einladung geschickt. So können Sie hier sehen, dass der Kontoinhaber Chris Skill Share Store Admin ist, was unser Partnerkonto ist, aber jetzt haben wir dieses Zeug Konto. Wenn ich also in meinen Posteingang gehe, kann ich diese Einladung tatsächlich annehmen. Also lass mich das jetzt machen. Hier gehen wir weiter, es dauerte ein wenig. Aber jetzt ist es da und es bittet mich, ein Mitarbeiterkonto zu erstellen. Also werde ich ein Mitarbeiterkonto erstellen. Ich muss eine Telefonnummer und ein Passwort eingeben. Lassen Sie mich ein neues Passwort mit meiner Passwort-Management-App generieren. Ich werde nur das gleiche benutzen, wie wir es für den Laden benutzt haben. Dann klicke ich auf Konto erstellen. Jetzt bin ich im Store eingeloggt. Aber wie Sie hier sehen können, ist mein Name Christopher Dodd und nicht Chris Skill Share Store. Also der gleiche Speicher, verschiedene Benutzer angemeldet. Jetzt habe ich volle Berechtigungen für den Zugriff auf den Store. Ich kann tun, was ich will. Aber das Problem damit ist, dass ich immer noch in einem Entwicklungsgeschäft bin. Also, wenn ich diesen Shop live mitnehmen möchte, muss ich zurück zum Partnerkonto gehen. Also raus aus diesen Geschäften und ich werde die Seite aktualisieren, die wir vor laufen. Jetzt sollte ich diese Möglichkeit haben, zu übertragen. Wenn ich jetzt in das Auswahlfeld gehe, kann ich Christopher Dodd sehen, okay? So kann ich auf Christopher Dodd klicken, den Laden übertragen und hier werde ich den Zugriff auf den ganzen Laden verlieren. Alles klar, damit Sie hier sehen können, dass dieser Chris Skill Sharing Store hat. Wenn ich zurück zu Entwicklungsgeschäften gehe, ist es nicht mehr da. Eigentlich wird es gehen, um Geschäfte zu verwalten. Eigentlich ist es genau hier. Ich habe schon mal einen Test gemacht. Wie Sie sehen können, ist es inaktiv. Aber wenn ich auf Login klicke, sieht so aus, als könnte ich immer noch darauf zugreifen. Nein, ich kann jetzt nicht darauf zugreifen. Was wird passieren? Wie gesagt, in der Warnung vor, muss ich warten, bis das Konto, auf das ich es übertragen habe, beginnt für einen Plan zu bezahlen. Ordnung? Also, wenn ich die Seite jetzt auf diesem Konto aktualisiere, war ich als Christopher Dodd angemeldet. Wir werden versuchen, sich wieder in den Laden einzuloggen. Glücklicherweise lässt es mich nicht. Das ist praktisch. Aber lassen Sie mich einfach zurückgehen und diesen Shopnamen explizit [unhörbar] eingeben. Okay, also haben wir das hier. Kommen Sie bald zurück. Ich klicke auf Anmelden. Vielleicht liegt es daran, dass ich in zwei verschiedenen Konten eingeloggt bin. Also werde ich nur ein privates Fenster öffnen. Chris Skill Share-Shop. War es Chris Skill-Share-Shop? Ja. Klicken Sie hier anmelden. Hoffentlich ermöglicht es uns, sich anzumelden. Ja. Jetzt können wir uns mit diesem Partnerkonto anmelden, das wir erstellt haben und hoffentlich wird mein Passwort immer noch in der Zwischenablage gespeichert. Nein, ist es nicht. Ich werde mir das nur aus meiner Textbearbeitung holen. Das habe ich jetzt. Jetzt meldet es mich an. Was Sie direkt an diesem Punkt kommen sehen werden, ist, wählen Sie Ihren Plan. Deshalb habe ich Sie davor gewarnt, dies zu tun , bis Sie bereit sind, tatsächlich für einen Plan zu bezahlen , weil es keine anderen Optionen gibt, wenn Sie sich in diesem Mitarbeiterkonto anmelden, als für einen Plan zu bezahlen. So würden Sie wählen, und Sie würden durch die Bewegungen gehen und Ihre Abrechnung und all das einrichten. Also aus der Perspektive des Partners, also bin ich im Partnerkonto hier eingeloggt. Es ist ein verwalteter Store, auf den ich mich wirklich nicht einloggen oder darauf zugreifen kann, bis dieses Mitarbeiterkonto, die Person oder das Konto, das tatsächlich den Laden aufnehmen und mit ihm live gehen wird, einen Plan auswählt und beginnt, für Shopify zu bezahlen. Das ist es, was diese Kiste ist. Aber lassen Sie uns einfach davon ausgehen, dass der Kunde oder sich selbst oder wer auch immer dieses Konto zugeordnet ist, einen Plan wählt und beginnt dafür zu bezahlen. Nun, jetzt können Sie auf den Store in Ihrem Partnerkonto zugreifen , indem Sie auf Login klicken. So wird es wie bereits geschehen, von Entwicklungsgeschäften bis hin zu Geschäften. Dann können Sie beginnen, es als Angebot zu verwalten, unquote, Shopify Partner. Das macht also Sinn, wenn Sie ein Geschäft für einen Kunden entwickeln, es an ihn übertragen haben, Sie es ihnen gesagt haben, beginnen Sie, für Shopify zu bezahlen. Ihre Website ist dabei, live zu gehen. Sie tun das. Wenn Sie dann der Entwickler oder der Partner sind, der mit ihnen arbeitet, können Sie sich trotzdem einloggen und zusammenarbeiten und auf ihrer Website arbeiten. So funktioniert es also mit Entwicklungsgeschäften. Wieder, wie ich schon erwähnt habe, und wir werden keinen Zugang mehr zum Laden haben. Sind wir? Ja, also wurden wir jetzt total ausgesperrt. Aber wie ich bereits erwähnt habe, kann ich Ihnen leider nicht zeigen, weil ich im Laden ausgeloggt bin. Aber wie ich Ihnen bereits gezeigt habe, konnten wir einfach die Theme-Datei selbst herunterladen und sie dann auf eine andere Seite hochladen. Wenn wir nicht durch diese ganze Übertragung Eigentum Teil des gesamten Prozesses gehen wollen. Es gibt also ein paar Möglichkeiten, dies zu tun, aber das ist im Wesentlichen, wie Sie Ihre Website live nehmen würden. Schritt Nummer eins ist, dass Sie tatsächlich das Thema live drehen müssen. Dann müssen Sie anfangen, für einen Plan zu bezahlen, wenn Sie nicht bereits sind. Dann haben Sie einen voll funktionsfähigen Shopify Store. Das schließt also so ziemlich den gesamten Prozess davon ab , einen Shopify-Store mit einem Standardthema zu drehen , den Code zu erkunden, einen benutzerdefinierten Abschnitt zu erstellen, ihn so anzupassen, wie Sie wollen, und schließlich übertragen, wenn Sie bereit sind, auf ein anderes Konto zu übertragen, damit Sie für Shopify bezahlen und Ihren Shop starten können. Das ist also der ganze Prozess. Im nächsten Video zeigen wir Ihnen tatsächlich einen anderen Prozess, beginnend mit Slate. Also, wenn Sie daran interessiert sind, bleiben Sie hier, sonst sehe ich Sie in der Schlussfolgerung. Vielen Dank, dass du Jungs beobachtet hast. Ich freue mich darauf, Sie im nächsten Video zu sehen. 17. Bonus: Slate Teil 1: Im nächsten Video werden wir ausführlicher über ein Old-School-Entwicklungstool sprechen , für das Shopify bereits im Januar 2020 Support beendet hat. Ich rede von etwas, das Slate heißt. Seit Januar 2020 ist klar, dass Shopify sich von Slate entfernt hat, und jetzt mit der Ankündigung, dass die Shopify CLI erweitert wurde, um auch die Theme-Entwicklung zu ermöglichen, sehe ich wenig oder keinen Grund, warum jemand anfangen sollte ein neues Shopify-Projekt mit Slate. Davon abgesehen habe ich das nächste Video als Tutorial für jeden, der gezwungen hat, es zu benutzen. Einige ältere Themen verwenden möglicherweise noch Slate, und daher ist dieses Wissen nicht vollständig veraltet. Wenn Sie jedoch eine Wahl in der Angelegenheit haben, empfehle ich definitiv, das neueste Tool für den Job zu verwenden, und dieses Tool ist derzeit die Shopify CLI. 18. Bonus: Slate Teil 2: Willkommen zurück Jungs. In dieser Lektion habe ich all diese anderen Tabs geschlossen, ich habe meinen Code-Editor geschlossen und mein Terminal geschlossen, auf dem die Themen-Uhr ausgeführt wurde, weil wir in dieser Lektion etwas über Slate lernen werden, okay? Also, wenn Sie Theme Kit zuvor in diesem Kurs verwendet haben, und Theme Kit ist großartig, weil es uns erlaubt, Themen im laufenden Betrieb zu bearbeiten, und Slate tut etwas Ähnliches, aber es hat auch ein anderes Element, dass, und das heißt, es erstellt ein brandneues Thema für uns. Eigentlich können wir das Gleiche im Theme Kit machen. Ich habe wahrscheinlich Thema erwähnt, neu als einer der Befehle für Theme Kit. Es schafft ein Thema, das ist, eine Art von Stata Thema. So können Sie etwas Ähnliches in Theme Kit nicht tun. Aber wenn Sie mit der Entwicklung eines benutzerdefinierten Shopify-Theme sehr ernst sind, werden Sie Slate verwenden wollen, und Slate ist ein wenig komplizierter. Die Ordnerstruktur wird ein bisschen anders sein und es braucht ein wenig mehr Aufwand, um einzurichten. Aber deshalb ist es eine Bonusstunde in diesem Shopify-Kurs. Ich dachte nicht, dass ich einen Shopify-Themenentwicklungskurs machen könnte , ohne wenigstens über Slate zu sprechen. Also, wir werden ein wenig über Slate reden, es auf Ihrem Computer einrichten und wenn Sie mehr darüber wissen wollen, können Sie es mir in der Diskussionsbox unten informieren, okay? Also schauen wir einfach Slate jetzt nach. Also, wenn ich shopify/Slate gehe, haben wir bereits die Dokumentation durchlaufen und uns das Raster angeschaut. Es gibt zwei Links hier. Lass mich mal sehen. Dies ist das GitHub-Repo. Aber was ich suchen möchte, ist die eigentliche Website, für Slate, die genau hier ist. Die Informationen hier sind nicht die besten, vor allem mit den ersten Schritten, also empfehle ich Ihnen, diesem Kurs zu folgen , anstatt den Anweisungen hier zu folgen, weil ich tatsächlich gelernt habe, wie man mit Slate durch ein Video, auf Shopifys YouTube-Kanal. Also, wenn ich in Shopify Slate YouTube-Video tippe, wird es vielleicht kommen, ja. Hier können Sie also ein Video des YouTube-Kontos des Shopify-Partners sehen, und so habe ich die Schritte der Installation von Slate gelernt. Also kannst du auch darauf verweisen oder du kannst mir in dieser Lektion einfach hier zuhören , okay? Also, zunächst einmal, gibt es tatsächlich eine Folie in diesem Video, die über die Geschichte von Slate spricht, und es kommt tatsächlich von Timber, also denken Sie daran, dass ich Timber vorher erwähnt habe, und sie haben eine Folie in hier, um zu sagen, warum es jetzt Slate ist. Das Holzgerüst war zu eigensinnig und das ist wie ein Programmierwort, was bedeutet, dass es im Voraus zu viele Dinge für Entwickler entschieden hat, also zogen sie es noch weiter zurück und sie haben geschaffen, Slate, okay? Also Timber ist jetzt Schiefer, und Schiefer ist eigentlich der Ausgangspunkt, den Shopify selbst für all ihre Shopify-Themen verwenden, die sie entwickeln. Es ist auch der Ausgangspunkt für eine Menge von Themen, die Sie im Theme Store finden, und in der Tat, Ich habe mit Themen gearbeitet, bevor es von den Party-Entwicklern entwickelt, nicht unbedingt Shopify, dass immer noch die Slate responsive Gitter. Es ist gut, ein wenig Slate zu kennen auch wenn Sie losgehen und sich auf eine andere Weise entwickeln möchten. Wahrscheinlich werden Sie Slate verwenden, wenn Sie benutzerdefinierte Themen entwickeln möchten, denn das ist im Grunde das, was Shopify empfiehlt und was sie selbst benutzen. Wie ich schon sagte, Sie haben die Dokumentation hier, und natürlich wird es eine gute Referenz sein, aber in Bezug auf die Installation von Slate empfehle ich Ihnen, diese Schritte zu folgen, die ich einfacher gefunden habe als das, was es sagt hier drin. Der erste Schritt ist, dass Sie den Node Package Manager für diejenigen, die nicht wissen, Node ist eine JavaScript-Entwicklungsumgebung, also suchen wir nach einem Knoten. Es ist technisch gesehen eine JavaScript-Laufzeitumgebung, okay? Du musst nicht wissen, was das ist. Alles, was Sie wissen müssen, ist, dass Sie Node benötigen und Node Package Manager benötigen, um Slate zu verwenden oder Slate zu installieren. Also downloaden und installieren Node, dann wollen Sie, herunterladen und installieren Node Package Manager, die nur npm für kurz ist, und ich bin nicht wirklich gehen durch und zeigen Ihnen wie man Node und npm installiert, weil ich habe es bereits auf meinem Computer. Sie sollten in der Lage sein, ziemlich detaillierte Anweisungen, wie man das auf beiden für ihre Websites zu tun, und viele Artikel, online darüber zu finden ziemlich detaillierte Anweisungen, wie man das auf beiden für ihre Websites zu tun, und viele Artikel, . Dann, sobald Sie Node und Npm installiert haben, werden Sie nach dem Paket für Slate CLI suchen, so dass ich werde, klicken Sie auf die erste Option hier. Sie können das sehen, was nicht richtig ist, ich weiß nicht, was das ist. Ich denke, wir müssen, ein bisschen genauer sein und Shopify Slate sagen, und wie Sie hier sehen können, suchen wir nach dem, der @Shopify davor hat, also vielleicht werde ich es einfach eintippen, wie ich weiß, Shopify, Slate, da wir sind, exakt übereinstimmen. Ich weiß nicht, warum das nicht in das Suchfeld kam. Hier haben Sie Slate CLI und wenn Sie sich nicht sicher sind, ob Sie auf der rechten Seite sind, müssen Sie auf der einen sein, die @Shopify /slate sagt, okay? Also das ist es, das ist die, die Sie installieren müssen und Sie haben Installationsanweisungen direkt hier. Sie verwenden also einen npm-Befehl, um Shopify Slate zu installieren, und deshalb benötigen Sie npm, da Sie npm installieren müssen, um dieses Paket direkt hier zu installieren. Jetzt, wie ich bereits erwähnt habe, habe ich Slate bereits installiert, also muss ich dies nicht tun, aber sagen wir einfach, Sie führen diesen Befehl aus und jetzt haben Sie Slate installiert. Das nächste, was Sie tun wollen, ist genau wie wir es mit Theme Kit getan haben, navigieren Sie zu dem Verzeichnis, in dem Sie Ihr neues Slate Projekt starten möchten , und führen Sie dann einen bestimmten Befehl aus. Also werde ich, öffnen Sie mein Terminal wieder, und ich werde dorthin navigieren, wo ich will, dass das sein. Also gehe ich zu icd, code/personal/current, und jetzt, wo ich aktuell bin, wird der Befehl, den ich ausführen werde, in einer Slate Dokumentation sein, also sollte es hier ein Menüpunkt für Befehle sein, die es gibt, und was wir tun möchten, ist ein neues Projekt mit Slate zu erstellen. Also, ich habe es nicht wirklich hier, weshalb. Ich habe das Gefühl, dass die Dokumentation nicht so großartig ist. Vielleicht ist es hier drin. Schiefer-Thema, nein. Ok. Nun, das Kommando, nach dem du suchst, ist Slate, Thema. Dann der Name des Designs, das Sie erstellen möchten. Ich werde es Clean Slate nennen, kam mit diesem Namen ganz von mir, und es wird das Schiefer-Thema herunterladen und alles für Sie einrichten. Das könnte ein wenig dauern, also werde ich Sie am Ende der Installation fangen. Jetzt ist es fertig, Slate herunterzuladen, und der Grund, warum es so lange gedauert hat, ist, weil es auch eine Reihe von Abhängigkeiten herunterlädt. Wenn wir jetzt in unseren aktuellen Ordner gehen, habe ich das Skillshare Thema hier, und jetzt können Sie auch im Verzeichnis sehen, ich habe saubere Schiefer. Ich werde darauf klicken und das hier in meinem Finder-Fenster öffnen, aber was ich tun werde, ist auch hier in dieses Verzeichnis zu wechseln. Jetzt, da ich in diesem Verzeichnis bin, kann ich Atom dot ausführen, weil ich Atom laufe, und ich kann dieses Verzeichnis öffnen, dieses Projekt in meinem Code-Editor. Ordnung, also lassen Sie uns einige dieser Ordner hier zusammenziehen, und Sie können sehen, dass die Ordnerstruktur auf der obersten Ebene ganz anders ist. Wir haben diese config.ylm-Datei, die wir auch einrichten müssen, aber wie Sie sehen können, haben wir oben einen Ordner mit Knotenmodulen. Dies ist eine lange Liste von Abhängigkeiten und deshalb hat es lange gedauert, um herunterzuladen, ich denke, für mich hat es vielleicht eine Minute gedauert, was ziemlich viel Zeit ist. Dann haben Sie diesen src-Ordner, in dem Sie einige der Ordner erkennen sollten. Sie haben Assets, Konfiguration, Symbole, Layout, Gebietsschemas, Skripte, Abschnitte. Es gibt ein paar andere, wie Stile, Skripte und Symbole, die in das Thema gingen, das Sie zuvor entwickelt haben, aber das ist im Grunde im src-Ordner, das ist im Grunde Ihr Thema, in dem Sie tatsächlich Ihre Änderungen vornehmen. Der große Unterschied zu Slate ist, dass wir das nicht wirklich auf Ihre Website hochladen, was es tut, ist, kompiliert all dies und wir werden eine andere Version davon erstellen und dann wird das in Ihr Thema gehen. Wir werden sehen, wie das in nur einer Sekunde funktioniert. Was wir jetzt brauchen werden, ist ein tatsächlicher Laden, um dieses Thema zu laufen, und leider wir bereits diesen Entwicklungsspeicher übertragen, haben wir bereits diesen Entwicklungsspeicher übertragen, also werde ich einen neuen Store erstellen müssen. Es ist jedoch nicht groß, ich werde das gleiche Passwort verwenden und ich werde das nennen, das Slate Skillshare Theme, wenn dieser das Slate Skillshare Theme, Name verfügbar ist. Ja, und ich werde das gleiche Passwort wie zuvor verwenden. Legen Sie eine zufällige Adresse und dann können wir sagen, dass es zum Testen einer App oder einem Thema ist, klicken Sie auf Speichern. Das sollte alles ziemlich vertraut sein, wir haben das schon mal gemacht, es ist ein Geschäft zu schaffen. Jetzt müssen wir einen ähnlichen Prozess durchlaufen wie zuvor. Da wir nun ein neues Thema erstellen und es in den Store hochladen werden, brauchen wir keine Theme-ID, was wir brauchen, ist der Store-Name, den wir hier finden können, und auch das API-Passwort. Wie wir es früher in der Klasse getan haben, müssen wir in Apps gehen, Private Apps verwalten, Neue private App erstellen. Tut mir leid, ich gehe diesmal etwas schneller, weil wir das schon mal gemacht haben. Ich werde es Slate Connection nennen. Offensichtlich muss es in einem Notfall Entwicklung E-Mail setzen, und wir müssen es den gleichen Lese-, Schreibzugriff wie wir zuvor auf die Theme-Vorlagen und Theme-Assets. Abgesehen davon, wir sind gut zu speichern, Ich verstehe, Erstellen Sie die App. Jetzt haben wir zwei der Zutaten, die wir brauchen, um Schiefer zu konfigurieren. Der Grund, warum ich ein API-Passwort für den Store und den Shop-Namen brauche , ist, weil wir gehen, um eine ähnliche Befehle ausführen, eine Theme-Kit Uhr, die Schiefer Uhr ist. Wir machen dies im Voraus, aber wir brauchen es noch nicht, was wir tun müssen, ist tatsächlich unser Thema zu bauen und es dann in den Laden hochzuladen. Ich werde mit der rechten Maustaste hier klicken, so dass wir immer noch Zugriff auf unser Passwort haben, um später zu referenzieren , und in unseren Befehlen hier können Sie den Befehl für den Build sehen, und es wird eine produktionsfähige Version des -Thema indem Sie die Dateien im Ordner dist kompilieren. Das ist Zeug, das hinter den Kulissen mit Theme Kit passiert, aber für Schiefer, es passiert direkt vor Ihren Augen und was ich damit meine ist, dass Sie bald sehen werden, dass wir unsere Vermögenswerte, unsere Stile, aufgeteilt in mehrere Dateien. Sie können leere Zustände, Formulare, das Raster sehen , erinnern Sie sich an unser vorheriges Thema, wir hatten nur eine CSS-Datei oder SCSS-Datei, die alles hielt. Nun, Slate ist ein wenig modularer, es ist ein wenig komplexer, es ist eher eine skalierbare Möglichkeit, shopify-Themes zu erstellen weil Sie trennen, was eine große CSS-Datei wäre, was Sie wollen, wenn Sie führen es auf Ihrer tatsächlichen Website aus, aber in Bezug auf die Entwicklung ist es schöner, verschiedene Ordner und verschiedene Dateien zu haben, aber was Sie wollen, ist alles, was in CSS-JavaScript in einer einzigen Datei kompiliert wird, okay? So können Sie hier viele verschiedene Skripte und in unseren Stilen viele verschiedene Stile sehen. Eines der Dinge, die passieren werden, wenn wir Slate Build ausführen, wird all das in wie ein Stylesheet oder eine JavaScript-Datei kompilieren, und wir werden sehen, dass passiert, wenn wir den Build-Befehl ausführen, also wieder, es ist nur Schiefer Werkzeuge bauen, denken, tatsächlich können wir das Wort Schiefer ohne Werkzeuge verwenden, da gehen wir, das passiert ziemlich schnell. Wenn wir jetzt in unseren Code-Editor gehen, können Sie einen Ordner namens dist sehen, und in dist können wir Assets sehen und jetzt können wir theme.scss.liquid und theme.js sehen, was wir gewohnt sind. Also nahm es all die Stile von all diesen verschiedenen Stylesheets und setzte sie zusammen, und es dauerte alle unsere Skripte und legte sie in diesem zusammen, in Ordnung? Das ist also Teil dessen, was es macht, wenn es kompiliert. Das ist, wo wir uns entwickeln wollen, aber hier wollen wir in den Laden hochladen. Also können wir diese Datei tatsächlich komprimieren, in eine ZIP machen und sie dann in den Laden hochladen, aber wir haben tatsächlich einen Befehl innerhalb Slate, wo wir das automatisch tun können. Also werde ich Slate zip anrufen, und jetzt haben wir einen Upload-Ordner mit sauberer slate.zip, okay? Wie Waren das? In Ordnung, also gehen wir zurück in unseren Laden und wie Sie sehen, ist es passwortgeschützt, so dass wir vielleicht das Passwort deaktivieren möchten, aber was ich tun werde, ist auf, Upload-Theme. Ich werde klicken, wählen Sie Datei, gehen zu meinem Verzeichnis zu gehen, wo ich diese ZIP-Datei habe , Upload Ordner, klicken Sie auf saubere slate.zip oder was auch immer Sie Ihre genannt, laden Sie diese Datei. Es wird anfangen sich zu drehen, und dann werde ich auf „Aktionen“, „Vorschau“ klicken , um zu sehen, wie unser Thema aussieht. Jetzt ist das ein Schiefer-Thema. Es ist super nackte Knochen, so ziemlich kein Styling überhaupt, aber es ist ein voll funktionsfähiges Thema. Wenn ich also ein paar Produkte in meinen Laden legen wollte, könnte ich sie auswählen, sie einen Einkaufswagen legen und sie kaufen, es glauben oder nicht, in diesem schrecklich aussehenden Laden, okay? Nun ist dies der ganze Punkt über Slate und der Grund, warum ich empfehle, dass Sie von einem bestehenden Thema beginnen, es sei denn, Sie möchten Ihre eigenen benutzerdefinierten Themen entwickeln , die Sie möglicherweise auf der Shopify-Plattform verkaufen werden, oder Sie haben vielleicht einen Client oder braucht, dass ein ganz bestimmtes, Sie wahrscheinlich nicht von diesem Ausgangspunkt aus starten wollen. Aber zu diesem Zweck haben Sie Slate hier für Sie, okay? Also, jetzt haben Sie Ihr Slate Thema in Ihrem Online-Shop, aber genau wie wir es mit Theme Kit getan haben, werden wir in der Lage sein, dieses Thema über unseren eigenen Computer zu bearbeiten, wie wir es mit unseren Code-Dateien hier haben, okay? Wir wollen es hier nicht bearbeiten, aus Gründen, die wir zuvor erwähnt haben, okay? So wie Theme Kit, können wir entweder config.yml Datei aktualisieren, so können wir hier gehen und in die Details dort setzen, oder wir können den configure Befehl ausführen, der ziemlich ähnlich zu unserem Theme Kit oder Thema konfigurieren ist . Also wieder kann ich keine Dokumentation über configure sehen, also lass es uns einfach anders machen. Lassen Sie es uns einfach in unsere eigentliche Konfigurationsdatei einfügen. Also lasst uns unseren Shop-Namen herausfinden, der hier ist. Wählen Sie das aus, legen Sie das hier rein. Theme ID, eigentlich lassen Sie uns das Passwort als nächstes tun. Setzen Sie das Passwort dort, und dann erinnern Sie sich, wie wir die Theme-ID finden. Wir gehen einfach in unseren Customizer und dann in unserem Customizer, wir können es von der URL abholen. Ok. Also jetzt haben wir unser Projekt tatsächlich verweist auf dieses Thema, das wir hochgeladen haben. Jetzt sind sie im Wesentlichen so konfiguriert, dass sie sich miteinander verbinden, okay? Und wie Sie sehen können, können wir immer noch anpassen selbst dieses bare-bone Thema mit unserem Thema Customizer Abschnitt hier, okay? In den Themeneinstellungen sollte es ziemlich nackt sein, was es ist, weil es nicht viele CSS-Regeln eingerichtet sind, aber das ist für uns zu entscheiden, was wir in diese Theme-Einstellungen setzen wollen, okay? Nun, wenn wir wollen, können wir Slate Deploy ausführen, und alle Änderungen, die wir lokal an unserem Thema vornehmen, weil wir mit config.yml eingerichtet haben, um auf dieses bestimmte Thema in diesem speziellen Speicher zu verweisen , wird alle Dateien und stellen Sie sie auf unserer Website bereit. Aber wie wir gerade gesehen haben, alles, was wir getan haben, war das Original-Thema zu zippen und wir haben bereits hochgeladen, so dass im Moment beide Versionen unseres Themas, die wir auf unserem eigenen Computer haben und die auf dem tatsächlichen Online-Shop sollte genau das Gleiche. Was wir also tun können, um lokale Änderungen zu erkennen, ist „Slate Watch“. Also werde ich das jetzt tun, „Slate Watch“, und wenn unsere config.yml-Datei korrekt eingerichtet ist, sollte dies beginnen, auf Änderungen zu achten. Jetzt ist der Unterschied zwischen Slate und Theme Kit ist es tatsächlich schafft eine lokale Adresse für uns, um das Thema als auch zu betrachten. Und es gibt tatsächlich einige Schritte hier in der Dokumentation, um ein selbstsigniertes SSL-Zertifikat zu erstellen, aber das kann irgendwie umständlich und ärgerlich sein, so dass ein Weg, um diesen Datenschutzfehler zu umgehen, ist nur zu sagen dass Sie es akzeptieren und Sie gehen, um zum lokalen Host zu gehen. In Ordnung. Also schließen wir jetzt und wir können mit dem Passwort eingeben. Also haben wir den Passwortschutz nicht ausgeschaltet, anstatt ihn auszuschalten, werde ich nur herausfinden, was das Passwort in unseren Einstellungen ist. Es gibt Ihnen standardmäßig ein wirklich einfaches Passwort. Ich werde das hier reinbringen, um auf unser Thema zuzugreifen, und los geht's. Sie haben das Thema, genau wie Sie würden, indem Sie in Ihre Themen hier gehen, und klicken Sie auf „Vorschau“, wir haben das gleiche, aber auf eine lokale Adresse, die irgendwie irreführend ist, weil wir es immer noch durchlaufen die Shopify-Plattform, die nicht wirklich lokal ist, aber sie schafft diese kleine Umgebung hier für uns, so zumindest wissen wir, dass wir mit Slate an dem Entwicklungsthema arbeiten. Also, nur um seine Arbeit zu beenden und dass es tatsächlich nach Änderungen beobachtet, lassen Sie uns tatsächlich etwas bearbeiten. Denken Sie daran, dass wir in das SRC-Verzeichnis gehen, um unser Thema zu bearbeiten, und lassen Sie uns eine grundlegende Änderung vornehmen. Also tue ich alles, um zu demonstrieren. Lassen Sie uns dieses Element untersuchen und sehen, was das ist, es ist das Website-Logo. Also lasst uns das einfach entfernen. Dies wird wahrscheinlich im Header-Abschnitt sein, also werde ich hier hineingehen, nach einem Website-Logo suchen, hier ist es, und lasst uns einfach dieses ganze, ein Tag löschen. Ich denke, ich werde auf „Speichern“ drücken. Schauen wir uns an, was in unserem Terminal vor sich geht. Sie können hier sehen, es gibt einige Dinge, die los sind, Browser neu laden, Dateiänderung ist erfolgreich, synchronisieren zu speichern und jetzt, wenn wir dies aktualisieren, sollten wir sehen, dass dieses Website-Logo, das nur Text war, ist jetzt verschwunden, und wenn wir es zurückbringen, drücken Sie „Speichern“, sollte es registrieren, dass Dateiänderungen erfolgreich synchronisiert zu speichern. Tut mir leid, das ist ein Zungenbrecher. Und aktualisieren Sie die Seite. Es ist wieder zurück, okay? Also werde ich nicht durchgehen, wie Sie dieses Thema einrichten werden, um es tatsächlich vorzeigbar aussehen zu lassen, denn das wäre ein Kurs für sich selbst, aber das sollte Ihnen einen guten Ausgangspunkt bieten um vielleicht Ihre Shopify Wissen auf die nächste Ebene. Indem man also lernt, wie man dies tatsächlich anpasst und dies in ein voll funktionsfähiges Thema verwandelt. Während es voll funktionsfähig ist, aber ich meine, es ist einfach schrecklich Benutzererfahrung. Sieht furchtbar aus. Wenn Sie dies in eine wirklich coole Store-Front verwandeln könnten, dann werden Sie wirklich die Shopify-Plattform kennen. Und vielleicht willst du das tun. Vielleicht möchten Sie eine ganze benutzerdefinierte Store-Front erstellen. Es liegt an dir. Deshalb habe ich in diesem kleinen Abschnitt über Slate am Ende. Wenn Sie Fragen haben, lassen Sie diese natürlich in das [LACHEN] Diskussionsfeld unten. Vielen Dank, dass du Jungs beobachtet hast. Ich werde Sie in der Schlussfolgerung sehen. 19. Schlussbemerkung: Das schließt diese Klasse zur Shopify-Themenentwicklung so ziemlich ab. Für Ihr Klassenprojekt möchte ich, dass Sie Ihren eigenen Shop erstellen und ihn mit den restlichen Schülern im Abschnitt „Klassenprojekte“ teilen . Seien Sie natürlich nicht besorgt, wenn Ihr Geschäft nur zum Üben dient , denn wir sind alle hier, um Fähigkeiten zu erlernen. Stellen Sie einfach sicher, dass Sie entweder das Passwort teilen oder den Passwortschutz vollständig entfernen, damit andere Schüler es sehen können. In Bezug auf das weitere Lernen gibt es viele Informationen zu den verschiedenen Aspekten von Liquid und Shopify Themen auf der offiziellen Shopify Website. Außerdem können Sie über Ihr Partnerkonto auf die Partner Academy zugreifen , indem Sie auf den Link „Bildung“ klicken. Wenn Sie jedoch Tipps oder Anleitungen benötigen, hinterlassen Sie einen Kommentar in der Diskussionsbox, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Jedenfalls, Leute, danke fürs Ansehen und ich hoffe, euch wieder in einigen meiner anderen Kurse zu sehen.