Shopify Essentials für Webentwickler: Von der Shop-Einrichtung bis zu benutzerdefinierten Designs | Kurt Elster | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Shopify Essentials für Webentwickler: Von der Shop-Einrichtung bis zu benutzerdefinierten Designs

teacher avatar Kurt Elster, Senior Ecommerce Consultant

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

17 Einheiten (3 Std. 2 Min.)
    • 1. Einführung

      1:36
    • 2. Erste Schritte mit Ecommerce

      6:03
    • 3. Einführung in dein Partnerkonto

      7:20
    • 4. Entwicklungs-Rundgang

      13:05
    • 5. Produkte und Varianten

      11:30
    • 6. Kollektionen

      12:44
    • 7. Seiten und Blogs

      11:32
    • 8. Themen und Flüssigkeit erklärt

      14:13
    • 9. Layouts, Vorlagen

      14:54
    • 10. Filter und Loops

      12:15
    • 11. Produkt

      13:20
    • 12. Kollektion

      16:46
    • 13. Seite

      6:26
    • 14. Alternative Vorlagen und Snippets

      10:04
    • 15. Checkout

      17:08
    • 16. Design-Einstellungen

      9:12
    • 17. Geld verdienen mit Shopify

      4:00
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

19.462

Teilnehmer:innen

8

Projekte

Über diesen Kurs

Schließen Sie sich dem Shopify-Experten und Agenturinhaber Kurt Elster an, um zu erfahren, wie Sie einen Shopify-E-Commerce-Shop einrichten, entwerfen, erstellen und anpassen.

Dieser Kurs richtet sich an Webdesigner und -entwickler und bietet eine Einführung in das gesamte Shopify-Ökosystem mit Schwerpunkt auf den ersten Schritten Thema-Änderung, ein Sprungbrett für die kundenspezifische Entwicklung. Egal, ob du deine eigenen Vermögenswerte verkaufen oder deinem bestehenden Webdesign-Geschäft eine neue Dienstleistungslinie hinzufügen möchtest, dieser Kurs vermittelt dir alle Fähigkeiten, die du für den Einstieg in die Shopify-Handelsplattform benötigest.

Als Kursprojekt startest du deinen ersten Shopify-Entwicklungsshop mit einem grundlegenden anpassbaren Design und modifizierst dieses Design dann mit einer Reihe einfacher Änderungen – die alle auf die häufigsten Anfragen von Kunden aus der realen Welt eingehen.

Melde dich für das kostenlose Shopify-Partnerprogramm an, um deinen eigenen Entwicklungsshop zu eröffnen, dein Kursprojekt abzuschließen und die Shopify-Plattform selbst auszuprobieren.

 

Triff deine:n Kursleiter:in

Teacher Profile Image

Kurt Elster

Senior Ecommerce Consultant

Kursleiter:in

Kurt Elster, MBA is a Senior Ecommerce Consultant who helps Shopify store owners uncover hidden profits in their websites. Kurt is the founder of ecommerce agency Ethercycle and helps Shopify store owners earn more money (and work fewer hours.)

Kurt is the author of Ecommerce Bootcamp, a book on marketing your Shopify store. His free podcast, The Unofficial Shopify Podcast, has helped thousands of entrepreneurs make the leap to self-employment while growing their stores. You can learn more and subscribe to Kurt's free newsletter at http://kurtelster.com/

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Howdy, ich bin Kurt Elster, Agenturinhaber bei Ethercycle und wirklich Vollzeit-Shopify-Experte. In den letzten zwei Jahren habe ich alles getan, was ich getan habe, ist zu arbeiten , zu essen, zu schlafen, zu atmen, darüber zu reden , darüber zu schreiben und von der Arbeit an der Shopify-Plattform als Shopify-Experte zu leben. Sie sind wahrscheinlich entweder Webdesigner oder Webentwickler, Sie sind ein Freiberufler in diesem digitalen Raum und vielleicht haben Sie Front-End-Entwicklungsfähigkeiten. HTML, CSS, vielleicht JavaScript, aber Sie brauchen es nicht unbedingt. Wenn Sie diese beiden Fähigkeiten haben, dann ist das einzige, was Sie davon abhält, eine erfolgreiche Karriere bei Shopify zu haben , die Plattform zu kennen. Das ist es, was wir versuchen werden, mit diesem Kurs durchzustehen. Ich werde Ihnen helfen, zu springen und zu diesem schnellsten Weg zu täglichen Gewinnen im Shopify-Expertenprogramm zu gelangen. Auf dem Weg werde ich Sie mit einigen Best Practices erlernen, die ich für die Einrichtung großartiger gut konvertierender Speicher gelernt habe , der Ihnen helfen wird. Sobald wir das haben, werden wir in Themen eintauchen, denn als Shopify-Experte können Sie Designer, Entwickler, Fotograf, was auch immer sein. Aber die häufigste Anfrage, die Shop-Besitzer haben, ist, kann ich x über mein Thema ändern? Also, wenn du das lernen könntest, ist es eine großartige Einnahmequelle. Also, da fangen wir an. Um dies zu tun, lernen wir die Knochen des Themas oder was in ein Shopify-Thema geht, diese Stücke. Dann, als Ergebnis, wir in der Lage sein, unsere eigenen Themen-Modifikationen zu machen. Das ist unsere letzte Aufgabe, das ist das Sprungbrett, um später Ihre eigenen Themen zu entwerfen und zu entwickeln. 2. Erste Schritte mit Ecommerce: Shopify begann sein Leben nur als Online-Warenkorb. Es verwandelte sich schnell in, nicht nur eine komplette Plattform für E-Commerce, diese End-to-End-Lösung, sondern auch in eine Community. Diese Community mit diesem Wachstumsmarketing zu haben, ist das, was wirklich eine Menge von Shopify Wachstum als eine großartige Plattform angetrieben hat. Aber es ist auch Teil eines größeren Trends. Es gibt also ein paar Dinge, die das explosive Wachstum des E-Commerce im Allgemeinen vorangetrieben haben . Ich denke, in erster Linie ist mobil. Wenn wir uns Statistiken für unsere Online-Shops ansehen, wäre ich überrascht, wenn es noch ein Geschäft gibt, das weniger als 50 Prozent ihres Traffics hat , mobil ist, und vor allem mit Geschäften, die ein jüngeres Publikum haben, ist es gehen, um noch mehr in Richtung mobil zu schiefen. Das liegt daran, dass wir diese Geräte die ganze Zeit bei uns haben. Diese sind immer eingeschaltet, immer verbunden, immer mit diesen Geräten, Telefonen, Tablets und sogar Smartwatches. Wenn Sie darüber nachdenken, waren die letzten Einkäufe, die ich getätigt habe, auf meinem iPhone, das im Bett lag. Aber was machen wir am meisten mit unseren Smartphones? Es ist wahrscheinlich überprüfen Facebook. Es ist eine schreckliche Angewohnheit, und wir tun es wahrscheinlich alle. Wenn Sie Facebook überprüfen, wenden sich viele Marken an uns. Aber eine Marke, die mir sagt, etwas zu kaufen, wird nie ein Zehntel den gleichen Wert wie ein Freund haben. Das ist das, was an den sozialen Medien wunderbar ist. Wenn jemand ein Produkt kauft, sie lieben es, sie sind stolz darauf, und sie teilen es auf Facebook, Ich bin viel wahrscheinlicher, nur klicken Sie durch eine mobile Website und kaufen Sie es, wenn ein Freund es tut. Soziale Medien, kombiniert mit Mobilgeräten, ist es eine unglaubliche Social-Product-Discovery-Engine geworden. In Shopify funktionieren alle Themen auf Mobilgeräten. Sie sind alle voll reaktionsschnell und integrieren sich auch unglaublich gut mit Facebook, Twitter, Pinterest. Sie haben diese sozialen Integrationen in sie eingebaut. Ich denke, dass es jetzt mehr denn je eine unglaublich aufregende Zeit ist, sich im E-Commerce-Bereich zu engagieren. Nehmen Sie sich einen Moment Zeit und fragen Sie sich: „Warum sind Sie hier?“ Man könnte sagen, es ist Shopify zu lernen, ein Shopify-Designer zu sein. Aber ich glaube, du bist wirklich hier, weil das ein Mittel zum Zweck ist. Ich glaube, du bist hier, um mehr Geld zu verdienen, und das ist großartig. Shopify, es ist eine gute Möglichkeit, ein Einkommen als Designer zu verdienen. Es gibt mehrere Möglichkeiten, wie wir das tun könnten. Der erste ist der sehr wörtliche direkte Weg, und das ist, Designs auf Shopify zu verkaufen. Du könntest deinen eigenen Shopify-Shop kreieren und T-Shirt-Designs verkaufen. Es gab ein paar sehr erfolgreiche Leute, die das getan haben. ugmonk.com zum Beispiel ist ein sehr gutes Beispiel dafür. Oder du könntest eBooks verkaufen. Ein Buch Apart ist ein großartiges Beispiel dafür. Sobald Sie diese Erfahrung dabei haben, dann könnten Sie vielleicht in den Verkauf eines Shopify-Themes übergehen. Wenn Sie ein Shopify-Thema aufbauen, könnten Sie sehr realistisch fünftausend im Monat impulsive Einnahmen aus diesen Themen-Verkäufen machen . Diese Themen Vertrieb, natürlich, diese Menschen könnten zu erreichen, um Sie und werden Kunden, wenn sie nach Themen Modifikationen oder Anpassungen oder Support im Allgemeinen fragen . Der Grund, warum man sehr lukrativ ist, ist, weil es auch schwierig ist. Shopify ist sehr streng in Bezug auf die Qualität der Themen. Du kannst also nicht einfach etwas zusammenschlagen. Es muss ein allgemein gutes Thema sein, und das ist eine gute Sache. Es bedeutet, dass es weniger Themen gibt, gegen die Sie konkurrieren können, und wenn Sie ein Thema für einen Kunden wählen müssen, ein Standard-Thema, können Sie immer sicher sein zu wissen, dass es von großer Qualität sein wird. Es gibt den dritten Weg, das traditionelle Modell und was wir tun, das ist nur die Kundenarbeit. In der Kundenarbeit berechnen Sie, was immer Sie wollen. Sie bauen von der Stunde oder Festpreis, fix Umfang. Aber dann gibt uns Shopify einen Weg, dieses Einkommen zu erhöhen. Wenn Sie derjenige sind, der den Client zu Shopify migriert und Sie den Store für sie hochdrehen, erhalten Sie einen 20-prozentigen Affiliate-Anteil an allem, was der Kunde an Shopify zahlt. Also, was auch immer sie zahlen, am Ende des Monats erhalten Sie einen 20 Prozent Umsatzanteil auf, dass PayPal direkt an Sie. Das geht für immer weiter. Also, Sie richten ein Geschäft einmal ein, bauen ein Portfolio an Shopify-Stores, Shopify-Kunden, und sehr schnell entdecken Sie, dass Sie Hunderte oder sogar Tausende von Dollar pro Monat aus diesem passiven Shopify-Einkommen zusätzlich zu Ihrem Umsatzanteil verdienen . Also, es gibt uns alle Arten von Möglichkeiten für Designer, das Ding zu wählen , mit dem wir uns wohl fühlen und Geld verdienen zu tun, was wir lieben, was großartiges Design ist. Ich habe dir gesagt, warum du Shopify als Designer umarmen solltest. Aber wenn Sie ein Designer sind, Sie vielleicht skeptisch gegenüber Shopify als Hosting-Plattform, weil Sie die größte Freiheit wollen. Früher habe ich immer lieber meinen eigenen Server, einen FTP, alle meine eigenen Dateien hochladen, tun, was ich will. Also, ich möchte, dass du eins weißt. Es gibt keine Einschränkungen in Shopify und was Sie mit HTML, CSS, JavaScript tun könnten. Spaß und klug, es wird wirklich genauso flexibel sein, als ob Sie Ihren eigenen Server hätten, aber ohne einige der Kopfschmerzen. Wenn Sie also zu Shopify als Hosting-Plattform wechseln, Sie sich keine Sorgen mehr über das Hochdrehen von Servern. Sie müssen keinen Server konfigurieren, sondern sich darum kümmern, dass der Server gehackt wird. All das Zeug verschwindet. Sie müssen diese IT-Rolle nicht mehr spielen, weil Shopify sich für Sie darum kümmert. Die andere Sache, die Designer vor Shopify erschreckt , ist, dass sie möglicherweise eine neue Programmiersprache lernen müssen, oder vielleicht kennen Sie bereits eine Programmiersprache und Sie wollen keine andere lernen. Das ist das Tolle an Shopify. Es verwendet Liquid. Liquid ist unglaublich einfach zu bedienen. Es ist etwas weniger leistungsfähig als eine herkömmliche Programmiersprache, aber deutlich einfacher. Also, es ist in natürlicher Sprache geschrieben, es ist sehr klar und prägnant und das Beste von allem, es ist wirklich gut dokumentiert. Also, jede Frage, die Sie haben, können Sie es schnell googeln. Sie werden Shopify-Dokumentation dazu finden, das ist, was ich tue. Wir werden einige dieser Ressourcen durchlaufen. Aber wenn du scharfsinnig bist, merkst du vielleicht, oh nein! Ich gebe diese Web-Hosting-Einnahmen auf. Was Sie aufgeben, ist die Kopfschmerzen von Web-Hosting und Sie gewinnen die Affiliate-Aktieneinnahmen. wie ich bereits erwähnt habe Wenn wir also unser Shopify-Partnerkonto aufbauen, zahlt uns Shopify, , 20 Prozent Affiliate-Anteil an Einnahmen von Kunden, die wir auf die Shopify-Plattform migrieren. Das werden wir als Nächstes tun. In ein paar Minuten werden wir unser eigenes Shopify-Partnerkonto erstellen und ich werde Sie durch das führen. Um das zu tun, werde ich meinen Bildschirm mit Ihnen im nächsten Video teilen. 3. Einführung in dein Partnerkonto: Also, der erste Schritt, wenn Sie Shopify-Partner werden wollen : erster Schritt als Designer, der sich mit Shopify einlässt, Entwickler mit Shopify einlässt. Was auch immer Sie tun, wenn Sie sich mit Shopify beschäftigen, möchten Sie mit dem Shopify Partnerprogramm beginnen. Google Shopify Partnerprogramm oder das shopify.com/partners könnte nicht einfacher sein. Wenn Sie dem Partnerprogramm beitreten, ist dies keine verifizierte Sache, Sie melden sich einfach an, es gibt keinen echten Qualifizierungsprozess hier. Das kommt später, wenn Sie sich für das Expertenprogramm entscheiden. Das ist ein Sprungbrett dazu. Also, hier, wir haben das... das ist cool, der Videohintergrund, wie cool ist das? Aber hier haben sie diese Schlagzeile. Wir helfen Freiberufler und Agenturen zu wachsen. Hey, das sind wir. Also, wir sind an der richtigen Stelle. Abgesehen von dem Umsatzanteil, der Zugang zu der Lage sein, Entwicklungsgeschäfte leicht zu spinnen und all das Zeug an einem Ort zu haben, sie geben Ihnen auch einige nette kostenlose Ressourcen für das Marketing. Sie werden Ihnen Logos geben, die Sie verwenden können, Marketingmaterialien. Es gibt einen tollen Newsletter, den sie verschicken. Ich nehme die ganze Zeit Material davon. Oft werde ich das als Social Media FOTA verwenden, spart mir etwas Zeit. Ihre Dokumentation lebt hier. Sie geben Ihnen Webinare, Workshops, die stattfinden, und sie haben sich darauf geeinigt, wir haben einige davon organisiert. Es macht Spaß. Und es gibt ein privates Forum, das Shopify betreibt, und es gibt auch einige andere großartige inoffizielle , die Sie auf dem Weg entdecken werden. Also, und dann bekommen wir natürlich ständig monatliches Einkommen zu verdienen, was wir wollen. Sie erhalten diesen 20-Prozent-Umsatzanteil, was nett von jedem Kunden ist, den Sie auf sich bringen, nur um Leute dazu zu bringen, sich anzumelden. Das ist fantastisch, und es ist für immer. Und wie wir bereits besprochen haben, können Sie auch Themen verkaufen, wo sie Ihnen 70 Prozent geben; und dann gibt es auch den App Store. Ein durchschnittlicher App-Umsatz beträgt 2000 pro Monat. Und je nachdem, wo Ihre Fähigkeiten sind, wenn Sie ein Designer sind, möchten Sie wahrscheinlich an Themen halten und wenn Sie ein Entwickler sind, werden Sie wahrscheinlich bequemer mit Apps. Es ist, was auch immer du dich wohlfühlst und vielleicht bist du ein Einhorn, du könntest beides tun. Darin gibt es viele Leute. Es ist großartig. Also, in Ordnung. Lasst uns wieder nach oben gehen. Hier sind wir. Klicken Sie einfach auf Jetzt beitreten, um dem Partnerprogramm beizutreten, und wir eröffnen unser kostenloses Partnerkonto. Sehr einfach. Wir haben unseren Firmennamen. Hier ist Ihr Empfehlungslink, und Ihr Empfehlungslink ist großartig, wenn Sie einfach überall über Shopify sprechen, Ihren Empfehlungslink einfügen und wenn Sie Glück haben, dass sich jemand anmeldet. Das wird zu Ihrem Partnerkonto hinzugefügt und Sie erhalten diesen 20-prozentigen Umsatzanteil wieder. Wir könnten unsere Interessengebiete zum Ausdruck bringen. Wir haben eine Login-Info, grundlegende Kontaktinformationen; und das Wichtige, unser PayPal-Konto, damit sie uns bezahlen können. Wir sind damit einverstanden, schnell Shopify-Partner werden. Es könnte nicht einfacher sein. Also, schauen wir uns einen an. Also, hier ist mein Shop oder mein Shopify-Partner-Dashboard. Also, wir können sehen - ich tue - in Client-Services, ich habe keine Apps da draußen, ich habe keine Themen. Ich habe angeschlossene Geschäfte. Also, Sie könnten sehen, dass ich diese regelmäßigen Zahlungen von Hunderten von Dollar bekomme. Es gibt Monate, in denen... und du bekommst Prozent wie, ich glaube, du bekommst Prozentsätze des Gesamtumsatzes. Es gibt einen Monat, in dem ich 500 Dollar bezahlen werde. Unsere nächsten Zahlungen: 362 Dollar. Es ist großartig, wirklich, weil es passiv ist. Ich muss nichts tun, um dieses Einkommen zu bekommen, es taucht einfach auf. Wenn Sie dann auf Affiliates klicken, können Sie Ihren Affiliate-Verlauf sehen, wird Ihnen zeigen, welche Geschäfte Sie haben, wo sie sich befinden und was mit ihnen los ist. Es ist schön, und du könntest danach suchen, um einen bestimmten Laden zu finden, zu sehen, auf welchem Plan sie sind, und wissen, was mit ihnen passiert ist. Es ist schön. Dann ist das Wichtige, Entwicklungsgeschäfte. Development Stores sind also die kostenlosen Stores, die Sie für einen Client oder sich selbst zum Testen von Dingen erstellen können. Ich habe festgestellt, dass das der einfachste Weg ist, Kunden in Shopify einzusteigen. Ich schicke ihnen nicht den Empfehlungslink und hoffe, dass sie sich dafür anmelden, ich gehe einen Schritt weiter, ich erstelle einen neuen Entwicklungs-Shop für sie und ich sage: „Hey, ich habe ein kostenloses Konto für dich gemacht. Hier ist Ihr Login-Passwort.“ Und sie können es ändern, oder ich füge sie als Mitarbeiter hinzu und mache sie dann zu einem Ladenbesitzer, aber wir werden das auch abdecken. Dann können Sie natürlich, wenn Sie irgendwelche Apps im App Store oder Themes haben, auf diese hier zugreifen. Hier haben wir einige private Apps, die sich mit. Themen, Sie könnten ein Thema erstellen, setzen Sie es hier. Einstellungen, dies im Grunde nur das Zeug, das Sie auf Ihrem Partner Sache eingerichtet haben . Du könntest es hier ändern. Und dann, was haben wir hier? Partner-Ressourcen. Partner-Ressourcen ist nett. Es hat Dokumentation, Tutorials (das Lernzentrum), die flüssige Spickzettel. Definitiv, wenn du irgendeine Programmierung machst, ich liebe dieses Ding. Ich habe das ausgedruckt. Ich halte es auf meinem Schreibtisch, sehr hilfsbereit. Newsletter, und für Kunden. Wenn Sie anfangen, wollen Sie etwas Marketing machen, es gibt einige tolle, tolle Sachen hier drin, wie das Händler-Übergabe-Kit. Ich liebe das. Es lässt Sie wirklich professionell aussehen, Geist weiter. Es ist ein PDF, also haben wir die Shopify Kurzanleitung. Es ist PDF. Und dann, hier drinnen, können Sie voran gehen und es bearbeiten. Also könnten wir sagen: „Deine wirklich, Kurt.“ Und so ist es personalisiert, sieht aus, als wäre es von Ihnen, und dann müssen Sie durchgehen und dort URLs einfügen. Ok. Gehen wir zurück zu Shopify-Partnern. Sobald wir also unser Shopify-Partnerkonto erstellt haben und alle unsere Marketing-Ressourcen durchlaufen haben, das erste, was wir tun wollen und das, worüber wir uns Sorgen machen, für die Zwecke des Skillshare Kurses ist das erste, was wir tun wollen und das, worüber wir uns Sorgen machen, für die Zwecke des Skillshare Kurses Einrichten eines Stores. Erstellen eines neuen Entwicklungsspeichers, Arbeiten mit einem Thema, Bearbeiten eines Themas. Sie möchten also einen Entwicklungsspeicher erstellen. Sehr einfach. Wir nennen es unsere Skillshare Demo. Es ist ein Online-Shop. Sie könnten auch Online-Einzelhandels-Shop zu tun, die so standardmäßig, es wird die Point of Sale System aktiviert als auch der Online-Shop oder Sie können nur reine Point of Sale tun. In diesem Fall werden wir nur den Online-Shop halten, aber wenn Sie den Online-Shop meistern können, ist das Point-of-Sale-Add-on sehr einfach, sehr selbsterklärend. Also, wir werden unser Passwort hier hinzufügen, und ich vermisse es eingegeben, um Entwicklungsspeicher zu erstellen, arbeiten; und boom, es ist fertig. Das ist schon gesponnen, es könnte nicht einfacher sein. Vergleichen Sie das also, um zu versuchen, eine Test-Shop-Produktionsumgebung, Entwicklungsumgebung, Staging-Server, diese Art von Sache zu spinnen Entwicklungsumgebung, Staging-Server, . Das ist ein großer Schmerz. Das ist viel einfacher. Und jetzt, da wir es geschafft haben, gehen wir zu unseren Entwicklungsgeschäften, hier ist es und wir klicken darauf. Haha. Geben Sie das Zeug ein, setzen Sie sich an mich erinnern, melden Sie sich an und boom. Also, wenn Sie das durchlaufen, waren das etwa 90 Sekunden? Sie können mit einem Demo-Shop von nichts zu einem Shopify-Partner wechseln. Sehr einfach, oder ein Demo-Store entweder für sich selbst oder für einen Kunden. Es ist nützlich, ich mag es. Also, und wir werden nein sagen, klopfen Sie das ab. Da gehen wir. 4. Entwicklungs-Rundgang: Also, wir haben einen brandneuen Laden, nichts wurde eingerichtet und es wird anfangen, uns durch ihn zu führen. Es fordert uns auf, unsere Zahlungen, unsere Versandeinstellungen, Steuern zu konfigurieren , Produkte hinzuzufügen, den Laden anzupassen, diese Art von Sache. Aber sobald diese Dinge verschwinden, haben sie eine Menge nützlicher Inhalte hier reingesteckt. Auf der Seite des Blicks konnten wir sehen, wie es unserem Shop geht, eine aktuelle Aktivität sehen, welcher Benutzer was getan hat, und dann haben sie einige vorgeschlagene Sachen hier, wie hilfreiche Inhalte. Hier sind einige großartige Beispiele für verlassene Warenkorb-E-Mails, oder hier ist eine Chance, Ihre Produkte zu präsentieren. Also, das erste, was wir wollen, sind Befehle. Bestellungen bedeuten, dass wir bezahlt werden. Sie könnten eine Bestellung manuell erstellen, wenn Sie einen über das Telefon genommen haben, was eine neue Funktion ist, es ist schön. Ihre erste Bestellung wird hier angezeigt. Es wird uns auch zeigen verlassen Checkouts, die cool ist. Aber werfen wir einen Blick auf einen Beispielladen. Also, wir haben, das ist ein Klient von mir, Everest Bands, Everest Horology. Also, hier drin habe ich meinen Namen durchsucht. Sie konnten sehen, dass, sobald Sie eine ganze Reihe von Bestellungen haben, können Sie sie nach unbezahlten, nicht erfüllten, offenen, allen Bestellungen sortieren . Ich habe mich hier durchsucht, und das war ein Testauftrag. Wir haben gesehen, dass es markiert, zurückerstattet und nicht erfüllt ist, was Sinn ergibt. Dann, wenn wir es öffnen, hier haben wir hier drin und es wird uns zeigen, wofür die Bestellung ist, eine Übersicht über den Kunden, meine Adresse, das ist meine Büroadresse lassen Sie mich in Ruhe. Dann können Sie dem Kunden eine Notiz hinzufügen, wenn der Kunde eine Notiz auf der Karte hinterlassen hat, wird sie dort erscheinen und dann können Sie sie mit Tags versehen. Wenn Sie also viele Bestellungen haben und einfache Möglichkeiten haben, sie zu durchsuchen, könnten Sie sie mit Dingen versehen. Das Beispiel, das ich Ihnen gegeben habe, ist Großhandel, das ist ziemlich hilfreich, um Ihre Großhandelsbestellungen von Ihren regulären Bestellungen unterscheiden zu können . Gehen wir zurück zu unserem Demo-Store. Als nächstes haben wir Produkte, und Produkte sind mehr als Produkte. Wir müssen unsere Produkte hier hinzufügen, wir können sie importieren, hinzufügen, sie auf einen Blick exportieren, wenn Sie Shopify verwenden, um den Lagerbestand zu verfolgen Dies ist eine Option, in die wir bekommen, hier können Sie all Ihren Lagerbestand hier sehen. Und noch wichtiger ist, wir haben Sammlungen. Sammlungen nennt Shopify Kategorien, und es ist eine der Unterscheidungen zwischen Shopify und anderen E-Commerce-Plattformen. Alle anderen nennen sie Kategorien, und sie ermöglichen es Ihnen, in Nestkategorien ein wenig verrückt zu werden. Eine Sache, die Leute nach oben bringt, ist in Shopify gibt es keine verschachtelten Kategorien oder Sammlungen. Sie erstellen nur Sammlungen und dann gibt es verschiedene Möglichkeiten, um Ihre Navigation zu organisieren. Manche Leute denken zunächst, dass dies eine Einschränkung ist, ich verspreche, es ist nicht, es wird für bessere Geschichten insgesamt zu machen, aber etwas zu beachten. Dann schauen wir uns ein Beispiel im Live-Store an, gehen Sie in Produkte und sicher genug, es zeigt uns alle unsere Produkte. Hier verfolgen wir nicht das Inventar, aber wenn Sie es getan haben, würde es Ihnen zeigen. Wir haben Typ Hersteller, hält die Dinge sehr organisiert, sehr nett, und dann können wir exportieren, importieren Produkte, und für die Aktualisierung, wir könnten sie filtern. Es ist großartig. Lassen Sie uns auf den Weg zu Kunden. Kunden sind großartig, Sie können Ihre alten Kunden importieren, wenn Sie von etwas anderem umziehen, oder wenn Kunden kaufen, werden sie hier erscheinen, oder Sie können einen Kunden hinzufügen. Dann, was ist schön daran, ist, dass Sie filtern können, wenn die Leute auschecken, werden sie fragen : „Hey, willst du Marketing von uns akzeptieren?“ Ich empfehle es standardmäßig, „ja, sie wollen Marketing von Ihnen akzeptieren“, und dann können Sie alle exportieren, die Marketing in einer Tabelle akzeptiert. Mach, was du willst, lade es auf Facebook hoch, füge es zu Mail Chimp mit einer Mail Chimp Integration hinzu, alle Arten von lustigen Sachen, die du hier machen könntest. Aber wir fangen an zu sehen, es ist eine vollwertige und fertige Lösung. Es ist alles, was Sie brauchen, um online zu verkaufen. Dann haben wir Berichte. Berichte sind eine Funktion. Es ist nicht im Grundplan, es ist nicht im billigsten Plan, es erscheint im nächsthöheren Plan, und je nach Kunde könnte es hilfreich sein. Wenn Sie ein Produkt verkaufen oder nicht viel verkaufen, brauchen Sie vielleicht keine Berichte. Aber im Laufe der Zeit, wenn die Menschen wachsen, stellen wir fest, dass sie diese Berichte oft wollen und brauchen. Mein Lieblingsbericht, Bruttoumsatz nach Produkttitel. Ich kann es verwenden, um schnell zu sehen, was das profitabelste Produkt ist? Was ist das meistverkaufte Produkt? Dann wird das Werbung, Vertrieb, diese Art von Sache informieren . Sie können es auch verwenden, um Bericht über Ihre Umsatzsteuern zu erhalten. Wenn Sie online verkaufen, physische Waren haben Sie eine Datei Mehrwertsteuer, das macht es viel einfacher. Dann haben wir Rabatte. Der Diskontierungsmotor. Wenn Sie online verkaufen, werden Sie irgendwann am Ende Verkäufe anbieten. Versuchen wir also, einen Rabattcode hinzuzufügen. Wir können einen erfinden, SHOPIFYRULES, oder ich mag das irgendwie, so dass sie einzigartig aussehen, einen generieren, und Sie können einfach zufällige Rabattcodes den ganzen Tag machen. Es ermöglicht Ihnen, sie zu begrenzen, alle Arten von Spaß Einstellungen. Es ist ziemlich mächtig und es gibt mehr als eine, Sie könnten Rabatt einen festen Betrag tun, Rabatt einen Prozentsatz, bieten kostenlosen Versand. Und dann können wir es auch für alles tun, Bestellungen über einen bestimmten Betrag. Wenn Sie sagen, geben Sie $50 aus, erhalten Sie kostenlosen Versand, tun Sie es für eine Sammlung von Waren oder ein bestimmtes Produkt, oder Sie könnten es für einen Kunden tun. Sie könnten sagen, hey, wir haben Sie als VIP-Kunde identifiziert, also geben wir Ihnen einen Sonderrabatt, oder als eine Möglichkeit, Großhandel anzubieten, es ist ein guter Weg, dies zu tun. Wir haben unseren Online-Shop. Online-Shop ist, wo Sachen, die für Ihren Online-Shop spezifisch sind, leben. Das verwirrt die Leute ein wenig, weil es mehr als einen Vertriebskanal gibt. Ich halte es für ein klares Zeichen dafür, dass es in Zukunft neue Vertriebskanäle geben könnte. Moment sind die beiden wichtigsten Online Store und Point of Sale. Das ist, wo Sachen wirklich Inhalte der Website zu leben werden. Hier haben wir unseren Überblick. In einem Live-Store, die Übersicht hätte Besucher Conversion-Rate, diese lustigen Zahlen. Aber hier können wir unsere Blog-Posts live tun, wir könnten mehrere Blogs machen, wir werden darüber sprechen, Seiten, und hier ist wirklich, wo es klar wird, dass dies ein vollständiges Content-Management-System ist. Wir können Seiten hinzufügen, und wenn wir es öffnen, können wir diesen wysiwyg Editor sehen, wir haben SEO-Optionen in hier, wir könnten ein bestimmtes Veröffentlichungsdatum festlegen, das cool ist, können Sie ein Stück Inhalt schreiben jetzt, habe es in der Zukunft veröffentlicht, setzen Dinge auf Autopilot, was sehr schön ist. Und dann haben wir vielleicht sogar verschiedene Seitenvorlagen, und wir werden später auch darauf eintauchen. Navigation. Das ist großartig, Navigation. Navigation in Shopify bezieht sich auf, lassen Sie uns einen Beispielspeicher öffnen. Wir haben diese Kerle. Hier ist unsere Hauptlink-Liste, es ist dies, und dann sind diese Drop-Downs auch Link-Listen, und dann, wenn wir nach unten in die Fußzeile gehen, ist dies eine Linkliste. Es ist nur eine wirklich einfache Möglichkeit, über Navigation nachzudenken. Hier können Sie diese Linkliste bearbeiten, hier ist unsere Footer Link-Liste, fügen Sie eine weitere hinzu und schauen Sie sich das an. Wie wir das Sammlungsprodukt ausgewählt haben, macht es sehr einfach. Wir werden sagen, ich möchte es zu meinem Blog senden, und der Nachrichtenblog wird es Blog nennen, speichern. Die Aktualisierung der Navigation war noch nie einfacher. Dann haben wir Domains. Dies ist also eine der wenigen Einschränkungen im Entwicklungsspeicher. Sie können dem Store keine Domain hinzufügen, bis Sie einen kostenpflichtigen Tarif haben. Sie müssen diese aktualisieren. Und das ist okay. Es ist keine schreckliche Einschränkung, es stoppt wirklich keine Art von Tests. Aber schauen wir es mit Everest Bands schnell an, wie es in einem Live-Store aussehen würde. Sie können eine neue Domain über Shopify kaufen, was es außerordentlich einfach macht und es ist richtig, $13 pro Jahr, sehr nett, oder, Sie können einen Domain-Namen hinzufügen, den Sie bereits besitzen, in diesem Fall ist das so einfach wie, Sie klicken, eine vorhandene Domäne hinzufügen, geben Sie sie hier ein. Ich werde das in einem Live-Store machen. Dann sind es nur zwei Datensätze, die Sie in Ihrem DNS ändern müssen, einen für A-Namen, einen für C-Namen, keine große Sache. Dann könnten wir unseren primären Domain-Namen wählen, wenn wir Weiterleitungen machen wollen, alles dorthin gehen, wir können das ein- oder ausschalten, und dann überprüft es auch diesen kleinen Status-Kerl. Da steht: „Hey, hast du DNS richtig eingerichtet?“ und das ist schön und bequem, es stellt das hier drin. Was haben wir sonst noch? Also, ich sagte, sie machen mehrere Vertriebskanäle, und sicher genug, schauen Sie sich das an, wir haben Pinterest, Facebook hier drin, das ist auch, wo unser Point of Sale erscheinen würde. Es bricht es einfach auf. Es ist bequem und schön. App-Bereich. Boom, es zeigt uns alle installierten Apps. Wir konnten sehen, dass dieser bestimmte Store mehrere Apps installiert hat. Sehr häufig für Stores, um Apps zu tun, und sie können einfache Dinge sein. Klaviyo, all dies tut, ist Kunden, die Marketing akzeptieren, in eine E-Mail-Liste in Klaviyo zu verschieben . Es ist großartig, es ist einfach, spart eine Tonne Zeit, oder etwas ist Phantasie, Shipwire, die Auftragsabwicklung, Auftragsverwaltung für sie erledigt . Dann gibt es natürlich einen bösen Jungen, Einstellungen. Es gibt Tonnen von verschiedenen Einstellungen, die Sie damit spielen können, konfigurieren Sie den Laden, wie Sie wollen. Ich werde nicht alle durchlaufen. Wir kommen später zu ihnen. Aber sie sind auf einfache Weise angelegt. Sie ergeben Sinn, und wir haben alle Ihre Kontaktdaten hier. Lass uns in diesen Kerl eintauchen. Ja, lassen Sie uns Ihre Demo schließen. Bumm. Zahlungen, bei denen wir unsere Zahlungsoptionen wählen, unsere Check-out-Einstellungen, die cool sind, vielleicht möchten Sie Konten in Ihrem Shop anbieten, vielleicht tun Sie es nicht. Sie könnten wählen, wie streng Sie sind, wenn die Leute auschecken. Der aktualisierte Plan hat sogar aufgegeben Checkout-Benachrichtigungs-E-Mails integriert, was sehr schön ist. Hier könnten wir wählen, ob die Leute dem E-Mail-Marketing zustimmen. Ich setze es gerne standardmäßig ein, aber die nicht-böse Option besteht darin, es so zu setzen, dass es standardmäßig nicht übereinstimmt. Wenn Sie die Conversion-Rate-Tracking auf der Dankeschöse-Seite durchführen, gibt uns dieses kleine Snippet einen Punkt, um das einzugeben. Es ist großartig. Dann hier für unsere Kasse Seite, wir haben eine Rückerstattung Datenschutz Bedingungen der Service-Richtlinien, und wenn Sie nicht ganz über sie denken wollen, schauen Sie sich das an, sie generieren Proben. Ich bin jedoch kein Anwalt und dies sind keine Rechtsberatung, und durch die Nutzung stimmen Sie einem Haftungsausschluss von Shopify zu. Aber sie sind ein guter Anfang. Lesen Sie sie definitiv durch, schreiben Sie sie neu, überlegen Sie, sie überprüfen zu lassen. Aber es hilft sehr, die dort zu haben. Versand. Wir könnten unsere Versandeinstellungen hier auswählen, was phänomenal ist, und sogar Echtzeitversand des Transporteurs. Ich liebe es. Dann tauchen wir in den Online-Shop ein. Online Store, wir haben gerade unsere Google Analytics hier abgelegt. Da wir einen Demo-Store haben, könnten wir ihn mit einem Passwort schützen; Homepage-Titel, Home-Page Meta-Beschreibung, alle möglichen tollen Sachen hier drin. In Ordnung. Das ist eine gute Demo unseres Back-Ends, unseres Admin-Stores, der verschiedenen Sachen da drin. Ich lief durch es ein wenig schnell, weil wir gehen, um in es mehr in späteren Sitzungen tauchen , aber im Moment, erste Schritt unseres Geschäfts sollte immer sein, wählen Sie ein Thema. Wir haben unseren Online-Shop, Themen. Standardmäßig wurde eine App namens Launchpad-Star installiert. Es ist kostenlos, es ist völlig in Ordnung, aber es gibt 100 plus kostenlose und Premium-Themen, wenn wir den Themen-Shop besuchen, und einer von ihnen könnte Ihnen gehören. Sie könnten benutzerdefinierte Designs erstellen, eines dieser Designs auswählen und ändern. Sie könnten ein kostenloses Thema, Premium-Thema verwenden, was auch immer Sie tun möchten, haben Sie viele Optionen. Und es gibt hier wirklich keine schlechte Wahl für Themen. Sie sind alle ziemlich gut, nur durch das scrollen. Sie könnten sehen, dass sie sehr schön aussehen, und hier brauchen Kunden Ihre Hilfe. Sie können überwältigt sein, sie wissen nicht, was ein gutes Thema ist, was wähle ich aus, was passt zu meiner Marke und wie richte ich es dann ein? Es gibt viele Möglichkeiten. Die Theme-Einstellungen können sehr fiddly bekommen. Das ist wichtig zu wählen. Ein sehr häufiges populäres Thema, ist Parallaxe, also lassen Sie uns das suchen. Hier sind die Ergebnisse für Parallaxe, und alles kommt mit, das verwirrt Menschen, es kommt mit mehreren Stilen. Parallax gibt es in vier Stilen. Es ist auf den ersten Blick nicht offensichtlich, wenn Sie einen der Stile kaufen, bekommen Sie tatsächlich alle vier, so dass Sie etwas Abwechslung haben. Die Themen sind sehr flexibel in Bezug auf Farben, Schriftarten, Layout, Inhalt. Sie werden nicht Ausstechform aussehen. Als Shopify-Experte kann ich Themen ziemlich oft sehen und erkennen, aber zum größten Teil, wenn Sie Ihr eigenes Branding hineinsetzen, werden sie nicht so identisch aussehen. Nächster Schritt wird es sein, um ein Thema auszuwählen. 5. Produkte und Varianten: Ok. Beginnen wir damit, ein Produkt hinzuzufügen und ein paar technische Dinge zu lernen, die uns beim Verständnis von Shopify helfen. Also, wir werden ein Produkt hinzufügen. Ich bin in meinem Demo-Admin-Dashboard-Produkte, fügen Sie ein Produkt und es gibt uns diese erstaunliche WYSIWYG-Editor. Also werde ich nur Kurzarm-T-Shirt eingeben und meine Beschreibung ist, es ist super weich. Zu diesem Zeitpunkt werde ich kein Bild hochladen, nur um uns etwas Ärger zu ersparen. Lassen Sie uns einen Preis darauf festsetzen,19.90. Es ist ein physisches Produkt, also berechnen wir Steuern. Nehmen wir an, wir drucken diese auf Anfrage, damit wir den Lagerbestand nicht verfolgen. Aber wenn wir wollten, könnten wir und wir könnten sagen, wir haben 10 und sogar entscheiden, ob wir wollen, dass die Leute sie zurückbestellen können oder nicht. Aber vorerst sagen wir, dass wir das Inventar nicht verfolgen werden. Wenn Sie möchten, können Sie Gewicht hinzufügen, wenn Sie gewichtsbasierte Versandkosten tun möchten. Es ist ein physikalisches Produkt, so dass es Versand erfordert und wir können Art Hemden tun. Dies wird uns helfen, es später zu sortieren und unser Lieferant wird Nike sein. Wie glücklich wir haben, Nike zu haben. Hier unten haben wir Tags. Die Tags können dem Kunden angezeigt werden, aber in den meisten Fällen verwenden Sie sie, um Sammlungen zu sortieren und wir werden darüber ein wenig sprechen. Also, wir sagen Vintage Baumwolle Sommer. Da gehen wir. Produkt speichern. Wir könnten ein anderes Produkt hinzufügen oder es in unserem Online-Shop ansehen. Lassen Sie uns es in unserem Online-Shop sehen und wenn wir nach unten scrollen, haben wir unsere Standard-Thema, und sicher genug Kurzarm-T-Shirt, 20 Dollar, in den Warenkorb. Es ist super weich. So wie Magie, dieses Zeug, das ich in das CMS als Produkt eingegeben habe, ist hier erschienen. Die meisten Menschen werden damit zufrieden sein. Aber werfen wir einen kurzen Blick darauf, wie diese Magie passiert ist. Also werden wir in das Thema eintauchen und wir werden wählen - wir gehen gerade technisch. Auf unserer Themes-Seite haben wir zwei Optionen, passen Sie es an, schauen Sie es an oder bearbeiten Sie HTML/CSS. Das ist es, was wir tun. Wir werden sofort groß. Lassen Sie uns hinunter- so eine kurze Notiz über Themen. Theme.Flüssigkeit. Dies ist Ihre Master-Datei denken diese als anstatt zu tun - wenn Sie Includes mit PHP verwendet haben, anstatt wie eine Kopfzeilenfußzeile zu tun, tun Sie alles in theme.liquid und legen Sie dann Ihren Inhalt hinein. Mal sehen, ob wir wirklich finden können, wo das passiert. Genau hier. Beginnen Sie den Inhalt, und es gibt unseren flüssigen Befehlsinhalt für das Layout. Lass uns darüber reden, was hier passiert. Wenn Shopify diese Seite, die SkillShareDemo oder diese ShirtSleeve T-Shirt-Seite rendert , wird zuerst theme.liquid durchlaufen, die unsere Kopf- und Fußzeile enthält. Und dann basierend auf dem Seitentyp, wird es in Inhalt für das Layout fallen. In diesem Fall konnten wir hier jetzt Vorlagen sehen, gehen Sie zu product.liquid. Bumm! Hier drin ist es sehr einfach. Es ist nur Produkt enthalten. Also, was bedeutet das? Enthält unsere Snippets. Wenn Sie mit PHP oder wirklich einer Programmiersprache vertraut sind, haben Sie Includes gesehen. Also, lassen Sie uns unseren Snippets-Ordner öffnen, gehen Sie nach unten und es gibt product.liquid. Verschachtelte Schnipsel können verwirrend werden, aber der Vorteil ist dass Sie eine trockene Methodik verwenden, Trockenwesen sich nicht wiederholen. Also, wenn es etwas gibt, das Sie mehr als einmal verwenden müssen , anstatt es überall zu haben. Legen Sie es einfach in ein Snippet oder verwenden Sie es und dann haben Sie nur einen Ort, an dem Sie es pflegen und aktualisieren müssen. Es macht das Leben einfach. Also, hier haben wir, das ist der HTML, der in unsere Produktseite fallen gelassen wird und ich habe Ihnen gesagt, es gibt keine Einschränkungen für HTML/CSS, die Sie tun können, was Sie wollen. Aber lasst uns herausfinden, wie dynamisch das passiert. Wir wissen, dass es diese Schnipsel zusammensetzt. Lasst uns das ein Beispiel sein. Wir haben ein Kurzarm-T-Shirt. Nun, wie ist das da reingekommen? Wir müssen eine ziemlich einfache Sache finden: Produkt. und was Sie hier sehen können, ist, dass Sie TextMe und GitHub verwenden und ausgefallene Workflows einrichten können. Aber eigentlich der Standard, der Texteditor, der in Shopify enthalten ist, ist es ziemlich fantastisch. Sicher genug, schau dir das an, starke und mutige product.title. Also, was bemerkst du daran? Wir haben diese geschweiften Klammern auf beiden Seiten, die uns sagen, dass dies flüssig ist, dass dies ein Abschnitt der programmatischen Sprache ist, den Shopify auf der Serverseite ausführen muss , bevor es es an den Client, an den Webbrowser ausgibt. Also, was hier los ist, ist, dass diese kanonische Objekte genannt werden. Produkt ist ein kanonisches Objekt in Shopify. Es bezieht sich auf die Seite, auf der wir sind, und dann wird es Punkttitel hinzugefügt. Punkttitel ist eine Variable dort. Eine lustige Art, an kanonische Objekte oder Objekte in Flüssigkeit zu denken, in Shopify sind sie wie Supervariablen. Diese Dinge sind Variablen auf Steroiden, und es macht Sinn. Es hat natürliche Sprache, Produkt. Wir wissen, was das ist, Punkttitel. Hätte ich es dir nicht erklärt, hättest du genau erraten können, was das tut und es spuckt einfach unseren Produkttitel aus, Kurzarm-T-Shirt. Einfach genug. Um es als Demo zu beweisen, sagen wir einfach, wir werden hier Sprache hinzufügen, Titel: speichern. Alles klar, und lassen Sie uns das rückgängig machen. Dies ist eine gute Möglichkeit, es zu testen. Hören Sie, das ist eigentlich in der Brotkrume, ist das, was ich angeschaut habe. Titel Shirtsleeve T-Shirt. Eigentlich ist das ein ziemlich schneller Weg, um Sachen zu testen. Geben Sie einfach eine Sprache ein und suchen Sie, wo sie sich ändert. Weißt du was? Ich hätte das rausfinden sollen, denn sieh dir das an. Sie waren hilfreich kommentiert es, beginnen Paniermehl und Paniermehl. Speichern wir das und stellen Sie sicher, dass Sie dort Änderungen vornehmen. Aktualisieren und hier fällt es aus. Also das ist noch eine nette Sache. Wenn Sie live wie diese bearbeiten und Ihre Änderungen wirklich schnell passieren. Was passiert, wenn ich das Wechselgeld vermasselt habe? Sieh dir das an. Ältere Versionen, aktuell, heute. Sieh dir das an. Was sie tun, gibt es tatsächlich integrierte Versionierung genau hier drin. Ich sagte doch, das Ding ist designerfreundlich. Wir haben einen Online-Texteditor mit integrierter Versionierung. Das ist fantastisch. Sieh dir das an. Es gibt nur große bis flüssige variable Referenzen. Also, ich bin sicher, wie Sie vielleicht vermutet haben, gibt es mehr Optionen in Produkten als das, was ich Ihnen gezeigt habe, und um wirklich ein gutes Beispiel dafür zu bekommen, bekommen wir ein paar Bilder, was einfach ist. Wir können sie per Drag & Drop aus der URL ziehen oder wir werden sie auf die altmodische Art und Weise hinzufügen. In meinen Downloads habe ich zwei Bilder, die ich von einem schwarzen T-Shirt und einem T-Shirt gezogen habe. Wir werden diese hochladen und boom! Hier erscheinen sie. Wir können sie bearbeiten, fügen Sie allen Text hinzu. Großartig für die SEL Leute und ändern Sie die Reihenfolge und was auch immer das erste Bild ist, wird Ihr Standardbild. die Größenänderung betrifft, wird jedes richtig eingerichtete Thema die Größe dieser Bilder im laufenden Betrieb für Sie ändern. Mal sehen, was wir hier haben. Hier unten sind Varianten. Varianten sind wie Produktoptionen. Im Falle eines T-Shirts möchte ich Größe und Farbe auswählen. Versuchen wir also, Varianten hinzuzufügen. Die erste haben wir Größe, Standard ist es, großartig und wir müssen unsere Optionen hinzufügen. Ich werde sagen, klein. Sie sind durch Komma getrennt. Sobald Ihr Komma es nur Medium hinzufügt, Komma L für groß, Komma. Wir haben klein, mittel, groß. Dann eine andere Option, Farbe. In unserem Fall haben wir schwarz und rot, und da haben wir unsere Möglichkeiten. Sie können den Preis nach Option ändern. Stellen Sie sicher, dass Sie über andere SKUs oder Strichcodes verfügen, wenn Sie ein Lagerbestandssystem eingerichtet haben , dies sind jedoch Pflichtfelder. In unserem Fall werden sie den gleichen Preis haben und den ganzen Weg durch den gleichen Preis. Also lassen Sie uns das speichern und sehen, was passiert. Es schafft wirklich schöne Tabelle für uns und was ich mag, es macht es einfach zu aktualisieren. Also, sagen wir, ich wollte die Preise auf nur die kleinen T-Shirts ändern , vielleicht kostet sie mehr zu machen. Also, wir wählen S und schauen uns das an. Es zeigt kleine T-Shirts und hat sogar Bulk-Aktionen. Cool. Ich könnte die Preise ändern, damit ich diese 18 Dollar mache. Sie kosten mehr zu machen. Die 21 Mäuse jetzt. Bumm! Sieh dir das an. Aber es gibt einige Vorsicht mit Varianten. Hier haben wir klein, mittel, groß, schwarz und rot, was in 1, 2, 3, 4, 5, 6 Optionen geführt hat . Sie können nicht mehr als 100 Optionen haben. Hundert ist die Mütze und dann ist es barfs. Es wird dich aufhalten. Es lässt dich nicht mehr kreieren. Gesamtkombinationen von Dingen kann es mehr als 100 haben. Also, das ist eine Einschränkung. Jetzt gibt es Apps und verschiedene Programmierung Shenanigans, die Sie tun können, um es zu umgehen, aber über die Box, das ist die Einschränkung. Also eine Sache im Auge zu behalten. Darüber hinaus sind wir auch auf vier Optionen beschränkt. Also, wenn ich eine andere Option hinzufügen möchte, könnte ich Material machen, ich möchte sagen, Baumwolle speichern und lassen Sie uns Optionen bearbeiten. Das war's. Tut mir leid, ich sagte, es waren vier. Es sind drei Möglichkeiten. Du könntest nur mit drei Optionen tun. Das ist in Ordnung. Also haben wir unser Material hier drin. Schauen wir uns das an, wie Sie es im Online-Shop sehen. Siehe, bricht in verschiedene Dropboxen auf und nicht alle Themen tun dies. Du könntest ihnen verschiedene Wege zeigen, ihnen sagen, was auch immer. Aber wenn wir Schwarz zu Rot wechseln, ändern wir die Größe oder Preisänderungen. Cool. Wenn wir Schwarz zu Rot wechseln, ändert sich das hier nicht. Es gibt einen Weg, das zu tun. Es wird Variantenbilder genannt. Also, lassen Sie uns wählen, unser Schwarz ist hier Standard, lassen Sie uns wählen rot, Bulk-Aktion, Bild aktualisieren, klicken Sie auf diesen Kerl, speichern. Schau dir an, was hier passiert. Lassen Sie uns unsere Seite aktualisieren. Wir haben gute Farbe schwarz, rot. Oh, richtig. Das ist fantastisch. Es wechselt und dann würden wir es natürlich auch für Schwarz tun wollen. So der gleiche Deal. Klicken Sie dort, wählen Sie Schwarz, aktualisieren Sie Bilder. Bumm! Dann konnten wir sehen, das sind sehr neue Bilder und lassen Sie uns testen. Schwarz, Rot, Schwarz Es ist cool. Der Vorteil hier ist, dass der Kunde genau weiß, er bestätigt ihnen, dass er das Richtige kaufen. Vor allem, wenn wir ausgefallene Sachen tun, kann das Bild oder das Produkt in der E-Mail enthalten sein, kann auf der Warenkorb-Seite enthalten sein und dies wird nur ihnen versichern, dass ja, ich bekomme das richtige Produkt. Ich wählte Schwarz, ich bekomme ein schwarzes Hemd. Es ist eine schöne Ergänzung, da drin zu sein. 6. Kollektionen: Sobald wir Produkte zu unserem Geschäft hinzugefügt haben, brauchen wir eine Möglichkeit, diese Produkte zu sortieren. Hier ist Dodocase. Dodocase hat Tonnen von Produkten. Wenn wir alle ihre Produkte auf einmal betrachten, bekommen wir diese endlose nutzlose Sache, 88 Seiten Produkte. Also, wir müssen sie in etwas stecken. Sie denken wahrscheinlich in Ordnung, wir könnten sie in Kategorien setzen oder Shopifys Version von Kategorien ist intelligenter. Sie werden Sammlungen genannt und es gibt einen entscheidenden Punkt. Wenn Sie andere E-Commerce-Plattformen verwendet haben, wenn Sie an Sammlungen denken, denken Sie, dass Sie sie verschachteln können, um sie zu organisieren. Shopify hat das neu erfunden und sie nennen sie Sammlungen. Und Sie verschachteln keine Sammlungen, es ist nur eine logische Gruppierung von Produkten. Also, es ist ein bisschen anders und du hörst, dass sie im Shopify-Handbuch über Sammlungen sprechen. Sie geben Ihnen ein paar Beispiele, wie Sie es tun könnten, aber ein paar Notizen. Eine Sammlung kann manuell sortiert werden, wo Sie nur Produkte hineinlegen, was ist, wie Sie Kategorien erwarten würden, ähnlich der Art, wie Kategorien und andere Dinge funktionieren, sie können intelligent sein. Es gibt also alle möglichen Möglichkeiten, es zu arrangieren, was Spaß macht und wir werden darauf eingehen. Produkte können in verschiedenen Sammlungen erscheinen, es funktioniert gut. Also, werfen wir einen Blick auf Dodocase und sehen, wie sie es gemacht haben. Hier verkauft Dodocase Fälle für iPhones und iPads und gruppiert sie nach dem Gerät, das intelligent ist. Aber wenn wir in die Fußzeile gehen, können wir sehen, dass sie sie auch gruppiert haben, hier haben wir es wieder wiederholt. Wenn wir herumlaufen, haben sie sie nach Materialien gruppiert. Also hier ist Leder, Wachsleinwand, ein Geschenkführer, ein Schulführer. Das sind wahrscheinlich Landingpages oder SEO Bemühungen. Aber alle intelligenten Möglichkeiten, diese Produkte logisch zu gruppieren, je nachdem, wie Menschen einkaufen. Werfen wir einen Blick darauf, wo diese in unserem Admin leben. Wenn wir zu unserem Shopify-Admin gehen und zu Produkten gehen. Und hier habe ich 10 Beispielprodukte importiert, wenn Sie diese beim Testen verwenden möchten , können Sie die CSV aus dem GitHub-Holz greifen. Also, wir werden das schnell nachsehen, damit du weißt, wovon wir reden, und du könntest weitermachen. Timber ist ein Framework, es ist ein Demo-Thema, das Sie verwenden würden, wenn Sie benutzerdefinierte Themen erstellen würden. Es ist sehr nett. Und wenn wir nach unten gehen, haben sie hier Demo-Produkte. Also, Demo speichert für eine Reihe von Demo-Produkten, die während der Entwicklung verwendet werden, laden Sie die CSV-Datei herunter und importieren Sie sie. Und das habe ich hier gemacht. Wenn Sie also folgen und das gleiche tun möchten, laden Sie diese Datei herunter, klicken Sie hier auf Importieren und Sie können die Datei hinzufügen und es wird eine Minute später angezeigt. Aber in Ordnung. Sobald wir in Produkten sind, gehen Sie zu Kollektionen und dann ist hier, wo Sammlungen leben. Nun, da wir gesehen und erklärt haben, was Sammlungen tun und wofür sie sind, versuchen wir, einige praktische Beispiele dafür zu machen. Hier können Sie sehen, es mein Inventar Ich habe einige Beispielprodukte hinzugefügt , so dass wir Dinge zu sortieren haben. Wir haben eine Sammlung von Schuhen, sie haben verschiedene Titel und dann unter Typ, wir alle beschriftet sie „Kicks“ wir werden unsere Schuhe „Kicks“ nennen und dann auf diese Weise, wenn wir anfangen, Socken zu verkaufen, würden wir sie Typ Socken nennen oder Hemden Typ Shirts. Und dann unter dem Anbieter, sind sie alle Shopify, außer der erste ist Tetes. Jetzt lasst uns unter zwei Sammlungen gehen. Also, hier haben wir Titelseite Titelseite ist eine Standardsammlung. Es wird verwendet, damit Sie vorgestellte Produkte auf der Titelseite Ihres Shops hinzufügen können und wenn wir darauf klicken, sollte es sich um eine manuelle Sammlung handeln. In Ordnung, also, es hat nur Sie wissen, dass Handbuch sehr traditionell sehr typisch ist. Sie können Produkte manuell hinzufügen. Die einzigen Produkte, die darin angezeigt werden, sind diejenigen , die manuell ausgewählt wurden, da sie angezeigt werden. Und dann könntest du wählen, wie sie sortieren. Also, Best Selling ist sehr cool, weil es selbst optimiert, so wie ein Produkt verkauft besser es wird an die Spitze der Liste verschoben und es wird weiter verkaufen gut. Alphabetisch aufsteigend absteigend Kurs Preis und Datum alle aufsteigend absteigend oder manuell. Wenn wir manuell auswählen, bekommen wir diesen schönen kleinen Griff und dann könnten wir es so auswählen, was es einfach macht und dann können wir auch hinzufügen Sie wissen, dass wir unseren Titel und unsere Beschreibung und unser Bild haben. Also, lassen Sie uns das speichern und fügen wir unsere eigene Sammlung hinzu. Lassen Sie uns Menü-Sammlung hinzufügen. Dasselbe Deal werden wir sagen, Kurts Lieblingsschuhe. In Ordnung. Ich könnte manuell wählen Produkte und auch es wird nichts sagen, bis ich speichern. Jetzt kann ich meine Produkte hinzufügen. Sobald Sie darauf klicken, erhalten Sie diesen netten Tooltipp Ihnen Ihre Produkte zeigt oder Sie können filtern. Wenn ich nur sehen will, dass die Schuhe mit dem Etikett cool auftaucht. Also lassen Sie uns diese Schuhe und zwei andere hinzufügen, da gehen wir. Also, Sie könnten sehen, dass es Ajax ist, es ist dynamisch, es ist schnell, es ist sehr einfach für Kunden, super einfach zu verwenden für Sie zu verwenden. Beschreibung, dies macht es sehr einfach, Landing Pages zu machen. Sie können Ihren Titel hinzufügen, Ihre Beschreibung hinzufügen. So könnte man sagen, „Hey, Geschenkführer für Herrenschuhe Geschenk-Guide für 2015“, fügen Sie Ihren Titel, Ihre Beschreibung, ein schönes Bild, wenn das Thema es unterstützt. Legen Sie Ihre Produkte dort ein und Sie haben eine Zielseite. Dann setzen Sie es wieder auf Bestseller und wir haben eine selbst optimierende Landing Page. Sie wissen also, dass das sehr traditionell ist, sehr typisch, wie man hier von Sammlungen erwarten würde. Aber es gibt einen intelligenteren besseren Weg, dies zu tun. Also, lassen Sie uns eine weitere Sammlung hinzufügen. Dafür sagen wir: „Schuhe unter $200.“ Dann hier sagen wir unsere Lieblingssneaker unter $200. In Ordnung. Eigentlich sagen wir unsere Lieblings-Kicks unter $200. Bedingungen automatisch als Standardeinstellung. Dann haben wir Produkte müssen alle Bedingungen, jede Bedingung entsprechen. Seit wir gesagt haben, es ist für Schuhe unter 200. Wir haben ein paar verschiedene Variablen, die wir hier auswählen könnten. Titel, Typ, Anbieter, Preis, Tag, Tags sind eine nette Möglichkeit, Produkte in Sammlungen zu sortieren oder für Kunden zu sehen, ob Sie es in der Sammlung anzeigen. Aber zum größten Teil benutze ich sie, nur um Lust zu bekommen einfacher Sortierung. Wir tauchen in eine andere Verwendung für Tags mit Filterung verglichen Preis, vergleichen Preis ist UVP, Gewicht, Lagerbestand, Varianz Titel. Also, lassen Sie uns in diesem Fall tun, wir sagten, es ist unter $200, also sagen wir, der Preis ist weniger als - wir haben all diese großen Anlagen-Betreiber unter 200. Wenn wir auf Speichern Sammlung dort gehen wir, es sind alle unsere Schuhe, die unter $200 sind. Dann können wir sehen, es funktioniert, wenn Sie es testen wollen, sagen wir, ist größer als 200 sparen aha! Also verschwinden sie alle. Also, gehen wir zurück zu ist weniger als und lassen Sie uns den Unterschied zwischen allen oder jeder Bedingung herausfinden. Also lassen Sie uns hinzufügen, wir haben Produkttitel. Wir werden zu enthält ändern und wir werden sagen, awesome, Speichern. Also, was hier los ist, ist es nur die Schuhe zu zeigen, die betitelt sind großartig und weniger als $200 im Vergleich, wenn wir es auf eine Bedingung umgestellt und drücken Speichern. Es wird alle unsere Schuhe auflisten, weil alle unter 200 sind und man sagt genial. Also, es ist der Unterschied dort. Du kannst das machen. Du kannst dich verrückt machen. Aber Sie können sie ziemlich kompliziert und körnig machen. Aber der Vorteil ist hier wieder, dass es automatisch ist. Sie müssen also nicht jeder einzelnen Kollektion Produkte manuell hinzufügen. Das ist hilfreich, da Sie in die Sortierung der Dinge verschiedene Möglichkeiten bekommen , je nachdem, wie die Leute einkaufen. Du könntest also tun, wenn du Hemden verkaufst, solltest du es vielleicht nach Geschlecht Männer gegen Frauen gruppieren. Aber dann tun Sie es auch durch Sammlungen. Man könnte sagen, die Art des Hemdes, Kurzarm im Vergleich zu Langarm. Das gleiche Produkt würde in mehreren Kategorien erscheinen und Sie wollen nicht sein - jedes Mal, wenn Sie das Inventar aktualisieren, versuchen, daran zu erinnern, dies zu mehreren Sammlungen und Sammlungen hinzuzufügen, automatische Sammlungen macht all das möglich. Dann können wir natürlich hier sortieren, aber werfen Sie einen Blick darauf, wie das aussieht auf unserer Live-Website zeigt, gibt es den Titel der Sammlung, die Sammlungen Beschreibung, Produkte erscheinen und dann ist dieses Thema schön. Es unterstützt die Anzeige der Sortierfilter , die sie nicht alle tun , aber es ist standardmäßig der, den wir hier gezeigt haben. Okay, also, hier sind wir wieder in unseren Schuhen unter $200 Sammlung und wenn Sie scharfsinnig sind, haben Sie vielleicht diese neue Sidebar hier in diesem Shop bemerkt. Also, ich bin in einer Sammlung und ich könnte wählen, nach Farbe oder Material zu kaufen. Also, hier werde ich schwarz wählen und ich bin immer noch in meiner Sammlung, aber es zeigt nur schwarze Schuhe. Das ist fantastisch. Es ist eine großartige Möglichkeit, Produkte zu sortieren, das Leben einfach zu machen. Aber Sie wissen eines der Dinge, die ich bereits erwähnt habe, dass manchmal Menschen stört, ist Sammlungen sind nicht wie Kategorien, die speziell, dass Sie Sammlungen nicht verschachteln können, was anfänglich Probleme für Menschen schafft , weil sie diese verschachtelten Sammlungen. Aber wir haben eine viel bessere Option und das ist Filterung nach Tag. Und hier habe ich zu liefern Thema umgeschaltet, es ist ein kostenloses Thema im Themen-Shop und wir werden darüber später als auch sprechen. Aber es hat dies eine Funktion darin eingebaut. Dieser Filter nach Tag Sache. Also, schauen wir uns an, wie wir das eingerichtet haben. Ich habe meine Produkte hier drin und Sie müssen mit einer konsistenten Taxonomie kommen , die Sie verwenden werden und Sie können nicht einfach zufällig Tags zu Dingen hinzufügen, weil dieses Thema automatisch ist. Es spuckt alle Tags auf einem Produkt aus. Also, Sie müssen konsequent sein. Also, lassen Sie uns unser Paar Schuhe coole Kicks wählen und hier ist es der Schuh. Eine ziemlich typische Taxonomie, die ich gerne benutze, ist Farbmaterial, wenn Sie mit Kleidung zu tun haben, die sehr einfach ist. Diese Schuhe sind schwarz. Also, ich habe sie bereits markiert schwarz und sie haben auch vielleicht haben sie grau in ihnen. Sie könnten mehrere Tags machen, damit wir grau sagen können und eines der Dinge, die helfen , diese konsistente Taxonomie beizubehalten , ist , dass Shopify automatisch Dinge für Sie vorschlägt, die Sie bereits verwendet haben. Also, hier kann ich sehen, dass die Schuhe aus Leder sind. Ich werde anfangen, mein Material zu tippen. Schau, Leder taucht als Vorschlag auf. Klicken Sie darauf und jetzt kann ich Sie, wenn ich Filter nach Leder auswählen, wird es Pop-up. Also, lassen Sie uns sparen und ich gehe zurück wir werden diese Seite aktualisieren und lasst uns Lederschuhe holen aha! Es gibt wie coole Kicks schwarzes und rotes Leder, das wirklich schön ist. Es ist sehr hilfreich. Jedesmal, wenn wir es einfacher für Kunden machen können, um zu finden, was sie wollen machen es dem Ladenbesitzer einfacher diese Produkte sortieren und als großartig erscheinen zu lassen. Es gibt eine andere Sache, die wir auch mit Tags machen können. Sehen wir uns Sammlungen an. Also, sagen wir, ich wollte eine Kollektion namens Lederschuhe Lederschuhe machen wir es Lederschuhe nennen und wir sagen, Turnschuhe mit echtem Leder gemacht. Jetzt werden wir sagen, automatisch wählen Sie Produkte basierend auf Bedingungen, weil es eine intelligente Sammlung. Produkte müssen übereinstimmen, wir werden alle Bedingungen erfüllen, obwohl wir nur eine auswählen, ist es im Moment egal. Und das können wir später immer überarbeiten. Produkt-Tag ist gleich Leder, sogar automatisch vervollständigt es für mich. Also, wir klicken speichern und jetzt ohne wirklich viel Aufwand meinerseits, sollte ich eine Kollektion von Lederschuhen haben , die automatisch mit allen meinen Lederschuhen aktualisiert werden. Also, schauen wir uns mal an. Da gehen wir. Drei Schuhe, alle mit Leder, es funktioniert. Sehr cool und Sie können auch in der Navigation auf diese Weise in Suchen und Sammlungen sortieren. Und selbst für- es muss nicht unbedingt für den Kunden sein. Wenn ich Produkte in meinem eigenen Geschäft filtere, könnte ich es tun, indem ich mit markiert. Also könnte ich eine interne Taxonomie dafür gebrauchen. Es macht das Leben einfach. Aber auch hier ist der Schlüssel nur konsistent zu sein, kommen Sie mit einem System, das Sie für Ihre Produkte verwenden werden. Das wird sich je nach Laden ändern. 7. Seiten und Blogs: In Ordnung. Also, eine gemeinsame Sache, die jede Website braucht, sind Seiten, das ist, worauf das Internet basiert, Seiten. Ich hatte erwähnt, dass Shopify in seinem eigenen Recht ein Content-Management-System ist , aber nicht nur für Produkte, für Inhalte, Inhalte und Inhalte. Also hier, wir haben eine Über uns Seite. Jedes Geschäft hat, könnte zu Über uns Seite, FAQ, Versandrichtlinien, Rückgaberichtlinien, eine Kontaktseite führen. Das sind Inhaltsseiten. Also, wenn wir in unseren Admin, und wir klicken Online-Shop, Seiten, hier sind sie. Also, wir haben bereits unsere Über uns Seite bearbeitet, und schauen Sie sich das an, Titel Über uns. Unsere großartige „Über uns“ -Seite hilft uns, Vertrauen aufzubauen, in der Tat tut es das. Also, wir werden es aktualisieren, nennen wir es Über uns Demo, und dann werden wir diese Zeile hinzufügen oder ersetzen, und wir sagen, rufen Sie uns mit irgendwelchen, wenn ich buchstabieren kann, rufen Sie uns mit Fragen an, speichern. Es ist einfach, ich meine, es zu bearbeiten, es ist sehr einfach. Wir können sehen, dass es der gleiche WYSIWYG-Editor ist. Wir können Bilder hinzufügen, Bilder einfügen. Es wird Produktbilder aufnehmen oder neue hochladen, wie zum Beispiel Produktbild. Es ändert auch die Größe der Bilder im laufenden Betrieb, was sehr praktisch ist. Also, ich möchte ein mittleres Bild hinzufügen, es einfügen, und dann, was auch cool ist, wenn ich darauf doppelklicke, habe ich sehr viel einen richtigen CMS und WYSIWIG-Editor. Wir können unseren ALT-Text für SEO hinzufügen. Lassen Sie uns unsere Inhalte um sie herum setzen. Sieh dir das an, schwimmt es nach links. Es ist sehr schön, also speichern Sie es. Werfen wir einen Blick, was dort passiert. Genau das, was du erwarten würdest, wie du es erwarten würdest. Dann haben wir unsere Suchmaschinen-Beschreibung. Alle unsere Seiten hier, lassen Sie uns dies tun. Wir könnten auswählen, Produkte tun dies, Blog-Post tun dies, und wir haben, Sie könnten einen separaten Seitentitel für SEO oder Meta-Beschreibung wählen. Andernfalls wird es einfach automatisch ausfüllen, dass basierend auf Ihren Inhalten dynamisch. Dann können Sie sogar das URL-Handle festlegen. Wir werden später über URL-Handle sprechen, wenn wir über einige Theming-Elemente sprechen. So können wir auch einstellen, das ist sehr cool, sichtbar versus versteckt. Also, ich könnte es auf versteckt setzen, sagen wir, das war ein Verkauf und ich könnte sagen, spezifische Veröffentlichungsdatum, und ich könnte ein Datum und eine Uhrzeit in der Zukunft wählen, und dann wird es zu dieser Zeit automatisch veröffentlicht, was sehr schön ist. Nicht etwas, das man oft benutzt, aber wenn man es tut, ist es schön zu haben. Also, stellen wir sicher, dass es immer noch da ist, sehr gut. Schauen wir uns das Hinzufügen einer Seite an. Wenn ich auf dem Seitenbildschirm auf Seite hinzufügen klicke, genau wie Sie denken, es würde funktionieren, FAQ. Lassen Sie uns einige in einige Beispielinhalte einfügen. Akzeptieren Sie Rücksendungen? Nein, das tue ich nicht. Sie können auch, wenn Sie Froggie fühlen, können Sie gerade HTML dort tun. Sie können sehen, es macht einfach sauber schönen semantischen HTML. Es ist sehr gut, soweit WYSIWYG-Redakteure gehen. Also, speichern wir diese Seite und sehen Sie sie an. Sicher genug, wie Magie, scheint es. Es ist sehr schön, sehr einfach, unglaublich einfach und schnell, es zu tun. Nun, die einzige Einschränkung mit Seiten, und das ist gering, ist Seiten und Blogs sind unterschiedlich. Dies kann manchmal Menschen verwirren. Eine Seite ist also wirklich nur jedes Stück statischen Inhalts, das kein Produkt und keine Sammlung ist. Ein Blog ist anders. Also, wir haben, wieder, funktioniert genau so, wie Sie denken. Es sind nur unsere Beiträge mit Datumsangaben. Wirklich, der grundlegende Unterschied hier ist nur, dass es uns diese Index-Seite gibt, wo es diese Snippets von Beiträgen erstellt. Denn sobald Sie einen vollständigen Beitrag anzeigen, ist er einer Standardseite sehr ähnlich. Eine coole Sache hier, Sie bearbeiten es in Blog-Posts, und es ist genau das gleiche. Fügen Sie einen Blog-Beitrag, der Unterschied hier, könnten wir unseren Auszug angeben. Also, dieser Teil hier ist der Auszug. Wenn Sie dies nicht tun, wird es es tatsächlich nur für Sie abschneiden, tun Sie es automatisch, genau wie Sie denken, eine richtige Blogging-Plattform sollte funktionieren. Dann können Sie auch den Autor auswählen und das sind Personen , die andere Benutzer im Geschäft sind, andere Mitarbeiter. Dann können wir auch Online-Seiten verwenden, wir können Tags hinzufügen, und dann kann das verwendet werden, um schnell durch sie zu filtern oder in vielen Themen, es wird in der Seitenleiste angezeigt, die durch die letzten Artikel in diesem Thema erscheinen würde. Sie können tatsächlich mehrere Arten von Blogs erstellen. Also, hier, wir haben Neuigkeiten. Ich könnte einen anderen namens Vertrieb erstellen, so dass wir einen Blog trennen könnten, dass eine Produktankündigungen und die andere nur Verkäufe sein könnte. Dann, wählen Sie dies, wir könnten Kommentare deaktiviert sind, Kommentare sind erlaubt, ausstehende Moderation, und Kommentare sind erlaubt, und werden automatisch veröffentlicht, wenn Sie wirklich gefährlich leben wollen. Also, wir sagen, Kommentare sind erlaubt, bis Moderation. Sag Blogbeitrag. Also, jetzt haben wir verwalten Blogs, wir haben Neuigkeiten und Verkäufe. Hier haben wir also zwei verschiedene Blogs, die wir im Laden ausführen können. Wahrscheinlich werden nur sehr wenige Geschäfte mehrere Blogs verwenden, aber es ist schön zu wissen, dass diese Option da ist. Dann haben wir Seiten. Dies ist also, wo unsere statischen Inhalte, wo die meisten unserer Inhalte und wenn wir den Laden anfangs erstellen, werden wir leben und dann im Laufe der Zeit Updates über neue Produkte, Ankündigungen, diese Dinge, werden wir wahrscheinlich weiter in Blogs leben. In Ordnung. Lassen Sie uns über zwei einfache, einfache, aber unglaublich wichtige Teile unseres E-Commerce-Stores sprechen und das ist der Warenkorb und die Kasse. Also, hier sind wir auf wunderbare Laden namens Tattly, die Phantasie Designer temporäre Tattoos verkauft suchen . Einige dieser Unternehmen, die ich bei Shopify finde, sind phänomenal cool und das ist eines von ihnen. Also, hier haben wir unsere Produktseite, Ich In den Warenkorb, jetzt, lassen Sie sehen, was passiert. Wir fügen Sie in den Warenkorb und es bringt uns direkt in den Warenkorb, was ein schönes Standardverhalten in vielen Themen ist. Soweit ich das beurteilen kann, verbessert es die Kasse. Also, es funktioniert genau so, wie Sie es erwarten würden. sehr konventionell, und das ist gut, Konvention im E-Commerce ist gut. Also, wir haben ein paar Dinge hier drin. Wir haben eine Liste unserer Artikel. Also hier haben wir die eine und wir haben eine kleine Vorschau, die Standardvariante Thema, unseren Preis, unsere Menge, wir können es entfernen und unsere Summe. Hier haben sie eine Anpassung vorgenommen, sie haben diese Notiz hinzugefügt. Wir tun unser Bestes, um es zu verarbeiten, einfach sehr nett. Dann haben sie auch Geschenkverpackung, die eine Modifikation und die Konfetti Option ist, also lassen Sie uns hinzufügen, klicken Sie auf Geschenkverpackung und sehen, wie das funktioniert. Es gibt also gängige Modifikationen, die sie hier gemacht haben. Sie fügten hinzu, es fügt nur ein weiteres Produkt hinzu. Wir machen es aus. Oh, sieh dir das an, funktioniert sehr nett. Dann, so, abgesehen davon, ist dies eine Standard-Warenkorb Kasse. Wir haben unseren Warenkorb hier oben, zeigt unsere Menge, unsere Update-Checkup-Buttons, die Summe, und das Notizfeld, alle Sonderwünsche für Ihre Bestellung. Wenn jemand das ausfüllt, wird es als Notiz in der Bestellung angezeigt, und alle Designs haben dies standardmäßig. Also, in Ordnung. Mal sehen, was passiert, wenn wir auf Kasse klicken. Bringt uns auf diese Seite. Hier gibt es eine wichtige Notiz. Wenn Sie bemerken, was passiert ist, hat sich der Domainname geändert, wir sind jetzt auf Shopify, checkout.shopify.com. Es erzeugt eine eindeutige URL und das ist schön. Die eindeutige URL speichert das Auschecken der Person als Sitzung. Es ist sicher, es ist SSL und deshalb tut es das, warum Sie den Domainnamen ändern. Wenn Sie möchten, können Sie einen Shopify Plus Store verwenden und Shopify Plus verwendet einen regulären Domainnamen. Aber für alles andere, für die Mehrheit der Geschäfte, geht es zu checkout.shopify.com. Eines der netten Dinge über Shopify ist der Checkout-Prozess basiert auf Daten, Studien und tollem Design aus all diesen verschiedenen Stores. So wissen Sie, dass es gut konvertiert wird und es ist sehr einfach Checkout-Prozess. Dann ändern Sie es einfach, so dass das Branding Ihrem Shop entspricht. Sie können hinzufügen, sie haben ein Bannerbild hinzugefügt, das Logo, und dann können Sie die Farben und die Schriftarten festlegen. Dann weißt du, dass es diese kognitive Dissonanz tötet, wenn wir auf checkout.shopify.com landen. Selbst wenn der Domain-Name geändert wird, weiß ich immer noch, dass dies sehr eindeutig die gleiche Marke ist, der gleiche Laden. Wir haben Geschenkgutscheine oder Rabattcodes hier drin, was schön ist, funktioniert perfekt. Also, lassen Sie uns einige Informationen eingeben und sehen, was passiert. Wir werden ein paar Dinge hier reinbringen, Kurt Elster, Adresse. Wenn Sie eine E-Mail senden möchten, ist dies meine echte Arbeitsadresse. Wenn Sie mir ein Geschenk schicken wollen, fühlen Sie sich frei. Also, das ist Schritt eins des Einkaufswagens. Fahren Sie mit der Versandmethode fort und hier ist Schritt zwei des Warenkorbs. Also, wir haben unsere Versandmethoden hier drin und das ist clever. Ich empfehle Leuten, dies als eine bewährte Vorgehensweise zu tun. Sie haben die geschätzte Schiffszeit da reingesteckt. Es ist eine übliche Sache. Jeder will wissen, wie schnell ich meine Sachen kriege, ich bin aufgeregt. So treffen die Leute das Urteil, wenn sie aktualisieren sollten. Wenn ich wirklich drei bis sechs Tage warten kann, um meine temporären Tattoos zu bekommen, bezahle ich die zusätzlichen 7,50 und gehe mit USPS Priorität. Dann klicke ich auf Weiter zur Zahlungsmethode. Also, hier könnte ich meine Kreditkarteninformationen eintragen. Es gibt mehrere Zahlungsprozesse, die Sie verwenden können oder Shopify Zahlungen werden Kreditkarten für Sie verarbeiten, und dann haben sie auch PayPal integriert hier. Natürlich, wie Versand, gleiche wie Abrechnung, abonnieren Sie unseren Newsletter. Wenn ich das ausfülle und auf Bestellung abschließen klicke, würde es mich zu einer Bestätigungsseite führen, und das wäre es, aber es ist eine einheitliche Standard-Checkout, die Konvention, Tradition schafft und letztendlich Conversions steigert, aber es funktioniert sehr gut, ich mochte es sehr. Nun, diese Seite, Sie haben wirklich sehr wenig Kontrolle über, es sei denn, Sie sind auf dem Shopify Plus-Plan. Sie können wählen, ob Sie ändern möchten, um diese Seite zu bearbeiten. Man kann es wirklich nicht jenseits von Farben, Schriftarten, so etwas gegen den Wagen tun. Dies ist Teil des Themas, Sie können wirklich, wenn Sie wollten, können Sie bearbeiten diese jede Art und Weise, wie Sie sah passen, HTML oder CSS widerstehen. Aber sobald Sie auf Kasse klicken, und Sie am Ende auf dieser Seite, checkout.shopify.com, haben Sie nicht, wieder, es sei denn, Sie sind auf der Shopify Plus Sache, haben Sie keinen Zugriff auf die flüssige Vorlage für diese. In Ordnung. Dann, wo ich Ordnung für sie nahm, würden sie Benachrichtigungen bekommen, und dann wird es in Bestellungen hier erscheinen. So funktioniert der Kauf von Sachen und die gehostete SSL-Lösung, die sie verwenden. 8. Themen und Flüssigkeit erklärt: In Ordnung. Wir werden darüber sprechen, was wahrscheinlich der wichtigste Teil des Ladens für Designer sein könnte, für den Kunden, für alle, die Themes. Und Shopify ist für uns erschaffen, dieser Typ Timber. Und Timber, sagen wir, Sie können sich das wie Twitter Bootstrap für Shopify vorstellen. Es ist ein Framework, eine Best Practice-Ressource zu verwenden, wenn ein Thema für die Arbeit mit ihm zu entwickeln. Sie können es bekommen, es ist kostenlos von Shopify.github.io/Timber, das auf GitHub ist, also aktualisieren sie es regelmäßig, es ist eine nützliche Ressource. Also, ich habe bereits vorangegangen und es in unserem Theme Store installiert, und es gibt zwei Möglichkeiten, Designs zu einem Theme Store hinzuzufügen. Sie könnten Theme Store besuchen, den offiziellen Theme Store, wählen Sie hier ein Thema aus und klicken Sie auf Theme installieren, und Shopify wird es für Sie automatisch tun, oder wenn Sie eine ZIP-Datei haben, könnten Sie einfach Ihre Thema nach oben, schnelle Upload Thema und laden Sie es. Dies ist gut, wenn Sie über ein benutzerdefiniertes Design verfügen , ein Design ändern oder das Design als Sicherung exportiert und erneut importiert haben. Es gibt mehrere Gründe, warum Sie das Thema direkt in Ihren Shop hochladen würden. Also hier, ich habe Timber und wollte Sie durch das, was in einem Thema ist, führen. Aus der Sicht des Endbenutzers, der Clientperspektive, geht es darum, den Laden so aussehen zu lassen. So konnten wir sehen, dass hier die Vorschau ist, hier die Live-Front und rendern dieses Ding, und das Thema Einstellungsfenster. Theme-Einstellungen-Panel sind Optionen, sie sind, wie jemand leicht wählen Sie ihr Logo, in der Kopfzeile zum Beispiel, und sogar bearbeiten Sie die Farben und Sachen, die in der Checkout-Prozess erscheinen. Das ist, was in das Thema geht, wenn Sie der Endbenutzer sind. Als Designer Entwickler, wenn wir auf diesen Kerl klicken, diese Ellipsenschaltfläche und wählen Sie Bearbeiten HTML/CS, wir gehen, um das Innere des Themas zu sehen. Und es zerlegt es in diese Ordner, und wir haben keine Kontrolle über die Ordner, und das ist in Ordnung, denn es bedeutet, dass jedes Thema, wenn man in einen Laden kommt, es wird dasselbe sein. Lass uns einfach von oben nach unten gehen. Das erste ist Layout, es gibt theme.liquid. Und theme.liquid ist unser Ausgangspunkt, alle unsere anderen Dateien werden innerhalb dieser Datei rendern, dies wird oft unsere Kopfzeile sein und dann wird die Vorlage oder der Inhalt darin gerendert. Und ich habe noch nie ein Thema gesehen, das mehr als ein Layout hier hat, es ist immer nur theme.liquid.. Iiquid ist unsere Erweiterung, was bedeutet, dass dies Dateien sind, die Serverseite ausgeführt werden, bevor sie an den Endbenutzer übergeben werden. Also, .liquid ist äquivalent to.php. Und dann haben wir Vorlagen. Vorlagen beziehen sich auf den Inhalt, die Seite, die in unserer theme.liquid Datei gerendert wird , je nachdem, was es ist. Und lassen Sie uns in theme.liquid nach unten scrollen, wenn wir es finden könnten, suchen Sie nach Content-Zeile 296, Inhalt für Layout. Wenn Sie also rendern, wird eine Seite von Shopify angefordert, sie greift theme.liquid und fügt dann die entsprechende Vorlage in diesen Space Inhalt für das Layout ein. Wir haben verschiedene Vorlagen, je nachdem, was wir tun. Und sie sind ziemlich klar, ziemlich offensichtlich, was sie sind, wie 404 offensichtlich, ist für Datei nicht gefunden, Artikel für Artikel, Forum für Blog, Warenkorb-Sammlungsliste, mal sehen, Sie könnten alle anzeigen Kollektionen/alle. Wenn Sie dann Kontoerstellung erlaubt haben, haben Sie Kundenkonto, Erstellen ihrer Kontoadressen, Kunden registrieren Bestellung usw., Geschenkgutscheine Seite und wir haben index.liquid, das ist unsere Homepage, Liste Sammlungen, die eine Liste von Sammlungen ist, und hier haben wir Sammlungen und Produkte, diese ist optional. Nicht unbedingt jede Vorlage, die hier drin ist, ist erforderlich. Seite und page.contact, werden wir in das, was das ist, product.liquid, natürlich unsere Produktseite, und Suche oder Suche Seite. Hier skim und sehen wir haben page.liquid, die eine Seite ist, und die seite.contact. Was das ist, ist eine alternative Vorlage, sie haben Seiten oder Standardseite. Und dann, wenn wir auf page.contact schauen, ist es eine Seite, die von Shopify benötigt wird, um eine Kontaktseite zu haben. Aber das ist nur eine Variation auf einer Seite mit einem Kontaktformular, das darin steckt. Und für Blog, für Blog-Artikelseite, Produkt, Sammlung, können Sie mehrere Vorlagen für diese Seiten haben, so, Sie sind nicht auf nur eine Sache beschränkt, und Sie wählen, dass auf der bestimmten Seite oder, Sie könnten festlegen, welche -Vorlage, die sie manuell verwendet. Dann gehen wir nach unten zu Snippets. Snippets sind cool, sie sind inklusive. Wenn Sie das Stück Logik, Inhalt, HTML was auch immer haben , würden Sie das in ein Snippet einfügen, und dann können Sie das wiederholt auf Seiten aufrufen. eine Gruppe von Produkten anzeigen, können Sie dies auf Feature-Produkte auf der Homepage tun, definitiv auf einer Sammlungsseite, möglicherweise in einem leeren Warenkorb oder 404 Seite. Sie würden die Logik dafür in ein Snippet hier einfügen wollen, und dann könnten Sie das einfach wiederholt als Include aufrufen. Und dann, wenn Sie es aktualisieren müssen, anstatt es an fünf verschiedenen Orten zu aktualisieren, aktualisieren Sie es einmal und dann wird es überall aktualisiert. Sehr praktisch. Und das ist Teil der Verwendung einer trockenen Methode, trockenes Wesen, wiederhole dich nicht. Dann gehen wir zu Assets. Assets ist sehr einfach, es sind die Bilder, JavaScript, CSS-einzelne Dateien, die das Thema verwenden wird. Wenn Sie Logik darin haben, die gerendert werden muss, können dies flüssige Dateien sein, aber sie müssen es nicht sein. Hier haben wir nur modernisizr, wir haben nur eine Minute Faser zum modernisizr hier drin, und dies wird nur serviert, wie unberührt ist. Aber dann, unsere regulären Asset-Dateien, haben wir einige Vektorgrafiken hier drin, sogar in einer HTML-Datei, und es sieht so aus, als würden wir eine Symbolschriftart verwenden. Sehr cool. Hier haben wir eine timber.scss, also wird Shopify kompilieren, wird mit Sass rendern, was praktisch ist, also können Sie das verwenden. Sass ist auf dem Shopify-Server kompiliert, Sie müssen sich nicht damit anlegen und es macht einige nette Dinge. Wenn Sie Ihr Leben einfacher machen möchten, möchten Sie Hilfsvariablen verwenden, können Sie diese Theme-Einstellungen verwenden, es ist bequem. In Ordnung, lassen Sie uns den Ordner „Assets“ schließen. Einfacher hier Konfiguration, Einstellungen Daten, dann Schema setzen. Also, wenn wir uns diesen Kerl anschauen, das ist diese angepasste Seite, die ich Ihnen gezeigt habe, hier Thema anpassen. Dies wird hier für den Endbenutzer gerendert werden, und es ist auch, wo wir das Zeug speichern werden. Hier steckt eine Voreinstellung hier drin. Also haben wir eine Voreinstellung namens default, und es wird dort gespeichert. Dann haben wir schließlich Gebietsschemas, Gebietsschemas ist, wie Sie mit Internationalisierung umgehen. Also, wie Sie erraten haben, kommt dieses Thema in Deutsch, Englisch, Französisch, und ich glaube Portugiesisch, aber definitiv ist es genau hier, Blick auf es ist seine eigene Umgebung, die das Leben leicht macht. Sie könnten die Arbeit am Benutzerthema vollständig hier aufbauen. Alles klar, bis jetzt, die Dinge waren alle Spaß und Spiele, Klicken um und einfach zu bedienen Schnittstelle. Das einfache CMS-System, ein guter WYSIWYG-Editor bei der Auswahl von Themen. Wir haben ein wenig darüber gesprochen, was in einem Thema ist, und jetzt ist es an der Zeit, sich mit Liquid schmutzig zu machen. Liquid ist eine Sprache, Ruby-basiert, die Shopify geschrieben hat, es ist da draußen, es ist jetzt in anderen Dingen, und es ist eigentlich nicht beängstigend im Geringsten. Also schauen wir uns an, hier haben wir unsere Produktseite von unserem Thema hier. Es wird gerendert, aber wie ist passiert? Also, wenn wir in unser Thema schauen, haben wir product.liquid, das ist nicht kompliziert und wir wissen, dass product.liquid unsere Produktakte ist. Wann immer wir die Produktseite aufrufen, sucht Shopify nach products.liquid. Wenn wir innerhalb dieser Datei scrollen und es betrachten, ist es nur HTML, es gibt nichts Verrücktes, das wir vorher noch nicht gesehen haben, nur HTML. Aber dann fragen wir uns : „Hey ist die Beschreibung hier reingekommen?“ Also, hier, Zeile 116, wir haben diesen Kerl, product.description, und ich bin sicher, Sie können erraten, was das tut. Es ist die Variable, die das Produkt einfügt, aber zum Teufel, lassen Sie uns es auskommentieren, speichern und aktualisieren Sie die Produktseite. Und sicher genug, und das ist cool. Dies ist nur der normale Texteditor, der in Shopify gebaut wurde, funktioniert sehr gut. Funktioniert sofort, es ist großartig und dann, wenn wir product.description auskommentieren und speichern, kommt unsere Beschreibung zurück. Hier drin können Sie sehen, dass wir product.description haben und es ist in diese zwei geschweiften Klammern eingewickelt. Das sagt uns: „Hey, das ist eine Liquid Variable“, und im Allgemeinen bedeutet alles, was mit den doppelten geschweiften Klammern ist, dass es ein Stück Inhalt ist. Es wird den Titel, die Beschreibung, den Preis, diese Art von Sachen ausgeben , während dies, wenn Sie genau beobachten, wir haben auch diese Jungs, wo es geschweifte Klammer zu 100 Prozent ist. Diese bedeuten im Allgemeinen, dass es Logik ist, oder es ist etwas, das nahe an einem Kommentar sein muss, aber wenn Anweisungen dies verwenden, werden Schleifen dies verwenden. Aber es hilft Ihnen, auf einen Blick zu sehen, was es tut und es ist schön. Selbst hier in diesem, die wenn dann Logik, es ist sehr einfach. Wenn Sammlung und dann enden, wenn, es ist genau das, was Sie davon erwarten würden, gibt es nichts Verrücktes hier. Sie wissen, dass es keine seltsame Syntax gibt, sie ist einfach zu bedienen. Hier haben wir Sie wissen product.liquid, aber es ist nur diese Vorlage. Wir haben es früher erwähnt, was passiert, ist jedes Mal, wenn eine Seite geladen wird, Shopify läuft durch theme.liquid, also lasst uns rüber gehen, und wieder nur normaler Kopf. Wir haben dieses Zeug schon mal gesehen, wir kennen HTML, es ist nicht schwer. Aber wenn wir nach unten scrollen, durch die Datei, durch unsere theme.liquid Datei, finden wir diesen Kerl, Inhalt für Layout und Inhalt für das Layout, es wird sein, was auch immer diese richtige Vorlage ist, wird in hier. Wenn wir also unsere Produktseite laden, packt sie theme.liquid und läuft durch sie, und wenn es zum Inhalt für das Layout kommt, fügt es product.liquid dort ein, und es geht weiter durch den Rest dieser Datei, was praktisch ist. Es ist großartig. Das war's also. Ich meine, es gibt wirklich nichts, es gibt nichts besonders schwierigeres, das zu erreichen. Es gibt also keinen Grund, Angst vor Liquid zu haben, und wir werden in unsere Filter kommen und was diese anderen Optionen sind. Also, wenn wir hier nach oben schauen, wie Sie hier Seitentitel wissen, ist das nur Inhalt, es fällt im Vergleich, wir haben eine if-Anweisung, die es dort hineinlässt. Wenn wir nach unten scrollen und wir alle möglichen guten Sachen hier drin haben. Lassen Sie mich ein gutes Beispiel für ein If finden, also gehen wir hier. Wenn Sie wissen, dass der Kunde bedeutet, dass dies ist, der Kunde hier aktiviert wurde, wird er Kunde angezeigt angemeldet und wenn, es ist großartig. Sehr einfach. Die andere Sache über Liquid ist, dass es keine URLs gibt, also hier könnten Sie sehen, dass wir modernizer.min.js, script-Tag, asset_url haben. Wir müssen uns keine Sorgen über verlorene Dateien 404s machen, es fällt sie ein, und es tut es sogar mit dem richtigen HTML, also ist es ein Skript-Tag im Vergleich zu hier oben auf unserem CSS, stylesheet_tag, asset_url, timber.CSS, und natürlich bezieht sich auf asset_url oder bezieht sich auf ein Asset. Wir scrollen nach unten zu unserem Assets-Ordner. Da ist sie timber.scss.liquid, und dann lasse ich es einfach da rein. Es funktioniert, keine 404s mehr, keine Sorge mehr über dieses Zeug, wenn sich URLs ändern, Shopify kümmert sich um es für uns durch Liquid, was sobald Sie diese Syntax unten haben, es das Leben sehr einfach macht. Hier ist ein gutes Beispiel, super leicht zu verstehen, unser Favicon. Also, wenn settings.favicon_enable, so dass bezieht sich auf unsere Theme-Einstellungsdatei, und das ist es. Wenn es eingeschaltet ist, wird es laufen. Es wird nur dieses Stück HTML unberührt angezeigt, aber dann für unsere, href dort, beziehen wir uns auf favicon.png und asset_url. Das war's, super einfach, super einfach. Ist es nicht, es ist alles, was du vorher gesehen hast. Es ist sehr einfach zu intuitieren, aber gleichzeitigwürde ich auch griffbereit halten und ich mache es aber gleichzeitig mit Liquid Dokumentation und dem Shopify Liquid Spickzettel. Hier haben wir, genau hier oben zeigt es Ihnen, flüssige Variable Referenz. Also öffnen wir den Kerl auf, und hier auf einen Blick könntest du ihn durchsuchen, deine Sachen finden. Es ist sehr einfach. In Ordnung, das ist unser Intro, ich werde einziehen und in der nächsten etwas komplizierter werden. 9. Layouts, Vorlagen: Ok. Lassen Sie uns über Layout sprechen. Wir haben in unserem Thema gesehen, es ist nur mit normalem HTML, nichts Verrücktes darüber. Aber das Layout ist vielleicht nicht das, was wir gewohnt sind. Wir haben diese ziemlich andere Dateistruktur, in der wir nicht einmal URLs verwenden. Was passiert, ist, dass wir diesen Layout-Ordner verwenden, und darin haben wir theme.liquid. neunundneunzig Prozent der Zeit, Sie werden nur die eine Layoutdatei haben, theme.liquid. Jede einzelne Seite wird mit theme.liquid gerendert, und es ist das, was Sie erwarten würden, zu sehen. Es öffnet sich mit unserer HTML-Datei, doctype. Es hat einen Kopf, und wenn wir den ganzen Weg nach unten scrollen, wird es sicher genug geschlossen. Es hat eine Fußzeile. Das wird also unsere universelle Seite, unser universelles Format. Das erspart uns viel Arbeit davon, Kopfzeilenfußzeilen verwenden zu müssen, obwohl Sie könnten, wenn Sie es wollten. Es erspart uns, dieses Zeug auf jede einzelne Seite zu schreiben, es ist praktisch. Sie sind einfach zu bedienen. Also, wir haben theme.liquid hier, und es hat alles hier drin, all unsere grundlegenden Seitenanforderungen. Es sieht sehr vertraut aus, aber es gibt ein paar Dinge, die es haben muss. Abgesehen davon, dass dies Ihre eine Masterseite oder Masterlayout ist, und alles wird in diesem gerendert, und dann basierend auf der Sache, die wir rendern, basierend auf der URL wirklich. Es fügt eine dieser Vorlagen in den Inhalt für Auslagerungsdatei oder Inhalt für Seitenvariable. Da ist es, Inhalt für Layout, 296. Es lässt das Zeug da drin fallen. Der Inhalt der Seite befindet sich in dieser Layoutdatei. Das ist unsere Nummer Eins, die wir da drin haben müssen. Es gibt noch eine kleine, aber wichtige Sache, die wir hier haben müssen, finden wir es. Da ist es. Es heißt Inhalt für Header dort oben auf 34. Inhalt für Header ist so, dass Shopify Elemente dort einfügen kann. Es könnte also überwiegend Plugins sein. Wenn Sie Apps installieren, und die App JavaScript zur Website hinzufügen muss, wird es dort tun. Es macht das Leben einfach. Wenn du die App entfernst, hast du dieses Zeug nicht mehr da drin. Wenn Sie die App haben, müssen Sie sich nicht unbedingt mit HTML durcheinander setzen, solange es dort fallen lassen kann, was praktisch ist. Sehr nett. Das andere, was wir bemerken werden, wir haben es nicht in dieser Datei, sondern sind eine Art Include-Snippets. Also, hier haben wir ein paar Snippets. Wenn wir wollten, könnten wir es einschließlich theme.liquid tun und manchmal mache ich es nur, um es zu reinigen, damit es nicht ganz so chaotisch aussieht. Hier finden wir ein gutes Beispiel. Wir haben Mobile-nav beginnen und wenn wir nach unten scrollen, dann gehen wir. Da ist das Ende von Mobil-Navi. Also, lassen Sie es uns schneiden. Wir haben den Kerl. Also werde ich das einfach dort lassen, damit wir uns erinnern, wohin es geht, und fügen wir ein Snippet hinzu. Wir erstellen ein neues Snippet namens mobilenav. Erscheint, und lassen Sie uns unsere Inhalte dort einfügen. Also hier ist der mobile-nav-Inhalt von dieser Seite. Es heißt mobile-nav.liquid. Speichern Sie es. Gehen Sie zurück zu theme.liquid und schreiben wir das da drin. Fügen mobilenav und lassen Sie uns schließen, dass geschweifte Klammer. Speichern. Lass es uns auffrischen. Die Seite sollte gut aussehen, aber lassen Sie uns Mobile-nav hier und genau dort finden . Bumm. Mobile-nav starten. Da ist es, und es gibt all unsere Handy-Nav-Zeug, immer noch da drin. Aber was passiert, wenn wir diese Linie töten? Also, nun, hier werden wir es einfach komplett löschen. Rette diesen Kerl und lass uns unsere Quelle auffrischen. Jetzt sind alle diese Zeilen weg. Also, da diese Vorlagendatei, so ist es fast immer würden Sie nur die einzelne theme.liquid Datei haben, und es erscheint auf jeder Seite. Es gibt wirklich keinen guten Grund, Includes in theme.liquid zu verwenden , außer vielleicht bereinigt es es, oder Sie beabsichtigen, mehrere Layout-Dateien zu verwenden. Aber, enthält Sinn innerhalb von Vorlagen. Also im Allgemeinen, wie ich es mache, würden Sie es tun, ist themen.liquid. Also zuerst Ihre Layoutdatei, dann Ihre Vorlagendatei, zum Beispiel product.liquid und dann würden Sie Ihre Include machen. Also, in product.liquid, könnte es Social Share-Buttons sein und Sie haben eine Include dafür. Das würde Sinn ergeben. Das deckt unsere Layout-Dateien, unsere Vorlagen und unsere Snippets ab. Jetzt werden wir über einen bestimmten Teil der Flüssigkeit sprechen , die Sie während Ihres Dings verwenden müssen, aber eine sehr einfach zu bedienen, und das sind Variablen. Flüssigkeitsvariablen, auch in der Shopify-Dokumentation, als flüssige Objekte bezeichnet. Objekte sind also Variablen. Variablen sind in mir verwurzelt. Also, das ist wahrscheinlich das, was ich weiter nennen werde, aber sie sind austauschbar. Also, das sind diese Jungs, die doppelten geschweiften Klammer sagen uns, das ist ein bisschen Inhalt, ein bisschen Information. Es ist eine Variable, und es gibt aus. Es gibt unsere Informationen aus, wie wir in früheren Demonstrationen wie product.description gesehen haben. Innerhalb der Objekte gibt es zwei Arten. Es gibt globale Objekte, die überall auf der Website verwendet werden können. Wenn wir in die Shopify-Dokumentation gehen, wird das Zeug wie der Einkaufswagen sein. Der Wagen muss überall erscheinen. Oder aktuelle Seite, gibt die Nummer des Pagers auf. Nun, wenn Sie in paginierten Inhalten sind, funktioniert das eigentlich nicht überall notwendigerweise. Wenn die Person als Kunde angemeldet ist, so dass Sie Logik wie Login tun können, loggen Sie sich ab. Also, wenn Sie durch diese flüssige Dokumentation scrollen, haben wir unsere verschiedenen Objekte für globale, wie Seitentitel sind ein gutes Beispiel, das überall erscheint, und wir haben Seitentitel. Also, lasst uns einfach eine kurze Demo machen. Hier werde ich Seitentitel kopieren, und dann gehen wir zurück zu unserem product.liquid. Also, hier haben wir Produktbeschreibung und darunter, lassen Sie uns ein neues Stück Informationen hinzufügen. Ich werde ein Absatz-Tag schreiben und sagen: „Das ist die Titelseite der Seite.“ Lassen Sie uns das sagen. Speichern Sie es. Lasst uns jetzt unser Produkt laden. Da geht es, in Ordnung. Viel Produkt, scrollen Sie nach unten, und schauen Sie sich das an. Also, wir haben unsere Beschreibung, wie wir es erwarten würden, und dann direkt darunter, das ist die Hip Shoes Seite. Also, es ist gerade geladen den Titel der Seite. Nun, das ist eine globale. Globales Objekt, globale Variable, die auf jeder Seite funktionieren wird. Aber was ist mit dem Zeug, das spezifisch für eine Seite ist? Also in diesem Fall ist ein gutes Beispiel, dass product.description. Die Beschreibung eines Produkts kann nur auf dieser Seite in Bezug auf dieses bestimmte Produkt oder den Preis erscheinen . Aber du machst dich verrückt, wenn du versuchst herauszufinden, was jeder einzelne ist. Also, das ist, wo der Shopify Spickzettel nützlich ist. Es ist von Mark Duncan Lee, der ein Designer bei Shopify ist, und es hat alles so ausgebrochen, was großartig ist. Also, hier, wenn wir unter Template-Variablen gehen, und ja, er nennt sie Variablen nicht Objekte. Also, hier haben wir Flüssigkeit ausgebloggt. Hier hat er eine Auflistung aller spezifischen Dinge, die wir auf einer Blog-Seite verwenden können. Wieder, es ist nicht wie auf einen Blick, es ist sehr offensichtlich, was sie sind, Blog diesen Titel, es ist der Titel des Blogs. Aber wenn du versuchst, darüber nachzudenken, was es ist, ist es schwieriger. Also, es ist sehr schön, diesen Spickzettel vor dir zu haben. Wenn Sie darauf klicken, erhalten Sie alle Beschreibungen und es wird auch direkt mit der Dokumentation verlinken, was sehr schön ist. Also, wir sind auf unserer Produktseite, und hier haben wir all das Zeug für unser Produkt, was großartig ist. Ja, und wir haben, lasst uns Vorlagen sehen, Produkt aus Flüssigkeit, also nehmen wir diesen Kerl wieder raus. Das wollen wir nicht. Also, das war Seite Untertitel. Dies wird auf jeder einzelnen Seite angezeigt. Anstatt dies zu tun, wollen wir etwas spezifisches für ein Produkt finden, das wir ausgeben können. Lassen Sie uns durch Produkte gehen, die flüssig sind und eine finden, eine, die richtig ist. Hier zeigt unser Produkt seinen Typ nicht an. Also, wir haben product.type. Also, lasst uns ein besseres Beispiel machen. Nehmen wir an, wir können das hier drinnen hinzufügen. Also, ich werde schreiben, ich werde es fett setzen. Ich werde Typ schreiben, und dann werden wir dies in product.type ändern und sehen, was passiert. Product.type, speichern, geht zurück dorthin, und sie sind da, aktualisieren. Schau dir das an, Typ, Kicks Seite, da gehen wir. Wo waren meine Seite und ich da drin? Save, alles klar, lass uns das rückgängig machen. Geben Sie Kicks ein, und das liegt daran, dass der Typ auf diesem Produkt zumindest auf Kicks gesetzt wurde. Das ist eine gängige Modifikation. Vielleicht möchten Sie zu den Leuten sagen: „Hey, welcher Typ ist das?“ So würdest du es tun. Lassen Sie uns über Vorlagen sprechen, richtig Also, wir haben drinnen oder Thema, wir haben dieses Konzept von Mikro-Vorlagen. Sie sind keine vollständige Seite. Sie sind nur der Inhalt für diese Seite, und das ist, was in den Vorlagenordner. Lassen Sie uns zuerst durchlaufen, wie diese gewählt werden, denn als ich zum ersten Mal in Shopify kam, verwirrt mich das zunächst auch. Es wird basierend auf der URL gemacht. Also, werfen wir einen Blick auf sie. Lasst uns schnappen, gehen wir in unseren Laden und wir laden diesen Kerl hoch. Alles klar, es ist restauriert. Also richtig, das hier ist einfach. Führen Sie die Homepage, also Schrägstrich , der unsere index.liquid laden würde, und wir werden den Kopf nach unten. Es gibt Index, die Flüssigkeit, und hier, also laden Sie das erste, was da drauf ist. Wir sehen jeweils zwei Homepage-Abschnitte.Titelseite. Lassen Sie uns Sinn machen. Hübsch, ziemlich unkompliziert. Da gehen wir. Es gibt unsere Homepage Sammlung, und nur um es zu beweisen, nur um zu zeigen, dass, das ist, was es ist, werden wir hinzufügen. Wir werden hier einen Text hinzufügen. Wie sparen Sie? Lassen Sie uns diese Seite aktualisieren, und schauen Sie sich das an, es erscheint. Also, das ist hübsch. Das ist einfach, das ist unkompliziert, wie dieser Inhalt funktioniert. Aber auch hier, welche Sammlung Sie wählen, basiert auf der URL. Also, lasst uns auf Über uns klicken, und Über uns lebt auf einer Seite. Wir wissen dies, wenn Sie sich die URL, /pages. Also, dann, wenn wir in gehen, würden wir erwarten, dass zu laden page.liquid. Hier haben wir H1 Seite Titel. Dasselbe Deal, wir werden die Textseite dort hinzufügen, speichern, aktualisieren Über uns Demo Seite. So macht es das. Lassen Sie uns alle Vorlagen durchlaufen, die hier sind. Es sind nicht furchtbar viele, und wir werden schnell diskutieren, was jeder tut. Vierhundert und vier, das ist Datei nicht gefunden Seite Artikel. Dies ist der Inhalt eines Blogs. Also, Blog-Artikel nicht zu verwechseln mit seite.liquid. Blog, das ist der Index der Artikel auf einem Blog. Warenkorb, es ist Ihre Warenkorb-Seite, nicht die Kasse Warenkorb Seite. Sammlung, der Insider, nur Standard eine Kategorie Sammlung Seite. Sammlung.Liste, das hier ist ein wenig anders. Lassen Sie mich Ihnen das zeigen. Das ist eine Auflistung von Sammlungen. Also, wenn Sie zu /collections gehen, lädt es diese Auflistung aller Sammlungen, die sich tatsächlich von collection/all unterscheidet, was eine Auflistung aller Produkte in einem Geschäft ist. Also, dann, wenn wir nach unten gehen, so dass die Sammlungen immer collections.list, und dann haben wir alle diese Kundenseiten. Also, es gibt einige hier drin, diese werden nur verwendet, wenn Sie Kundenkonten im Shop aktiviert haben, und zum größten Teil, wenn der Kunde eingeloggt ist. Aktivierung des Kontos besteht darin, die E-Mail-Verifizierung zu überprüfen. Adressen verwalten sie ihre gespeicherten Adressen. Login-Seite, der Login natürlich. Bestellen Sie, können sie ihre früheren Bestellungen, die Registrierungsseite, Passwort-Reset sehen . Hübsch, die Namen sind unkompliziert. Mal sehen, was wir hier bekommen. Geschenkgutschein, das hier ist alles anders. Wenn jemand einen Geschenkgutschein kauft, erhält er per E-Mail einen Link für den Geschenkgutschein. Dies wird gerendert, wenn sie auf diesen Link klicken. Also, wenn ich den Geschenkgutschein kaufe, ist das die Seite, die zeigt. Sie können ausgefallene Geschenkkarten machen oder Anweisungen hinzufügen, diese Art von Sache. Index.liquid, die wir gelernt haben, ist die Homepage, List-Sammlungen. Also, das ist /collections und /products. Es ist optional. Ihr Jungs sehen, einige dieser optionalen bezieht sich nur auf , wenn ein Thema an den Theme Store einreichen. Was erforderlich ist und was nicht. Wir haben Seite hier, das ist nur eine Seite, wie wir gelernt haben. Page.contact, dies eine alternative Vorlage, und ich werde noch nicht darüber sprechen. Aber wir werden da reinkommen. Product.Liquid, wir haben mit diesem Kerl eine Menge gespielt. So, Produktseite und Suche sind die Suchergebnisse. Also, hier oben haben wir Sammlung.Liste. Dies ist eine alternative Vorlage. Ja, Sammlung/alles? Ansicht-Liste. Also wieder, dieser hier ist nicht erforderlich. Aber es ist hilfreich, hier drin zu haben. Das ist ein Teil des Grundes, warum ich gerne anfange. Wenn ich ein benutzerdefiniertes Thema mache, ist es schön, mit dieser Holzrahmenarbeit zu beginnen. Als nächstes tauchen wir in mehr flüssiges Zeug ein. 10. Filter und Loops: Ich möchte eintauchen und über eine meiner Lieblingsmerkmale der Liquid Syntax sprechen und das sind Filter. Wir werden Shopifys Definition davon lesen. Filter sind einfache Methoden, die die Ausgabe von Zahlen, Zeichenfolgen, Variablen und Objekten ändern . Sie werden innerhalb eines Ausgabe-Tags platziert und durch ein Pipe-Zeichen getrennt. Also, wie wir uns vorher erinnern, ein Ausgabe-Tag, das ist ein Objekt, Liquid Objekt oder Liquid Variable und es wird durch diese doppelten geschweiften Klammern angezeigt. Das ist in der Regel für Dinge wie Titel, Beschreibung, Preis, die Dinge, die nur dynamische Variablen sind, die Sie ausspucken möchten. Sie geben uns also ein Beispiel wie Upcase als Pfeife. Also, lassen Sie uns in unseren guten alten Freund gehen, die Produktvorlage. Got product.Liquid hier und hier schauen h1; product.title. Lassen Sie uns einen Filter hinzufügen. Ein Filter wird durch Pipe angezeigt, also Pipe ist ein Zeichen, das nicht wie eine Mario-Referenz ist, und dann fügen wir Upcase dort hinzu. Also, da gehen wir, wir haben „product.title | upcase“. Also, wir könnten wahrscheinlich erraten, was das tun wird. Speichern Sie es und jetzt, lassen Sie uns diese Seite aktualisieren. Sieh dir das an, es hat das in Gnarly Schuhe geändert, inspizieren Element. Also, wenn wir es uns ansehen, haben wir „itemprop gleich Name knorrige Schuhe“. Es hat die Ausgabe für uns verändert und das ist nützlich. Sie könnten es tun, um Dinge global zu tun, um thematische Einstellungen wie in Ihrer Navigation zu ändern. Vielleicht möchten Sie Ihre Navigation immer Großbuchstaben, Kleinbuchstaben, Sie könnten das hier tun. Also, lassen Sie uns das herausnehmen, aber es gibt alle Arten von Filtern, die viele verschiedene Dinge tun, und eine der besten Ressourcen, um zu finden, dass die Shopify Spickzettel wieder von Mark Dunkley ist. Wenn ich hier raufschaue, hat er Liquid Filter, das Output-Zeug, also ist das cool. Hier ist ein Strip HTML. Also, das ist schön, wie sagen wir, Sie möchten Ihre eingebettete Beschreibung zu einem Dokument hinzufügen. Also, hier ist ihr Beispiel. Was sie getan haben, ist den Artikelinhalt zu greifen und dann HTML zu entfernen, zieht den HTML heraus, weil HTML in Ihrer eingebetteten Beschreibung es offensichtlich brechen würde, und dann haben sie hier eine weitere Pipe hinzugefügt, abgeschnitten:20. Also frage ich mich, was truncate tut. Lasst uns hier runter gehen. Mit abgeschnittenen Wörtern können wir es auf x Wörter reduzieren oder Zeichen abschneiden. Cool, also scrollen wir nach unten. Wir haben hier andere Filter. Haben wir welche? Also, hier ist groß geschrieben. Großgeschrieben ist schön, wir könnten das verwenden, um unsere Inhalte zu bereinigen. Im Fall von, sagen wir, jemand, der faul ist und alle ihre anderen Produkttitel waren Kleinbuchstaben. Sie könnten das verwenden, um sie hübsch aussehen zu lassen, um sicherzustellen, dass sie immer gut aussehen, was praktisch ist. Aber wie Sie hier sehen können, ist es mehr, als nur diese Ausgaben zu ändern. Es gibt viele verschiedene praktische. Also hier haben wir Geld mit Währung, Geld ohne Währung und Geld. Sie werden diese viel sehen, weil Sie Lage sein wollen, Ihre Themen zu internationalisieren. Also, vielleicht verkauft jemand in mehreren Währungen oder sie sind in verschiedenen Ländern. Also, Sie können hey, Geld mit Währung anzeigen , anstatt nur das Dollarzeichen anzuzeigen, wie wir es jetzt tun. Hier fügt es kanadisches Geld ohne Währung hinzu. Es ist nur der Preis ohne das Dollarzeichen, und Geld wird mit dem Währungssymbol bepreist. Aber es ist nützlich für Sachen mehr als nur das. Wir haben Preis, das war irgendwie cool. Es ist praktisch, Textausgabe in Kleinbuchstaben in Großbuchstaben zu Großbuchstaben zu ändern. Aber was ist mit Kurzschrift, die uns das Leben leichter macht. Also, lassen Sie uns zu einem Kerl gehen, den wir uns vorhin angesehen haben und das ist dieser CSS-Link. Also, CSS, wir haben Referenzen auf die Datei. Also hier, dieser Typ in einem Zitat bezieht sich auf unseren Vermögenswert. Da ist er Holz, und wenn wir wieder hier rauf gehen, dann haben wir zwei Rohre, also haben wir hier zwei Filter. Die erste ist asset_url. Also, asset_url, könnten wir wahrscheinlich vermuten, dass es die URL auf diesem und dann Stylesheet-Tag ziehen wird. Also, werfen wir einen Blick in die Quelle. Lets sehen Sie die Quelle unserer Datei und finden Sie den CSS-Link, da ist es, CSS Link href, blah, blah, cool. Also, wir haben all das hier draußen vor sich. Aber was passiert, wenn wir stylesheet_tag töten? Wir nehmen eine dieser Rohre heraus, speichern und aktualisieren sie. Sieh dir das an. Also, hier, wie wir erwarten, produziert es nur die URL. Es gibt Situationen, in denen Sie das tun möchten. Wenn Sie in der Lage sein wollten, zusätzliche Attribute zu einem Link hinzuzufügen, möchten Sie dies tun können. Also, es ist sehr praktisch. Also werden wir Filter mehr und einige andere Dinge verwenden, aber definitiv nur packen. Dies ist eine Referenz mit Mark Dunkley Spickzettel, sehr praktisch für Ihre Filter, aber es ermöglicht Ihnen, alle Arten von Spaß programmatisches Zeug zu machen , das Designer nicht verwenden konnten, auch nicht unbedingt konnte es nicht, aber Designer hatten Angst zu verwenden oder schwierig zu verwenden, bevor mit JavaScript, PHP, diese Art von Sache. Hier ist es unglaublich einfach gemacht. Du musst nur wissen, nach welchem du suchst und dafür ist Spickzettel. Jetzt werden wir über ein Thema reden und ein wenig beängstigend werden. Ich will dich nicht erschrecken. Wir werden For-Loops besprechen. Also, wenn Sie mit Ihrem HTML-CSS vertraut sind, ist es nicht viel Programmierlogik da drin. So etwas wie eine For-Schleife kann einschüchternd erscheinen. Jeffrey nennt sie Iterations-Tags, for-loop ist eine Art Iteration-Tag. Alles, was Sie tun, ist, einen Codeblock zu wiederholen. Werfen wir einen Blick auf ein paar Beispiele, in denen wir for-Loops verwenden möchten, und dann werden wir sehen, wie sie funktionieren und dass sie überhaupt nicht beängstigend sind. Also, hier haben wir in unserer Sammlung, in unserem Thema. Was wir nicht wissen, wenn wir eine Sammlung laden, haben wir eine Sammlungsvorlage, die dynamisch die Produkte dort platziert. Wir wissen nicht, wie viele Produkte in jedem Thema, in jeder verschiedenen Kollektion drin sein werden . Also müssen wir eine Möglichkeit haben, das programmgesteuert und einfach zu tun, ohne diesen ganzen Code zu wiederholen. Hier, diese Tag-Wolke auf der linken Seite, die Seitenleiste, das ist eine Schleife und sogar etwas so einfach wie oder Navigation oben. Wir wissen nicht, wie viele Gegenstände da drin sein werden. Das ist nur eine Liste, die immer wieder wiederholt wird. Wieder, es ist nur eine for-Schleife, und dann, eine andere gemeinsame natürlich, Produkt Thumbnails, Produkte könnten unterschiedliche Anzahl von Thumbnails haben. Also, wir müssen for-Loops verwenden und wir verwenden sie ein faires bisschen in einem Thema. Also, schauen wir uns an, wie das funktioniert. Also hier, ich habe gesammelt geladen. Liquid und in Collection.Liquid und ich habe das ein wenig vereinfacht, aber wenn wir hier runter kommen, sehen wir Zeile 53. Habe diesen Kerl, und es heißt, für Produkt in der Sammlung. Produkte enthalten Produkt Gitter Artikel und Endfor. Sobald wir also die geschweifte Klammer sehen, wissen wir, dass dies ein Stück Logik ist, und wir müssen es schließen. Also, wir haben für und endfor. Sehr einfach. Nun, wenn wir uns die Sprache ansehen, ist es auch einfach. Also, für Produkt in der Sammlung.Produkte. Mit dieser großen Flüssigkeit.Syntax könnten wir sagen, dass es nur sagt, für jedes Produkt in einer Sammlung, aber viele Produkte sind in ihrer Schleife durch und enthalten dieses Snippet. Okay, und schauen wir uns das Schnipsel an. Wir haben Produkt Grid Artikel und jetzt gehen wir, dieses Snippet wird verwendet, um jedes Produkt während der Schleife zu präsentieren, für Produkte in Sammlung.products und collection.liquid. Sehr gut. Also, all dieser Code hier drin, normalerweise, wenn wir das ohne die Schleife tun wollten, müssten wir es statisch machen und dies immer wieder wiederholen, es würde nicht funktionieren. Die Schleife macht es viel einfacher. Also, gehen wir zurück zu dieser Schleife. Ordnung, also haben wir für Produkt in der Sammlung. Produkte enthalten Produkt Grid Artikel. In Ordnung. Nur um es zu demonstrieren, töten wir dieses Snippet und lassen uns dann aktualisieren und sehen, was passiert. Alle unsere Produkte verschwinden. Also wissen wir, dass es funktioniert. Also, legen Sie es zurück, speichern Sie es, aktualisieren Sie es und unsere Produkte kommen zurück. Jetzt, mit einer Schleife, zum größten Teil ist es einfach, wie dies nur, „für was auch immer endfor“. Aber Schleifen sind mächtiger als das. Wir können tatsächlich andere Bits der Logik darin einschließen. Also, wir könnten ein anderes tun. Versuchen wir es anders. Sonst ist ein bisschen Logik. Also, wir sagen noch etwas, und dann füge ich das hier rein. Ich hatte es bereits geschrieben, aber nur es ist Absatz-Tags sagt: „Hopps, Sammlung ist leer.“ Also, lassen Sie es uns speichern. Also, jetzt haben wir ein bisschen Logik hier drin, und was das für Produkt sagt. Wenn es also Produkte in der Sammlung gibt, in der Sammlung, werden wir dieses Snippet ausführen, aber wenn es leer ist, werden wir eine andere Nachricht anzeigen. Also, lassen Sie uns erstellen, um unsere Sammlungen zu überprüfen. Was haben wir? Produkte, Kollektionen. Ich habe bereits eine leere Sammlung erstellt und lassen Sie uns sie sehen. Sieh dir das an. Also heißt es: „Hoppla, Sammlung ist leer.“ Es benutzt diese andere Logik, die wir dort reinlegen. Nur um zu zeigen, dass es das ist, was es tut, gehen wir zurück und bearbeiten unser Thema erneut. Sammlung.Flüssigkeit. Wenn wir das andere rausnehmen, schauen wir mal, was passiert, wenn wir das kleine bisschen Logik da drin nicht eingeschlossen haben. Also, es läuft durch die Schleife, aber es gibt kein Produkt und nichts passiert. Es hört einfach auf und fängt an. Also, ziemlich viel einfacher als Sie denken würden, wahrscheinlich einfacher als andere Programmiersprache, wenn Sie sich mit ihnen vermasselt haben , aber es gibt noch mehr, was Sie damit tun könnten. Also, wenn wir wieder zu Mark Dunkleys Spickzettel gehen, haben wir hier, um die For-Schleife zu finden, aber es gibt noch mehr, was Sie damit tun können. Also, wenn du hinuntergehst, wo ist es? Da gehen wir, Loop-Helfer. Also, Loop-Helfer, jetzt können wir Dinge definieren. Also, wollen wir für die gesamte Länge der Schleife laufen? Wollen wir wissen, wo wir in der Schleife sind? Index der aktuellen Iteration, was haben wir sonst noch? Oh, diese beiden sind gut, zuerst und zuletzt. Also, wenn Sie sagen würden, wenn dies wie für die Paginierung wäre, wenn dies das letzte in der Schleife ist, können wir einen Pfeil hinzufügen oder wenn es das erste ist, fügen wir den anderen Pfeil hinzu. Es gibt eine Menge Flexibilität hier mit Loops, aber in den meisten Fällen ist es nicht besonders kompliziert. Ich bin hier an diesem Beispiel, spuckt nur Produkte aus. Also, für Produkt in der Sammlung von Produkten, Titel Produkte. Lassen Sie uns das einfach als unsere letzte schnelle Demo machen, wie Schleife funktioniert. Hier gehen wir, also werden wir unser Snippet gegen nur Produkttitel austauschen, damit wir sehen können, dass es durchläuft. Da ist es, aktualisieren, ja, und hier ist es nur das ist jeder der Produkttitel ausspucken. Also, ja, for-loops nicht kompliziert, nicht beängstigend in Liquid. Wenn Sie grundlegende Programmiersprache kennen, wenn dann sonst, können Sie das herausfinden. Es ist nicht hart, aber es ist ein integraler Bestandteil einer Schaufel kämpfen. 11. Produkt: Also, um zusammenzufassen, haben wir meistens viel gelernt. Wir haben über die Plattform gelernt, Liquid Syntax, was wir mit dem Liquid tun können, wie einfach es ist, die Struktur eines Themas oder Shopify Schnittstelle. Wir haben viel gelernt. Jetzt möchte ich anfangen, durchzugehen und das Zeug zusammenzustellen. Wir werden es tun, indem wir einfach durchlaufen und versuchen, darüber zu sprechen wie die Vorlagen in unserem Timber Framework-Thema angelegt sind, und es wird uns ein gutes Verständnis geben. Wir beginnen mit der Produktvorlage. Produktvorlage ist wahrscheinlich die komplizierteste Vorlage in jedem Thema, mit Ausnahme von vielleicht ein paar Themes Homepages. Aber zum größten Teil, Produktvorlage ist verrückt, wie es wird. Also, wenn wir es meistern können, wenn wir das verstehen, dann wissen wir, dass wir bei allem anderen gut sein sollten. Solange wir uns diese Produktvorlage ansehen, möchten wir zwei Referenzen offen haben. Zunächst einmal werden wir die Flüssigkeitsdokumentation für Objekte, die spezifisch für eine Produktseite sind, abrufen. Wenn Sie sich erinnern, haben wir einige Variablen, die wir global ausgeben können, die überall funktionieren, und dann haben wir viele, die wir nur spezifisch für ein Produkt ausgeben können. Hier haben wir diese Produktattribute vor uns. Wenn wir wollen, könnten wir auch Mr. Dunklees Shopify-Spickzettel vor uns behalten. Hier drüben rechts haben wir Template-Variablen mit product.liquid. Das hier ist gut für eine sehr kurze Referenz. Wir können alle auf einen Blick sehen, und wenn Sie es wie oh, was ist product.title tun, gibt den Titel des Produkts. Mit welchem auch immer Sie sich wohl fühlen. Ich oft, wir werden beide haben oder nur Google, sehen, was kommt. Hier haben wir eine Produktseite. Einfach kompliziert, wie es wird. Wir wollen anfangen, unsere Vorlage zu betrachten. In Ordnung. Du kennst reguläres HTML, wir öffnen unsere div-Klasse, und sofort haben wir h1-Tag. Hier ist unsere erste Shopify Variable product.title. Natürlich wissen wir, dass dieser Kerl bezieht sich auf Awesome Sneakers product.title. Ich werde das nicht demonstrieren, ich werde einfach weiter durchziehen. In Ordnung, hier könnten wir sehen, dass wir einige Dinge mit Schema-Markup machen, es ist, Rich-Snippet-Daten einzuschließen. Ich denke, die meisten oder alle Themen tun es jetzt. Sie müssen es nicht unbedingt für sich selbst tun, aber es ist eine schöne Sache zu haben, wenn Sie ein großer Gläubiger in das semantische Web sind, wie ich es bin. Aber es gibt uns auch Zugriff auf einige gute Dinge auf einen Blick wie Artikelpreis Währung, Inhalt gleich shop.currency. Wir sind uns nicht sicher, was genau dieser Ausgang ist, aber wir wissen, dass es sich um den Laden handelt, es ist eine globale Variable und es ist Währung. Mal sehen, ob wir das nicht nachsehen können. Sicher genug, Shop. Währung ist hier drin. Gibt einen String mit dem Namen der Währung in der Regel drei Buchstaben Darstellung, z.B. USD. Unser Shop sollte US-Dollar aufgestellt werden. Also, dies wird USD ausgeben, aber schauen wir uns in den Code, sehen, was es tut. Also, wenn ich Recht habe, und wenn ich die Kontrolle suchen, finden Sie USD. Sicher genug, da ist es. Eigentlich ist es wirklich drin, wenn man schaut, da ist es. Preis Währung Inhalt entspricht USD, Awesome Sneakers. Bisher tun wir Gutes, wir sind nichts zu verrückt geworden. Wir werden eine andere benutzen - Verfügbarkeit. Wirklich, das ist für Google. Google wird dieses Zeug wissen wollen. Es ist gut für eine SEO. Also, hier haben wir, das ist eine clevere Zeichenfolge, die jemand hier geschrieben hat. Also, wir verweisen auf schema.org. Jetzt haben wir unser erstes Beispiel für Logik. Wir können uns hier durcharbeiten. Wir können es intuitiv machen. Wenn product.available, also, wenn das Produkt verfügbar ist, ist das ein boolescher Operator ja, nein. Wenn das Produkt verfügbar ist, wahr, wird es in den Worten „auf Lager“ schreiben, sonst. Also, wir wissen, wenn es nicht verfügbar ist, ist es nicht vorrätig. 'Else' nicht vorrätig. endif. Wir haben bereits einige intelligente Logik hier drin, damit diese reichen Snippet-Daten funktionieren. Hier haben wir einen Kommentar hier in Code kommen. Also, es ist schön, Kommentare wie diese zu machen Ihre Kommentare in Liquid Tags zu wickeln, da sie nur im Theme-Editor verfügbar sind. Sie werden damit nicht gerendert. Dies wird dem Endbenutzer niemals auf dem Frontend angezeigt. Also, wenn wir schauen, können wir sehen, dass es hier überhaupt keinen Kommentar gibt, was schön ist. Es macht die Seite nur ein wenig kleiner, ein wenig sauberer, und dann müssen Sie sich keine Sorgen darüber machen, wenn Sie empfindliche Kommentare haben, dass Sie würden, aber Sie müssen sich keine Sorgen darüber machen, dass Dinge ausgesetzt werden. Also, wir haben unsere Formular-Aktion nur in den Warenkorb posten. Es ist sehr einfach, Methode, Post. Also, wir posten auf Warenkorb/Anzeigenkennung addToCutForm. Also, es gibt einen Selektor für einen Ajax-Kartenstecker. Das ist wahrscheinlich ein bisschen jenseits von uns. werden wir uns keine Sorgen machen. Scrollen Sie nach unten, sehen Sie, was wir noch hier haben, für Variante in Produkten. Das wird interessant. Wir haben Varianten. Sieh es dir an. Also, Größe, hier haben wir nur zwei, aber das sind Ihre Varianten, Ihre Produktoptionen. Darauf bezieht sich das. Hier verweist es auf Option selection.js, einige verrückte Javascript-Sachen. Ich will nicht, dass du dir darüber Sorgen machst. Aber wir könnten immer noch herausfinden, was los ist. Also Option. Es handelt sich also um ein Formularfeld, wenn die Variante gleich dem ausgewählten Produkt oder der ersten verfügbaren Variante ist. Also, was die Standardauswahl bedeutet, die erste, die dort oben ist oder was der Benutzer ausgewählt hat, und dann zeigt es ausgewählt gleich ausgewählt. Es ist eine Option, dann Endif. Hier haben wir es will in der Schrägung für das Produkt schreiben, so dass wir einzigartige Schiefe schreiben können, variant.skew, offensichtlich könnten wir sagen, bekommen die doppelte geschweifte Klammer, und es wird schräg ausspucken, und es hält nur gehen, Varianten-ID, Titel, Preis et cetera. Auf diese Weise zeigen wir die Optionen für dieses Produkt an. Option deaktiviert. Hier sehen Sie die Variante title-products.product.ausverkauft. Das ist interessant. Wenn Sie diesen Kerl sehen, das T ist für Internationalisierung, für Übersetzung. Wenn Sie möchten, kann der Endbenutzer die Sprache bearbeiten und dann überall dort, wo das Wort „ausverkauft“ erscheint. Das ist die Standardeinstellung. Es wird das einfach für sie neu schreiben. Lasst uns weitermachen. Los geht's. Hier ist ein guter. Aktuelle variant.price, Pfeifengeld. Wir wissen, dass sich der Preis offensichtlich auf den Preis des Produkts bezieht, current_variant. Es wird vier sein, weil wir wieder haben, vielleicht kommt dies in verschiedenen Größen oder kam in verschiedenen Farben, und das würde den Preis ändern. Woher wissen wir, was wir dort tun sollen? Woher wissen wir, auf welchen wir uns beziehen? Nun, darum wird es sich hier kümmern. CURRENT_VARIANT.PREIS, wird der Preis für die aktuelle Variante angezeigt. Also, Sie bekommen sehr schnell die Idee, dass wir einfach intuitieren könnten, weil es natürliche Sprache ist, wir könnten herausfinden, wovon dieses Ding redet ziemlich leicht. Wir mussten noch nicht mal den Spickzettel überprüfen. Dann sind wir zurückgekommen, unsere alten Freunde, der Filter. Sobald wir eine Pfeife sehen, wissen wir, dass es ein Filter ist, der darauf angewendet wird und dass es „Geld“ sagt. Es gibt ein paar verschiedene Möglichkeiten, wie wir Preise ausgeben können. Also, lasst uns nachsehen. Mal sehen, ob wir finden können, was der Geldfilter tut. Hier ist es, filtert Geld. Es fügt das Währungssymbol hinzu. Also, die nette hier, wir könnten, wenn wir wüssten, dass es immer ein US-Store war, könnten Sie das Währungssymbol dort hinzufügen. Aber wenn wir ein Thema für die breite Öffentlichkeit machen, wissen wir nicht, welche Währung sie verwenden. Der Vorteil, das zu tun, Shopify smart, wenn der Käufer wählt seine Währung, es wird automatisch das richtige Symbol hinzufügen. Macht unser Leben sehr einfach. Dann bewegen wir uns auf Produkte, product.compare_at. Also, hier ist der Vergleichspreis. Wieder, vergleichen Sie mit Preis beziehen sich im Allgemeinen ist es UVP, was bedeutet, wenn es im Verkauf ist, und dann hier sehen wir, gibt es eine Logik hier drin, wenn und wenn. Also, hier haben sie etwas Schönes getan. Wenn product.compare at price max größer als der Produktpreis ist, wird der Abschnitt angezeigt. Also, was hier los ist. Ist, wenn dies Logik enthalten ist, um herauszufinden, ob das Produkt im Verkauf ist oder nicht. Also, wenn mein Produkt nur einen Preis hat, und keinen Vergleich zum Preis, wir wissen, dass es nicht im Verkauf ist. Wenn es einen Vergleich zum Preis hat, und das ist größer als unser aktueller Preis, dann werden wir diese Informationen anzeigen, um anzuzeigen, dass das Produkt zum Verkauf steht. Gehen Sie wieder hier runter. Hier haben wir wieder den Filter für Geld, also wissen wir, dass es das Dollarzeichen für uns beinhaltet. Etikett für Menge, product.product.quantity. Auch hier ist das nur Sie für eine andere Sprache kennen. Wir könnten Menge dort schreiben, aber es ist einfacher, und vor allem, wenn wir gehen, um Thema zu verkaufen oder haben ein Thema in einem Theme Store. Wir müssen das hier zur Internationalisierung haben, damit wir verschiedene Sprachen machen können. Auch hier fällt der Text add_to_cart darunter, und hier kommen wir zurück zu unserem alten Freund, von Anfang an, product.description. Wir haben diesen Kerl. Es ist nicht nur eine Zeile, es ist nicht in HTML eingewickelt. Es gibt keine Filter darauf, weil ihre Beschreibung darin geschrieben wird, WYSIWYG-Editor. Was auch immer da drin ist, es wird einfach genau das hineinfallen, was in diesem WYSIWYG-Editor hier drin ist. Aber wenn wir wollten, gibt es Filter, wo wir das Zeug ausziehen könnten. Hier haben wir mehr Logik. Wenn Sammlung, und endif. Ich frage mich, was hier los ist. Also, Shopify hat für Breadcrumbs, zu tun Breadcrumbs basieren auf URLs. Wenn ich also direkt aus einer Google-Suche zu einem Produkt gehe, würde dieser Abschnitt verschwinden. Aber wenn ich im Laden surfen würde, und ich ging von Sammlung zu Produkt, so würden die meisten Leute es tun. Diese Logik wird eintreten, und das wird es hinzufügen. Also, wenn Sammlung, und dann haben wir einen anderen Satz von Logik ist, wenn die Sammlung, können wir wenn Anweisungen verschachteln. Wenn Sammlung.vorherige Produkt oder Sammlung nächsten Produkt, dann können Sie diese Jungs anzeigen. Was ist hier los? Wir haben vorherige, nächste Links, die im Thema funktionieren. Ich habe sie hier nicht mal gesehen. Es gibt Theme-Einstellung, die eingeschaltet sind, und doch wir immer noch. Warte, mal sehen, ob ich recht habe. Ja, es sieht so aus, als wäre es ein Thema, aber es ist nicht hier. Aber wir immer noch, ohne es gesehen zu haben, ich weiß immer noch, was es tun wird, weil die Logik sehr klar ist. Es ist sehr einfach zu folgen. Also, wir sind nicht hier, wir haben dieses Javascript-Zeug, das ein wenig gruseliger wird. Wir brauchen uns wahrscheinlich keine Sorgen darüber zu machen, es sei denn, wir kommen in die erweiterte Theme-Anpassung. Ich würde dich nicht verscheuchen lassen. Aber es gibt noch ein paar Dinge, die wir uns ansehen können. Wieder, hier haben wir, also sagen wir, wir haben ein Javascript, das wir alle hier laden. Wir nennen es, Option selection.js, und dann fügen wir zwei Filter hinzu, die wir von vorher erinnern sollten, Shopify Asset-URL und Skript-Tag. es nur ansehen, wissen wir, was es tun wird. Wir können rückwärts arbeiten. Es wird ein Skript-Tag schreiben, das ist tatsächlich, wenn Sie mehrere Filter haben, lesen Sie sie rückwärts. Wir haben hier ein Skript-Tag, und dann werden wir eine URL zum Asset für Option selection.js anzeigen. Gehen Sie einfach weiter und finden Sie das hier. Scrollen Sie nach unten, wir wissen, dass es da unten ist. Ja, da ist es, Option Auswahl. Dies ist unser Mann 44, und wie wir dachten, Skript-Tag, URL und URLs zu Option selection.js. Aber hier drin können wir entweder sehen, dass wir hier Cashkaputt haben, wahrscheinlich wegen einer Art, wie sie es nennen, CDN-Aktion. Sie müssen sicherstellen, dass wir wahrscheinlich die aktuelle Version laden. Aber normalerweise müssen wir uns Sorgen machen, das ist der Vorteil hier ist, dass wir einfach Script-Tag und Shopify-Asset-URL einfügen können. Es hat sich um uns gekümmert. Wir brauchen uns keine Sorgen darum zu machen. Als Nächstes werden wir dasselbe tun, und es wird leichter werden. Wir könnten diesen Kerl rausfinden, Produkt Liquid, [unhörbar] das ist der komplizierteste. Dies ist sogar mein erstes Mal, dass ich dieses Timber-Produkt durchlief, aber ich konnte immer noch intuitiv herausfinden , was da vor sich geht, wegen der natürlichen Sprache. Es tut nicht weh, dass sie hier Kommentare eintragen. Ich würde empfehlen, einige Kommentare für sich selbst zu hinterlassen, wenn Sie in diesen Themen verloren gehen. 12. Kollektion: Wir werden uns die Sammlungsvorlage ansehen. Genau wie das Produkt, wir werden es einfach durchlaufen und versuchen zu entschlüsseln, was hier vor sich geht , was wir gelernt haben und es wird einfacher werden. Die Sammlung ist einfacher als das Produkt und dann sind die Vorlage, die wir uns danach ansehen werden, noch einfacher. Also, wir gehen einfach einfacher, wie wir gehen. Wenn das Produkt für Sie ein wenig verwirrend war, machen Sie sich keine Sorgen Kollektionen sollten einfacher sein. Wenn Sammlungen verwirrend sind, wenn wir uns die nächste ansehen, sollte das als Tag klar sein. Hier haben wir Sammlung.Flüssigkeit. Es ist unsere Vorlagendatei, die sich auf eine Sammlung von Produkten bezieht, die einer Kategorie ähnlich Wenn wir in flüssige Dokumentation gehen , wollen wir uns als Referenz zur Verfügung haben , wenn wir diese Dinge betrachten. Unsere Objekte oder Flüssigkeitsvariablen für die Sammlung. Auch hier ist das eine Punktsyntax. Also wissen wir, dass es Sammelpunkt sein wird. Und dann haben wir auch Mark Dunklees Shopify Spickzettel. Danke Mark Dunklee. An dieser Stelle sollten wir ihm alle einen Dankeschön schicken. Aber lassen Sie uns Sammlung finden. Da ist sie, Sammlung.Flüssigkeit und schon können wir sagen, dass dies einfacher ist als Produkt. Wir haben viel weniger Sammlungen hier und einige von ihnen sind offensichtlich wie Sammlungstitel, gibt den Titel der Sammlung oder Beschreibung zurück, oder Begriffe die Beschreibung dieser Sammlung, einfache Sachen. Aber wie bei welcher Sammlung Id, verwandelt die ID dieser Sammlung. Okay, und dann haben wir den Griff. Gibt das Sammlungs-Handle zurück, das standardmäßig Kleinbuchstaben ist. In Ordnung. Wir reden über Griffe. Wir haben noch keine Griffe besprochen. Lasst uns unsere Sammlung laden. Hoppla, lass mich das zuerst sagen. Also, Produkte, Kollektionen. Wir haben Lederschuhe. Lasst uns diesen Kerl anklicken. Wir hatten das schon früher gemacht. Es ist eine automatische Sammlung. Dann haben wir hier, also wenn wir uns URL ansehen, sind es Kollektionen/Lederschuhe. Also, fangen wir damit an. URL und Handle. Ein Handle ist Teil der URL. In diesem Fall sind es Kollektionen/Lederschuhe. Wenn wir über einen Produkt-Griff sprechen, wäre es /product/der Griffname, wie Hüftschuhe. Wir konnten in einem Griff sehen, es macht es freundlich. Es macht einen Kleinbuchstaben. Es ersetzt Leerzeichen durch Bindestriche. Es beseitigt alle Sonderzeichen, die wir nicht verwenden konnten. Es ist sehr praktisch, weil abgesehen von unserer URL, dem Ende dieser URL, ein Handle ist auch, wie wir in flüssiger, programmatisch auf verschiedene Sammlungen und Objekteverweisen verschiedene Sammlungen und Objekte , so dass wir das im Auge behalten werden und wir werden es finden. Also, ich schweife ab. Gehen wir zurück zu unserem Thema. HTML bearbeiten. Auch hier arbeiten wir im Holzthema, dem Shopify-Framework ähnlich wie Twitter Bootstrap. Lasst uns die Sammlung aufladen. Flüssigkeit und hier ist dieser Kerl. Hier ist unsere Beispielkollektion, Kurts Lieblingsschuhe und geht hier durch. Fangen wir an wie zuvor. Das erste, was wir finden, ist etwas, das wir vorher noch nicht getroffen haben, paginieren. Auch wenn wir nicht darauf gestoßen sind, könnten wir wahrscheinlich herausfinden, was das bedeutet. Paginieren Sammlung.Produkte von 12, was bedeutet, dass wir hinzufügen, werden wir zeigen. Nehmen wir an, wir hatten 48 Produkte drin, wir wollen nicht alle 48 Produkte gleichzeitig anzeigen, obwohl wir es konnten. Wir wollen es um 12 aufschlüsseln. Wenn wir so viele hätten, könnte ich es demonstrieren. Denn jetzt werden wir es nicht tun. Wir gehen zurück und schauen es uns an. Im nächsten Schritt hier haben wir die Brotkrume. Schnipsel. Zunächst einmal haben wir ein Include. Ein Include ist genau das, wonach es klingt. Es enthält ein Snippet. Ein Snippet ist, wo wir jederzeit einen Teil Code einfügen möchten , den wir nicht neu schreiben möchten. Wir wollen uns nicht wiederholen. Wir wollen hierbei einen trockenen Ansatz verfolgen. Wiederholen Sie sich nicht. Also, lasst uns den Kopf runter Snippets breadcrumb.liquid und was es tun wird, wie wir vorher besprochen haben, wenn es diese Seite rendert, wird es breadcrumbs.liquid, dieses Snippet greifen. Der Grund, warum wir das tun, ist, dass dies auf mehreren Seiten angezeigt wird. Es wird in der Sammlung erscheinen. Es wird auf der Produktseite angezeigt. Also, wir wollen nur einen Ort, um das zu ändern. Wieder können wir sehen, dass es das tut. Wenn Vorlage Produkt enthält oder wenn Vorlage Sammlung enthält. Es ist einfach. Schauen Sie sich das an, wenn Vorlage Sammlung und Sammlung Handle enthält. Also gibt es diese Referenz, die wir wieder gesehen haben, und wir können sogar hier runter schauen. Schauen Sie sich das an, erfassen Sie URL/Sammlungen und es gibt collections.handle. So ist es genau wie das, was wir vorher gesehen haben. Gehen wir zurück Sammlung. Flüssigkeit. Wir haben ein bisschen abgehauen, aber hier geht's wieder. Wir haben einen netten Kommentar, ein anderes Markup, wenn eine Sammlungsbeschreibung existiert. Okay, wir ändern, wie unser HTML angelegt ist, je nachdem, ob wir eine Sammlungsbeschreibung haben. In diesem Fall haben wir in diesem Thema keine Beschreibung hinzugefügt, wir haben nur unseren Titel und dann haben wir - also hier gehen wir. Wenn collection.description nicht leer ist, so dass dieser Typ, dieser Isolationspunkt ist nicht gleich, leer ist. Dann haben wir, wir hatten eine Kopfzeile, wir zeigen den Sammlungstitel, wie wir gesehen haben, und dann zeigen wir unsere Sammlung Beschreibung. Wieder dieser Typ, Sammlungsbeschreibung, die es in einem WYSIWYG-Editor gemacht wird, fügt seinen eigenen HTML hinzu, so dass wir uns nicht darum kümmern mussten, das zu verpacken oder mit diesem hier zu vermasseln. Wenn wir wollten, könnten wir einen Filter zu einem verteilten HTML hinzufügen , aber wir werden das nicht tun. Dann haben wir genau hier gehören Sammlungen Sortierung. Da wir diese netten Klassen benutzt haben, können wir sehen, dass auf der rechten Seite unsere Sammlung Sortierung ist. Also werfen wir einen Blick, und sicher genug hier haben wir dieses Modul, sortieren nach und diesem Kerl und wir sind schlau genug, um in das Snippet zu stecken und einzuschließen. So ist es, wie es runter ist. Sieh dir das an. Sortierung der Sammlung. Öffne den Kerl auf. Hier haben wir diese Logik hier drin, um unsere Sammlung zu sortieren. Es wird automatisch fallen gelassen. Wenn wir also wollten, ist dies in einigen Geschäften eine gängige Themen-Modifikation. Ich bin gekommen, wo jemand gut sagt, ich möchte, dass die Leute in der Lage sein, nach Bestsellern und alphabetisch und Preis zu sortieren , aber ich möchte nicht, dass sie nach Datum sortiert werden. Ich will nicht, dass die Leute sich Sorgen machen, dass manche Dinge alt oder veraltet sind. Wenn wir also wollen, solange wir hier drin sind, gehen Sie einfach weiter und wir könnten das einfach töten und sehen, was passiert. Also, jetzt ist es nicht mehr hier drin. Cool. Also, ich gehe direkt entlang, wir haben diesen Kommentar. Wuops! Ich bin immer noch in der Sammlung Sortierung. Gehen wir zurück zur Sammlung. Flüssigkeit. Da gehen wir. Eine andere Sache, der Shopify-Editor, der direkt in das Thema integriert ist, so großartig. Auch hier können Sie textmate verwenden, wenn Sie möchten, Ihre eigenen verwenden und synchronisieren. Aber nein, wir werden das für fortgeschrittene Entwickler wie Gavin Ballard überlassen, die in einem anderen Skillshare Kurs darüber sprechen werden. Okay. Was haben wir? Wo war ich? Also, wir haben diese Logik behandelt, wenn es eine Beschreibung gegen keine Beschreibung gibt. Wir machen eine Include für die Sammlung Sortierung. Und hier sehen wir, warum wir nicht eingeschlossen haben. Weil wir es aufgrund dieser Logik wiederholen müssen. Ich möchte diesen Code nicht zweimal drin haben, besonders wenn ich Änderungen daran vornehme, wie wir es gesehen haben. Deshalb machen wir das Snippet und legen es zweimal rein. Und oft sind Snippets nett, nur wenn Sie viel an einem Thema arbeiten. Es hält den Code sauberer. Es ist einfacher zu sehen. Einfacher durchzulesen auf einen Blick. In Ordnung. Und dann beenden wir unseren Endif. Also, hier haben wir einen Kommentar. Verwenden Sie Klassenrasteruniform, um Spalten mit gleichmäßiger Größe an jedem Bruchpunkt richtig zu löschen. Wir wissen also, dass wir hier etwas für unsere reaktionsfähigen Breakpoints hinzugefügt haben. Also, wir haben eine Gitteruniform. Ich weiß nicht unbedingt, dass dies einen Kommentar brauchte. Ich schätze, nicht jeder ist super Ende reaktionsschnell. Okay. Wir haben einen Kommentar. Und wieder, der Grund, warum diese Kommentare nicht nur in HTML-Kommentar-Tags eingeschlossen sind, sie sind in flüssige Tags eingewickelt, liegt daran, dass diese nicht gerendert werden und nicht an den Endbenutzer gelangen. Sie werden sie nicht sehen, wenn sie sich schnüffeln. Also kannst du, was du willst, reinbringen. Es wird auch nur die Seitengröße etwas kleiner machen. Also haben wir vorher über Schleifen gesprochen. Wir haben gelernt, dass wir keine Angst vor Schleifen haben. Und hier haben wir eine Schleife. Also, für Produkt und Sammlung von Produkten - so jedes Produkt, das in dieser Sammlung von Produkten ist, werden wir Produkt Grid Artikel. Dies ist ein perfekter Ort, um natürlich ein Snippet zu setzen. Produkt Grid Artikel bezieht sich auf ein Produkt. Diese eine Einheit. Sie haben hier eine nette Namenskonvention, weshalb Sie Ihren Snippets nette Namen geben möchten , die Sie wissen, was sie auf einen Blick sind. Stellen Sie sich vor, wenn alle diese Snippets nur wie A1, A2 und Widget beschriftet wurden. Es wird nicht hilfreich sein. Halten Sie sich also definitiv an eine gute Namenskonvention, die beschreibt, was vor sich geht. Und zur gleichen Zeit wird der Endbenutzer das nicht sehen , wenn er Ihren Code durchstößt. Also zögern Sie nicht, lange, ausdrucksstarke, beschreibende Namen zu verwenden. Also, okay für Produkt einschließen und dann haben wir ein anderes. Also, wir könnten hier sagen, es ist für Produkt in collection.products. Sonst, was bedeutet, wenn sonst nichts drin ist, wird es greifen - also, wenn collection.handle gleich allen ist und aktuelle Tags keine sind, fügen Sie Standardprodukte hinzu, um beim Onboarding nur für die Sammlung/alle zu helfen. Okay, sehr clever. Es macht sogar etwas Verrücktes. Es lädt verschiedene CSS. Sehen Sie sich dieses globale Asset-URL-Stylesheet-Tag an. Wahrscheinlich hätte dies nicht in Ihrem eigenen Thema in einem Standard-Thema. Aber das ist clever. Einbinden einer leeren Sammlung. Okay. Also wissen wir, dass wir es getan haben. Es passiert nur in/all. Es passiert nur, wenn es leer ist. Also, wir werden die erste Anforderung erfüllen. Also, es ist eine Sammlung Griffe. Wir haben... Lasst uns allen den Griff treffen. Dann ist es, was es tut, alles ist eine Standardsammlung, die in Shopify existiert , die alle Ihre Produkte gleichzeitig so anzeigt. Und wenn es leer wäre - so, wir haben nur die Hälfte der Logik getroffen, weil wir getan haben wenn und aktuelle Tags gleich sind, dass es etwas anderes tun würde. Und dann, wenn Sammlung existiert, aber leer ist, zeigen Sie die Meldung an. Wir haben Absatz Sammlung allgemein keine Übereinstimmungen. Wir haben das früher gesehen, als wir die For-Loop-Demo gemacht haben. Wir haben vielleicht eine Sammlung, die nichts enthält. Also, wir setzen diese andere Logik und es fällt in diesem Kerl. Auch dies ist aus der Sprachübersetzung. Aber du könntest das umschreiben, wenn du es wolltest. Sie konnten dies in einem Theme, das Sie an den Theme-Store senden , nicht tun. Aber auf eigene Faust könntest du es tun. Also sagen wir einfach: „Ups, nichts da, Boss, endif, endfor.“ Dies schließt also unsere Logik ab und schließt unsere Schleife. Jetzt kommen wir zu diesem interessanten Kerl. Wir haben Paginierung. Also, wenn es mehrere Seiten gibt, wenn paginate.page größer als eins ist, wenn wir also mehr als eine Seite haben, wird es diese Logik auslösen, die unsere Paginierung ist. Also, wir machen eine horizontale Regel, damit wir es sehen konnten, div Klasse Paginierung. Hier ist unser Paginat. Schau dir all diese Filter an. Dieses Ding ist fabelhaft mit Filtern. In Ordnung. Paginieren, Standardpaginierung als Handle. Interessant. Ich frage mich, ob wir das im Spickzettel finden könnten. Dort ist es, Standard-Paginierung als Filter, verwendet in Verbindung mit dem paginate Flüssigkeits-Tag. Nun, das ist nicht besonders hilfreich. Mal sehen. Alles klar, lass es uns finden. Also, hier ist jetzt ein Problem. Es gibt eine Grenze von 50 Produkten, wenn Sie Paginierung machen. Im Allgemeinen, so, sie teilen sich gleichmäßig ich 48. Nun, gehen wir weiter und finden unsere Paginate. Da ist es, paginate Objekt paginate Standard. Also, hier geht's. Sie können auch verwenden- paginates Tag, wird mit Attributen des paginate Objekt erstellt. Oder Sie können die Standardpaginierung als schnelle Alternative verwenden. Also, das ist sehr clever. Sie können Ihre eigene Paginierung schreiben, wenn Sie Lust haben, oder weil wir unsere verschiedenen Optionen hier drin haben, können wir die Paginierung machen, die wir wollen, oder wir können die Standard-Paginierung laden. Also überall, wo wir Paginierung verwenden wollen, genau so können wir da reinkommen. Wir können uns das vorstellen, als wäre es ein eigenes unbearbeitbares Snippet. Also, wir schreiben Eingabe paginate Standard Paginierung Ausgabe, und da geht es. Das ist ein Beispiel. Also, lasst es uns versuchen. Wir können das Ding zum Laufen zwingen. Gehen wir hoch und wir werden unsere Sammlung fallen lassen, um drei zu paginieren. Dann lasst uns laden. In Ordnung. Also, hier sollten wir genug haben. Es sollte für uns paginieren. Sieh dir das an. Das tut es. Also, da ist Ihre Standard-Paginierung, eins, zwei, drei. Schauen wir uns die mittlere an. Wir haben diese Pfeile nach links und rechts. Weil wir sehen konnten, dass das hier passiert. Ersetzen Sie linkes Zitat vorheriges durch einen Pfeil nach links. Also haben wir unsere HTML-Entitäten. Schauen wir uns das an. Lass es uns rausziehen und ich zeige dir, was es dort macht. Denn dies ist ein großartiges Beispiel für einen Filter. Filter können das verwenden. Ich meine, in vielerlei Hinsicht ist das einem regulären Ausdruck ähnlich. Sieh dir das an. Also, da. Also, das war das Standardverhalten, das vorher war - wir konnten Filter verwenden, um das Standard-Snippet zu bearbeiten , obwohl wir sonst keinen Zugriff darauf hätten, was clever ist. Eigentlich bevorzuge ich das. Ich denke, das ist ein besseres Beispiel für Paginierung. Aber der andere Weg ist sehr sauber, sehr sauber. Und bei diesem Kerl, ich... wir können es trennen. Ich mag diese Pfeile, aber ich mag es nicht, das Wort als nächstes loszuwerden. Also, lasst uns versuchen... lasst uns das machen. Wenn wir das Wort als nächstes lassen, aber das ersetzen. Speichern. Bumm. Sieh dir das an. Sehr cool. Also, schauen wir nach... schnappen Sie sich einfach die Informationen zu diesem Filter. Also, hier haben Sie ersetzen und ersetzen. Sie können auch zuerst ersetzen, was cool ist. Also, es wird nur das erste tun, das für Schleifen wie eine Sammlung nützlich ist. Das ist die Beschreibung, die wir hier haben. Dann einfach regulär ersetzen, ersetzt alle Vorkommen einer Zeichenfolge durch einen anderen. Normalerweise wäre PHP, was auch immer, reguläre Ausdrücke beinhalten würde, sehr verrückt. Hier ist es sehr unkompliziert. Du schreibst einfach. Es unterscheidet sich nicht von Suchen-Ersetzen in einer Text-App. Ersetzen Sie das Ding, das Sie ersetzen möchten, durch das Sie es ersetzen möchten. Okay. Also, da, so funktioniert Sammlung. Wir wenden diese Logik wieder an. Dann haben wir auch ein bisschen darüber gelernt - wir haben Handles, Paginierung und diesen sauberen Filterersatz gelernt . Also, nur Vorbehalt dort, daran, dass, wenn Sie tun - in einer Sammlung, in der Sie Produkte anzeigen, gibt es ein Maximum von 50, die Sie ausführen können. In der Regel möchten Sie durch etwas Schönes teilen. Also machen wir normalerweise ein Maximum von 48. Okay. Als Nächstes werden wir uns ansehen Sie müssen sich keine Sorgen machen, wenn das kompliziert war. Wir werden auf page.liquid schauen, was die einfachste aller unserer Vorlagen ist. 13. Seite: Ok. Wir haben das Gelernte auf Produkte, Kollektionen behandelt und dann wurde man ein wenig verrückt mit der Paginierung. Aber ich verspreche, wir sind auf der einfachsten Seite. Also, wir haben, hier ist über uns Seite und zum Glück, es ist nicht viel los hier. Also, genau wie zuvor, eine Menge unserer Referenz, unsere Objekte für Seite und sie sind so wenige. Was ist schön an ihnen, all diese auf einen Blick können Sie herausfinden, was sie tun. Seitenautor, Inhalt, das ist wie Produktbeschreibung. Es ist nur der Inhalt auf der Seite. Der Griff, über den wir gesprochen haben, das ist dieser Typ hier oben. Die über uns, und wir kennen die URL. Es ist auch, wie wir es durch den Laden referenzieren können. ID, ähnliches Konzept zu handhaben. Seiten veröffentlicht unter, es ist nur unser Datumsfilter oder unser Zeitstempel und dann können wir den Datumsfilter verwenden, um das in einer bestimmten Weise zu formatieren. Also, dann haben wir natürlich auch unser Spickzettel. Unser wunderbar auf sauberem Spickzettel markiert. Also, der gleiche Deal gibt uns nur schnellen Zugriff darauf. Aber Seiten sind nicht so kompliziert. Also, hier haben wir unsere über uns und an diesem Punkt könnten Sie wahrscheinlich selbst schreiben, aber lassen Sie uns einen Blick auf Vorlagen werfen. Lassen Sie uns in Themen eintauchen, HTML bearbeiten. HTML, wie spricht man HTML aus? Also, in meinem Kopf sage ich eigentlich HITIMAL, aber das kann nicht stimmen, oder wie wär's mit Hot Metal? Ich weiß es nicht. Okay, ich schweife ab, Vorlagen, Seite.liquid. Sie werden feststellen, dass dieser Kerl, page.contact.liquid, wir werden darüber reden, was da vor sich geht. Aber schauen wir uns einfach page.liquid an. Segne uns, das Ding ist 17 Zeilen. Dies ist die einfachste, einfachste, die wir uns angesehen haben, und ich garantiere an diesem Punkt, dass Sie Lage sein sollten, es anzuschauen und zu wissen, was los ist. Es ist nicht hart. Wir haben nur unser Standardlayout, unsere HTML-Sachen hier drin. Dann, Seiten Titel in Überschrift Tags eingewickelt, wunderbar! Kommentar, regelmäßige Seiteninhalte geht hier. Nun, natürlich. Dann, Seiteninhalt, das ist es. Nein, es gibt über uns Seite. Das ist alles, was es dazu gibt. Aber solange wir das offen haben, lasst uns hier versuchen, ein paar andere Sachen anzupacken. Also, wir haben, schauen Sie uns an, dass wir Seite veröffentlicht haben und den Datumsfilter und wir haben Autor. Okay, also, lasst uns mit beiden anlegen. Alles klar, wir haben diesen Kerl hier unten. Ich werde voran einen Absatz mit meinem Seitenautor, page.author, setzen. In Ordnung. Lassen Sie uns dort hineinlegen, geschrieben von page.author und dann gibt es ein Ledger dran. Ich werde ein böser Junge. Lassen Sie uns dies in einige Beton-Tags einwickeln, speichern, aktualisieren. Schau dir das an, geschrieben von Shopify. Weil dies nur ein Standardthema ist, das hier drin ist, das im Store hinzugefügt wurde, also wird es gerade von Shopify gepostet. Andernfalls würde er den Namen des Mitarbeiters angeben, der es getan hat. Also, solange wir dabei sind und wir uns damit verarschen, lasst uns mit diesem Kerl verwirren, seite.published at. Also könnten wir sagen, an und lasst uns eine Flüssigkeit einwickeln, speichern, aktualisieren. Ok. Also, es wird genau angezeigt, wenn es veröffentlicht wurde, aber es ist nicht auf eine hilfreiche, nützliche Art und Weise, es sei denn, Sie sind wirklich in Unix-Terminals. Also, wir müssen den Datumsfilter verwenden, ist das, was sie vorschlagen. Also, lasst uns auf diesen Link klicken. In hier können wir den Zeitstempel in ein anderes Datumsformat formatieren, in wie wir es tun wollen, Ihre Präferenz vielleicht die Präferenz des Landes, aber sie geben uns dieses Beispiel, wir könnten Dienstag, 22. April, 14. Ordnung. Ich mag das T-U-E nicht, das ist abgekürzt. Ich will den vollständigen Wochentagsnamen. Es wird also Groß- und Kleinschreibung beachtet. Wir sollten ein Haupt A tun, tut mir leid. Lassen Sie uns ihr Beispiel kopieren und zurück hierher gehen. In Ordnung. Also, es ist ein Filter, also fügen wir eine Pipe hinzu und dann fügen wir in unsere Filter Datum und dann sind dies die Attribute des Filters. Lass es uns retten. Sieh dir das an, schon viel besser. Aber ich mag all diese Abkürzungen nicht. Also, lasst uns weitermachen und uns ändern. Wenn wir die Kleinbuchstaben wechseln ein, das Datum für Großbuchstaben A abgekürzt ist, sollte es uns den ganzen Tag geben. Da gehen wir, gepostet Montag. Mal sehen, was andere wir hier haben. Also, hier haben wir Samstag, Dienstag, Januar. Ich will den Tag des Monats Null gepolstert. Das ist es, was ich mag. Also, hier machen wir es einfach sauberer. Tag des Monats. Ist das richtig? Tut mir leid, Tag des Monats, ich meinte das Datum des Monats. Tag des Monats, lassen Sie uns das Datum formatieren. Ich schaue mir das hier an. Dieser Filter wird sogar das Ganze vereinfachen. Also, wir können es so machen oder was, wenn wir das einfach tun. Hoppla! Lassen Sie das einfach rausfallen, speichern, neu laden. Da gehen wir. Das ist super sauber, sieht gut aus und wir haben unser erstes Date dort, also funktioniert es. Die Seiten sind sehr einfach. Hier unten haben wir page.contact und wir haben zwei verschiedene Seiten. Ich werde hier anhalten und das ist es, worin wir als Nächstes eintauchen werden. Wir werden herausfinden, was hier vor sich geht 14. Alternative Vorlagen und Snippets: SkillShareDemo, wir haben einen Laden, wir haben unsere Über uns Demo auf dieser Seite, Ihre reguläre Seitenvorlage, und das ist, worüber wir gesprochen haben. Wir haben unsere Vorlagen durchlaufen. Hier haben wir, wir könnten hier drinnen sehen, da ist page.liquid und page.contact.liquid. Ich wollte darüber reden, was da los ist, was dieser Deal ist. Also, wir haben das hier. Schauen wir uns unsere Kontaktseite an. Also haben wir diese Seite, es ist Kontaktieren Sie uns, sprechen Sie mit Kurt. Wenn wir hier in unserer URL nachschlagen, sehen wir, es geht um Schrägstrich Seiten. Okay, also wissen wir, dass es eine Seite ist, aber es hat diese ausgefallene Form, ein anderes Layout als dieses, dem wir auch wissen, dass es eine Seite ist. Also, wie machen sie das? Wenn wir hier reinschauen, haben wir, page.liquid, page.contact.liquid. In Shopify sind Sie nicht nur auf diese Vorlagen beschränkt, Sie können hinzufügen, wir können mehrere Versionen von Vorlagen erstellen. Ich weiß nicht, was das Limit ist, aber ich habe es bestimmt nie erreicht. Also, wir haben page.liquid und dann gibt es page.contact.liquid. Also, wenn Sie es so genannt haben, wird dies Seite ist nur die Standardvorlage, und dann gibt es jetzt eine alternative Seitenvorlage namens Kontakt. Dann genau das gleiche wie zuvor, es gibt HTML hier und Sie können hinzufügen, was Sie wollen. In diesem Beispiel muss für jedes Thema eine Kontakt-Us-Seitenvorlage mit diesem Formular hier vorhanden sein. Auch die Form ist Teil von Shopify, ist Teil der Flüssigkeit. Also, Sie müssen sich keine Sorgen über das Durcheinander mit Formularen machen und es hat Anti-Spam darauf, sehr nett. Also, schauen wir uns an, wie wenden wir das an? Wie funktioniert das? Wenn wir unsere Seiten öffnen und den Kopf nach unten zu Kontaktieren Sie uns, scrollen Sie nach unten, Vorlagenseite und seite.contact. Also, wenn meine Datei mehrere Vorlagen hat, kommt dieser Typ hier mit page.contact und page, cool. Sie können es für so gut wie für fast alles tun, Sie tun es für Produkte, Sie könnten es für Sammlungen tun, es ist äußerst nützlich. Zum Beispiel haben wir, sagen wir, Sie haben einen Kunden oder möchten ein Produkt starten und es auf Kickstarter setzen und Sie haben es im Shopify Store. Aber Sie können Ihre Produkte nicht verkaufen, während der Kickstarter läuft, so dass die Kickstarter-Produkte, können Sie eine alternative Vorlage namens product.kickstarter.liquid erstellen und dann einfach Ihre Add to Cart Taste für eine , der Back us on Kickstarter und Goes to Kickstarter sagt, das wäre ein perfektes Beispiel dafür, wo eine andere Produktvorlage verwendet werden soll. Also, lasst uns ein nehmen, wir haben seite.contact gesetzt und Sie könnten sehen, ob ich auf Seite gewechselt und auf Speichern und aktualisieren, schauen Sie sich das an, Kontaktieren Sie uns, Sprechen Sie mit Kurt. Hier ist es, dass andere Seitenvorlage, die wir komplett mit Autor und Datum gemacht haben. Wir setzen diesen Kerl zurück auf page.contact und drücken Speichern, aktualisieren, jetzt ist es wieder da. Also, schauen wir uns page.contact.liquid an. Also, wenn wir nach unten gehen, lassen Sie uns Formular Kontakt sehen, es ist so einfach, ein Formular hinzuzufügen, sehr, sehr einfache Sachen und Endform. Das war's, und dieser Typ ist unsere Form. Formulare sind sehr einfach in Shopify, aber das ist seine eigene, separate Sache, die wir sprechen werden. Eigentlich glaube ich nicht, dass wir in diesem hier dazu kommen. Okay, also lass uns tun, ich habe über product.liquid gesprochen, also lasst uns das versuchen. Schauen wir uns an, wie wir eine machen, wie machen wir eine dieser alternativen Vorlagen? Also, ich habe product.liquid hier, klicken Sie auf Hinzufügen einer neuen Vorlage und erstellen Sie eine neue Vorlage für und wir sagen Produkt namens Alternate. Wir werden dieses Beispiel verwenden, nennen wir es Kickstarter. Boom, ich habe jetzt product.kickstarter.liquid hier drin, und ich will nicht zu viel damit rummachen. Aber lasst uns etwas ändern. Suchen wir etwas, das wir ändern können. Sehen wir uns die Beschreibung an. Also, hier unten sagen wir, fügen Sie einfach kommen bald zu Kickstarter, speichern, und lassen Sie uns in Produkte eintauchen. Produkte, wir haben unsere coolen Kicks und schauen, was hier drin aufgetaucht ist. Jetzt haben wir Produktvorlage und product.kickstarter, speichern, sehen Sie es, und jetzt gibt es eine Zeile, die wir hinzugefügt haben, bald zu Kickstarter gegen wenn ich gehe, gehen wir zurück zu, schauen Sie sich eine andere, es tut Ich habe diese Linie nicht. Das heißt, es wird sehr einfach, diese Vorlagen hinzuzufügen, das dauerte ein paar Sekunden, und es ist nützlich für Kunden, die sagen: „Nun, ich möchte, dass einige Produkte wie dieses Layout aussehen und andere Produkte dieses Layout haben, und ich wollen in der Lage sein, manuell wählen.“ Okay, also machen Sie einfach eine alternative Vorlage für sie und dann ist es genauso einfach, wie es hier drin zu wählen. Also, es ist sehr nett, sehr einfach für alle Beteiligten. Ich mag es sehr. Es ist ein tolles Feature. Wir benutzen es oft. Ich möchte über Schnipsel sprechen. Wir haben Schnipsel gesehen. Wir haben sie ein bisschen vermasselt, aber wir haben selbst keine gemacht. Wir haben es nicht wirklich eingegraben. Also haben wir unseren Snippets-Ordner und darin sind genau diese Codeausschnitte. Es gibt zwei Gründe, warum Sie ein Snippet verwenden möchten. Die erste ist, so dass wir einen trockenen Ansatz nehmen könnten. Trockenes Wesen wiederhole dich nicht. Wir tun es nicht, wenn ein Stück Code mehrmals erscheint, wir könnten es in ein Snippet einfügen, es überall dort einfügen, wo wir es brauchen, in mehrere Vorlagen, und dann können wir einfach, wenn wir es aktualisieren müssen, können wir aktualisieren Sie es im Snippet und es aktualisiert überall auf der Website automatisch, was es sehr praktisch macht. Die andere Sache, für die wir es vielleicht verwenden möchten, ist nur, den Code sauber zu halten, und das ist wirklich für uns, als Menschen, die versuchen, es zu sortieren und Dinge auf einen Blick zu sehen. Also, im Moment möchte ich das als Beispiel tun. Also, oft, sagen wir, ein Client hat oder Sie haben ein älteres Thema und aus irgendeinem Grund, warum Sie es behalten möchten, möchten Sie auf ein neues Design aktualisieren, aber Sie möchten eine neue Funktion wie offene Diagramm-Tags hinzufügen. Offene Diagramm-Tags beschreiben Dinge, beschreiben den Inhalt einer Seite zu Suchmaschinen, zu sozialen Netzwerken, und dann erhalten Sie das schöne, reichhaltige Snippet. Tut mir leid, ja, Rich Snippet, aber reiche Daten, wenn die Leute es teilen. Also, hier habe ich von Shopify, von Github, ich habe all diesen Code, und ich werde ihn kopieren und all dieser Code uns erstellen lässt, behandelt logisch unsere offenen Graph-Tags. Also, wenn ich zurück zu meiner Homepage gehe, werde ich es unter Helfern dort einfügen. Sieh dir das an, es ist riesig. Es nimmt eine Menge Platz ein, sieht nicht gut aus, eine Art Schmerz, wenn ich an dem Thema arbeiten muss, wenn ich daran arbeite. Sieht nicht sauber aus wie vorher, also anstatt das zu tun, werden wir ein Snippet erstellen und diesen Kerl aufstellen, fordert es uns auf, ein neues Snippet zu erstellen. Also, schauen wir uns an, was Shopify es genannt hatte, Social Dash Meta Dash Tags. Wir wollen also sicherstellen, dass wir einen beschreibenden Namen verwenden , damit wir auf einen Blick sehen können, und wenn jemand anderes an diesem Thema arbeiten muss, könnte er es auf einen Blick sehen, was wir tun. Also, wir werden Social Dash Meta Dash Tags machen. Wir fügen diese Flüssigkeit nicht hinzu, denn wenn wir Snippet erstellen, macht Shopify es für uns. Alles klar, jetzt habe ich es, aber ich habe nur eine leere Datei, also werde ich meinen großen Block von unordentlichem Code dort einfügen und speichern. Okay, also habe ich diesen Code, ich kann dies jetzt in jeder Vorlage mit dem Befehl Include referenzieren. Also, gehen wir zurück zu theme.liquid und in diesem Helfer-Abschnitt, werden wir es hinzufügen. Also, sagen wir, es ist sehr einfach, wir machen geschweifte Klammer, Prozent enthalten den Befehl machen Sinn, und einfaches Anführungszeichen, soziale Meta-Tags und dann schließen wir es, einfach, speichern. Also, hier aktualisieren wir unsere Seite und für uns ändert es nichts, also müssen wir uns die Quelle ansehen. Scrollen Sie nach unten, wo haben wir, Helfer und dann ist hier, wir haben eins, zwei, drei, und hier ist, wo es beginnt. Leider hat es einen Kommentar hinzugefügt, so dass wir das auf einen Blick sehen können. Aber da ist es intelligent, wählen Sie, ob es dann unsere offenen Graph-Tags für uns erstellt hat. Also, gehen wir zurück, und alles, was es mit dieser einen Zeile ist, die Single Include und wenn wir zu unseren sozialen Meta-Tags zurückgehen, könnten wir diese erste Zeile hier sehen, ist diese Zeile hier, also hat sie sauber gehalten, es ist leicht gemacht, aber Lasst uns etwas anderes versuchen. Also, ich habe theme.liquid, habe mein Include, was passiert, wenn ich es falsch buchstabiere? Also, oder ich füge irrtümlich Flüssigkeit hinzu. Okay, wir werden es retten und mal sehen, was passiert. Wir erhalten einen schönen kleinen Fehlercode, er ist menschlich lesbar, so dass wir diese leicht, nette Funktion in Shopify debuggen können. Sie kümmern sich um uns. Also, wir haben flüssige Fehler, konnte nicht finden Asset, und es ist, weil es Punkt Flüssigkeit für uns hinzufügt. Also, das ist einfach genug, um zu beheben. Macht das Leben einfach. 15. Checkout: Gehen wir durch unsere Warenkorb-Seite. Es ist eine wichtige Seite und es ist erschreckend einfach zu arbeiten. Eigentlich ist die Art und Weise, wie Shopify es für uns eingerichtet hat, sehr einfach. Also werden wir herausfinden, wie einfach das ist. Um dies zu tun, werden wir uns unsere cart.liquid Vorlage ansehen und genau wie beim Gehen durch andere Vorlagen, werden wir anwenden, was wir hier gelernt haben, und gehen durch den Warenkorb. Also, wenn wir das tun, sollten wir unsere Referenz offen haben, Warenkorb-Objekte. Es gibt wirklich sehr wenige Objekte, die der Warenkorb hier verwendet, und dann, solange wir dabei sind, können wir uns auch die cart.liquid Vorlage ansehen , die uns einige Hinweise darauf gibt, wie die Dinge funktionieren sollen. Also in cart.liquid, zuerst, wir haben diese wenn Logik, weil was, wenn nichts im Warenkorb ist? Eine große Änderung an dem Thema kann sein, zu tun - so hier, wir haben, wenn cart.item Anzahl größer als Null ist, wenn es Artikel im Warenkorb, aber wenn es nicht, wir könnten es ändern, um zu sagen: „Hier sind einige vorgestellte Artikel. könnte eine clevere Art sein, es zu ändern. Also hier haben wir einen Artikel im Warenkorb und wir würden es hoffen. Wir hoffen, dass die Leute bei uns kaufen. der Regel wird es in den meisten Themen nur eine Tabelle sein. Das ist die Art und Weise, wie sie es angehen. Wir haben unsere Überschrift, nur den allgemeinen Titel des Einkaufswagens, dieser Kerl, das ist nur wieder hier für Internationalisierung. Der Wagen ist nur eine Form. Es ist ein Formular und es postet und das ist es, aber das macht Ihr Leben wirklich einfach mit diesem zu verwenden, besonders wenn Sie nur HTML/CSS-Fähigkeiten haben, müssen Sie sich keine Sorgen machen, mit Javascript zu machen, um dieses Formular zum Laufen zu bringen. Hier konnten wir sehen, dass wir unseren Tisch bereits geöffnet haben. Es ist ein sehr üblicher Weg, es zu tun. Die Etiketten für den Wagen, wieder, wir haben diese Internationalisierungs-Labels, und wir gehen runter, und das erste, was wir finden, ist unser guter alter Freund, die For-Schleife. Artikel im Warenkorb werden nicht bezeichnet, es handelt sich um Produkte, sie werden nicht als Produkte bezeichnet, sie werden als Artikel bezeichnet. Also für Artikel in cart.items, wird es durchlaufen. Daher ist jedes Element im Warenkorb in diesem Fall eine Zeile in dieser Tabelle, während wir es durchlaufen. Hier, wir haben etwas Nettes getan. Wir haben das Bild hier drin. Das Bild in den Warenkorb zu legen ist eine große Steigerung Konvertierungen, weil es der Person hilft zu verstehen : „Ja, das ist der Artikel, den ich kaufe, ich werde zu bekommen, was abgebildet ist.“ Also hier fügen wir die URL hinzu, damit sie zurückklicken können, was keine schlechte Idee ist, wenn jemand etwas überprüfen möchte. Und du bist hier, dann schnappen wir uns die Bildquelle und wir werfen sogar das alte Tag auf, mit dem Titel. Wenn wir also den Mauszeiger darüber bewegen, sollte es das alte Tag anzeigen? Lassen Sie uns das Element untersuchen. Da ist es, alt gute ol' Schuhe, so dass es den Produkttitel dort zu melden. Hey, gehen wir zurück, schauen wir das weiter durch. Also, dann, gleichen Deal für die- wir wollen den Produkttitel anzeigen. Es ist also item.product.title und hier oben machen wir die URLs, wir verlinken zurück, es sei denn, es ist eine Variante. Also, wenn es eine Variante ist, was machen wir hier? Es sei denn, Titel enthält Standard und dann haben wir, ah, also haben wir ein kleines Tag mit dem Variantentitel, sehr clever. Also, wenn der Schuh kam in mehreren Optionen oder so sagen wir, verschiedene Größen und ich wähle die Größe, würde es hier erscheinen. Sehr clever. So wissen die Leute : „Ich bekomme das Richtige.“ Wenn ich nur den Schuh ohne die Größe oder die Farbe sah, könnte das mich verwirren, mir Sorgen machen, Bekehrungen töten. Oh hier, wir haben ein Thema Einstellung. Also, wenn ich in meinen Einstellungen Wagen oder Anbieter aktiviert habe. Es wird zeigen, wer der Hersteller, Artikel. -Anbieter. Also scrollen wir hier nach unten. Okay, hier geht es um Elementeigenschaften. Artikeleigenschaften ist eine interessante Themen-Modifikation und Sie möchten vielleicht haben, sagen wir, Sie verkaufen monogrammierte Hemden. Sie wissen, dass es wie die Anpassung der Personalisierung auf dem Produkt ist. Sie können die Positionseigenschaften verwenden, um einzelne Variablen Informationen über das Produkt zu speichern . Ich meine wieder, das ist eine Themen-Modifikation. Es ist nicht Standard, je nach Geschäft können Sie es benötigen oder nicht. Die meisten werden es nicht, aber es gibt definitiv diejenigen da draußen, die tun und dann können Sie mehrere Zeilenelemente schreiben. Also hier können wir p. für, p in Elementeigenschaften sehen . P.Zuerst überprüfen und hochgeladene Datei zugeordnet wurde. Also würde er sogar Dateien damit hochladen. Also sagen wir, wurden etwas drucken. Hier, das könnten wir tun. Also lassen Sie uns vorwärts gehen, und hier könnten wir sehen, dass sie den Kommentar hinzugefügt haben. Es ist optional und sie haben den Link zur Dokumentation, wie es geht, wie sammle ich zusätzliche Informationen. Dies ist in diesem Fall, wir tun es in den Warenkorb und dann werden eine E-Mail oder eine Bestätigung, die Bestellung E-Mail und Sie müssen das auch ändern, damit es funktioniert. Okay, vorwärts haben wir diesen Kerl, Wagen ändern Zeile forloop.index. Wir könnten denken, dass dieser Entfernen-Button eine komplizierte Sache ist , aber wenn wir es betrachten, ist es wirklich nicht. Sie benutzen nur, wissen Sie, wir posten nur auf einem Formular. Wir haben einen Link hier, also Warenkorb ändern, wir haben diese Viertelzeichenzeile und forloop.index. Wenn Sie sich also an unser früheres Abenteuer mit Schleifen erinnern, gibt forloop.index nur aus , welche Iteration in der Schleife wir sind. Also hier haben wir, das ist Zeile eins. Also gibt forloop.index nur eins aus und wenn ich zwei Elemente hinzufüge, würde es zwei werden, und dann mit dieser Abfragezeichenfolge wird die Menge auf Null gesetzt, die sie funktional entfernt. Wenn Sie also einen Artikel entfernen, legen Sie einfach die Menge gleich Null als Kernstärke fest. Okay, dann zeigen wir den Preis wieder mit Filtern an. Wir wollen, dass Shopify die Währung für uns macht. Also verwenden wir den Geldfilter, der ihn schön formatiert und die Währung hinzufügt. nach unten gehen, möchten wir vielleicht die Menge ändern. Also hier, sehr einfach, es ist eine Eingabe, und dann haben wir genau hier. Also update item.id. item.id ist eine eindeutige Nummer anstelle des Handles für das Produkt, um es zu identifizieren , und dann wird der Wert genau das, was die Artikelmenge ist. Warenkorb-Etikett gesamt, dasselbe Angebot. Also wird es greifen, wir haben item.line_price, und dann wieder, einen Filter, um es so einzurichten, dass es als Währung zu bilden. Nun, der Grund, warum wir... statt haben, haben wir hier oben den Preis und den Zeilenpreis hier unten. Dies ist der Preis der mal Menge, so dass der Zeilenpreis Preis mal Menge für diesen Artikel ist, und wieder, Sie müssen nichts tun, Shopify berechnet dies für Sie. Lass uns runter gehen, also haben wir wenn. Hier ist ein weiteres Thema Einstellung, über das wir noch nicht gesprochen haben, aber wir werden. Wir haben eine Designeinstellung für Warenkorbnotizen aktiviert. Wenn die Warenkorbnotizen aktiviert sind, wird ein Formularfeld zum Hinzufügen einer Notiz erstellt, und eine Notiz zu Notizen, Sie können nur eine in Ihrem Warenkorb haben. Sie können nicht mehrere tun, aber dann gibt es Arbeitsumgehungen, es gibt andere Möglichkeiten, zusätzliche Informationen zu schreiben. Aber für nur einen normalen Warenkorb Notiz, diese speziellen Anweisungen, könnten Sie es dort hineinlegen, und das ist wahrscheinlich, jedes Thema unterstützt dies. Das ist oft das, was Menschen als Arbeit verwenden anstatt sich mit wie Auskleidungseigenschaften anzulegen. Man könnte einfach sagen, in Ordnung, machen Sie eine Notiz für das, was sie brauchen. Es ist der einfache Ausweg. Alles klar und dann, regelmäßige Sachen. Sobald wir wieder hier oben sind, haben wir die Schleife beendet. Sobald wir aus der Schleife sind, werden die Dinge noch einfacher. Wirklich, wir wollten nur die Zwischensumme und unsere Checkout-Schaltfläche anzeigen , aber wie funktioniert diese Checkout-Schaltfläche? Okay, was haben wir? Eingabe-Checkout, cart.generalcheckout. Damit wir sehen konnten, dass es unglaublich einfach ist. Es ist nur eine Eingabe und schauen wir uns die Dokumentation für dieses Ding an. Überlegungen zur Vorlage, mit der Kasse fortfahren. Alles, was es tut, weil der Warenkorb ein Formular ist, es postet nur das Formular an Shopify und Sie brauchen nur die Eingabe, das war's. Ich meine, es ist wirklich so einfach, wie es aussieht. Es ist alles, was da ist. Also gut, wir müssen überprüfen, welche Art von Änderungen könnten wir das tun? Wir können Positionseigenschaften tun, die es Dokumentationshandbücher gibt, um dies zu tun. Wir können auch ein paar andere Dinge tun. Wir haben unsere Zwischensumme, 110 Dollar. Nehmen wir an, wir bieten kostenlosen Versand. Wir könnten hier Logik hinzufügen, die angezeigt wird, wir könnten dann sonst verwenden. Also könnten wir sagen, die Zwischensumme ist über 100 Dollar, es zeigt eine kostenlose Versandnachricht. Also lasst uns das versuchen. Los geht's. Mal sehen, meinen Preis zu finden. Also haben wir cart.totalprice. Lassen Sie uns den Kerl kopieren. Wir werden es einschließen, wir werden es einfach direkt in diesem Absatz-Tag setzen. Also, mal sehen. Prozent, wenn cart.total Preis größer als 100 ist, das ist es, Sie qualifizieren, werde ich sagen, plus kostenloser Versand. Ok. Schließen wir unsere Aussage. Prozent. Endif. Cool. In Ordnung. Speichern Sie es. Mal sehen, was passiert. Trotzdem haben wir das, plus kostenloser Versand. Ok. Ich habe diese lustige Sache hier gemacht, wo ich diese Nummer habe. Warum habe ich es so gemacht? Ok. Also, lass es uns auf 100 niederschlagen und sehen, was passiert. Eigentlich hier. Wir machen es anders, gleich 100. Speichern. Funktioniert immer noch. Ok. Aber unser Preis ist 110. Fügen Sie also doppelte Nullen hinzu, speichern Sie, aktualisieren Sie, werden immer noch angezeigt. Lassen Sie uns noch einen hinzufügen. Jetzt erscheint es nicht. Also, was ist hier los? Warum tut es uns das an? Der Grund ist, der Preis, wenn Sie diesen Filter nicht verwenden, drückt Shopify ihn wie in Cent aus, in Cent, in Cent. Also, du musst multiplizieren, wenn du Mathe so machst, musst du mal 100 multiplizieren. Das ist alles, was da los ist. Aber das ist eine sehr schöne, sehr gute einfache Gebührenänderung, die jeder tun kann. Das steigert auch die Konversionsrate. Wir tun das oft für Kunden, wenn sie kostenlosen Versand anbieten. In Ordnung. Dann bringt uns das zu „Kasse“. Also, wenn ich im Warenkorb bin und ich auf „Kasse“ klicke, wissen wir, dass es ein Formular, URL. Shopify kümmert sich darum und schickt uns hierher. Hier haben wir, das ist die neueste Version der Shopify Kasse. Es ist schön, es ist reaktionsschnell, aber wenn Sie es nicht konfigurieren, ist es sehr einfach. Es kann nicht unbedingt zu Ihrem Geschäft passen. Wenn wir haben, haben wir diese Schaltfläche „Versandmethode fortsetzen“. Wir haben hier oben kein Logo. Wenn wir zurückgehen, habe ich diese großen mutigen, schönen Helvetica-Schriften und alles ist grau. Vielleicht nicht das Beste für die Konvertierung, aber es ist sicherlich hübsch. Also, wie machen wir das? Was können wir mit diesem Checkout machen? Wenn wir Kopf in das Thema anpassen, die regulären Theme-Einstellungen, Shopify fügt automatisch dieses Panel, diese „Kasse“ -Panel. Wenn wir auf den Kerl klicken, haben wir hier ein paar Optionen. Also, der erste ist benutzerdefinierter Hintergrund. Also, wir haben hier oben keinen Hintergrund. Also, schauen wir uns den Demo-Store an, ein echtes Geschäft, Tattly, sehr erfolgreicher Shopify Store, verkauft temporäre Tattoos. Wenn ich auf „Auschecken“ klicke, dann schau dir das an. Da ist unser Banner. Sie haben sogar ihre Logo-Streichhölzer. Nun, hier, Ihr Logo-Bild, und selbst wenn Sie bereits ein Bild in Ihren Shop hochgeladen haben, wählen Sie einfach „Storefront“ und fertig. Ihr Bild wird hinzugefügt. So einfach ist es. können Sie je nach Shop Wenn sich Ihr Logo dann links, in der Mitte oder rechts befindet, diese Übereinstimmung treffen. Also, es überträgt. Also, Ihr Masthead, das ist, was die Leute zuerst sehen, dass sie genug Muster lesen, sie werden das zuerst sehen und sie werden wissen, dass dies die richtige Seite ist. Das sieht genauso aus, das fühlt sich für mich richtig an. Wir können verrückter werden, wir bekommen den „Hauptinhaltsbereich“, wir könnten einen benutzerdefinierten Hintergrund setzen. Ich habe es eigentlich noch nie getan. Ich will es sauber halten, schön aussehen. Die „Bestellübersicht“, konnten wir es einstellen. Also, hier, gehen wir zurück. Linke Seite ist der Hauptinhaltsbereich, rechte Seite ist dieser Inhaltszusammenfassungsbereich. Darauf beziehen sie sich, wenn sie über diese Hintergründe sprechen. Sie können auch die Hintergrundfarbe festlegen. Also, Hintergrundfarbe, los geht's. Lassen Sie uns es ein wenig rosa machen, geben Sie allen Farbton dort, speichern Sie Änderungen und sehen, was das tut. Also haben wir das wirklich abheben lassen. Vielleicht merkst du etwas Cooles, das hier passiert. Ich bin mir nicht sicher, wie sie diese Magie machen, aber die Schriftart, die Farbe dafür sieht so aus, als ob sie automatisch für uns eingestellt ist , abhängig davon, welche Hintergrundfarbe wir wählen. Wir können sehen, wenn wir ein Logo gewählt hätten, wäre es da reingefallen. Also, gehen wir zurück. Lass uns den Kerl loswerden, unser Logo. Wir setzen es auf keine zurück, und wir haben ein paar andere Optionen hier. Also, „Typografie“, können wir keine Schriftart auswählen, aber wir haben Zugriff auf einige Systemschriftarten, die wir auswählen könnten. Wir haben auch eine schöne Auswahl, eine ziemlich große Auswahl an Google Fonts, die laden. Viele Themen verwenden Google Fonts. Also, das sind sehr häufige Entscheidungen. Wir können auch Themen auswählen, die zu unserer passen, auch wenn es nicht genau, Sie können eine, die nah ist. Die meisten Leute sind keine Designer, sie werden es nicht fangen. Also, mal sehen. Für „Überschriften“ mag ich „Oswald“. Geben Sie ihm ein schönes Label, und dann für unseren „Körper“, werden wir tun, was ist eine gute Übereinstimmung dafür? Weißt du was? Hier, es ist einer meiner Favoriten. In Ordnung. Wir haben „Akzente“, „Buttons“ und „Pfeile“. Ich will definitiv, mein „In den Warenkorb“ -Button ist für die Konvertierung in irgendeiner Weise. Ich möchte, dass meine „In den Einkaufswagen“ -Button, meine „Kasse“ -Button und meine „Zur Kasse gehen “ -Button dieselbe Farbe haben. In unserem Thema haben wir sie bereits grau. Also, gehen wir weiter und setzen Sie das, setzen Sie diese Akzente auf grau, setzen Sie meinen Knopf auf grau, und Pfeile, wir lassen rot. Rot scheint eine gute Farbe für Pfeile zu sein. Okay, lasst uns diesen Kerl auffrischen. Sieh dir das an. Auch wenn wir nicht die volle Kontrolle über diese Vorlage haben, können wir es nur ändern, wenn Sie Shopify Plus nicht verwenden, wenn Sie Shopify Plus nicht verwenden,wo klar, dieser Checkout sieht anders und gebrandmarkt als diese andere Shopify Kasse. Es sieht anders aus als das. Hier sind wir in einem späteren Schritt im Prozess. Also, hier können Sie sehen, dass dies anders aussieht als dieser Kerl, der definitiv anders aussieht als das Original, die Standardvorlage. Stellen Sie also sicher, dass Sie immer, egal ob es sich um Ihre Shop-Kunden handelt, diese Theme-Einstellungen immer so einrichten, dass sie dem Branding Ihres Shopify-Stores so genau wie möglich entsprechen . Das wird kognitive Dissonanz reduzieren und Menschen beim Kauf helfen. 16. Design-Einstellungen: Jetzt, da wir all diese Shopify-Fähigkeiten gelernt haben und wir wissen Liquid und Themen-Struktur in unserer Schnittstelle, möchte ich alles auf eine Weise anwenden, die uns etwas Nützliches gibt, etwas, von dem viele Geschäfte profitieren können. Also, eine sehr häufige Änderung, die wir tun, ist die Infoleiste. Also, wenn wir uns Tattly ansehen, haben sie diese Nachricht an der Spitze, melden Sie sich für einen wöchentlichen Tattly Tuesday Newsletter an. Wenn wir auf everestbands.com schauen, haben sie Schiffe weltweit, kostenloser Versand. Das ist sehr häufig. Es ist ein großartiger Ort, um kostenlosen Versand zu deklarieren, um Verkäufe oder rechtzeitige Sachen anzukündigen. Hier haben wir Bandon Dunes Golf Shop, sie bieten auch kostenlosen Versand. Aber wir wollen es schaffen, damit der Kunde es bearbeiten kann. Also, was wir wollen, ist eine Theme-Einstellung in einem Thema, wo der Client leicht den Text in dieser Infoleiste aktualisieren kann. Okay. Nun, wir werden lernen, wie man das macht. Also, hier ist unsere Skillshare Sache und wir, sehr deprimierend, wir haben keine Infoleiste. Also werden wir lernen, wie man einen hinzufügt. Wenn wir in unser Theme.liquid gehen, wollen wir das direkt in den Körper legen. Wir könnten das hier einfügen, aber wir sind klüger als das. Also, wir werden ein Include machen. Also, zuerst erstellen wir ein Snippet und wir werden ein Snippet namens Infoleiste erstellen. Macht Sinn? Auch hier wollen wir beschreibende Namen. Wir haben unsere infobar.liquid erstellt. Jetzt werde ich ein böser Junge. Ich weiß, ich sollte keine Inline-Stile machen, aber damit wir alles sehen können und da wir ein Snippet verwenden, werden wir es tun. Ich habe bereits meine CSS-Stile hier geschrieben, wir werden es Promo-Banner nennen. Ich möchte diesen Tattly-Stil, ich will den weißen auf schwarzen Text. Schneller Tipp hier, nie den ganzen Weg schwarz oder ganz weiß verwenden. Wenn wir schwarz machen, off white, kein nennenswerter Unterschied, aber das OSS Anti-Aliasing wird besser funktionieren. In Ordnung. Wir müssen in unserem HTML, unseren Inhalt setzen. Also, hier und wir werden es schön formatieren. Zuerst sehen wir es einfach mit kostenlosem Versand, und speichern wir unsere Infoleiste, und wir kehren zurück zu theme.liquid. Lass es uns reinlegen. Fügen Sie 'Infoleiste' ein und wir schließen es. Also jetzt, dieser Inhalt, den wir in unserem Snippet geschrieben haben, wird er direkt da drin fallen und mal sehen, wo er landet. Da gehen wir, wunderschön. Wir haben einen kostenlosen Versand Bar, sehr hübsch. Aber wenn wir wissen, dass sich der Inhalt nie ändern wird, könnten wir jetzt aufhören. Aber wir wollen, dass der Client in der Lage ist, leicht zu bearbeiten, und wir sollten nicht erwarten, dass sie durch Theme-Vorlagen laufen, die HTML bearbeiten. Manche Leute tun das, manche können das nicht tun. Aber selbst wenn Sie es für sich selbst tun, machen Sie Ihr Leben einfach, machen Sie es zu einem Thema Einstellung und das ist, was wir jetzt lernen. Also, hier, lassen Sie mich Einstellungen ergreifen. Also, Einstellungen, können Sie hier Ihre eigenen Variablen erstellen, Ihre eigenen. Also, Einstellungen sind ein Objekt und dann der Punkt was auch immer. In diesem Fall, .promo Text. Du kannst das auf eigene Faust nennen, was immer du willst. Aber wieder, machen Sie es etwas beschreibendes. Also, hier, mit diesem Thema fortzufahren, werden wir es Promo-Text nennen. Zum ersten Mal werden wir in der Einstellungsdatei in den Einstellungen entdecken. Also, lassen Sie uns öffnen Thema anpassen. Also, da sind diese Typen, diese Einstellungen. Das ist Teil des Themas, du kontrollierst das. In der Bearbeitung des Themas können Sie dort bearbeiten, was Sie wollen. Mal sehen, wie das funktioniert. Wir gehen zu Config, das ist dieser Config-Ordner. Also, innerhalb des Config Ordner, Einstellungsdaten sind die aktuellen Einstellungen und Einstellungen Schema definiert, wie diese funktionieren. Ein Wort der Vorsicht hier, und ich kann oder kann dies selbst nicht durcheinander bringen, ist kommagetrennte Werte sind sehr wichtig. Wenn Sie ein Komma verpassen, wird dieses Ding brechen. Also, wenn Sie sich damit anlegen, hört auf, richtig zu arbeiten. Das erste, was zu suchen ist gestörte Kommas. Du könntest sehen, wie sie funktionieren. Also, wir haben offene Klammer, Name Header. Passen Sie Thema, Header und dann, Sie wissen, was zu erwarten. Das erste wird das Logo hier sein. Schauen wir runter. Geben Sie Header, Content-Logo ein. Sieh dir das an. Also, wir wollen unsere eigenen hier hinzufügen, in Ordnung? Ich habe es schon geschrieben, lass es uns schnappen. Hier, wir haben, da sind wir. Also, zuerst wollen wir in der Lage sein, unseren Text zu setzen. Also lasst uns den Kerl schnappen und ihn hier reinkleben. In Ordnung. Wir machen es zum Ersten, also ist es leicht für uns zu finden. Durchgraben der Dateien von Einstellungen ist ein Schmerz. also sicher, dass Sie die Dinge logisch sortieren und sie gut beschriften. Aber wieder, so werden wir sagen, Einstellungen, Typ ist Text, ID ist Promo-Text. Also, dies ist der Typ des Feldes es ist, ID ist die Variable, sehr einfach, und Label ist Werbebanner Text. Das ist unglaublich einfach. Mit drei Zeilen haben wir gerade eine Theme-Einstellung hinzugefügt, das ist großartig. Also, hier werden wir es auffrischen. Dieser Kerl funktioniert immer noch. Also, lassen Sie uns unsere Theme-Einstellungen aktualisieren, sehen, was wir hier los haben. Kopfzeile, Werbebanner Text. In Ordnung. Also, wir werden sagen, dass wir einen Unterschied sehen könnten, kostenloser Versand über $100, speichern Sie unsere Änderungen, und gehen Sie zurück zur Infoleiste. Also, wir haben settings.promotext. Lass uns den Kerl retten. Es ist erfrischend. Schau dir das an, kostenloser Versand über $100. Versuchen wir es hier. Sagen wir mal, sie ändern es. Es wird über 120. Speichern Sie es. Aktualisieren. Sieh dir das an. Also, es wird aktualisiert. Es dauerte ein paar Minuten, um diese wirklich einfach zu bedienende Theme-Einstellung hinzufügen zu können, die jeder dann verwenden kann, um ihr Thema zu aktualisieren. Aber sagen wir, Sie wollen vielleicht nicht immer diese Infoleiste. Dafür haben wir auch eine Lösung. In Ordnung. Wir müssen eine neue Theme-Einstellung hinzufügen und das wird ein Kontrollkästchen genannt werden. Also, lassen Sie uns den Kopf in Einstellungen Schema. Über unserem Promo-Text möchte ich einen neuen hinzufügen, lass uns diesen Kerl hinzufügen. Also, wir haben Typ Checkbox, sagt uns, dass die Eingabe, ist der Eingabetyp, das wird sein, wie Sie das Kontrollkästchen erraten, anstelle von Text. Unsere ID ist Promo-Banner, also ist das unser Variablenname, in dem wir diese speichern werden, und unser Label ist aktivieren Promo-Banner und das ist, was es in den Themeneinstellungen sagt. Also, sparen. Wenn wir das auffrischen. Also hier haben wir unsere Promo-Banner-Einstellungen, aber es tut noch nichts. Wir müssen hier ein bisschen Logik hinzufügen. Also, lassen Sie mich weitermachen und kopieren, mein Leben leicht machen, und wir werden darüber reden. Alles klar, Infobar.liquid. Also, wir haben diesen Kerl hier drin, unser Snippet, und wir werden eine If-Anweisung hinzufügen. Wenn settings.promobanner. Es ist also klüger zu wissen, dass dies eine boolesche Bedingung ist. Wenn das Kontrollkästchen deaktiviert ist, würde dies nicht angezeigt. Dann müssen wir es schließen, Endif. Einfach. Speichern. Also, jetzt haben wir es hier überprüft. Also, wenn wir uns erfrischen, sollte es immer noch hier sein, und es ist. Nehmen wir an, wir bieten nicht plötzlich kostenlosen Versand an, lassen Sie es uns deaktivieren, speichern, aktualisieren und es ist weg. Perfekt und wunderbar. Es ist sehr einfach, Designeinstellungen hinzuzufügen, so dass entweder Sie das Thema schnell ändern können, Sie können einen Mitarbeiter haben, Sie könnten dies für einen Client tun. Es ist phänomenal einfach, ich mag es. Schnell durch hier scrollen, können Sie Dateien in Ihren Theme-Einstellungen für verschiedene Dinge anhängen. Also, so ändern wir das Shop-Logo, natürlich, fave Icons. Wir können auch die gleichen Variablen und diese Theme-Einstellungen verwenden. Wir können diese auch in unserer CSS-Datei verwenden. Unsere CSS-Datei ist auch eine.liquid Datei. Dies wird also sehr praktisch, nicht nur für die Kundenarbeit, sondern auch für die schnelle Modifizierung Ihres eigenen Stores. 17. Geld verdienen mit Shopify: Also, wenn du wie ich bist, willst du Geld verdienen und es ist nichts falsch daran, und du kannst die Fähigkeiten, die wir hier gelernt haben, nutzen, um das zu tun. Dies ist nur ein Schritt auf dem Weg, dies zu tun. Unser erster Schritt war , das Shopify-Partnerprogramm zu drehen und die Shopify-Partnertür zu bekommen. Nun, sobald Sie Shopify-Erfahrung nachgewiesen haben, fünf Stores in diesem Partnerkonto, können Sie sich für das Shopify-Expertenprogramm bewerben, und ich möchte Ihnen das zeigen. Hier ist also der Eintrag meines Experten auf Shopify. Du weißt, dass sie dich untersuchen, um zu beweisen, wenn du fünf Geschäfte hast, beweist das, dass du Shopify kennst. Du weißt, was du tust. Es kann Sie in das Experten-Programm bringen, das wirklich ein phänomenales Lead-Generierungs-Tool ist. So können Sie Ihre Expertise einbringen. Es gibt verschiedene Kategorien: Design, Entwicklung, Marketing, Fotografie, Einrichtung. Fügen Sie eine Beschreibung Links zu Ihrer Website ein, und dann können Sie Ihre zufriedenen Kunden Zeugnisse hinzufügen lassen. Also, jemand sucht nach Hilfe, sie könnten eine Kategorie wählen, klicken Sie auf Experte kontaktieren. Es öffnet sich dieses Formular und sofort erhalten Sie eine E-Mail darüber. Wenn Sie also einmal vom Shopify-Partner zum Experten wechseln, sind Sie jetzt Teil nicht nur einer nützlichen Plattform und einer nützlichen Community, sondern haben dieses unglaubliche Business-Tool zur Generierung von Leads. Aber es gibt natürlich auch andere Dinge, die du tun kannst. Sie können ein Thema zu machen, ein benutzerdefiniertes Thema an den Laden eingereicht und diese tun sehr gut. Shopify übernimmt die gesamte Lieferung für Sie und Sie bekommen nur das Geld PayPaled zu Ihnen, was großartig ist oder wenn Sie das Gefühl haben, dass Ihre Code-Fähigkeiten bis zu Schnupftabak sind, können Sie Apps einreichen und Menschen brauchen und verwenden Sie Apps die ganze Zeit. Der Vorteil für Apps ist der wiederkehrende Umsatz. Die meisten Apps sind Abonnements. Sie zahlen eine monatliche Gebühr und dann erhalten Sie, dass passives Einkommen, dass wiederkehrende Einnahmen, die großartig ist. Lass uns sehen. Schauen wir uns ein paar dieser Dinge an. Wir haben Setup-Experten. Setup-Experten sind sehr unkompliziert. Alles, was Sie tun müssen, ist Menschen bei der Einrichtung ihres Geschäfts zu helfen. Dies ist wahrscheinlich die einfachste Einstiegshürde und es ist schön, denn mit einem Setup-Experten werden Sie oft neue Stores aufdrehen und dann erhalten Sie einen Umsatzanteil von 20 Prozent durch das Partnerprogramm von was auch immer der Kunde an Shopify zahlt. Du bekommst dann 20 Prozent PayPaled zu dir, was sehr nett ist. Gleichzeitig würden Sie sich wahrscheinlich auch als Designer bewerben wollen. Designer, die Leute, die Sie aussehen würden um eine Vorlage zu optimieren, wie wir es mit der Infoleiste getan haben, die sehr praktisch war und dann ein wenig härter über das hinaus, was wir besprochen haben, wäre Entwicklung, wo Sie hinzufügen können -Funktionen und private Apps an Stores. Natürlich gibt es Platz für Vermarkter und sogar Fotografen, was großartig ist. Du musst also keines auswählen. Sie können sich auf mehrere anwenden. Also, sobald Sie in dieses Ökosystem gekommen sind, wachsen Sie weiter, machen Sie weiter. Es ist nur eine phänomenale Gemeinschaft. Als Erfolgsgeschichte machen wir ein Vollzeitleben bequem und mit sehr wenig Stress von Shopify, weil sie uns viel Unterstützung, viele Ressourcenbieten viele Ressourcen sogar diese Videoserie erstellen. Sie erkannten und erreichten mich und wir sprachen und richteten es ein und sie sind sehr hilfsbereit. Sie sind wirklich in der Regel nützliche Menschen und ich bin sehr dankbar für sie. Also, bedenken Sie es.