Shopify-Themeanpassung – Erstellen Sie eine Shopify-Storefront ohne Programmierung

1. Einführung: Wenn Sie eine Shopify-Website erstellen möchten ohne ein Team von Designern und Entwicklern einzustellen, ist dieser Kurs genau das Richtige für Sie Falls Sie mein Gesicht noch nicht gesehen haben, mein Name ist Christopher Dodd Ich bin ein Top-Lehrer hier auf skillshare.com und ein Experte Ich arbeite seit 2019 mit der Shopify-Plattform . In diesem Kurs führe ich Sie durch den Prozess der Umwandlung Ihrer E-Commerce-Marke in einen schönen und auf Mobilgeräte reagierenden Shopify-Shop, ohne dass Sie fortgeschrittene Webdesign-Tools wie Figma erlernen fortgeschrittene Webdesign-Tools wie Figma oder den inneren Code Ihres Shopify-Themas berühren Stattdessen konzentrieren wir uns auf den nativen Shopify-Ansatz für ein Shopify-No-Code-Store-Design Der Online-Shop-Editor. In diesem Kurs nehmen wir die Kernkomponenten einer E-Commerce-Marke und entwerfen einen Shopper für jedes Geschäft von Grund auf neu, indem vorhandenen Abschnitte in unserem Theme verwenden Am Ende des Kurses verfügen Sie über ein funktionierendes Schaufenster, mit dem Sie Ihre eigene Marke auf den Markt bringen können. Lass uns anfangen 2. Vorwort: Wie ich in der Einführung in diesem Kurs erwähnt habe, werde ich Sie mithilfe des Online-Shop-Editors durch den Prozess der Umwandlung Ihrer E-Commerce-Marke in einen schönen und auf Mobilgeräte reagierenden Shopify-Shop Umwandlung Ihrer E-Commerce-Marke in einen schönen und auf Mobilgeräte reagierenden Shopify-Shop führen, und zwar am Beispiel dieser gefälschten Macha-Marke Wie Sie hier sehen können, habe ich bereits mein gesamtes Vermögen einsatzbereit Wenn Sie genau dieselben Inhalte verfolgen möchten, hinterlasse ich hier in diesem Kurs einen Link, über den Sie genau dieselben Dateien herunterladen können. Wenn Sie jedoch Ihrer eigenen Marke folgen möchten, empfehle ich Ihnen, Ihre Markenressourcen und Website-Bilder an einem Ort zu organisieren , auf den Sie leicht zugreifen können, wie ich es mit diesem Ordner für meine gefälschte Marke Sans getan habe Sie haben diese Phase der Entwicklung Ihrer Marke noch nicht erreicht . Sie können ein Tool wie ov At verwenden, ein KI-Tool, das Ihnen helfen kann, eine Marke von Grund auf neu zu entwickeln Wie Sie hier sehen können, wurden alle Assets in meinem Ordner aus der Lovart-App generiert Und wenn du genau erfahren möchtest, wie ich das gemacht habe, kannst du dir mein kostenloses Video auf meinem YouTube-Kanal ansehen Aber unabhängig davon, ob Sie meine oder Ihre eigenen Markenressourcen verwenden , stellen Sie bitte sicher, dass Sie diesen Ordner im Voraus vorbereiten, da wir ihn als Grundlage für unser Schaufensterdesign auf Shopper FI verwenden werden Grundlage für unser Schaufensterdesign auf Shopper Zweitens möchte ich hier erwähnen, dass es innerhalb der Shopify-Plattform selbst offensichtlich verschiedene Ressourcen gibt innerhalb der Shopify-Plattform selbst offensichtlich verschiedene Ressourcen gibt , die zur Erstellung der Storefront verwendet werden Abgesehen von der Anpassung des Shopify-Themes selbst müssen Sie Ihrem Shop einige Produkte hinzufügen und sie gegebenenfalls in Sammlungen organisieren Kurs werden wir auf einige der anderen Ressourcen in Shopify eingehen Aber wenn du noch ganz neu bei Shopify bist, solltest du dich zuerst mit der Plattform vertraut machen mit der Plattform vertraut Falls du es noch nicht getan hast, würde ich empfehlen, dass du meinen Shopify-Setup-Kurs hier auf Skillshare machst, bevor du an diesem teilnimmst, da er dir einen Überblick über die Funktionsweise der Plattform bevor wir uns speziell mit der Theme-Anpassung befassen Ally, wie ich auch in der Einführung erwähnt habe, werden wir in diesem Kurs ohne jegliche Codierung eine Storefront auf Shopify erstellen diesem Um Code ganz zu vermeiden, werden wir ein vorgefertigtes Shopify-Theme aus dem Shopify Theme Store auswählen aus dem Diese Themes können Sie sich als Sammlungen vorgefertigter Module vorstellen , die wir als Bausteine im Online-Shop-Editor verwenden können Bausteine im Online-Shop-Editor Es ist wichtig zu beachten, dass diese Bausteine davon abhängen, mit welchem Thema wir beginnen, und dass es diese Themen in verschiedenen Preisklassen gibt diese Bausteine davon abhängen, mit welchem Thema wir beginnen, und dass es diese Themen in verschiedenen Preisklassen Es gibt zwar eine Reihe kostenloser Themes, die wir verwenden können, wir werden mehr Qualitätsoptionen im Online-Shop-Editor anbieten, indem wir ein sogenanntes Premium-Theme verwenden . Mit anderen Worten, ein Thema , für das wir bezahlen müssen. Davon abgesehen sind die Prinzipien, die ich in diesem Kurs unterrichte , universell auf alle Themen anwendbar Und wie wir in diesem Kurs sehen werden, können wir tatsächlich damit beginnen , mit den Abschnitten herumzuspielen und unsere Storefront im Testmodus aufzubauen , sodass wir so viele Designs testen können, wie wir möchten, bevor wir mit dem Thema live gehen Um es zusammenzufassen, bevor wir beginnen : Erstens sollten Sie Ihren Ordner mit Marken-Assets startklar machen und sich zweitens mit der Shopify-Plattform vertraut machen Wenn Sie es noch nicht getan haben, machen Sie weiter und wir treffen uns im nächsten Video 3. Moodboarding: In diesem Video werden wir über Moodboarding sprechen, was, wie es hier heißt, der Prozess der Erstellung einer visuellen Sammlung ist, der Prozess der Erstellung einer visuellen Sammlung ist um die Richtung, den ästhetischen oder emotionalen Ton eines kreativen Projekts zu definieren ästhetischen oder emotionalen Ton eines kreativen Im Grunde genommen, was wir in diesem Schritt zu erreichen versuchen, was wir etwas später tun können wenn Sie es verzögern möchten und Sie möchten Ihre Produkte jetzt in Ihrem Geschäft anbieten, das können wir während unserer gesamten Reise als Marke auf Shopify tun, ist, dass unserer gesamten Reise als Marke auf Shopify tun, ist wir uns ständig von anderen Websites inspirieren lassen und lernen können , was sie tun, was vielleicht effektiv sein, was für unsere Marke funktionieren könnte, und das in unsere eigene Website integrieren lassen uns also nicht einmal von anderen Websites inspirieren Wir lassen uns also nicht einmal von anderen Websites inspirieren, und dann ist alles erledigt. Wir werden uns ständig unsere Konkurrenten ansehen und sehen müssen , was sie tun. Wir können uns tatsächlich auch von Websites in verschiedenen Nischen inspirieren lassen , aber auf jeden Fall von Geschäften die ein ähnliches Produkt wie wir verkaufen. Wir möchten auf jeden Fall sehen, was sie tun und möglicherweise in unserer eigenen Marke verwenden So können wir andere Marken in unserer Nische finden. Idealerweise wüssten Sie, wer Ihre Konkurrenten in Ihrer Nische sind. Wenn Sie dabei jedoch Hilfe benötigen, können Sie Google oder ein LLM wie Gemini verwenden , um zu fragen was Ihre wichtigsten Konkurrenten sind oder welche die besten oder beliebtesten Marken in Ihrem Bereich sind die besten oder beliebtesten Marken in Ihrem Die Beispielmarke für diesen Skillshare-Kurs ist also eine Mata-Marke, also werde ich online nach Matcha-Pulver suchen Und jetzt können wir eine ganze Reihe von suchmaschinenoptimierten Websites sehen, die auftauchen Vielleicht möchten wir dies auf unseren speziellen Markt eingrenzen . Als Australier möchte ich Australien vielleicht hier reinstellen. Oder wenn Sie Amerikaner sind, ersetzen Sie das durch USA. Sie können das so weit eingrenzen, wie Sie möchten. Ich werde Google Gemini verwenden, also werde ich hier sagen, wer die besten Matcha-Marken sind, die hauptsächlich online über einen Online-Shop verkauft hauptsächlich online über einen Online-Shop Es gibt mir eine dieser Möglichkeiten: A choice Bs. Ja, es hat hier eine ganze Reihe von Namen auf beiden Seiten. Also, viele davon sind sehr japanisch, aber wenn wir uns die Marke O ansehen, ist sie ein bisschen mehr auf Menschen aus dem Westen ausgerichtet Schauen wir uns also hier Jade Leaf Macho an. Dies ist einer der größten Online-Verkäufer in den USA. Nehmen wir das und schauen wir uns ihre Website an. Es ist also ein ähnliches Produkt wie das, was wir verkaufen, mit dem Machopulver selbst und dem Kit, um es zuzubereiten Da ich weiß, dass hier ein kleines Pop-up auftaucht, werde ich es schließen. Dann können wir uns die Website ansehen und sehen, was uns daran gefällt, was uns daran nicht gefällt und vor allem, was wir auf unsere Marke anwenden können. Wenn es also zum Beispiel eine große Produktpalette hat eine große Produktpalette und wir keine große Produktpalette haben, dann können wir das nicht unbedingt auf unsere Marke anwenden. Wenn sie 1.300 Bewertungen zu einem einzelnen Produkt haben, können wir nicht unbedingt 1.300 Aber wenn sie, sagen wir, hier zum Beispiel Testimonials haben, die sie besonders hervorheben, oder Rezepte hier, könnten wir unsere eigenen Rezepte für die Verwendung des Pulvers erstellen Wir können uns definitiv von dieser Website inspirieren lassen , okay? Außerdem, es im Abonnement zu verkaufen und wie das Abonnement Bridget aufgebaut ist. Vielleicht gefällt uns das Also was ich tun werde , ist, mir gefallen auch die Icons hier, und manche mögen Alleinstellungsmerkmale hier. Okay, lass uns ein paar andere Beispiele finden. Lass uns Macha voll finden, okay. Auch dies ist ein ziemlich subjektiver Prozess. Ich möchte, dass Sie sich ansehen, was Ihnen an dieser Website gefällt. Wenn mir dieser Header gefällt, kann ich diesen Header einfach scannen. Ich habe mein Screenshot-Set, sodass es direkt in einen Ordner verschoben wird, den ich als Inspiration für die Website der Marke eingerichtet habe , damit Sie es sehen können Ich könnte also einfach alles in einen Ordner legen, wenn ich möchte, und mir dann diesen Ordner ansehen oder ich kann ihn auf einer Art Leinwand anordnen Ich habe Figma hier drüben, also könnte ich eine ganze Reihe von, sagen wir, Überschriften machen, oder Ich muss das groß machen, oder? Damit ich alle meine Header hier platzieren könnte, die ich mag. Sagen wir zum Beispiel einfach, ich mag diesen Header auch. Offensichtlich sind sie völlig unterschiedlich, aber sagen wir einfach, ich mochte beide. Dann könnte ich einfach alle meine Header, die mir gefallen, hier Auch hier können Sie jedes Tool verwenden, das Sie bevorzugen. Ich bin nur ein Figma-Benutzer, daher ist es für mich sinnvoll, Figma zu verwenden, aber Sie können das zusammenstellen Gibt es Software, die Sie bevorzugen? Und da wir die Website in diesem Skillshare-Kurs nicht individuell programmieren werden , möchte ich, dass Sie sich mehr auf die Liste der Abschnitte als auf die genauen Designanforderungen konzentrieren Abschnitte als auf die genauen Designanforderungen Denn wenn wir kein Theme wählen, dieses Header-Design bereits enthalten ist, handelt es sich um ein ziemlich individuelles Design Die meisten Themes werden uns also nicht die Funktionalität bieten , einen Header zu haben, der genau so aussieht. Stattdessen möchte ich, dass du dich darauf konzentrierst, was ist der Abschnitt „above the fold“ auf der Homepage? Das ist im E-Commerce ziemlich Standard. Das nennt man eine Helden-Sektion. Und wenn wir uns eine dieser Websites ansehen, wenn ich hierher zurückkehre, schauen wir uns Peak Life an. Alle von ihnen werden hier oben eine Art Heldenbereich haben . Also werden wir natürlich eine Heldenabteilung wollen. Wir werden das Rad hier nicht neu erfinden, aber vielleicht wollen wir uns ansehen , welche Art von Heldenabschnitten wir mögen Sie sind sich hier alle ziemlich ähnlich, aber dieser ist ziemlich sauber Also mache ich einfach einen Screenshot davon. Und dann das Gleiche hier drüben. Ich mache Hero, sagen wir Homepage-Abschnitte, richtig? Also können wir Hero hier zeigen. Vielleicht schauen wir uns das gerne an. Wie bereits erwähnt, werden wir höchstwahrscheinlich einen Heldenbereich auf unserer Homepage haben . Das ist ziemlich normal. Und dann können wir uns Dinge ansehen wie, Okay, was sind die gesundheitlichen Vorteile? Das könnte etwas sein, das wir auf unserer Website hervorheben möchten, damit wir es auch in unser Moodboard aufnehmen können. Und das wird uns helfen, herauszufinden was wir tatsächlich auf unsere Website stellen sollen, nach welchen Abschnitten wir tatsächlich suchen müssen, damit wir sie integrieren können. Und wir möchten diese vielleicht gruppieren. Nehmen wir an, wir wollen auf jeden Fall die Vorteile hervorheben, oder? Und ich bin mir sicher, dass die anderen Marken hier wahrscheinlich etwas Ähnliches haben. Also los geht's, gesundheitlichen Vorteile unserer Pflanzen. Also lass mich das einfach kopieren und einfügen. Eigentlich kopiere und füge ich aus der gesamten Breite ein. So können wir verschiedene Abschnitte zusammenfügen, die dasselbe Ergebnis erzielen, indem wir auf verschiedenen Websites die Vorteile hervorheben. Hat dieser also Vorteile? Dieser hat eigentlich nicht das, was er hat , ist dieser nette kleine Rezeptabschnitt. Lassen Sie mich sehen, ob ich das alles hier in einen Website-Frame einpassen kann , indem ich die Ansicht verkleinere Sieht so aus, als ob ich nicht gehen kann. Also schnapp ich mir das alles. Nehmen wir an, wir werden Vorzeige-Rezepte oder Mach-Rezepte haben, bringen Sie diesen Abschnitt mit rein. Und wie Sie sehen können, teile ich das Abschnitt auf. Eine Website ist im Wesentlichen eine Liste von Abschnitten. Wir können das also in diese Ankündigungsleiste, diese Kopfzeile, diesen Heldenbereich, diesen Benefiz-Bereich, diesen Abschnitt mit ausgewählten Sammlungen unterteilen in diese Ankündigungsleiste, diese Kopfzeile, diesen Heldenbereich, diesen Benefiz-Bereich, diesen Abschnitt . Wir können im Grunde jede Standard-E-Commerce-Website in Abschnitte unterteilen, und so funktioniert das in Shopify Wenn wir also etwas später mit dem Aufbau unseres Shops beginnen, werden Sie sehen, wie Sie die Liste der im Theme verfügbaren Abschnitte durchgehen , und dann werden wir sie einfach in unsere Vorlagen aufnehmen, okay? Also vielleicht nenne ich das Held, und ich kann all das für Abschnitte, die ich vielleicht auf der Homepage platzieren möchte, einen Rahmen setzen. Ordnung, also kann ich sie alle in Homepage-Abschnitte gruppieren . Offensichtlich hat mein Text die falsche Farbe, also repariere ich es einfach. Richtig? Ich kann diese Inspiration also natürlich für verschiedene Vorlagen auf meiner Shopify-Website verwenden , aber ich gebe Ihnen hier nur einige Ideen. Also werde ich hier einen weiteren Rahmen für die Produktseite erstellen hier einen weiteren Rahmen für die Produktseite In Shopify ist es also eine Produktvorlage, die wir für alle Produkte verwenden werden , es sei denn, wir verwenden alternative Vorlagen, aber meistens verwenden wir nur eine einzige Vorlage Für unsere Produkte. Gehen wir also zur Hauptproduktseite. Dies sind die beiden Hauptseiten für jede E-Commerce-Shopify-Website Ich bin hier immer noch herausgezoomt, also lass mich wieder reinzoomen Das hängt davon ab, wie sehr ich einen Screenshot haben möchte. Aber hier können wir uns die Hauptproduktvorlage dieser anderen Marken ansehen . Also lass mich herkommen, ich zoome raus. Und Sie können sehen, dass dieser nicht so gut verkleinert wird, aber Sie können hier sehen, dass viele davon im Abonnement angeboten werden. Lassen Sie mich hier zur Produktseite gehen. Okay. Sonnengöttin Macha Okay, ja, dieser ist auch im Abonnement. So können wir uns ansehen, wie die Galerien eingerichtet sind, ob uns die Vorschaubilder auf der linken Seite gefallen Oder wir mögen sie unten. Auch hier werden wir uns durch unser Thema einschränken lassen. können wir es nicht unbedingt genau so anpassen Ohne benutzerdefinierte Codierung können wir es nicht unbedingt genau so anpassen, wie wir es wollen, aber wir können es dem Thema ziemlich nahe bringen. Und du kannst hier sehen, dass wir hier ein paar kleine Abzeichen haben. Mal sehen, ob das hier drüben ist, nein. Ich glaube, ich habe hier ein paar Abzeichen gesehen, nein. Das ist also etwas Einzigartiges, was Sun Goddess macht, ist, dass sie einige Abzeichen über den Produktbildern und hier drüben anbringt den Produktbildern und hier drüben Schauen wir uns auch an, wie wir diese Bilder erweitern können. Sie können das so lange oder so wenig tun, wie Sie möchten. Je mehr Sie recherchieren, desto mehr erfahren Sie, was andere Websites tun, und vielleicht bekommen Sie einige gute Ideen. Aber wie ich bereits erwähnt habe, muss es natürlich mit dem übereinstimmen, was Sie mit Ihrer Marke erreichen können. Wenn Sie also nicht das haben, was dieser hier hatte, 1.300 Bewertungen hatte, wenn Sie noch nicht viele Bewertungen haben, dann können Sie natürlich nicht unbedingt eine Menge Bewertungen präsentieren natürlich nicht unbedingt eine Menge Bewertungen Aber wir können einige Testimonials machen. Wenn wir nur eine kleine Anzahl von Bewertungen haben, können wir jede einzelne Bewertung hervorheben z. B. durch die Verwendung von Symbolen hier Das ist nicht unbedingt ein Abschnitt, sondern nur ein paar Designinspirationen, um zu sagen, dass ich diese Icons mag. Nochmals, das ist dein kleines Sammelalbum, deine kleine Leinwand, auf der du all deine Designinspirationen auf einer einzigen Seite zusammenfassen all deine Designinspirationen auf einer einzigen Dafür gibt es keinen festgelegten Prozess. Das ist ein flexibler Prozess, um Designinspiration zu erhalten, okay? Ich empfehle Ihnen daher, sich auf jeden Fall Ihre Konkurrenten oder Geschäfte anzusehen Ihre Konkurrenten oder Geschäfte ähnliche Produkte wie Sie verkaufen. Lassen Sie sich von ihnen inspirieren. die wichtigsten Elemente, die Ihnen gefallen, in Ihr Moodboard ein, sodass Sie, wenn wir mit dem Aufbau unserer Storefront im Online-Shop-Editor beginnen, bereits eine Vorstellung davon haben, was Sie in den Shop integrieren möchten Und zur Erinnerung: Sie können dies in jeder Phase des Prozesses tun dies in jeder Phase des Prozesses Sie müssen Ihr Moodboarding nicht jetzt machen, es beenden und dann mit dem nächsten Schritt fortfahren Das kann etwas sein und sollte etwas sein , das Sie während der gesamten Lebensdauer Ihrer Marke tun dabei immer auf verschiedene Inspirationen achten. Sie können Ihre Website jederzeit aktualisieren, und dabei immer auf verschiedene Inspirationen achten. Sie können Ihre Website jederzeit aktualisieren, wenn Sie neue Inspiration von anderen Websites oder einfach nur Ideen erhalten neue Inspiration von anderen Websites , die Ihnen spontan einfallen Aber das ist definitiv ein Denkprozess, den Sie haben sollten, bevor Sie direkt in den Online-Shop-Editor eintauchen , was wir später im Kurs tun werden 4. Produkteingabe: In Ordnung, jetzt sind wir in einem Shopify-Geschäft von Bresh angekommen. Das ist der Shop, den ich für Sans Marcher erstellt habe. Und wenn wir zum Vertriebskanal des Onlineshops gehen, werden Sie feststellen, dass sich nur das Standarddesign zum Zeitpunkt der Aufnahme von Horizon in unserer Themenbibliothek befindet Und wenn wir zu unseren Produkten gehen, werden Sie feststellen, dass unsere Produktliste völlig leer ist. In diesem Video wird es ziemlich kurz sein, weil wir nur Produkte zu unserem Shop hinzufügen werden. kann dies für Ihre Marke natürlich Je nachdem, wie viele Produkte Sie haben, ein langer Prozess sein. Wenn du der gleichen Produktliste folgen möchtest wie bei meiner Beispielmarke CNS, dann musst du hier nur auf Import klicken und wir können eine CSV-Datei im Shopify-Format hinzufügen. Also gehe ich hier zu meinem Markenidentitätsordner , der alle meine Marken-Assets enthält Und Sie können hier sehen, dass es einen namens productlst dot Sie können das also einfach anklicken und hierher ziehen. Ich werde alle neuen Produkte auf allen Vertriebskanälen veröffentlichen . Unsere Website ist noch nicht live, also ist das nicht wirklich wichtig. Ich werde auf Hochladen und Vorschau klicken. Es wird also nur das Mapping hier, der Titel und die Beschreibung überprüft der Titel und sie sind an der richtigen Stelle. Ich kann Ihnen versichern, dass dies aus Shopify exportiert wurde, also sollten wir in Ordnung sein, es einfach zu importieren, und das wird ein wenig Zeit in Anspruch nehmen Aber nach einer Weile wird es heißen, dass Produkte importiert wurden. Sie werden sehen, dass hier einige Bilder angezeigt werden , was gut ist. Aber wenn wir hier zu unserem Matcha-Pulver übergehen, ja, wir haben auch die Bilder In dieser CSV-Datei sollte es also einen Link zum Bild geben Und wenn wir unserem Shop einige Produkte mit Bildern hinzufügen, wenn wir zum Inhalt übergehen und zu Dateien gehen, sollten wir sehen, dass diese auch bereits in unseren Dateibereich hochgeladen wurden. Wichtiger Hinweis an dieser Stelle: Ich hatte vor Kurzem einen Kunden, der gerade einige Dateien gelöscht , weil sein Shop immer voller wurde. Alles, was auf diese Dateien in unserer Produktliste oder in unserem Theme verweist diese Dateien in unserer Produktliste oder in , hat am Ende leeren Inhalt, wenn wir unsere Dateien löschen. Also ja. Achten Sie beim Löschen von Dateien nur als Randnotiz darauf , dass Sie keine Dateien löschen, die gerade verwendet werden. Wie Sie hier, Referenzen, sehen können, wird es in einem Produkt verwendet. Wenn wir das also löschen würden, würden wir dieses Bild aus unseren Produktbildern hier verlieren . Wenn Sie jetzt Ihre eigene Marke verwenden, importieren Sie natürlich nicht einfach meine Produktliste und verwenden sie. Natürlich müssen Sie den Prozess des Hinzufügens Ihrer eigenen Produkte durchlaufen, sei es durch einen automatisierten Prozess, durch einen Import, wie ich es gerade getan habe, oder manuell, indem Sie hier auf Produkt hinzufügen klicken. Wenn Sie Ihre Produkte hinzufügen, müssen Sie sich natürlich hauptsächlich auf den Titel konzentrieren sich natürlich hauptsächlich auf den Titel also werde ich hier Produkt nur als Beispiel sagen, Produkttitel, das wird hier unten Ihren Suchmaschineneintrag bestimmen. Sie können hier also sehen, dass der Produkttitel verwendet und er als Produkttitel mit dem Bindestrich angegeben wurde, aber Sie können ihn auch hier bearbeiten. In Shopify ist das Handle nicht nur eine SEO-Sache, sondern es ist auch die Art und Weise, wie wir Produkte in unserer Programmierung ins Visier nehmen Daher ist es wichtig, dies im Voraus richtig zu machen. Wenn Sie also Ihre Produkte einrichten, möchten Sie sicherstellen, dass das Produkt diesen letzten Teil der URL hier verarbeitet, so ist, wie Sie es sich vorstellen, okay? Aber abgesehen vom Titel und einem Bild und einem Preis und natürlich dem Hinzufügen Inventar, damit das gekauft werden kann, ist das alles, was Sie wirklich benötigen, und alles andere kommt noch dazu. Wenn es für Ihr Produkt verschiedene Optionen gibt, müssen Sie diese natürlich hier hinzufügen, wodurch verschiedene Varianten entstehen. Aber wir werden nicht auf den Unterschied zwischen Produkten und Varianten in dieser Klasse eingehen . Wir haben das bereits im Shopify Store-Setup behandelt , sodass ich nicht näher darauf eingehen werde , wie die Shopify-Plattform außerhalb des Online-Shop-Editors tatsächlich funktioniert Wenn Sie mehr darüber erfahren möchten, können Sie zum vorherigen Skillshare-Kurs gehen Aber unabhängig von der Methode, mit der Sie einige Produkte in Ihr Geschäft gebracht haben, werden Sie einige Produkte benötigen, daher empfehle ich Ihnen, dies jetzt zu tun Und eine andere Sache, die ich tun werde, ist, diese zu einer Sammlung zusammenzustellen. Und weil wir eine so kleine Produktpalette haben, werde ich einfach eine sehr einfache Sammlung erstellen und nicht die Homepage, die die Standardsammlung ist. Ich werde diese löschen. Ich könnte sie auch nach meinen Wünschen bearbeiten, aber ich werde das einfach löschen und neu anfangen Und ich nenne das einfach die Shop All-Kollektion. Viele Geschäfte machen das, und ich kann es entweder hier intelligent oder manuell machen , weil ich eine so kleine Produktpalette habe, dass es so oder so keine große Rolle spielen wird. Also werde ich hier alle vier Produkte in meiner Produktpalette hinzufügen , und das wird es zu dieser Shop All-Kollektion hinzufügen. Am Ende dieses Videos sollten Sie also Ihre Produkte oder zumindest einige davon importieren und mindestens eine Kollektion mit einigen dieser Produkte erstellen lassen. Okay. Im nächsten Video gehen wir nun zu den Markeneinstellungen unseres Shopify-Shops über den Markeneinstellungen unseres Shopify-Shops und fügen unser Markenlogo und einige Farben hinzu Also werde ich dich im nächsten Video sehen. 5. Markeneinstellungen: Im letzten Video haben wir unsere Produktliste mithilfe eines Imports schnell erweitert unsere Produktliste mithilfe und sie zu einer einzigen Kollektion zusammengefasst. Wir werden noch ein kurzes Video zum Einrichten einiger Dinge in unserem Shop machen , bevor wir unser Thema auswählen und unsere Storefront mit dem Online-Shop-Editor einrichten, und das geht in unsere Markeneinstellungen Ich glaube, das ist eine ziemlich neue Funktion in Shopify, aber jetzt können wir Dinge wie unser Logo und unsere Markenfarben zu einem Markenbereich unserer Einstellungen in unserem Shopify-Shop hinzufügen unser Logo und unsere Markenfarben zu einem Markenbereich zu einem Markenbereich Einstellungen in unserem Shopify-Shop Wurde zuvor im Online-Shop-Editor bei der Einrichtung Ihres Themes vorgenommen , und das wird immer noch so gemacht Die Idee mit den Markeneinstellungen ist jedoch, dass wir Einstellungen nicht über mehrere Themes hinweg kopieren und einfügen , was bis zu 20 verschiedene Themes in deiner Theme-Bibliothek sein können verschiedene Themes in deiner Theme-Bibliothek Wir haben einen zentralen Ort für Dinge, die sich nicht wirklich ändern, wie unsere Markenfarben und unser Markenlogo Also lass es uns jetzt verwenden, und dann werden wir natürlich etwas später mit unserem Thema verknüpfen. Und wenn wir nach unten scrollen, können Sie sehen, dass es nicht nur um Logos und Farben geht. Wir können hier auch ein Titelbild, einen Slogan, eine kurze Beschreibung und einige soziale Links hinzufügen . Ich ermutige Sie daher, dies so weit wie möglich auszufüllen. In diesem Video werde ich nur das Logo hinzufügen. Wie Sie hier sehen können, haben wir unsere Produktbilder hier, aber wir haben noch nicht unser Logo, also öffne ich meinen Markenidentitätsordner und Sie können sehen, dass wir das Logo haben, also werde ich nur zur Erinnerung ziehen, dass dieses Logo, wenn wir es uns ansehen, sehr gut zugeschnitten ist und einen transparenten Hintergrund hat Wenn Sie Ihr Logo vorbereiten, empfehle ich Ihnen, dasselbe zu tun Und falls Sie daran interessiert sind, wie ich das gemacht habe, habe ich im Grunde nur die Vorschau verwendet, die Standard-App in MAC, um ein Bild wie dieses einfach zuzuschneiden, und dann können Sie ein Tool wie Remove Dot Bg verwenden um den Hintergrund von einem Bild zu entfernen, wenn Sie keine App wie Photoshop haben, okay? Aber ja, Sie möchten Ihr Logo hinzufügen, also ohne jede Menge Platz rund um den eigentlichen Inhalt des Logos und einen transparenten Hintergrund. Also werde ich das hinzufügen. Und das Coole an diesen Markeneinstellungen, wie Sie sehen können, ist, dass sie auch zu diesem kleinen Modell oben hier oben hinzugefügt werden. Wir können auch ein quadratisches Logo hinzufügen . Ich bin mir nicht sicher, ob ich die quadratische Version hier habe. Ich glaube nicht, dass ich das tue, aber das ist auch eine Option. Und dann füge ich jetzt meine Markenfarben hinzu. Schauen wir uns also an, wir können uns entweder die Liste hier ansehen , die in der Textbearbeitung niedergeschrieben ist. Oder wir können uns hier unseren Leitfaden zur Markenidentität ansehen. Also werde ich mir stattdessen meinen Leitfaden zur Markenidentität ansehen. Also werde ich das mit der Vorschau öffnen. Und wie Sie sehen können, habe ich zwei Primärfarben und drei Sekundärfarben, was meiner Meinung nach hier perfekt zusammenpasst. Fügen wir also meine erste Primärfarbe hinzu, die ich hoffentlich kopieren und einfügen kann. Ja, das kann ich, genau hier. Es mag den Hash nicht, also werden wir dafür sorgen, dass wir den Hash wegbekommen. Also, wenn ich so etwas mache , fehlt nur das letzte Zeichen von drei. Okay, da haben wir's. Und dann ist die kontrastierende Farbe genau diese hier. Also ich wünschte, ich könnte tatsächlich auswählen, vielleicht gehe ich zu dem Dokument hier drüben, vielleicht ist es einfacher zu kopieren und einzufügen. Diese sind hier zwar etwas falsch organisiert, also lass mich mal hier drüben nachschauen. Also wollen wir die Cremefarbe in die Sekundärfarbe verschieben. In Ordnung, jetzt können wir diese Liste verwenden. Also, wenn ich wegen der kontrastierenden Farbe hierher zurückkehre, war es sanftes Beige Also kopiere ich das ohne den Hash und dann nehme ich hier die Sekundärfarben, füge Salbeigrün hinzu. Beim nächsten sollte es sich natürlich von selbst verstehen, dass Sie hier Ihre eigenen Markenfarben verwenden werden. Sie machen das mit Ihrer eigenen Marke. Aber wenn Sie nur meiner Beispielmarke folgen, werden Sie den Prozess genauso verfolgen, wie ich es mache. Und jetzt können wir auf Speichern klicken , um diese Farben zu speichern. Und wenn wir nach oben scrollen, können wir in einem kleinen Modell hier oben sehen, wie diese Farben interagieren Auch wenn es kein echtes Website-Mockup ist, sieht die Kombination dieser Farben ziemlich gut aus In Ordnung, das war's also für die Einrichtung der Markeneinstellungen. Wir werden dieses Logo und diese Farben natürlich über den Online-Shop-Editor mit unserem Theme verknüpfen , aber das hängt davon ab , welches Theme wir verwenden werden Die gute Nachricht bei der Einrichtung der Markeneinstellungen hier ist , dass sie in allen Shopify-Shops einheitlich sind, wohingegen der Teil, den wir als Nächstes mit der Auswahl Ihres Themes und der anschließenden Aufnahme dieser Informationen in Ihr Theme machen als Nächstes mit der Auswahl Ihres Themes und anschließenden Aufnahme dieser Informationen in werden, von Thema zu Thema unterschiedlich ist wollen wir nun ohne Eifer Nun, da wir unsere Markeneinstellungen festgelegt und unsere Produkte importiert haben, und unsere Produkte importiert zum Vertriebskanal des Onlineshops übergehen und mit der Arbeit an unserem Thema beginnen 6. Auswählen eines Themas: Ordnung, jetzt haben wir den Teil des Kurses erreicht , in dem es an der Zeit ist , uns für unser Shopify-Thema zu entscheiden Und es gibt eine Reihe von Faktoren , die in diese Entscheidung einfließen Ich würde sagen, der erste Faktor ist der Preis. Wenn Sie also kein Budget haben, müssen Sie sich natürlich ein kostenloses Theme entscheiden, oder Sie müssen diese Funktion verwenden. Wo ist sie hier unten, wo Sie mit Shopify-Magie eine Eingabeaufforderung eingeben und anhand Ihrer Aufforderung ein Theme generieren können eine Eingabeaufforderung eingeben und anhand Ihrer Aufforderung ein Theme generieren Ich würde das nicht unbedingt empfehlen. Sie können das testen und sehen, ob es zu einem guten Ergebnis führt, aber ich habe festgestellt, dass die Ergebnisse nicht erstaunlich sind. Und es ist besser, ein Theme zu verwenden, das tatsächlich von echten Entwicklern und nicht von KI erstellt wurde , zumindest zum Zeitpunkt der Aufnahme. Ihre Optionen haben Sie also offensichtlich bereits in Ihrem Shopify Store installiert Wenn ich also hier auf Theme bearbeiten klicke , werde ich zum Onlineshop-Editor für das Horizon-Theme weitergeleitet Dieses Theme Horizon ist also seit ein oder zwei Jahren als Standardtheme in Shopify-Shops erhältlich Und wie Sie sehen, müssen wir dafür nicht bezahlen. Dies ist ein kostenloses Thema. Ich möchte, dass Sie bei der Bewertung von Themen verschiedene Vorlagen durchgehen und sich die Liste der Abschnitte ansehen . Also eine kleine Einführung in den Online Store Editor. In meinem vorherigen Skillshare-Kurs zur Einrichtung des Shopify Stores haben wir ein wenig darüber berichtet meinem vorherigen Skillshare-Kurs zur Einrichtung des Shopify Stores Aber im Grunde besteht Ihr Shopify-Storefront nur aus einer Reihe von Vorlagen, und wir können hier oben in der Mitte auf diese verschiedenen Vorlagen zugreifen hier oben in Wie Sie sehen können, ist hier die Startseite der aktuellen Vorlage , auf der ich mich befinde Aber wenn ich darauf klicke, kann ich andere Vorlagen auswählen, die ich mir ansehen möchte. Die Hauptseiten, die wir uns ansehen werden, sind die Homepage und die Produktseite. Und wie Sie sehen können, gibt es hier ein Untermenü, weil ich alternative Vorlagen für die Produktvorlage erstellen kann , oder ich kann einfach die Standard-Produktvorlage verwenden. Wir werden einfach die Standard-Produktvorlage verwenden, also werde ich darauf klicken und Sie können sehen, dass ich dadurch zu einer Vorschau dieser Vorlage weitergeleitet werde. Und dann hängt es auch davon ab welches Produkt wir diese Vorlage verwenden. Was ich also tun kann, ist, das Produkt, das ich mir ansehe, anhand dieser Vorlage zu ändern . Nehmen wir an, unser Hauptprodukt, das Premium-Marcher-Pulver, und wir können sehen, wie unsere Vorlage mit einem anderen Eingabeprodukt interagiert Okay? Gehen wir zurück zur Startseite. Und in diesem Vorlagenbereich können Sie sehen, dass es eine Schaltfläche zum Hinzufügen eines Abschnitts gibt. Sie sollten sich also die verschiedenen Optionen ansehen, wenn Sie ein Thema hier in der Liste der Abschnitte bewerten . Bei Horizon gibt es eigentlich eine ziemlich große Liste. Nochmals, wenn Sie kein Budget haben und nur ein kostenloses Theme wollen, dann ist Horizon ziemlich okay. Aber schauen wir uns einige der anderen Optionen im Shopify Theme Store an Wenn ich hier zu beliebten kostenlosen Themen gehe, können Sie sehen, dass es hier einige andere kostenlose Themen gibt Aber lass uns den ganzen Theme Store besuchen. In Ordnung. Nun, wie Sie hier sehen können, haben einige von denen, die an der Spitze stehen, die beliebtesten, einen Preis von 300 bis 400$ Impuls. Dieser hier ist einer der beliebtesten. Ich habe es für verschiedene Projekte verwendet, aber es wird zu einem Premium-Preis erhältlich sein. Davon abgesehen, wenn Sie Ihr eigenes Theme individuell programmieren würden , würde es höchstwahrscheinlich mehr als 400 USD kosten. Ich glaube also, dass Sie mit Premium-Themes einen guten Preis für Buck bekommen , und ich empfehle jedem, der sich in der Budgetklasse befindet, in der er sich keine Website im Wert von 5.000 bis 10.000 USD leisten kann, ein Premium-Thema zu kaufen Budgetklasse befindet, in der er sich keine Website im Wert von 5.000 bis 10.000 USD leisten kann , ein . Sie können eine Menge Entwicklungsarbeit in einem sehr modularen Theme erledigen , mit dem Sie im Online-Shop-Editor hier auf Shopify arbeiten können . Sie können sich also den Demo-Store zu jedem dieser Shopify-Themen und damit herumspielen. Es ist in diesem kleinen Container hier, aber ich kann es erweitern und Sie können hier sehen, es gibt noch viel mehr Animationen und es ist einfach sehr knackig und hochwertig Es gibt eine Menge Bereiche und auch ein sehr nettes Mega-Menü Einige meiner Kunden haben dieses Premium-Thema also schon einmal verwendet. Aber natürlich gibt es es im Shopify Theme Store. Wir schauen uns wieder alle Themes an, es gibt über 1.000 davon. Es ist also ziemlich schwierig, sie alle anzusehen und zu bewerten. Es ist fast unmöglich. Sie sollten also einige dieser Filter hier verwenden. Ich glaube nicht, dass Sie nach dem Preis filtern können. Es kann nur kostenlos oder kostenpflichtig sein. Nehmen wir an, Ihr Budget ist Null Sie werden sich diese 24 verschiedenen Themen ansehen. Sie können sich natürlich ein Theme von außerhalb des Shopify Theme Store holen , aber ich würde es einfach nicht empfehlen Alle diese Themes im Theme Store durchlaufen eine strenge Checkliste, um für die Existenz in diesem Theme Store zugelassen zu werden Existenz in diesem Theme Store zugelassen zu Ich empfehle Ihnen daher auf jeden Fall , den Shopify Theme Store zu besuchen Kann auch nach Branchen filtern. Also was wäre unseres? Ich schätze, es wäre Essen und Trinken, genau hier. So können Sie nach verschiedenen Branchen, kleinen Kataloggrößen und verschiedenen Funktionen filtern . Sie können KI aber auch verwenden, um Ihnen zu helfen. Also zurück zu unserem Freund Google Gemini, ich werde sagen, hilf mir, ein Shopify-Thema für meine Premium-Marke MachaPowder Seance auszuwählen . Ersetzen Sie dies natürlich durch Ihre eigene Marke, wenn Sie dies für Ihre eigene Marke tun Okay, hier können Sie sehen, dass hier einige Themen empfohlen werden. Prestige ist eine gute Idee , von der ich schon einmal gehört habe. Schauen wir uns Prestige an. Wie bei vielen Dingen in dieser Klasse handelt es sich auch hier um einen etwas subjektiven Prozess, der stark von Ihrer eigenen Marke und Ihren eigenen Vorlieben abhängt , aber wir können uns die Prestige-Demo hier ansehen. Es ist ein bisschen modischer. Ich weiß nicht, ob das für unsere Marke Macha unbedingt Sinn macht, aber was wir tun können, ist, bei jedem dieser Themen auf Tri Theme zu klicken Und mit Tri Theme können wir tatsächlich damit beginnen, unsere Storefront mit diesem Thema aufzubauen , ohne dafür bezahlen zu müssen Jetzt, ohne dafür zu bezahlen, werden wir natürlich nicht viele Funktionen bekommen, zum Beispiel können wir es nicht wirklich in unserem Shop veröffentlichen Wie Sie hier sehen können, wird es probeweise in meiner Themenbibliothek installiert meiner Themenbibliothek . Also das ist gerade erledigt. Und normalerweise gibt es hier eine Schaltfläche zum Veröffentlichen, sodass ich dieses Thema in unserer Themenbibliothek, die derzeit ein Vorschaudesign ist, in das Hauptthema verschieben die derzeit ein Vorschaudesign ist, in das Hauptthema und es daher auf der Website veröffentlichen kann. Das können wir mit einem Test-Theme nicht machen. Wir können nur hier klicken, um zu kaufen. Und wenn wir den Code bearbeiten wollen, können wir den Code nicht wirklich bearbeiten Eva. Sieht so aus, als könnten wir eine Vorschau des Themes anzeigen. Das ist nett. Okay. Und Sie können sehen dass es dort bereits in unser Logo geladen ist. Wir können es einfach nicht veröffentlichen oder den Code bearbeiten. Das sind die beiden wichtigsten Einschränkungen hier. Aber wir können tatsächlich durch den Rest der Klasse gehen und unser Schaufenster nach einem solchen Thema aufbauen ohne es unbedingt kaufen zu müssen, es sei denn, wir sind bereit, mit diesem Schaufenster tatsächlich live zu gehen, okay Also hier kannst du sehen, dass mein Logo bereits vorinstalliert ist. Wenn ich hier also in meinen Header gehe, übernimmt das Bild das Standardlogo aus unseren Markeneinstellungen. Aber sagen wir einfach, wir haben dieses Logo zum Beispiel nicht in unseren Markeneinstellungen eingerichtet, wir können es immer direkt hier im Online-Shop-Editor verlinken . Das ist kein Problem. Ich werde klicken, um eine dynamische Quelle zu verbinden, allerdings klicken, um eine dynamische Quelle zu verbinden, und unser Markenlogo verbinden , nur um hier übersichtlicher zu sein. Okay. Es durchquert auch einige Navigationen. Wir werden etwas später im Kurs an den Navigationen arbeiten etwas später im Kurs an den Aber wenn wir hier zu unseren allgemeinen Theme-Einstellungen gehen, können wir damit beginnen, einige unserer Markenfarben und Typografie zu laden unserer Markenfarben und Typografie Ich werde zuerst mit der Typografie beginnen. Und für den Haupttext sind unsere Markenschriften, wie es hier steht, Inter und Tenor Unsere Körperschrift wird also Inter sein. Also werde ich das sofort einwählen. Dann gehe ich bis hierher zu unserer Überschriftenschrift. Und laut unserem Markendokument wird es Tennis Sands sein, richtig? Also leg das da rein. Und Sie können sehen, dass es nicht allzu unterschiedlich aussieht, aber ich hoffe, Sie stimmen zu, dass die Schriften ganz gut zusammenpassen. In Ordnung, jetzt fügen wir unsere Farbe hinzu. Moderne Shopify-Themes haben jetzt Farbschemata Sie wählen also ein Schema und dann werden alle Farbvariablen innerhalb dieses Auf diese Weise können Sie, anstatt jeden Abschnitt individuelle Farben festzulegen, ein Schema und dieses Schema für einen bestimmten Abschnitt austauschen. Es schränkt also nur die Optionen ein, sodass Sie, anstatt jedem Abschnitt eine ganze Reihe von Farbvariablen hinzuzufügen , anstatt jedem Abschnitt eine ganze Reihe von Farbvariablen hinzuzufügen , nur ein Schema auswählen und dann die Farbvariablen für eines dieser Schemata einrichten eines dieser Schemata Also werde ich ein neues Schema hinzufügen, und Sie können hier sehen, dass wir eine, zwei, drei, vier, fünf, sechs, sieben verschiedene Farbvariablen hinzufügen müssen Hier können wir also unsere Markenfarben eingeben . Hier steckt etwas Geschick darin, zu bestimmen, was wohin gehört. Für unsere Hintergrundfarben wollen wir natürlich etwas, das ein bisschen cremefarben ist, und für unsere Textfarben wollen wir etwas, das etwas dunkler ist. Okay? Also, wenn ich mir die tatsächliche Grafik unserer Markenfarben hier ansehe, ich habe sie schon geöffnet, du kannst hier sehen, dass wir hier schon ein gewisses Cremeweiß reingeladen haben. Wir können das stattdessen ändern und eine bestimmte Farbe hinzufügen , oder wir können einen dynamischen Wert hinzufügen und, sagen wir, zum Beispiel unsere sekundäre Kontrastfarbe hinzufügen, sodass sie die tatsächliche Variable mit unserer allgemeinen Hintergrundfarbe verknüpfen . Und dann, was den Haupttext angeht, können wir unsere Primärfarbe hinzufügen. Diese Abschnitte wurden nicht wirklich auf unser neues Farbschema umgestellt, also müssen wir das etwas später tun. Fügen wir sie jetzt einfach gehen wir zu unserem Button-Hintergrund über, der normalerweise das Gegenteil von dem ist, was wir hier eingerichtet haben Also werde ich es so einrichten, dass es im Grunde umgekehrt ist. Also werde ich den Hintergrund so einrichten dass er hellgrün ist, und dann stelle ich für den Text die kontrastierende Primärfarbe Und dann könnte ich hier unten die zweite Sekundärfarbe verwenden und diese mit der sekundären Kontrastfarbe kontrastieren. In Ordnung, wir müssen das vielleicht bearbeiten und optimieren, wenn wir mit der Erstellung unserer Abschnitte beginnen Aber gehen wir zum Beispiel zu diesem Abschnitt mit der Diashow und gibt es dort eine Option für Farbschema? Scheint das nicht zu haben. Aber lassen Sie uns hier, sagen wir zum Beispiel, auf die vorgestellte Kollektion eingehen , und dann können wir sie auf unser neues Farbschema fünf ändern . Und wie Sie sehen können, sieht es okay aus, aber wir haben ein kleines Problem mit der Schaltfläche. Lass mich zurück zu diesem Punkt gehen, lass uns gleich hier zu unserem Button-Text übergehen. Und wir müssen nicht unbedingt genau diese Farben verwenden, also kann ich sie einfach entfernen und es Weiß belassen. Weißt du, vielleicht möchte ich die andere sekundäre Kontrastfarbe verwenden . Okay, lass mich das speichern. Und ich glaube, dass der Text hier in der Primärfarbe 1 nicht genug Kontrast hat, also werde ich einfach aus dieser Auswahl ausbrechen und das Grün einfach etwas dunkler machen. Wissen Sie, das ist ein flexibles System. Wir müssen den genauen Farbcode nicht vollständig respektieren. Wir können diese Farbe etwas dunkler machen, und ich denke, das Farbschema funktioniert besser Okay. Okay, jetzt, wo unser Thema festgelegt ist, fahren wir mit dem nächsten Schritt fort , der darin besteht, unsere Abschnitte hinzuzufügen. Und wenn das für dieses spezielle Thema nicht funktioniert, können wir jederzeit das Thema wechseln. Aber jetzt, wo wir Prestige verwenden, beginnen wir tatsächlich damit, unsere Storefront einzurichten , indem wir die Bereiche verwenden, die in unserem ausgewählten Thema verfügbar sind 7. Homepage: Okay, hier sind wir also im Online-Shop-Editor und passen das Prestige-Thema an Wie im letzten Video erwähnt, die Optionen für die Anpassung des Themes hängen die Optionen für die Anpassung des Themes stark vom ausgewählten Thema ab Dieser Online-Shop-Editor wird derselbe sein, egal welches Thema Sie verwenden, aber die Optionen in Bezug welche Abschnitte Sie hinzufügen können, und die Optionen in diesen Abschnitten werden durch das Thema eingeschränkt oder aktiviert. Okay? Wir werden hier also mit dem Prestige-Thema weitermachen, aber Sie können im Prinzip jedem Thema folgen. Die Abschnitte und Einstellungen werden einfach anders sein. Eine Sache, die Sie hier feststellen können, ist, dass ich hier eine so kleine Bildschirmgröße habe, dass dieses Hamburger-Symbol für das mobile Menü angezeigt wird Wenn ich auf den Vollbildmodus expandiere, können Sie sehen, dass sich das auf Menüelemente ausdehnt Ich möchte nicht, dass es so angezeigt wird, wenn ich die Startseite anpasse, wenn ich die Startseite anpasse, also zoome ich einfach heraus, und das sollte uns unsere Menüelemente hierher bringen. Okay. Bei diesem speziellen Thema können wir hier links verschiedene Gruppen von Abschnitten sehen. Wir haben also unsere Header-Gruppe, unsere Overlay-Gruppe und unsere Fußzeilengruppe zusätzlich zu der Gruppe, die unter der Vorlage steht Nur um das ein wenig zu erklären, bevor wir uns die Abschnitte in der Vorlage selbst ansehen In Shopify können wir unsere eigenen Gruppen von Abschnitten erstellen , die für jede Vorlage gelten, und diese gehören nicht zu dieser normalen Vorlagengruppe hier. In der Vergangenheit war es nur ein Kopfzeilenbereich und ein Fußzeilenbereich Damit diese Bereiche jedoch etwas anpassbarer sind und zusätzliche Abschnitte zu diesen Bereichen hinzugefügt werden können, hat Shopify vor einigen Jahren sogenannte Abschnittsgruppen erstellt, und jetzt eine Fußzeilengruppe und eine Kopfzeilengruppe, die in allen Themen Shopify vor einigen Jahren sogenannte Abschnittsgruppen erstellt , und jetzt eine Fußzeilengruppe und eine Kopfzeilengruppe ziemlich einheitlich sein werden ziemlich einheitlich Aber diese Overlay-Gruppe ist etwas , das für Prestige ziemlich einzigartig ist Alles, was Sie hier wissen müssen, ist, dass diese Gruppen unabhängig von der Vorlage angezeigt werden unabhängig von der Vorlage angezeigt , die Abschnitte unter dieser Vorlagenüberschrift gelten jedoch nur für die Vorlage, die wir gerade betrachten Also schauen wir uns gerade die Homepage an wie wir hier oben sehen können. Diese Abschnitte laufen also auf unserer Homepage. Wie Sie sehen können, gibt es hier eine Menge Abschnitte. Was passiert, wenn Sie ein Theme aus dem Theme Store im Testmodus installieren , ist, dass der Homepage eine ganze Reihe von Demo-Abschnitten hinzugefügt werden , was ein bisschen nervig ist. Es zeigt zumindest alle Funktionen des Themes oder zumindest einige Funktionen, aber das wollen wir nicht Wir wollen unsere Storefront tatsächlich von Grund auf neu erstellen. Und wir können diese immer noch auswählen, indem wir über dieses Menü einen Abschnitt Ich werde also so viele davon wie möglich entfernen , sodass ich alle löschen kann, bis auf einen, weil wir immer mindestens einen Abschnitt in unserer Vorlage benötigen . Sie können jetzt hier sehen, dass wir keine weiteren dieser Abschnitte haben, wenn ich nach unten scrolle , und für diesen speziellen Slideshow-Abschnitt können wir ihn nicht löschen, da dies derzeit der einzige Abschnitt in unserer Vorlage ist derzeit der einzige Abschnitt in unserer Wie in der Moodboarding-Lektion erwähnt, werden nun so ziemlich alle E-Commerce-Websites so ziemlich alle E-Commerce-Websites einen Heldenbereich auf ihrer Homepage haben Das ist also eine ziemlich einfache Designentscheidung. Wir möchten einen Abschnitt finden, bei dem es sich einen Heldenbereich handelt, den wir oben in unserer Vorlage hinzufügen können . Was wir tun werden, ist innerhalb dieser Vorlagengruppe genau hier auf Abschnitt hinzufügen zu klicken. Und jetzt können wir eine ganze Reihe von Abschnitten in verschiedenen Gruppen wie dieser sehen. Wir können diese Gruppen speziell im Rahmen des Prestige-Themas erweitern und zusammenziehen . Diese Auswahl verschiedener Abschnitte hängt also davon ab, welches Thema Sie anpassen Im Prestige-Thema haben wir also all diese verschiedenen Optionen Und wenn wir mit der Maus über die verschiedenen Abschnitte fahren, können wir natürlich den Namen lesen Aber wenn dann auf der rechten Seite eine Voreinstellung festgelegt wurde, können wir eine visuelle Vorschau sehen dieser Abschnitt aussehen könnte wir also mit dem Mauszeiger über diese verschiedenen Abschnitte fahren, können Sie sehen, wie sie in Ihrem Shop mit Platzhalterinhalten möglicherweise aussehen könnten Ihrem Shop mit Platzhalterinhalten möglicherweise aussehen Okay? Nun, diese Slideshow können wir als unseren Helden verwenden, aber ich werde hier aus dieser Liste mit anderen Bannern auswählen aus dieser Liste mit anderen Bannern Schauen wir uns dieses Bild mit Textblock an. Und was ich tun werde, ist, das Bild, das ich zuvor vorbereitet habe, unseren Abschnitt über Seance-Lifestyle-Helden hinzuzufügen unseren Abschnitt über Seance-Lifestyle-Helden Also werde ich das hier anklicken und in meine Dateien ziehen und dann auf Fertig klicken Und dann möchte ich natürlich den Text hier ändern, aber lassen Sie mich noch einmal überprüfen ich dieses Feld tatsächlich verschieben kann weil ich es nicht genau hier in der Mitte haben möchte. Also eigentlich möchte ich diesen Paralex-Effekt loswerden. Okay, das ist besser. Aber du kannst hier sehen, dass diese Kiste den Inhalt irgendwie verdeckt Also, sofern wir nicht die Möglichkeit haben, es nach links oder rechts zu verschieben, denke ich nicht, dass dies der ideale Abschnitt für unseren Heldenbereich ist für unseren Heldenbereich Also werde ich mir dieses andere Bild hier mit Texteinblendung ansehen dieses andere Bild hier mit Texteinblendung Wir haben eigentlich keine Vorschau davon, aber wir können es jetzt hier sehen, während wir es mit den voreingestellten Daten einspielen Und Sie können hier sehen, dass das vielleicht sogar ein bisschen besser funktioniert. Also werde ich mein Farbschema hier auf das Farbschema für unsere Marke einstellen und dann im Bildfeld auf Hier auswählen klicken, um das Bild einzublenden, das wir im vorherigen Bild gemacht haben. Okay. Ich denke, das wird besser aussehen, obwohl der Text in Bezug auf den Kontrast nicht die richtige Farbe Was wir also tun können, ist, dass es hier eine Overlay-Einstellung gibt. Wie Sie sehen können, wird ein dunkles Overlay eingefügt. Was wir tun könnten, ist eine hellere Überlagerung wie diese einzufügen und dann vielleicht die Deckkraft der Überlagerung zu erhöhen um hier mehr Kontrast zum Text zu erzeugen Ich werde es auf Schwarz belassen und das Farbschema ändern, um es weiß zu machen Ich finde sogar, dass das ein bisschen besser aussieht. Aber jeder für sich, was auch immer für dich am besten aussieht, du kannst es natürlich tun. Und dann werde ich meine Opazität auf einen Wert einstellen , der meiner Meinung nach das Bild nicht zu stark verdeckt und gleichzeitig einen gewissen Kontrast zum Text bietet Und was das Anpassen der eigentlichen Elemente in diesem Abschnitt angeht , kann ich mir die Blöcke innerhalb des Abschnitts ansehen Lassen Sie mich einfach diese anderen Abschnitte löschen , nachdem ich mich als mein Held dafür entschieden habe Wie Sie hier sehen können, wird das als Held gut aussehen. Ich kann einige andere Dinge anpassen, wie den Inhalt und die Position des Inhalts, sodass ich ihn oben links platzieren kann, wenn ich möchte Ich kann es unten rechts platzieren, wenn ich möchte. Das sieht nett aus, solange es über der Falte ist, aber ich möchte auf jeden Fall, dass der Text über der Falte ist. Also werde ich es in der Mitte belassen. Dann möchte ich den Text anpassen. Wie Sie hier sehen können, gibt es in diesem Abschnitt zwei Blöcke, und ich kann hier klicken, um weitere Blöcke hinzuzufügen. Dieser Abschnitt ermöglicht also eine Unterüberschrift. Liquid bedeutet nur benutzerdefinierter Code, also können wir benutzerdefinierten Code hinzufügen Wir können eine Schaltfläche hinzufügen. Vielleicht möchte ich hier eine Schaltfläche hinzufügen und diese dann natürlich neu anordnen, sodass sie unten steht Dann werde ich die Kopie ändern wollen. Also habe ich das Dokument für meine Website hier drüben. Lass mich das einfach öffnen. Und dann sehe ich hier oben eine kleine Überschrift, also werde ich das kopieren, das hier einfügen. Und dann, was den Absatz angeht, werde ich diesen Absatz unter die Überschrift nehmen und ihn hier einfügen , richtig? Und dann, was den Button-Text angeht, müssen wir diesen Button natürlich auch irgendwo verlinken. Vielleicht sage ich einfach, entdecke hier den Unterschied zwischen den Seance oder was auch immer dir gefällt, und dann kann ich einfach auf unseren Shop oder unsere Kollektion verlinken, oder ich könnte direkt auf unser Hauptprodukt verlinken Das Premium-Marcha-Pulver, was auch immer ich hier haben will. Und ich kann auch die Farbe des Buttons anpassen. Ich kann es in eine Gliederung ändern. Ich mache es solide oder halte es fest. Und dann die Hintergrundfarbe, vielleicht verwende ich meine primäre Markenfarbe. geht es direkt zu den Meta-Objekten, aber ich kann hier auf diesen Chevron klicken um zu unserer Marke zurückzukehren, und dann versuchen wir es zuerst mit Primärfarbe Ich finde, das ist eine zu kräftige Farbe. Lassen Sie mich das einfach durch die Sekundärfarbe ersetzen. Und dann möchte ich natürlich, dass der Text eine andere Farbe hat, weiß, um den Kontrast zu verbessern. Okay. Also ich mag den Blick darauf. Wenn wir es auf verschiedenen Bildschirmgrößen sehen wollen, können wir hier zu diesen Symbolen übergehen. Wenn ich also auf Vollbild klicke, wird die Seitenleiste ausgeblendet, und wir sehen sie uns dann auf einem etwas breiteren Bildschirm an. Und wenn ich dann auf Mobilgerät klicke, können wir sehen, wie es auf Mobilgeräten aussieht, was ziemlich eng ist. Also sollten wir unsere Einstellungen hier vielleicht ein wenig aktualisieren. Was ich also tun könnte, ist die Bildgröße, ich könnte das vom Originalverhältnis auf das große Format ändern . Bildschirm anpassen. Also das sieht auf dem Handy viel besser aus, und dann sieht das auf dem Desktop gar nicht so schlecht aus Eva. Ich denke, das gibt uns das Beste aus beiden Welten, wenn es darum geht, dasselbe Hero-Image für Desktop und Handy zu verwenden . Damit erzielen wir ein gutes Ergebnis. Okay, das ist also unser erster Abschnitt. Wir können das sogar umbenennen, wenn wir es in Hero wollen, nur um das etwas klarer zu machen. Und da unser Heldenbereich hinzugefügt wurde, fügen wir weitere Abschnitte hinzu. Jetzt, wo wir wissen, wie man zumindest einen Abschnitt einrichtet, werde ich das etwas schneller erledigen, und jetzt geht es nur noch darum, zu entscheiden , welche anderen Bereiche auf unserer Homepage hinzugefügt werden sollen, und diese einzurichten. Also klicken wir hier auf Speichern und lassen uns an den nächsten Abschnitten arbeiten. Für den ersten Abschnitt der Homepage wird es also normalerweise immer ein Heldenbereich sein. Das ist also ein ziemlich großes Kinderspiel. Aber jetzt müssen wir entscheiden, was wir sonst noch auf unserer Homepage haben wollen Und um uns zu dieser Entscheidung zu inspirieren, können wir auf unser Moodboard schauen. Und sehen Sie, was andere Websites tun, die uns gefallen. Wir müssen dies aber auch mit den Abschnitten abgleichen , die in unserem ausgewählten Thema verfügbar sind. Wir sind hier also irgendwie auf die Abschnitte beschränkt , die in unserem Thema verfügbar sind, was in diesem Fall Prestige ist. Wenn Sie Ihre Website nun selbst programmieren , können Sie sie natürlich so gestalten, wie Sie es möchten , und beliebige Abschnitte einbauen. Und am Ende dieses Kurses werde ich auf einige Optionen eingehen, wie Sie das machen können. Aber im Moment müssen wir ohne KI oder Code, nur mit der Standardmethode in Shopify, nur mit der Standardmethode in Shopify, schauen, welche Bereiche in der aktuellen Version verfügbar sind . Aber anscheinend habe ich nicht wirklich ein Moodboard und ich habe bereits eine Idee im Kopf, und ich habe bereits eine Idee was ich erstellen möchte Ich werde einfach diese Liste von Blöcken durchgehen und sehen, was sinnvoll ist, Ein Kontaktformular auf der Homepage, nicht besonders typisch für eine Marke dieser Art. Wenn ich einen Newsletter habe, kann ich Newsletter-Anmeldungen erfassen , wenn ich eine Art Magnet habe , den ich von Leuten sammeln kann. Aber ich denke , etwas, das ziemlich üblich ist, ist, einige Produkte auf unserer Homepage zu präsentieren. Und das können wir mit einer sogenannten ausgewählten Sammlung in Shopify oder in diesem Fall einem Bereich mit ausgewählten Sammlungen Also werde ich darauf klicken und es ermöglicht mir, eine bestimmte Sammlung oder eine Reihe von Sammlungen einzufügen eine bestimmte Sammlung oder eine Reihe von Sammlungen In diesem Fall können wir also mehrere verschiedene Sammlungen hinzufügen. Standardmäßig ist es nur eine, aber für diesen speziellen Abschnitt können wir mehrere Sammlungen hinzufügen. Also werde ich für die Sammlung auf diesen Block klicken , und wie Sie hier sehen können, können wir eine Kollektion aus unserem Shop verlinken, da wir nur eine haben, weil wir eine kleine Produktpalette haben, ich gehe einfach zu Link Shop A. Das ist die Grenze der Produkte, die angezeigt werden können da wir nur eine haben, weil wir eine kleine Produktpalette haben, ich gehe einfach zu Link Shop A. , aber anscheinend haben wir nur vier in unserem Shop. Wir werden nur vier zeigen. Das ist also das Maximum, das in diesem Abschnitt angezeigt wird. Und dann können wir eine Überschrift für diese Sammlung einfügen, wobei wir bedenken, dass wir hier mehrere Sammlungen einfügen können, also könnte ich hier eine optionale Kopfzeile von Shop A einfügen. Wie Sie sehen können, ist hier, wenn Sie genau hinschauen, hier unten der Titel der Sammlung voreingestellt Wenn ich das also leer lasse, lautet der Abschnittstitel sowieso Shop All, sodass der Text dadurch nicht geändert wird Lassen Sie mich das stattdessen auf Al-Produktreihe ändern, oder? Und dann wird das den Text hier ändern. Und dann möchte ich nicht die Schaltfläche „ Alle anzeigen “ haben , weil das buchstäblich alle Produkte sind, die wir in unserem Shop haben. Und wenn ich dann zu den Abschnittseinstellungen gehe, gibt es hier noch diesen anderen kleinen Text, die Unterüberschrift, und ich werde das einfach komplett entfernen bei Shopify-Abschnitten normalerweise Wenn Sie bei Shopify-Abschnitten normalerweise den Text vollständig aus dem Feld entfernen, wird der Bereich , in den entfernen, wird der Bereich , Text eingefügt wurde, , sofern das Theme korrekt aufgebaut ist Und genau wie beim letzten Mal wollen wir uns hier unsere verschiedenen Anpassungsoptionen ansehen unsere verschiedenen Anpassungsoptionen , um Möglichkeiten zu finden, dies noch besser aussehen zu lassen Natürlich wollen wir, dass es unser eigenes Farbschema verwendet, also stelle ich das auf Schema fünf ein, und das sieht eigentlich ganz nett aus. Wenn Sie eine dieser Premium-Marken haben , bei der Sie weder den Preis noch den Titel angeben, können Sie das einschalten. Das werde ich in diesem Fall nicht tun. Wir können die Produkte stapeln. Ich glaube, das hat mit Mobilgeräten zu tun, also werde ich gleich hier zur mobilen Ansicht wechseln. Wenn ich das ausschalte, ist es eine Art Überlauf-Scrollcontainer Aber wenn ich das auf Produkte stapeln umstelle, dann können Sie sehen, dass ich hier ein Raster mit zwei Spalten oder ein einfaches Raster mit einem Produkt pro Zeile haben kann zwei Spalten oder ein einfaches Raster mit einem Produkt pro Es liegt also an Ihren persönlichen Vorlieben. Ich mag das irgendwie, also werde ich es dabei belassen. Und dann wird das hier relevant sein , weil wir nur vier Produkte haben. Wenn wir das also nicht ändern, sagen wir zum Beispiel auf zwei auf dem Desktop, was meiner Meinung nach einfach zu groß ist, dann werden wir nicht auf mehrere Linien mit einer Produktpalette von nur vier Produkten aufteilen müssen mehrere Linien mit einer Produktpalette . Okay. Das sind also unsere Optionen im Abschnitt selbst, aber in den Blockeinstellungen können wir die Schaltfläche, die wir gerade hier entfernt haben, auch mit etwas verknüpfen . Wenn wir eine Ansicht oder Schaltfläche haben, standardmäßig die Sammlungs-URL verwendet, aber wir können sie tatsächlich so einrichten, dass sie zu einer anderen Seite verlinkt wird Ich werde den Button einfach komplett entfernen . Ich denke nicht, dass es Sinn macht, und das war's für unseren Bereich „ Ausgewählte Sammlungen“. Ich könnte es sogar in „ Ausgewählte Sammlung“ umbenennen, okay? Oder ich könnte es unsere Produktpalette nennen. Okay. Das ändert nichts an den Namen der Abschnitte hier, nur an der Instanz unseres Abschnitts , die hier in die Vorlage aufgenommen wird. Okay, also werde ich dafür auf Speichern klicken. Das ist unser zweiter Homepage-Bereich, der gebaut wurde. Ordnung, lassen Sie uns die Seitenleiste entfernen und sehen was wir bisher haben. Mir gefällt Wir kommen etwas später zum Header, aber was die Homepage-spezifischen Abschnitte angeht, sieht bisher alles gut Ich werde zwei weitere hinzufügen und dann werden wir zum Abschluss kommen und uns die nächste Vorlage ansehen. Eines der Dinge, an die Sie sich aus der Moodboard-Lektion erinnern , ist, dass es so aussah, als hätten alle anderen Matcher-Marken die Vorteile ihres Matchers hervorgehoben Und eine andere Sache, die mir gefallen hat, waren diese Symbole hier. Ich habe also meine eigenen Symbole generiert , die Sie im Ordner mit den Symbolen finden, und jedes dieser Symbole stellt einen anderen Vorteil dar. Also antioxidativ, wenn ich nur die Größe reduziere, Gesundheit des Gehirns, ruhige Energie und Entgiftung Eigentlich habe ich noch einen hier, aber ich werde ihn wahrscheinlich nicht benutzen Ich denke, vier sind wahrscheinlich genug. Haben Sie etwas, das wie eine Liste von Punktpunkten Sie können so etwas wie Symbole verwenden um diese Liste ein bisschen umfangreicher zu machen, okay? Wenn wir also zu unserer Vorlage hier zurückkehren, suchen wir uns einen Abschnitt, in dem wir diese Vorteile hervorheben können. Also werde ich unter unserer Produktpalette auf Abschnitt hinzufügen klicken unter unserer Produktpalette und uns die verschiedenen Gruppen von Abschnitten ansehen . Ich verwende die Titel dieser verschiedenen Gruppen, um mich zu informieren. Wir suchen kein Banner. Wir suchen nach Handlungsaufforderungen, vielleicht nach etwas Inhaltlichem. Wir werden also zumindest zu diesem Zeitpunkt keine Blogbeiträge hinzufügen, keinen Inhalt mit Tabs, kein Vorher-Nachher-Bild , aber wir können hier so etwas wie diesen mehrspaltigen Abschnitt finden diesen mehrspaltigen Abschnitt , solange wir ein Bild hinzufügen können Also werde ich das hier reinbringen. Und schauen wir uns die Einstellungen in jedem Block an. Ja, wir können ein Bild hinzufügen. Wir könnten also möglicherweise diesen mehrspaltigen Abschnitt verwenden. Lassen Sie mich noch einmal einen Blick darauf werfen welche anderen Abschnitte uns möglicherweise zur Verfügung stehen. Und unten in der Gruppe Vertrauen und soziale Beweise haben wir diesen Abschnitt namens Text mit Symbolen. Das ist genau das, wonach ich suche. Also werde ich das gleich hier reinbringen. Tatsächlich können wir sehen, dass wir es hier unten mit den eingebauten Symbolen im Theme verwenden . Dieses Thema enthält offensichtlich einige Symbole, wie Sie hier sehen können. Wir können unsere eigenen benutzerdefinierten Symbole hinzufügen. Was ich also tun werde, ist , all diese Symbole hier in diesen Bild-Uploader einzufügen diese Symbole hier in diesen Bild-Uploader einzufügen Und das wird sie alle auf einmal hochladen Aber sobald sie hochgeladen sind, werde ich sie natürlich einzeln auswählen , um jeden dieser Vorteile hervorzuheben. Okay? Also werde ich das natürlich mit einer Kopie der Website koppeln müssen. Kehren wir also hier zu meinem Website-Kopierdokument zurück. Und hier haben wir einige Punkte, über die wir auf unserer Website wissen wollen: radikale Abwehr, anhaltendes Ritual, metabolische Funken und lebhafte Entgiftung Wir können unsere Icons diesen Vorteilen zuordnen. Also, die erste radikale Verteidigung, ich werde hier drüben nachschauen. Dieses Symbol hier scheint das Richtige zu sein. Also werde ich das hier hinzufügen, das in Radical Defense ändern und dann den Untertitel aus dem Dokument auf unserer Website übernehmen aus dem Dokument auf unserer Website Die Icon-Peitsche für unsere detaillierteren Icons ist hier offensichtlich viel zu klein, also werde ich das ein bisschen ansprechen Ich glaube sogar, dass ich es bis zum Maximalwert von 64 hochfahren möchte bis zum Maximalwert von 64 Und dann haben wir hier auch diese Option für das mobile Icon WIP Wir wollen auf jeden Fall, dass das auch auf Mobilgeräten größer ist. Also werde ich es auch auf 64 erhöhen. Und wie Sie hier auf dem Handy sehen können, werden wir es in diese Art von Slider mit Animationen zwischen den Folien einbauen lassen. Okay. Der Vorteil, ein Theme von der Stange zu verwenden und es nicht individuell zu codieren, besteht darin, dass wir uns keine Gedanken darüber machen müssen , es für mehrere Bildschirmgrößen zu codieren. Dieses Theme sollte auf Mobilgeräten automatisch funktionieren , ohne dass wir es uns ansehen müssen, aber innerhalb des Themes sollten uns auch Optionen zur Verfügung stehen , um diese Optionen anzupassen Wie Sie hier sehen können, verwende ich standardmäßig Schema eins. Also werde ich das an unser Farbschema anpassen wollen. Wenn Sie diesen Schritt mit dem Ändern des Farbschemas für jeden neu erstellten Abschnitt ganz vermeiden möchten, hätten wir unsere Farben hier einrichten können. In Schema eins. Tatsächlich gibt es hier eine Option , das Standardfarbschema zu verwenden. Lassen Sie uns das auf fünf setzen, und das ermöglicht uns jeden neuen Abschnitt , den wir erstellen, standardmäßig das Farbschema fünf zu verwenden, was unser eigenes Farbschema ist. Okay? Welche anderen Optionen haben wir hier im Abschnitt Einstellungen bevor wir mit dem Anpassen der Blöcke fortfahren Separater Abschnitt mit Rand. Es ist also momentan schwer, es mit diesen blauen Linien zu erkennen. Aber auf beiden Seiten gibt es eine Grenze. Ich denke, das sieht vorerst in Ordnung aus, also werde ich es lassen Und dann diese andere Option für Stapel auf Mobilgeräten, richtig, aber das Stapeln ist nicht so nett . Ich werde das rückgängig machen Und ja, ich denke, das war's für die Abschnittseinstellungen insgesamt. Im Moment wähle ich einfach den Rest meiner Symbole ein. Also werde ich hierher gehen und was war das nächste anhaltende Ritual, okay? Also, hier geht es um eine ruhige fokussierte Energie, die 4 Stunden anhält. Ich könnte diesen Zoom für euch sogar ein bisschen Sieht so aus, als ob ich nicht hineinzoomen kann, also werde ich das nur in Bezug auf die Schriftgröße vergrößern Okay, also ein anhaltendes Ritual, eine ruhige, gebündelte Energie , die stundenlang anhält. Also was wäre das? Wahrscheinlich ruhige Energie. In Ordnung, lass mich den reinlegen. Nochmals, ich möchte das Symbol „Peitschen“ aufrufen und den Inhalt hier ersetzen. Und was war es Anhaltendes Ritual? Ich tippe das einfach selbst ein. Ordnung, cool. Und dann der dritte, genau hier, was haben wir für einen metabolischen Funken Also eine natürliche Steigerung Ihres Stoffwechsels auf pflanzlicher Basis. Also den Stoffwechsel ankurbeln. Ich glaube, ich habe hier einen für den Stoffwechsel. Lass uns den reinlegen. Nochmals, machen Sie sie viel größer, ersetzen Sie den Inhalt, Stoffwechsel und dann noch einen weiteren, den ich hier für eine lebendige Entgiftung hinzufügen kann. Es ist reich an im Schatten gewachsenem Chlorophyll, das Ihrem Körper hilft, auf natürliche Weise zu filtern und zu reinigen. Also das ist etwas, das von Reinigung und Entgiftung spricht Ich glaube also, dass dieses Symbol dafür das richtige ist. Nochmals, geben Sie die Größe des Symbols an, ersetzen Sie diese Überschrift und ersetzen Sie den Text genau hier. Ordnung. Schauen wir uns das kurz im Vollbildmodus an, und dann auf dem Handy, sieht ziemlich gut aus, aber es fehlt eine Überschrift Lassen Sie mich hier zu meinen Abschnittseinstellungen zurückkehren. Und leider gibt es in diesem speziellen Abschnitt keine Überschriftenoption , was ich für ein bisschen bizarr halte, aber das stimmt. Wir können das in einem anderen Abschnitt einbringen. Also werde ich hier auf Abschnitt hinzufügen klicken. Und in vielen modernen Shopify-Themes sollte es einen Abschnitt geben, der nur Rich Text genannt wird. Dabei handelt es sich um einen flexiblen Abschnitt, in dem wir mithilfe von Blöcken verschiedene Textteile einfügen können in dem wir mithilfe von Blöcken verschiedene Textteile Wie wir im Beispiel sehen können, haben wir Unterüberschrift, Überschrift und Absatz Ich werde die Unterüberschrift und den Absatz löschen. werde diesen obigen Text mit Symbolen einfügen Ich werde diesen obigen Text mit Symbolen einfügen und ihn nur für die Überschrift verwenden Obwohl es ein neuer Abschnitt ist, verwendet er wohl immer noch das alte Schema, weil ich noch nicht auf Speichern geklickt habe. Also machen wir aus diesem Schema fünf, und das ist ein bisschen zu groß. Also lass uns sehen, ob wir das beheben können. Ich werde diesen Abschnitt mit Rahmen entfernen, aber dann lass uns sehen, wie der vertikale Abstand entfernt wird. Okay, da haben wir's. Also alle Einstellungen, die wir hier anpassen können, den Stil der Überschrift, den Überschriftentext. Und für die Überschrift hier haben wir auf unserer Website eine Kopie von seance marcha Okay. Also das sind eher die Vorteile von Matcha im Allgemeinen, aber wenn wir es mit unserer Art von Seance Marcher verbinden, können wir das hier reinschreiben. Und jetzt schauen wir es uns an. Okay, unser Abschnitt hier unten hat immer noch diesen Rand, was bei dem Titel hier nicht wirklich Sinn macht. Also werde ich einen separaten Abschnitt mit Rahmen entfernen, damit sich dieser Überschriftenbereich ein bisschen besser in unseren Icon-Bereich einfügt . Okay. Okay, also technisch gesehen zwei neue Abschnitte hier. Ich werde dort auf Speichern klicken und lassen Sie uns einen letzten Abschnitt machen Wie ich schon sagte, das ist eine brandneue Marke, wir haben also nicht viele Bewertungen. Also werde ich aus den Bewertungen, die wir tatsächlich haben, eine größere Sache machen und stattdessen Testimonials einbringen Ich glaube also, dass es innerhalb von Prestige tatsächlich einen Bereich mit Testimonials gibt, wenn ich bis zum Thema Vertrauen und soziale Beweise gehe Deshalb kann ich hier einfach auf Testimonials klicken. Manchmal stellen Sie fest, dass es in Ihrem Thema einen Abschnitt gibt, der genau entspricht, was Sie erreichen möchten Und das ist der beste Fall, aber manchmal musst du die vorhandenen Abschnitte nehmen und mit ihnen arbeiten, um etwas Bestimmtes zu erstellen. Ich bin mir nicht sicher warum, aber hier wird ein anderes Farbschema verwendet. Stellen wir es auf unser Farbschema von Schema fünf ein. Und für die Abschnittsüberschrift füge ich hier einfach von unseren Kunden ein. Natürlich ist der Rest des Inhalts hier optional, also lasse ich das Feld einfach leer. Und dann können wir hier zu diesen verschiedenen Testimonials gehen zu diesen verschiedenen Testimonials Wie Sie sehen können, haben wir hier einige Platzhalterinhalte. Teilen Sie mit, was Ihre Kunden über Ihre Produkte, Ihren Kundenservice oder Ihre Versandkosten sagen Kundenservice oder Lassen Sie uns diese also entfernen. Gehen Sie hier zurück zu unserer Liste mit Testimonials. Ich werde mir das von Sara holen. Und dann kann ich Sara in das Autorenfeld eintragen. Und wir haben tatsächlich Bilder von all diesen Testimonial-Autoren Also werde ich hierher gehen. Und genau wie bei den Symbolen werde ich sie alle auf einmal hochladen und sie dann selektiv auswählen, wenn wir sie in verschiedene Felder bringen In meinem Kundenordner hier habe ich also drei Kunden, habe ich also drei Kunden die die Testimonials abgeben Und ich glaube, Sarah M war das blonde Mädchen hier. Damit wir ein Foto von ihr reinbringen können. Und das sieht im Moment etwas komisch aus, aber die Bilder sind eigentlich Navigationsbilder. Wenn ich also hier runtergehe und das nächste Mädchen hinzufüge, bin ich mir nicht sicher, welches welches ist, aber das ist nicht wirklich wichtig. Wir bringen ein neues Zeugnis mit, gehen zurück zu ihrer Aussage Sie kann Maya sein, sie schnappen, ihr Zeugnis hier ablegen, ihren Namen nehmen und ihn in den Namen des Angebots Und Sie können hier sehen, dass sie quasi als Navigationshilfe für die verschiedenen Zeugnisse dienen Navigationshilfe für die verschiedenen Zeugnisse Lass mich hier gehen und das letzte Bild auswählen Dieses Mädchen kann Ava sein, ihren Namen eintragen, ihr Zitat hier im Inhalt eintragen, und Wala, wir haben unseren Bereich mit Testimonials In Ordnung? Wenn ich also zum Vollbildmodus gehe, können wir sehen, wie das auf einem etwas breiteren Bildschirm aussieht Und wenn wir auf Mobilgeräte umsteigen, können wir sehen, dass wir diese Slider-Navigation mit den Punkten bekommen . Die Navigationen sind hier also etwas anders. Und noch einmal, schauen wir uns an, was wir sonst noch tun können, um es ein bisschen schöner zu machen Hier gibt es etwas, das als Schriftgrößenfaktor bezeichnet wird, sodass wir die Schriftgröße tatsächlich reduzieren können Ich reduziere ihn vielleicht wenig, weil Sie ihn auf Mobilgeräten nicht zu stark reduzieren möchten , vor allem, wenn Ihre Zuschauer , wenn sie der älteren Version angehören, Schwierigkeiten haben werden, ihn möglicherweise zu lesen. Die einzige andere Option, die wir hier nicht angesprochen haben, ist die Bildbreite. Vielleicht spielen wir damit herum, um es zu sehen. Ja, ich denke, wir können das ein bisschen größer machen. Also lass uns 160 statt 140 machen. Für jeden Testimonial-Block. Ich habe versehentlich zwischen Blöcken geklickt, wodurch ein neuer Block erstellt wurde, also habe ich diesen einfach gelöscht Und ich werde dafür auf Speichern klicken. Und schauen wir uns unsere fertige Homepage an. Natürlich könnte ich auf FEVA gehen. Ich könnte weitere Homepage-Abschnitte hinzufügen. Aber für dieses spezielle Video innerhalb des Skillshare-Kurses werde ich es bei diesen vier Abschnitten belassen oder technisch gesehen bei fünf Abschnitten, wenn Sie die Überschrift als separaten Abschnitt hinzufügen Hier kannst du sehen, wir haben unseren Heldenbereich. Das führt uns zur Kollektion oder zu einem bestimmten Produkt. Es zeigt unsere Produktpalette mit den verschiedenen Namen und Preisen Warum Seance Macha, die Vorteile unseres Produkts und einige Testimonials Falls Sie sich fragen , woher dieser Abschnitt „Text mit Symbolen“ stammt, dann stammt er tatsächlich aus der Fußgruppe Wenn Sie das also entfernen oder einfach verstecken möchten, können Sie das auf diese Weise tun. Vielleicht verstecke ich es vorerst, weil ja, wir wissen nicht, ob wir diese Vorteile anbieten können. Und dann, ganz oben in der Kopfzeile, zählen wir vielleicht nicht bis zu einem Superverkauf herunter. Lassen Sie uns also eigentlich einfach sagen, wir nicht bis zu einem Superverkauf herunterzählen, also werde ich das einfach entfernen. Aber es ist eine Option. Wenn Sie in Zukunft einen Verkauf haben, können Sie diesen Countdown-Timer oder die Ankündigungsleiste speziell innerhalb von Prestige zum Gruppenleiter hinzufügen , okay Aber vorerst werde ich diese einfach entfernen, und das ist unsere aktuelle Homepage Wie Sie sehen können, mit einigen schönen Scrollbildanimationen. Und wenn wir dann auf dem Handy schauen, sieht es auch ziemlich gut aus. Okay? In Bezug auf die Seitenbedeutung gibt es also wahrscheinlich zwei Seiten , die am wichtigsten sind, die Homepage und die Produktseite. Im nächsten Video werden wir also als Nächstes zur Produktseite gehen . 8. Produktseite: Im letzten Video passen wir die Startseite unseres Shopify-Shops an, aber jetzt gehen wir zur wahrscheinlich wichtigsten Seite zur wichtigsten Seite zur Optimierung in unserem Shopify-Storefront über, und das ist unsere Wenn ich hier oben zur Vorlagenauswahl gehe und Produkte auswähle, öffnet sich ein neues Menü, in dem ich öffnet sich ein neues Menü, alle Optionen für die verschiedenen für die Okay? Also im Gegensatz zur Homepage gibt es nur eine. Diese Vorlage gilt also nur für eine Seite. Wenn wir diesen Chevron hier rechts sehen, bedeutet das, dass jede dieser Vorlagen für mehrere Ressourcen gelten könnte, sei es ein Produkt , eine Sammlung oder ein Blogbeitrag usw. Die Seiten für jede dieser verschiedenen Ressourcen werden ziemlich ähnlich sein Regel werden sie dieselbe Vorlage durchgehen. Und aus diesem Grund haben wir hier diesen Chevron, der uns die Möglichkeit gibt, nicht nur eine Produktvorlage zu erstellen , die für alle Produkte gilt, sondern auch die Möglichkeit, verschiedene Produkte verschiedenen Vorlagen zuzuweisen verschiedene Produkte verschiedenen Vorlagen Wie Sie hier sehen können, ist dies die Standardeinstellung speziell für das Prestige-Thema Das mag bei deinem Theme anders sein, aber wir werden definitiv eine Standard-Produktvorlage haben , und dann werden wir hier alternative Vorlagen haben. Wie Sie hier sehen können, gibt es in das Prestige-Theme eine alternative Vorlage namens Vorbestellung. Unter den Namen der Vorlagen können Sie sehen, wie vielen Produkten jede Vorlage zugewiesen ist Hier können Sie also sehen, dass die Vorbestellungsvorlage derzeit keinen Produkten zugewiesen ist Wenn wir dies anpassen würden , hätte das also keine Auswirkungen auf unsere Storefront es sei denn, wir würden dieser Vorlage ein bestimmtes Produkt zuweisen dieser Vorlage ein bestimmtes Produkt zuweisen Und nur um das Ganze zu vervollständigen, werde ich hier einfach zum Shop-Admin gehen und dir das zeigen Ich glaube, wir hätten das in dem Video zur Ladeneinrichtung behandelt . Aber nur um das klarzustellen: Um ein bestimmtes Produkt dazu zu bringen, eine andere Vorlage zu verwenden, gehe ich hier runter zur Theme-Vorlage und wechsle dort vom Standardprodukt zu einer anderen Produktvorlage. Diese Auswahl stammt nur aus dem aktuell veröffentlichten Theme. Wenn wir uns also unsere aktuell veröffentlichten Themen ansehen, können Sie sehen, dass unser aktuell veröffentlichtes Thema Horizon ist. Das ist also eine kleine Nuance in Shopify, die ziemlich nervig sein kann Wir müssten dieselben alternativen Vorlagen im aktuell veröffentlichten Theme erstellen , falls das Theme an dem wir arbeiten, nicht bereits das veröffentlichte Theme ist Also, wenn ich das machen wollte, könnte ich Alternative sagen, ihr den gleichen Namen geben wie der alternativen Vorlage, die ich im Prestige-Theme erstellt habe . Das würde es in dem aktuell veröffentlichten Theme erstellen , und um diese kurze Demonstration zu beenden, sollte ich nun in der Lage sein, eine Alternative als Vorlage auszuwählen , zu der dieses Produkt weitergeleitet wird Okay? Aber in diesem Beispiel werden wir keine alternativen Produktvorlagen haben. Wir werden nur die eine Vorlage haben. Ich glaube also nicht, dass es hier eine Option zum Löschen gibt. Ich kann in den Code gehen und ihn löschen, aber wir haben keinen Codezugriff, und das ist eine Klasse ohne Code. Also werden wir hier einfach zurück zum Standardprodukt wechseln hier einfach zurück zum Standardprodukt und dann werde ich diese Seitenleiste hier öffnen. Also dieselben Prinzipien wie zuvor, aber jetzt haben wir hier oben eine neue Option, und das heißt, wir können ändern, welches Produkt wir betrachten. So können wir die Vorschau dieser Vorlage anhand verschiedener Produkte in unserem Shop sehen dieser Vorlage anhand verschiedener . Also werde ich das auf unser zentrales Produkt setzen, unser Hauptprodukt, das mehrere Produktbilder hat und unser Flaggschiffprodukt ist, okay? Und dann werde ich diese Vorlage auf der Grundlage dieses Produkts anpassen. Okay? Also du kannst sehen, dass es von Anfang an ziemlich gut aussieht. Der Anbieter, den wir hier nicht haben wollen, also wenn ich in den Bereich hier klicke, kannst du sehen, dass jeder dieser verschiedenen Aspekte hier verschiedene Blöcke sind, die in den Hauptproduktbereich gehen , das ist dieses Ding hier. Ich werde den Anbieter entfernen. Ich kann sie auch neu anordnen, sodass ich den Preis über dem Titel setzen könnte, wenn ich wollte, das macht nicht wirklich Sinn, aber ich könnte das auch tun Ich kann also einige davon entfernen, neue hinzufügen und sie neu anordnen Schauen wir uns also alle verfügbaren Blöcke in diesem speziellen Thema an in diesem speziellen Thema Wie Sie hier sehen können, kann ich unserem Hauptproduktbereich zusätzliche Elemente hinzufügen . Genau hier, okay? Außerdem heißt es unter dem Hauptproduktbereich, wie Sie hier sehen können, wie Sie hier sehen können, Produktseite, aber in anderen Themen kann es auch Hauptproduktbereich genannt werden. Ich bezeichne ihn in der Regel themenübergreifend als Hauptproduktbereich. Es ist der Hauptbereich, der Ihre Produktseite bestimmen wird. Aber dann können wir darunter weitere Abschnitte hinzufügen. Sie können also sehen, dass wir diesen verwandten Produktbereich haben. Und nur um das klarzustellen: Dies wird auf der Grundlage einer API aufgefüllt , die von Shopify selbst festgelegt wurde Wenn das also nicht angezeigt wird, müssen Sie mehr in Ihrem Shop herumklicken, müssen Sie mehr in Ihrem Shop herumklicken damit der Shopify-Algorithmus anhand der tatsächlichen Benutzerdaten, in Ihrem Fall Sie, herausfinden kann, was damit zusammenhängt in Ihrem Fall Sie, herausfinden kann, was Nur um Sie über diesen Abschnitt mit verwandten Produkten zu informieren, wie es hier heißt: Dynamische Empfehlungen ändern und verbessern sich mit der Zeit Sie können manuelle Produktempfehlungen erstellen , wenn Sie die Shopify-App für Suche und Entdeckung verwenden möchten . Standardmäßig bestimmt Shopify jedoch anhand der Art und Weise, wie Benutzer mit Ihrer Website interagieren, welche Produkte verwandt sind wie Benutzer mit Ihrer Website interagieren, welche Produkte verwandt sind Okay. Ich habe viel geredet und bisher nur eine Änderung an unserer Produktseite vorgenommen. Lassen Sie uns jetzt gleich zu den Änderungen auf unserer Produktseite übergehen. Wie immer werden wir durch die im Theme verfügbaren Optionen eingeschränkt sein . Lassen Sie mich also auf unser Produktseitenobjekt schauen. Und erstens werde ich das Schema an unser spezielles Farbschema anpassen, das ist also markenabhängig. Und was ich hier tun kann, ist die Breite der eigentlichen Details auf der rechten Seite zu reduzieren eigentlichen Details auf der , um den Bildern mehr Platz zu geben, wenn ich will. Oder ich könnte das Gegenteil tun. Ich kann das vergrößern und den Bildern weniger Platz geben. Wählen Sie das also in Ihre persönlichen Vorlieben ein. Ich denke, 33% waren dort wahrscheinlich eine gute Zahl, wenn man bedenkt, dass das Internet relativ ist. Wenn ich also meinen Bildschirm vergrößere , werden beide Spalten größer, aber das Verhältnis von 33% bleibt erhalten. Okay? Wenn ich mir die anderen Optionen hier ansehe, kann ich ein anderes Layout für die Produktbilder wählen. Wie Sie hier sehen können, denken Sie daran, als wir in der Moodboarding-Lektion untersucht ob sich die Vorschaubilder links oder unten befinden. Wenn wir es vorziehen, dass sie unten angezeigt werden, können wir dies über unser Theme hier, innerhalb des Prestige-Themas, anpassen innerhalb des Mir gefällt es eher auf der linken Seite, also werde ich das tun Und dann können wir die Lücke verringern, wenn wir wollen, insbesondere auf dem Desktop zwischen diesen Bildern. Scheint nicht viel zu tun. Vielleicht ist meine Bildschirmbreite nicht groß genug. Aber ja, hier gelten dieselben Prinzipien. Wir müssen innerhalb der Optionen arbeiten , die in unserem Theme verfügbar sind, es sei denn , wir codieren es individuell, worauf wir am Ende des Kurses noch einmal zurückkommen werden. Okay? Also ich habe meinen Titel, habe meinen Preis. Ratenzahlung. Wenn wir also unseren Shop so eingerichtet haben Ratenzahlungen mit Shop Pay unterstützt, wie du es hier sehen kannst, dann wird das etwas zeigen Aber sagen wir einfach, wir hatten das zum Beispiel nicht als Option, wir werden es löschen wollen , obwohl es leer ist Ein Separator ist nur diese Zeile hier. Wir geben die Produktbeschreibung ein. Wir können das genau dort zu einem zusammenklappbaren Abschnitt Ich glaube nicht, dass das unbedingt Sinn macht. Und dann haben wir den Variantenwähler. Wenn das Produkt also in verschiedenen Optionen erhältlich wäre, würden wir hier die Benutzeroberfläche einrichten, um zwischen den verschiedenen Optionen wählen Wählen Sie hier die Menge aus, mit der Sie mehr als nur eine Menge in den Warenkorb legen können mehr als nur eine Menge in den Warenkorb legen Sie haben diese Kaufschaltflächen , um das Produkt in den Warenkorb zu legen oder mit dem Produkt einfach direkt zur Kasse zu gehen mit dem Produkt einfach direkt zur Kasse zu Und dann werden kostenlose Produkte, die wiederum verwandten Produkten ähneln , auf dem Algorithmus basieren. Und in dieser Situation zeigt es derzeit nichts. Also werde ich das auch entfernen. Ich werde dafür auf Speichern klicken. Und was ich als Nächstes tun werde, ist, dass ich hier keine allzu großen Änderungen vornehmen werde. Ich werde hier unten nur einige Abschnitte für Akkordeons hinzufügen, um zusätzliche Details über das Produkt Und um das zu tun, werde ich Metafelder verwenden. Aber wenn du mit Metafeldern nicht vertraut bist, werde ich es zuerst ohne Metafelder machen, damit ich dir den Unterschied zeigen kann, und dann wirst du sehen, warum Metafelder in diesem Fall benötigt werden. Also werde ich hier runter gehen und einen Akkordeon-Bereich hinzufügen, der in diesem Thema und vielen anderen Themen einfach zusammenklappbarer Text genannt wird vielen anderen Themen einfach zusammenklappbarer Text anderen Sie können es in diesen Optionen sehen. Eigentlich scheint mein Theme beim Laden hängen zu bleiben, also werde ich es jetzt aktualisieren. Es hätte meine vorherigen Änderungen speichern sollen. Ja. Okay. Also, zurück zu den Blöcken auf der Produktseite, werde ich einen neuen Block namens Collapsible Text hinzufügen Für unser Akkordeon. Und wie Sie sehen können, wird es derzeit unter der Produktgalerie angezeigt Das liegt daran, dass dieses Kontrollkästchen hier aktiviert ist. Wir werden das Häkchen entfernen, damit es hier angezeigt wird. Und es ist ziemlich einfach Es ist nur ein Titel und dann Inhalt, wenn du es öffnest, okay? Sie können hier auch benutzerdefinierten Liquid-Code einfügen. Dies ist die Programmiersprache, die im Wesentlichen für Shopify-Themes verwendet wird, die wir in dieser speziellen Klasse nicht eingehen Und Sie können auch, wenn der Inhalt besonders fortgeschritten ist, wesentlich fortgeschrittener sein als das, was Sie in dieses Rich-Text-Feld eingeben könnten in dieses Rich-Text-Feld eingeben Sie können den Inhalt auch von einer Seite in Ihrem Shopify-Shop importieren, okay? Also, was ich hier tun werde, ist, dass ich zu meinem Webkopie-Dokument hier drüben übergehe zu meinem Webkopie-Dokument hier drüben übergehe Und für das Premium-Matcher-Pulverprodukt haben wir einige Details Wir haben einige Zutaten und dann haben wir einige Anweisungen zur Verwendung Also werde ich mir diese Punkte schnappen und sie dann hier eintragen. Und dann werde ich das Details nennen, okay? Und dann werde ich zwei weitere davon erstellen. Ich werde hier einen für die Zutaten hinzufügen, zusammenklappbaren Text Nochmals, ich möchte nicht, dass es unter der Galerie angezeigt wird. Ich möchte, dass es hier auftaucht. Das werden Zutaten sein, und dann werde ich einfach die Zutaten hier drüben kopieren , richtig? Und dann noch eine zur Verwendung. Also gehe ich hier rüber, zusammenklappbaren Text, entferne ihn von unten der Galerie und lege ihn wieder hierher. Der nächste war, wie man es benutzt. Also werde ich den Inhalt kopieren und ihn hier einfügen. Okay? Nun, was wir sehen können, wenn ich einfach die Seitenleiste verstecke, können Sie sehen, dass wir hier einige Details zu unserer Produktseite hinzugefügt haben , was wirklich nett ist, bis auf ein Problem, okay? Wenn wir zu einer anderen gehen, lassen Sie mich diese einfach speichern , damit der Fortschritt nicht verloren Und dann tausche ich das Eingabeprodukt gegen ein anderes Produkt in unserem Geschäft aus. Also sagen wir einfach diese Keramikschale. Sie können hier sehen , dass ich immer noch dieselben Akkordeons habe , weil sie dieselbe Vorlage verwenden Wie Sie hier sehen können, macht es nicht wirklich Sinn , über das Machopulver mit den Zutaten zu sprechen und darüber , wie man es auf dem Keramikschüssel-Produkt verwendet auf dem Keramikschüssel-Produkt Das ist also der perfekte Anwendungsfall für Metafeld. Metafelder sind zusätzliche Felder, die wir zu bestimmten Ressourcen wie Produkten hinzufügen können, und dann können wir diese dynamischen Werte übernehmen Also, wie wir es hier mit dem Titel gemacht haben, legen wir den eigentlichen Titel nicht im Online-Shop-Editor fest. Das bezieht sich nur auf das Produkt selbst. Ebenso der Preis und die Varianz, oder? Es bezieht sich auf das eigentliche Produkt selbst, nicht auf die Vorlage Okay? Also, um das zu tun, muss ich zurück in meinen Shop gehen, also muss ich den Online-Shop-Editor verlassen. Und dann gibt es von überall in unserem Geschäft diese Einstellungsschaltfläche hier unten. Ich werde darauf klicken und dann gehe ich hier runter zu Metafeldern und Meta-Objekten. Okay. Nun, nochmal, Metafeld mag nach etwas Kompliziertem klingen, aber es ist im Grunde nur ein zusätzliches Feld, das du zu jeder dieser Ressourcen hinzufügen kannst, oder? aber es ist im Grunde nur ein zusätzliches Feld, das du zu jeder dieser Ressourcen hinzufügen kannst , So können wir dem Variantenobjekt, dem Sammelobjekt, Kundenbestellungen hinzufügen dem Sammelobjekt, Kundenbestellungen Es gibt viele Optionen, aber die gängigste werden wahrscheinlich Produkte sein. Also gehen wir hierher, um unseren Produkten einige neue Felder hinzuzufügen, und dann können wir hier auf Definition hinzufügen klicken. Also, was ich tun werde, ist , Einzelheiten zu sagen. Stimmt? Und für den Typ wollen wir nur dem Typ des Feldes im Online-Shop-Editor entsprechen . Dieses hier, ich kann es leicht identifizieren, aber ich bin mir nicht sicher, ob es genau sagt, dass es ein Rich-Text-Feld ist, aber das ist ein sogenanntes Rich-Text-Feld, weil im Gegensatz zu diesem, das nur ein einfaches Textfeld ist das uns nur erlaubt, Text einzugeben, ermöglicht uns das Rich-Text-Feld Aufzählungspunkten, nummerierten Listen , Links, fett und kursiv bestimmte Punkte und sogar Überschriften. Rich-Text ist also der Typ, nach dem wir hier suchen werden. Also werde ich Rich-Text eingeben, um das herauszufiltern. Wir können Metapils auch verwenden, um eine Werteliste einzufügen, also könnte ich das auf eine Werteliste umstellen also könnte ich das auf eine Werteliste umstellen und nicht nur auf einen Wert Aber in diesem Fall brauchen wir nur den einen Wert. Und dann kann ich hier eine Beschreibung hinzufügen, wenn ich denke, dass Admins Hilfe benötigen, um herauszufinden, was das ist Ich könnte also zum Beispiel Details sagen , die auf der Produktseite angezeigt Ich denke, das ist ziemlich selbsterklärend. Wir könnten diese Informationen auf dem Produkt überall in unserem Geschäft verwenden dem Produkt überall in unserem Geschäft Es könnte an mehr Stellen als nur auf der Produktseite liegen. Also werde ich dort auf Speichern klicken und genau dasselbe für zwei weitere Definitionen tun . Also werde ich hierher gehen. Sie können sehen dass wir dort bereits Details definiert haben. Das nächste waren Zutaten und dann wieder dasselbe, Rich-Text. Und dann nochmal genau das Gleiche, denn vielleicht ordne ich sie einfach in der richtigen Reihenfolge an. Wie benutzt man, klicken Sie hier noch einmal auf Rich Text und klicken Sie dann auf Speichern. Okay, ich werde das einfach nach unten verschieben, sodass sie in der gleichen Reihenfolge angezeigt werden, in der sie erscheinen. Und wenn diese Definitionen festgelegt sind, müssen wir jetzt nur noch Daten zu diesen benutzerdefinierten Feldern auf dem Produkt hinzufügen , zu dem sie gehören. Also verlasse ich das Ganze und gehe dann zum Hauptprodukt, dem Produkt, für das diese Angaben zu den Inhaltsstoffen und der Verwendung tatsächlich gelten, und dann scrolle ich nach unten, um meine Metafelds zu finden Hier können Sie also Einzelheiten zu den Inhaltsstoffen und zur Verwendung sehen. Wir werden dies jetzt auf Produktebene und nicht im Online-Shop-Editor festlegen , was, wie ich bereits erwähnt habe, alle Produkte gelten wird, die diese Vorlage verwenden. Okay? Also nochmal, ich kann es aus dem Online Store Editor kopieren, ich kann es von hier aus kopieren. Ich kopiere es einfach von hier, gehe auf Details ein, kopiere das, gehe zu den Zutaten, kopiere das und dann gehe ich darauf ein, wie man es benutzt und kopiert. Okay. Ich werde dafür auf Speichern klicken. Und nur zur Verdeutlichung Wenn ich zu einem anderen Produkt in unserem Geschäft gehe , zum Beispiel der Keramikschale, werden Sie feststellen, dass wenn ich zu den Metafeldern der Produkte gehe, diese Werte nicht für alle Produkte festgelegt sind Sie werden nur für einzelne Produkte festgelegt, okay? So können wir in Shopify einem Produkt Informationen zuordnen, dem anderen jedoch nicht Nachdem dieses Metafeld verknüpft wurde, können wir eine sogenannte dynamische Verknüpfung verwenden, um diesen Inhalt des Detailfeldes mit dem Wert aus dem Metafeld zu füllen diesen Inhalt des Detailfeldes mit dem Wert aus dem Metafeld mit dem Wert Also werde ich all diese Punktpunkte hier nehmen, sie entfernen und dann auf diese Schaltfläche hier klicken, um eine dynamische Quelle zu verbinden. Also werde ich darauf klicken und dann werden wir uns nicht sicher sein , warum es Optionen zum Verweisen auf sich selbst anzeigt. Wir müssen nur diesen Chevron drücken, um zurückzugehen, und wir wollen auf das Produktobjekt zugreifen. Dann können Sie hier sehen, dass wir andere Aspekte, die bereits existieren, aus dem Produktobjekt hier übernehmen können, wie den Titel oder den Anbieter oder die, die wir bereits erstellt Also werde ich hier meine Daten hinzufügen, richtig? Es wird noch nicht angezeigt, aber ich drücke einfach auf Speichern, und dann mir das hoffentlich angezeigt. Eigentlich merke ich gerade, dass wir immer noch bei dem Keramikprodukt sind. Wir hoffen also, dass genau das passieren würde, wenn die Details leer sind, dann ist das Akkordeon einfach nicht zu sehen, okay? Wenn ich also noch eins davon mache, wenn ich zu den Inhaltsstoffen gehe und diese Inhaltsstoffe entferne, mich mit der dynamischen Quelle verbinde, Zutaten dynamischen Quelle verbinde, aus dem Metafeld hinzufüge, wirst du sehen, dass es von der Produktseite für dieses spezielle Produkt verschwindet von der Produktseite für dieses spezielle Produkt Aber wenn ich das Produkt, das ich mir ansehe, auf das Produkt ändere das die Metafeld-Werte festgelegt wurden, kannst du Details und Inhaltsstoffe sehen Ich werde das Letzte machen, wie man es benutzt. Ich werde den Inhalt auf Vorlagenebene entfernen und eine dynamische Quelle hinzufügen, die vom eigentlichen Produkt selbst zur Verwendung von Metafield hier ableitet. Klicken Sie dabei auf Speichern. Und jetzt gilt das, anstatt wie zuvor, dass diese für alle Produkte gelten, nur für dieses spezielle Produkt. Und dann, wie wir zuvor eine kleine Vorschau gesehen haben, wenn ich zum Produkt Keramikschale gehe, werden Sie feststellen, dass diese Blöcke, obwohl sie hier im Online Store Editor sind, weil dieser Wert leer ist, sie einfach nicht angezeigt werden. Es wird also der Wert gemäß der Metaf-Datei angezeigt , aber wenn er leer ist, wird einfach nichts angezeigt , und genau so sollte es funktionieren Okay, um diese Produktseite fertig zu stellen , bevor wir zu den anderen Seiten übergehen, füge ich vielleicht noch ein bisschen mehr zu dieser Produktvorlage Ich möchte vielleicht daran erinnern, warum sie ohne die Vorteile unseres Produkts bei uns kaufen würden. Anstatt es neu zu erstellen, kann ich also nach Hause zu der Vorlage zurückkehren , in der der Abschnitt bereits existiert Und ich kann es kopieren. Ich kann also hierher gehen. Offensichtlich gibt es zwei verschiedene Abschnitte, aber dieser wird einfacher zu replizieren sein als dieser Und was ich hier tun kann, ist, dass ich entweder hier klicken kann , um es zu kopieren, oder ich kann hier mit der rechten Maustaste darauf klicken und dann auf Kopieren klicken Dann kann ich gleich hier zu meiner Produktvorlage wechseln, und dann kann ich mit der rechten Maustaste hier klicken und dann auf Dazwischen einfügen klicken. Okay. Da hast du's. Der Abschnitt mit all den Einstellungen , die wir zuvor hatten , wird also angezeigt. Und dann muss ich diesen Rich-Text-Abschnitt nur noch einmal hinzufügen . Ich suche einfach hier oben nach Rich-Text. Standardmäßig werden zusätzliche Inhalte hinzugefügt, aber ich brauche sie nur für die Überschrift. Also werde ich hier reingehen und sagen, warum Seance. Und dann möchte ich das auf das richtige Farbschema setzen, dieses separate mit Rand entfernen, und dann auch der zugehörige Produktbereich ich gerade bemerkt habe, ist nicht das richtige Farbschema, also werde ich das einfach auf unser Farbschema einstellen Gerade jetzt. Wir können dies auch auf ein etwas anderes Farbschema ändern , wenn wir die Farben vielleicht invertieren möchten Aber jetzt haben wir diesen duplizierten Abschnitt unserer Produktvorlage Und wenn wir uns jetzt unsere Produktvorlage ansehen, werde ich mir das Hauptprodukt ansehen Also gehe ich hier zu unserem Flaggschiffprodukt, dem Premium-Macha-Pulver, und schauen wir uns jetzt gleich unsere Produktseite an Natürlich könnten wir auf der Produktseite noch so viel mehr tun , wenn Sie Leute haben, die das Produkt verwenden Natürlich ist es umso besser, je mehr soziale Beweise und Demonstrationen des Produkts auf dieser Seite veröffentlicht werden können. Sie könnten also weitere Abschnitte unter dem Hauptproduktbereich hinzufügen . Aber in diesem Video haben wir einige der Optionen innerhalb des Prestige-Themas behandelt , und vor allem haben wir über Metafelds gesprochen, die wir über dynamische Links im Online-Shop-Editor einfügen können , sodass wir Daten auf Produktebene festlegen können, also solche, und das durchziehen den Online-Shop gelangen Sie direkt zu unserer Vorlage in Über den Online-Shop gelangen Sie direkt zu unserer Vorlage in den richtigen Bereichen Okay, da die Produktseite und die Homepage aus dem Weg geräumt sind, gehen wir im nächsten Video zu einigen anderen Seiten über und schließen den Aufbau dieser Website 9. Andere Seiten: Okay. An dieser Stelle haben wir die beiden wichtigsten Seiten auf unserer Shopify-Website eingerichtet, die Homepage und die Produktseite Lassen Sie uns die Liste weiter durchgehen und den Rest der Seiten optimieren Wenn ich also hier oben zu meiner Vorlagenauswahl gehe, haben wir auf der Startseite angefangen Wir passen die Produktvorlage an. Schauen wir uns jetzt die Kollektionsvorlage an, und wir haben hier nur eine, die Standard-Kollektionsvorlage. Okay. Sammlungsseiten werden für uns als Geschäft mit einer Produktpalette von nur vier Produkten also nicht besonders wichtig sein, aber es gibt einige Optimierungen, die wir hier vornehmen können Wie wir hier in unserer Vorlagengruppe sehen können, haben wir zwei Abschnitte, das Sammlungsbanner und die Sammlungsseite Offensichtlich ist der Kontrast hier nicht ideal. Lassen Sie uns beide auf unser Farbschema einstellen. Das ist schon viel besser. Also werden wir das auf unser Farbschema fünf einstellen, das ist unser benutzerdefiniertes Farbschema, das auf die Marke abgestimmt ist. Und ich denke, wir können das ein bisschen schöner aussehen lassen indem wir ein Hintergrundbild hinzufügen Also werde ich das jetzt machen. Ich werde hier in meinen Bilderordner gehen und ihn durchblättern. Ich denke, dieser hier könnte ein gutes Hintergrundbild sein. Also werde ich das reinbringen und dann auf Fertig klicken. Und jetzt müssen wir noch ein paar Änderungen vornehmen. Das hat es richtig groß gemacht. Ich glaube, die Bildgröße wurde auf das ursprüngliche Bildverhältnis eingestellt. Ich möchte eigentlich, dass es ziemlich eng ist. Also das ist so klein wie es geht, anscheinend X-klein. Und dann will ich diesen dunkelgrünen Text eigentlich nicht. Also werde ich es wieder auf Schema vier umstellen, und das sieht viel besser aus, okay? Also können wir hier auch die Einstellung für transparente Überschriften entfernen hier auch die Einstellung für transparente Überschriften und die Semmelbrösel hier ein- oder ausblenden Ich weiß nicht, ob es Sinn macht, Home-Shop, Shop A, zu haben, aber wenn Sie viele Sammlungen haben, sollten Sie das Breadcrumbs-Element vielleicht dort behalten Und wenn es eine Sammlungsbeschreibung gibt, wird sie angezeigt. Ich könnte das einfach entfernen, falls es diesen Paralleleffekt gibt. Ich bin mir nicht sicher, ob ich mit diesem Parallel-Effekt zufrieden bin. Es liegt an dir, ob du das drin lässt oder nicht. Auch hier hängt alles von deinem Thema ab. Die Deckkraft, vielleicht habe ich etwas mehr erhöht, um den Kontrast zu erhöhen Der Text liegt etwas über dem Etikett des Bildes, was nicht ideal ist Wir möchten wahrscheinlich ein etwas anderes Hintergrundbild verwenden ein etwas anderes Hintergrundbild bei dem der Text nicht mit Text überlagert wird, aber ich werde es vorerst dabei belassen Und schauen wir uns hier an, welche Optionen es für unseren Hauptbereich auf der Sammlungsseite gibt für unseren Hauptbereich auf der Sammlungsseite Wir haben unsere MAX-Produkte pro Seite mit 48, aber wir haben nur vier Produkte. Ich glaube nicht, dass wir nach Verfügbarkeit und Preis filtern müssen, also werde ich die Filter einfach komplett entfernen. Und dann weiß ich nicht, ob wir diesen Grid-Selector brauchen wir diesen Grid-Selector Ich glaube, das ist der Rastergrößenwähler. Also werde ich das einfach entfernen. Und das vereinfacht unser Design viel mehr. Ich denke, das macht mehr Sinn, wenn wir es mit einer so kleinen Produktpalette zu tun haben. Kaufen die vier Produkte hier. Und wir gehen sozusagen da rein. Ich bin mir nicht sicher, ob wir auch Sortieren nach loswerden können, aber normalerweise wird auf Sammlungsseiten die Option Sortieren nach in der Ecke angezeigt. Mach das aus. Und ich kann auch die Anzahl der Produkte ausschalten, oder? Es sind also nur diese vier Produkte. Ich lasse die Anzahl der Produktergebnisse hier stehen. Und klicken Sie dabei auf Speichern. Damit bin ich ziemlich zufrieden. Natürlich sollten Sie innerhalb der verfügbaren Optionen des Themes, das Sie verwenden, an Ihre Vorlieben anpassen verfügbaren Optionen des Themes, das Sie verwenden, an , wenn Sie Prestige nicht verwenden. Und jetzt, wo das erledigt ist, fahren wir mit der nächsten Vorlage in der Liste fort. Dieser ist nicht sehr verbreitet. Ich arbeite nicht oft an der Seite mit der Sammlungsliste. Es ist nur eine einzige Vorlage , die alle Sammlungen in Ihrem Shop auflistet. Und wie Sie hier sehen können, haben Sie nur eine Sammlung, das ist also ziemlich überflüssig. Der nächste, Geschenkgutschein. Dies ist nur relevant, wenn wir Geschenkkarten anbieten . Der nächste ist der Einkaufswagen. Auch das ist nicht besonders relevant, wenn wir die moderne Slide-Out-Karte verwenden. Wenn ich also zu einem Produkt gehe, kann ich das hoffentlich im Online-Shop-Editor tun. Wenn nicht, kann ich wahrscheinlich hier klicken, um eine Vorschau anzuzeigen. Und dann können wir tatsächlich eine funktionierende Vorschau unserer bisherigen Website bekommen . Wenn ich also hierher gehen und auf In den Einkaufswagen klicken würde, würdest du sehen, dass es auf unserer kleinen Seitenkarte hier erscheint unserer kleinen Seitenkarte , anstatt uns zur Warenkorbseite zu Standardmäßig werden also alle Shopify-Websites diese Warenkorbseite haben. Wenn Sie jedoch ein modernes Thema verwenden, ist es wahrscheinlicher, dass dieser interaktive Einkaufswagen zum Ausziehen verfügbar Anpassen dieser bestimmten Vorlage, wenn wir darauf zurückgreifen, ist also nicht von großer Bedeutung Jemand müsste buchstäblich zum Schrägstrich CART Ihrer Website navigieren , um darauf zuzugreifen, wenn Sie die Kartenschublade verwenden Okay? Hier können Sie auf Checkout Accounts Customizer klicken auf Checkout Accounts Customizer Das führt Sie zu einem ganz anderen Customizer. Dies ist nur ein Link zu einem ganz anderen Bereich Ihres Shopify-Shops. Also werde ich das nicht behandeln Das ist technisch gesehen außerhalb des Online-Shop-Editors. Dann kommen wir zu Seiten, Blogs, Blogbeiträgen. Okay? Offensichtlich sind Blogs und Blogposts nur relevant, wenn Sie einen Blog in Ihrem E-Commerce-Shop betreiben einen Blog in Ihrem E-Commerce-Shop Dies ist wie eine Nebenfunktion von Shopify. Shopify ist eine E-Commerce-Plattform und bietet daher alle Funktionen, um ein Produkt zu verkaufen Es ist vielleicht nicht als Blogging-Plattform wie Wordpress bekannt , aber Sie haben die Möglichkeit, verschiedene Blogs hinzuzufügen Es ist ein bisschen verwirrend, aber Sie können sich jeden Blog als eine andere Kategorie in Ihrem Blog auf Ihrer Website vorstellen jeden Blog als eine andere Kategorie Ihrem Blog auf Ihrer Website Sie könnten also zum Beispiel einen Blog für Rezepte und einen Blog für Zeitschriftenartikel oder was auch immer haben . Richtig? Also werden wir das in diesem Kurs nicht wirklich behandeln weil unser Shop auch kein Blog sein wird. Wenn Sie diese Vorlagen jedoch anpassen möchten, funktioniert das Prinzip ähnlich wie bei der Produktvorlage. Sie haben hier Ihre Liste mit alternativen Vorlagen oder Standardvorlagen, und es hängt davon ab, welchen Blogbeitrag Sie mit dieser Vorlage bearbeiten, und jeder der Blogbeiträge wird diese Blogpost-Vorlage Jeder der Blogs wird diese Standard-Blogvorlage Okay. Das, worauf ich mich für den Rest dieses Videos wirklich konzentrieren möchte, sind Seiten. Wenn wir also hier für Seiten klicken, können Sie sehen, dass wir eine Standardseite, Kontaktseite, die einer Seite zugewiesen ist, häufig gestellte Fragen und Listensammlungen haben. Diese sind standardmäßig in Prestige enthalten. Ihrem Theme wird es nicht unbedingt dasselbe sein, aber fast alle Shopify-Themes werden wahrscheinlich sofort mit einer Standard-Seitenvorlage und einer Kontaktseitenvorlage geliefert einer Standard-Seitenvorlage und einer Kontaktseitenvorlage und einer Kontaktseitenvorlage Okay, also wie Seiten in Shopify funktionieren , speziell diese Seitenressource Wenn ich hier zur Standardseite gehe, können Sie sehen, dass uns die Seitenvorlage angezeigt wird , die auf diese bestimmte Seite angewendet wurde. Aber genau wie bei der Anpassung der Produktvorlage können wir hier klicken, um das zu ändern, und wir können zu einer anderen Seite in unserem Shop wechseln Genau wie bei Produkten, die sich in einem anderen Bereich unseres Shops befinden Wenn ich also hier in unseren Shop zurückkehre, bin ich gerade im Produktbereich. Aber wenn ich hier zum Online-Shop-Vertriebskanal gehe und dann auf Seiten klicke, kannst du sehen, dass dies die beiden Seiten sind , die wir in unserem Shop haben. Im Grunde die Seite mit den Datenschutzrichtlinien und die Kontaktseite. Wenn wir hier auf die Seite mit den Datenschutzbestimmungen klicken, können Sie sehen, dass sie die Standard-Seitenvorlage durchläuft. Wenn wir jedoch hier klicken, erscheint eine weitere Seitenvorlage namens Kontakt. Okay, also hier drüben, wenn wir eigentlich nur zu den Datenschutzoptionen zurückkehren , wird der Inhalt dieser Seite durch diesen Inhaltsbereich hier geleitet. Aber wenn wir das hier belassen, klicke ich einfach hier, um meine Änderungen zu verwerfen Ich habe sowieso keine Änderungen vorgenommen. Und wenn wir hierher gehen, um Kontakt aufzunehmen, werden Sie sehen, dass das leer ist, aber es wird eine andere Vorlage verwendet. Der Inhalt für diese spezielle Seite basiert also auf dem , was wir hier in der alternativen Vorlage festgelegt haben. Wenn ich also direkt hier zu Kontakt gehe, siehst du anstelle des Standardseitenabschnitts , der hier versteckt wurde, dass wir dieses Kontaktformular verwenden. Und das ermöglicht uns, Seiten mit beliebigen benutzerdefinierten Inhalten zu erstellen , okay? Natürlich ist es auf der Kontaktseite sinnvoll, diesen Abschnitt mit dem Kontaktformular einzufügen , der bereits vorhanden ist. Wenn wir andere Seiten haben, die wir in unseren Shopper fi Store aufnehmen möchten , keiner der anderen Kategorien hier passen , tun wir das hier Und um dieses Video zu beenden, werde ich jetzt tatsächlich eines mit dir einrichten Das Erste, was ich tun möchte, ist, wir entweder im Online-Shop-Editor beginnen und ihn hier einrichten und ihn dann einer Seite zuweisen können hier einrichten und ihn dann einer Seite zuweisen , oder wir können eine Seite erstellen und eine Vorlage erstellen, die diese Seite sofort zuweist Ich werde zuerst die Seite erstellen und sie miteinander verknüpfen. Also gehe ich hier hoch, klicke auf Seite hinzufügen und werde eine Über uns -Seite für diese Marke Shopper Pi erstellen für diese Marke Shopper Pi Und statt „Über uns“, was ein bisschen trocken ist, werde ich „O Story“ sagen Okay. Ich werde dort auf Speichern klicken, um es sichtbar zu machen. Auch hier spielt es keine Rolle, ob wir es sichtbar oder versteckt machen , da unsere Website noch nicht live ist. Und was ich tun werde, ist, dies in eine neue Vorlage zu ändern , die wir in unserem Online-Shop-Editor einrichten werden. Also gehe ich hier zu unserer Vorlagenauswahl, gehe zu Seiten, erstelle eine Vorlage und ich nenne das Eva Über uns oder Unsere Geschichte Ich werde dort auf Vorlage erstellen klicken. Und wie Sie sehen können, wird nur die erste Seite in unserem Shopify Store ausgewählt, da sie noch keiner bestimmten Seite zugewiesen ist in unserem Shopify Store Aber wie Sie sehen können, heißt es hier oben, Null Seiten zugewiesen sind. Also lass uns das reparieren. Lassen Sie uns hier drüben gehen, und ich glaube, ich muss sie nach dem Hinzufügen der Vorlage aktualisieren. Und dann klicke ich hier drüben. Auch hier haben wir das gleiche Problem, bei dem ich das nicht auswählen kann, es sei denn, es handelt sich um eine Vorlage im Live-Theme. Also muss ich den gleichen Prozess für das Theme duplizieren wie für das Live-Theme. Also werde ich hier drüben gehen, genau den gleichen Prozess machen, aber mit dem aktuell veröffentlichten Thema, nämlich Horizon. Und das ist der kleine Hack, mit dem ich ihn hier auswählen kann, wie Sie sehen können, Unsere Geschichte. Ordnung, also werde ich dort auf Speichern klicken aktualisieren und dann werde ich es hier in meinem Online-Shop-Editor Jetzt können Sie sehen, dass unsere Geschichte einer Seite zugewiesen ist, aber wir schauen uns immer noch die Seite mit den Datenschutzrichtlinien an , die durch diese Vorlage gespeist Also werden wir das auf Unsere Geschichte umstellen . Und jetzt, da eine Vorlage erstellt und einer bestimmten Seite im Backend unseres Shopify-Shops zugewiesen wurde, können wir diese Seite jetzt anpassen Und um auf diese Seite zuzugreifen, können wir die URL genau hier sehen, okay? Lass uns jetzt rübergehen und eine Seite erstellen, die dich durch die Geschichte führt, wie Seance begann Zuallererst werde ich den Standardseitenabschnitt ausblenden und dann die Geschichte, die ich hier in das Webkopie-Dokument geschrieben habe, nehmen in das Webkopie-Dokument geschrieben habe und herausfinden wir diese Informationen am besten mit den innerhalb des Themas verfügbaren Abschnitten anzeigen können diese Informationen am besten mit den innerhalb des Themas verfügbaren Abschnitten , okay? Wir haben also unsere Geschichte. Es ist eine Zeitleiste. Wir haben hier also verschiedene Jahre mit unterschiedlichen Titeln für jede Phase der Reise. Und dann ein Absatz, der die Geschichte in jeder Phase beschreibt. Okay? Lassen Sie mich also die verfügbaren Abschnitte in meinem Thema durchsehen. Und es gibt offensichtlich eine Reihe verschiedener Möglichkeiten, wie wir diese Informationen präsentieren könnten. Wir könnten daraus eine Diashow machen. Wir könnten hier Bilder mit Textblöcken überlagern. Aber ich glaube, es gibt hier einen echten Abschnitt mit dem Namen Timeline unter der Überschrift Storytelling. Wie Sie hier sehen können, gibt es genau hier einen namens Timeline. Bei einem Namen wie Timeline denken Sie vielleicht, dass dies ein geeigneter Abschnitt ist , den Sie für unsere Geschichte hier verwenden könnten. Zuallererst kann ich das Farbschema des Abschnitts so ändern , dass es zu unserer Marke passt, und dann ist da noch dieses interne Farbschema. Also sollten wir vielleicht auch ein inverses Farbschema einrichten auch ein inverses Farbschema Vielleicht benutzen wir Oh, wollen wir definitiv nicht benutzen, man könnte so etwas machen Lassen Sie mich hier einfach die verschiedenen Optionen durchgehen. Vielleicht bearbeiten wir in unserem ersten Farbschema, in unseren Theme-Einstellungen, einfach den Hintergrund so, dass er ein bisschen mehr der Marke entspricht. Was ist, wenn wir diese Farbe verwenden und dann die Textfarbe in unsere sekundäre Kontrastfarbe ändern ? Sieht das gut aus? Okay, das könnte möglicherweise gut aussehen. Das ist eine Art Umkehrung der Farben auf dem anderen Farbschema Sagen wir zum Beispiel einfach, dass wir uns dafür entscheiden werden Dann können wir reingehen und für jedes dieser Jahre einen Gegenstand einrichten. So kann ich das Bild einbringen , das zu diesem Teil der Geschichte passt. Ich werde sie alle auf einmal rüberbringen. Wie Sie sehen können, gibt es hier in unserem Markenidentitätsordner einen Ordner namens Brand Story, der jede Phase der Reise abdeckt. Anstatt sie also einzeln hochzuladen, werde ich sie einfach alle in diesen Datei-Uploader hier werfen diesen Datei-Uploader hier , sodass sie alle auf einmal hochladen, sodass wir sie in jeder Phase schneller auswählen Und dann wähle ich den ersten aus, den Beginn der Markenreise, was das Jahr war, wenn wir zu unserem Exemplar hier, 2020, zurückkehren zu unserem Exemplar hier, 2020, Könnte das als Navigationslabel verwenden oder ich verwende es tatsächlich als Navigationslabel, richtig? Unterüberschrift 2020, Überschrift wird dieselbe sein, und dann kann ich die Geschichte hier in den Inhalt einfügen , oder? Und dann gehe zum nächsten Punkt, mach dasselbe, füge das nächste Bild für den nächsten Teil der Geschichte Das Navigationsetikett war die Entdeckung. Ich werde das auch als Überschrift innerhalb des Blocks verwenden. 2021 für die Unterüberschrift, und dann passe ich den dritten Block hier Ich füge das Bild des dritten Teils der Markengeschichte ein, kopiere die Quelle für das Navigationsetikett und die Überschrift ersetze die Unterüberschrift durch 2022 Und füge dann den Inhalt hier ein. Und dann würden wir das natürlich für die anderen zwei bis drei Teile der Geschichte tun . Schauen wir uns das an, bevor wir uns die Mühe machen, all diese anderen Elemente hinzuzufügen. Und wir können hier sehen, wenn wir in den Vollbildmodus wechseln, es wird so angezeigt , richtig, das ist nett und kompakt, hat ein paar nette Animationen. Und ich denke, das würde auf einer Seite mit anderen Inhalten gut funktionieren , aber das ist unsere Story-Seite. Ich denke also, dass es sinnvoll ist, für jeden Teil der Reise einen eigenen Abschnitt zu haben . Also, auch das ist eine persönliche Präferenz. Ich denke, es wäre schöner , eine längere Seite mit dem gesamten Inhalt in einer Ansicht zu haben eine längere Seite mit dem gesamten Inhalt in einer Ansicht Anstatt diesen bestimmten Abschnitt zu löschen, werde ich ihn einfach ausblenden und uns einen Abschnitt suchen, den wir stapeln können, um unsere Geschichte zu erstellen Also zurück zum Geschichtenerzählen, okay, ich mag die anderen Optionen in der Kategorie Geschichtenerzählen nicht wirklich die anderen Optionen in der Kategorie Geschichtenerzählen Lass mich die Liste hochgehen. Bild mit Text. Okay, ich denke, dieser könnte angemessen sein. Also werde ich das Farbschema auf Schema fünf umstellen, unser Standardschema für unsere Marke. Dann wähle ich das erste aus unseren Brand-Story-Bildern aus. Ich klicke dann raus und schaue mir die Blöcke an, um die Überschrift zu aktualisieren. Also die Unterüberschrift, ich glaube, es war 2020, oder? Der Gründer ist der Name dieses Teils der Geschichte, oder? Was heißt es eigentlich hier, Stil? Vielleicht machen wir es ein bisschen kleiner. Also, er hat zwei Stile. Und dann gehen wir zum Absatz über und fügen diesen Text genau hier ein. In Ordnung? Das gefällt mir. Und dann können wir ein weiteres Bild mit Textabschnitten hinzufügen. Ändern Sie das Schema auf fünf. Ich möchte vielleicht die Bildposition nach rechts ändern. Sie wechseln sich also ab. Ich werde unser Bild für den zweiten Teil der Geschichte hinzufügen . Dann geh in unsere Blöcke, Unterüberschrift 2021, ich glaube, es war das nächste Jahr Es ist die Entdeckung. Kopieren wir also die anderen Teile, die wir benötigen. Also im Absatz wird es dieser Inhalt sein. Und dann ist die Überschrift die Entdeckung. G, um sicherzustellen, dass diese alle H-Zweien statt H-Einsen sind. Ich glaube, es ist einfach der Stil Es wird nicht das tatsächliche H verwendet, was schlecht für SEO wäre. Also ich denke, ich bevorzuge es tatsächlich, wenn es größer ist, also werde ich es einfach nur mit H-Einsen oder H-Eins-Stilen machen . Okay? Lass mich das speichern und mir das ansehen, bevor ich weitermache. Ich habe vergessen, einen Abschnitt für unsere Geschichte an den Anfang zu setzen, also werde ich das zuerst tun. Ich gehe hier hoch. Und wie wir es zuvor getan haben an einer beliebigen Stelle unserer Vorlage eine Überschrift hinzugefügt haben, werde ich einfach das Farbschema auf fünf ändern, einen Rich-Text-Abschnitt hinzufügen, der den Standardabsatz und die Standardunterüberschrift entfernt der den Standardabsatz und , und unsere Geschichte hier oben platzieren Okay. Schauen wir uns das nochmal an. Wir haben also unsere Geschichte, den Gründer, die Entdeckung. Mir gefällt das, also werde ich mit diesen Abschnitten weitermachen und die Seite fertig bauen Offensichtlich wird es immer wieder derselbe Prozess sein immer wieder derselbe Prozess Also werde ich das etwas schneller erledigen. Also werde ich sie einfach einrichten und wie viele Teile der Geschichte haben wir dann noch? Wir haben eins, zwei, drei, vier. Okay, also ich werde das einfach so einrichten , wie ich es will, mit dem richtigen Schema, und ich werde das einfach noch dreimal duplizieren , nur um Zeit zu sparen. In Ordnung? Also jetzt haben wir eins, zwei, drei, vier, und dann muss ich nur die Bildposition wechseln Also werde ich die Bildposition auf der einen Seite nach rechts setzen und dann um zwei nach oben gehen und die Bildposition auch auf der einen Seite nach rechts setzen. Und dann geht es nur noch darum den Inhalt für jeden von ihnen auszufüllen. Also werde ich den dritten Teil der Markengeschichte hinzufügen. Gehen Sie wieder hier rein, geben Sie das Jahr ein, das wahrscheinlich die Quelle ist, machen Sie einfach noch eins in Echtzeit mit euch, und dann werde ich den Rest einfach schnell durchgehen. Okay, das sind also alle Abschnitte auf einer Seite. Da drücke ich auf Speichern. Schauen wir es uns im Vollbildmodus an. Wir können jetzt die gesamte Markengeschichte sehen. Wir können die Gründerin kennenlernen, die Reise, die sie dazu gebracht hat, Matcha an der Quelle zu entdecken, das in ihr tägliches Leben zu integrieren, dann auf der Mission, eine Marke zu schaffen , die diese Erfahrung an andere Frauen wie sie weitergibt an andere Frauen wie sie Und heute ist Matcha die erste Wahl für die moderne Wellness-Frau Auch hier wurden all diese Bilder und Texte auf der Website alle im Rahmen von Love Art erstellt . Es gibt keine Emma. Es ist eine fiktive Geschichte, aber idealerweise hättest du eine echte Markengeschichte, die du in deine Seite mit unseren Geschichten aufnehmen könntest Und wenn Sie Bilder von so hoher Qualität bekommen oder sie sogar mit Nano Banana generieren können oder selbst Kunst für die fehlenden Teile lieben, von denen Sie eigentlich keine echten Fotos haben, können Sie diese natürlich so hoher Qualität bekommen oder sie sogar mit Nano Banana generieren können oder selbst Kunst für die fehlenden Teile lieben , von denen Sie eigentlich keine echten Fotos haben, auch für Ihre Website-Bilder verwenden Und mit dieser Über uns-Seite unsere Produktseite, unsere Homepage, unsere Kollektionsseite, alles erstellt Das Letzte, was wir tun möchten, ist die Navigation unserer Website zu aktualisieren, denn wie Sie hier sehen können, wir gerade die Standardnavigation Startseite, Katalog und Kontakt. Das werden wir wahrscheinlich ändern wollen. Das werden wir also im nächsten Video behandeln, und damit sollte unser Schaufenster im Wesentlichen 10. Navigation: Ordnung, also dieses Video wird wahrscheinlich schnell sein Wir müssen nur über Navigationen sprechen und darüber , wie sie mit unserem Thema verknüpft sind Wenn es darum geht, eine Storefront auf Shopify aufzubauen, gibt es bestimmte Dinge, die innerhalb des und außerhalb des Themes liegen Und im Fall von Navigationen sie sich in der Regel außerhalb des Themas und werden mithilfe des Onlineshop-Editors aufgerufen, ähnlich wie wir es bei Produkten und Metafelds gesehen haben Okay? Also war es früher unter Online Store, aber jetzt können wir zum Inhalt übergehen. Dann finden wir unter Inhalt Menüs, und hier haben wir unser Hauptmenü. Wenn Sie sich also fragen, woher diese Artikel vor Home, Katalog und Kontakt kamen, finden Sie sie hier direkt in unserem Hauptmenü oder im Backend, werden Linklisten genannt. Da dieses Menü bereits auf unser Theme verlinkt, können wir es einfach nach Belieben anpassen , und es wird direkt auf unser Theme angewendet. Da wir also keinen großen Katalog haben, werde ich ihn entfernen oder zumindest bearbeiten und diesen Link-Artikel in Shop ändern. Und anstatt auf alle Produkte zu verlinken, werde ich ihn einfach mit unserem Flaggschiffprodukt, dem Premium-Marcher Powder, verlinken dem Premium-Marcher Powder Aber es gibt offensichtlich eine Strategie , die in Ihre Navigation einfließen Es hängt von Ihrer Marke ab und , wohin Sie Ihre Kunden leiten möchten. In meinem Fall möchte ich sie also auf das Hauptprodukt hinweisen, das ich hier verkaufen möchte. Und statt Kontakt möchte ich auch einen Link zu der Seite Über uns haben , die ich erstellt habe, unserer Markengeschichte, die derzeit in keiner anderen Navigation enthalten ist. Benutzer werden also definitiv einen Pfad benötigen, um zu dieser bestimmten Seite zu gelangen. Also werde ich das auch hier eintragen . Also werde ich auf Speichern klicken. Und wie gesagt, da diese Navigation dem Thema verknüpft ist, ich sehen, dass meine Menüelemente aktualisiert wurden, wenn ich jetzt in mein Thema gehe sollte ich sehen, dass meine Menüelemente aktualisiert wurden, wenn ich jetzt in mein Thema gehe. Mal sehen, wie diese Linkliste oder dieses Menü auf unser Thema verweist. Wenn wir auf den Header-Bereich klicken, können Sie hier sehen, dass wir all diese verschiedenen Optionen haben, und dann haben wir eine Menüoption. Hier wählen wir aus den Linklisten im Adminbereich aus, sodass ich hier klicken kann, um sie zu ersetzen Dadurch habe ich die Möglichkeit, andere Navigationen aus unserem Menübereich unseres Shops zu verknüpfen andere Navigationen aus unserem Menübereich unseres Shops Sie können hier sehen , dass dies eindeutig mit unserer Linkliste im Hauptmenü verknüpft Aus diesem Grund werden bei der Bearbeitung unserer Linkliste für das Hauptmenü unsere Änderungen direkt in unser Theme übernommen. Okay? Wenn wir uns die anderen Linklisten ansehen , die mit unserem Thema verlinkt sind, wenn wir hier runtergehen, sollten wir einige in unserer Fußzeile haben Wie du siehst, gibt es sie in unseren allgemeinen Einstellungen für den Fußzeilenbereich nicht, aber unsere Fußzeile besteht aus verschiedenen Blöcken Wie Sie hier sehen können, stammt dies aus dem sogenannten Fußzeilenmenü Wenn ich es also einfach in einem neuen Tab öffne , damit es einfacher zwischen ihnen wechseln kann, und ich zurück zu unserem Menübereich hier drüben gehe, siehst du das Fußzeilenmenü Suche und deine Datenschutzoptionen. Sie können hier sehen, dass wir eine Suche haben und Ihre Datenschutzoptionen fehlen. Vielleicht wurde diese Seite ausgeblendet, aber wir können natürlich auch hier reingehen und diese bearbeiten. Anstatt also zu suchen, was unserem Shop nicht wirklich Sinn macht, werde ich die Suche entfernen und unser Sortiment erweitern, um sie auf werde ich die Suche entfernen und unser Sortiment erweitern, die Kategorieseite für Shop All zu bringen. Wir werden das in unserer Navigation verlinken, aber nur in der Fußzeile Dann füge ich einen weiteren Link zu unserer Geschichte ein. Also können wir weitermachen, Ups, nicht Produkte, sondern Seiten, unsere Geschichte Ich werde das über die Datenschutzoptionen stellen. Und schließlich können wir die Kontaktseite, die wir aus der Hauptmenüführung entfernt haben, wieder aufrufen . Setzen Sie das hier über die Datenschutzoptionen und klicken Sie dort auf Speichern. Und dann sollten wir anfangen, all diese Änderungen hier in unserem Online-Shop-Editor oder in unserem Theme zu sehen hier in unserem Online-Shop-Editor oder in . Also wenn ich hierher klicke. Es werden immer noch die alten Informationen angezeigt. Lassen Sie mich das einfach schnell umschalten und dann wieder zurückschalten. Das ist ein kleiner Bug. Da haben wir's. Öffnen Sie ein Menü und dann können wir hier klicken, um den Titel anzuzeigen oder den Titel nicht anzuzeigen. Wenn wir auf Titel anzeigen klicken, wird standardmäßig direkt aus dem Menütitel übernommen, aber dann können wir hier, Menü oder was auch immer sagen Menü oder was auch immer um den Titel genau dort anzupassen. Wenn es also um Inklist geht, gibt es zwei Teile. Da ist die Linkliste , die wir hier in diesem Menübereich unseres Shopify-Shops eingerichtet haben, und dann ist da noch die Verlinkung dieses Menüs in unserem Um Ihnen zu zeigen, wie wir ein neues Menü erstellen und es mit unserem Thema verknüpfen würden , haben wir hier vielleicht eine zweite Spalte mit Menülinks. Also werde ich hier einen hinzufügen. Und standardmäßig verlinkt es nur auf Fußzeilenlinks, wodurch wir ein Duplikat erhalten Aber sagen wir einfach, wir haben zum Beispiel stattdessen ein neues Menü erstellt und wir sagen zweites Fußzeilenmenü, und dann können wir hier zufällige Dinge hinzufügen Lassen Sie uns einfach sagen, unsere Produkte, und dann kann jedes davon vielleicht nur ein Link zu jedem unserer Produkte sein nur ein Link zu , weil es nur vier davon gibt Also machen wir, tut mir leid, ein komplettes Marcha-Set. Was ist der nächste? Eleganter Macha-Schneebesen Okay, wenn wir zuerst den Link setzen, wird das Etikett automatisch aufgefüllt. Das ist praktisch. Premium-Marcher-Schüssel und das Marcha-Pulver selbst Vielleicht haben wir das ganz oben drauf gesetzt. Drücke dafür auf Speichern. Und jetzt, da wir diese Inklist erstellt haben, können wir sie jetzt hier in unserem Theme verlinken Also können wir hier in der Block-Einstellung klicken , um das durch unsere Produkte zu ersetzen, und dann kannst du sehen, wie das rübergebracht wird, okay? So werden Navigationen normalerweise auf Shopify-Websites durchgeführt Wir richten sie hier im Backend unserer Shopify-Website und bringen sie dann über diese Linklistenfelder in unsere Storefront, wenn ich dorthin navigiere ein und bringen sie dann über diese Linklistenfelder in unsere Storefront, wenn ich dorthin navigiere. Also können wir entweder das Menü komplett durch eine andere Linkliste austauschen oder, wenn wir nur einen Eintrag in der Linkliste ändern wollen einen Eintrag in der Linkliste ändern , gehen wir natürlich hier rein und wir können die verschiedenen Elemente hier aktualisieren Und das ermöglicht auch das Verschachteln. Wir können hier also verschachtelte Menüs mit einer Tiefe von bis zu drei Ebenen erstellen hier also verschachtelte Menüs mit einer Tiefe von bis zu drei Ebenen In Ordnung, also mach das zu. Das deckt es im Grunde ab, Leute. Ich werde die Produktliste hier entfernen. Das war nur eine Demonstration. Und das ist im Grunde unser Schaufenster, das wir erstellt haben Für dein Klassenprojekt werde ich dich später im Kurs bitten, dem Rest des Kurses zu zeigen, was du gebaut hast Aber das ist das Beispiel, durch das ich Sie in diesem speziellen Kurs geführt habe . Und im letzten Video vor dem Abschluss werde ich darüber sprechen, welche Optionen Sie jetzt für erweiterte Anpassungen haben? Wie ich im Kurs erwähnt habe, wollten wir diesen Build ohne Code erstellen. Also kein Code, keine KI, einfach den Online-Shop-Editor mit einem Premium- oder kostenlosen Theme verwenden . Aber sagen wir einfach, es gibt zum Beispiel eine Funktion, die Sie wirklich in Ihre Storefront integrieren möchten , bei der ein Bereich Ihrem aktuellen Theme nicht vorhanden Was sind dann deine Optionen? werden wir im nächsten Video behandeln. 11. Erweiterte Anpassungsoptionen: Ordnung, jetzt haben wir die Storefront für unseren Shopify-Shop mithilfe des Onlineshop-Editors erstellt für unseren Shopify-Shop mithilfe des Onlineshop-Editors mithilfe Und wie ich in diesem Kurs bereits erwähnt habe, sind wir durch die Abschnitte und die Optionen innerhalb der Abschnitte begrenzt , die in unserem bevorzugten Thema verfügbar sind, was in diesem Fall Aber wenn du aus dieser Beschränkung ausbrechen willst, habe ich bereits erwähnt, dass ich das am Ende des Kurses behandeln werde, und jetzt ist es an der Zeit, das zu tun. Und über die beiden Optionen, über die ich sprechen werde, werde ich mit Shopify-Magie und Sidekick sprechen, um dir dabei zu helfen, mithilfe von KI Änderungen vorzunehmen Und dann besteht die zweite Option darin , einen echten Entwickler einzustellen Ich habe bereits erwähnt, dass wir den Code nicht bearbeiten können, wenn wir ein Test-Theme verwenden , und wir sind auch in Bezug auf die KI-Funktionen eingeschränkt. Wenn ich hier klicke, um einen Abschnitt hinzuzufügen, gibt es hier normalerweise eine Schaltfläche, um einen Abschnitt mit KI zu generieren. Also muss ich vorerst das Prestige verlassen, weil es auf Probe steht , und euch das zu einem Thema zeigen, das nicht auf der Probe steht. Also werde ich das auf Horizon demonstrieren, also gehe ich hier rüber, um eines der Dinge zu bearbeiten, die es zu beachten gilt, und etwas, worüber ich auf meinem YouTube-Kanal spreche, ist, dass all diese Abschnitte Code im Backend haben. Wenn ich also mit der rechten Maustaste hier klicke, kann ich tatsächlich klicken, um den Code zu bearbeiten. Ich kann das von überall im Online-Shop-Editor aus tun , entweder in der visuellen Vorschau oder hier in der Seitenleiste. Ich kann den Mauszeiger über den Abschnitt bewegen. Klicken Sie mit der rechten Maustaste auf Code bearbeiten. Ich rufe diesen Code-Editor hier für mich auf, und hier ist der gesamte Code. Und Sie können hier alle Codedateien in verschiedenen Ordnern sehen . Ich werde in dieser Skillshare-Klasse nicht tief in den Code und seine Funktionsweise eingehen dieser Skillshare-Klasse nicht tief in den Code und seine Funktionsweise Ich habe tatsächlich drei verschiedene Skillshare-Kurse um die Entwicklung, Entwicklung, also Codierung von Shopify-Themes geht Entwicklung, also Codierung in denen es um die Entwicklung, Entwicklung, also Codierung von Shopify-Themes geht. In diesen Kursen gehe ich sehr detailliert darauf ein , wie Sie Ihr Theme mithilfe von benutzerdefinierter Codierung anpassen können Ihr Theme mithilfe von benutzerdefinierter Aber seit ich diese Kurse gemacht habe, gibt es in Shopify neue Funktionen zum Generieren von Abschnitten und Blöcken Wenn ich also hier drüben klicke, um einen Abschnitt hinzuzufügen, erscheint eine Schaltfläche, die wir im Prestige-Thema nicht gesehen haben, weil wir uns im Testmodus befanden, und das ist diese Schaltfläche hier zum Generieren Wie Sie hier im Vorschaubereich sehen können, wird damit beworben, dass Sie eine Idee zum Leben erwecken können, wenn Sie eine Idee haben . Sie sind also nur auf das beschränkt , was Sie hier in diesem Feld beschreiben können , um es Ihrer Aufforderung hinzuzufügen. Das ist also etwas , mit dem man herumspielen kann. Es wird nicht unbedingt perfekt sein, aber wir können es jetzt ausprobieren. Also, einer der Abschnitte, die ich vor der Verwendung dieses Tools zur Generierung von Sperren in Shuba Fi erstellt habe dieses Tools zur Generierung von Sperren in Shuba Fi besteht darin, mir einen Abschnitt mit voller Breite zu erstellen , der zwei Bilder zeigt, wobei jedes Bild genau die Hälfte der Breite des Abschnitts einnimmt , okay Ich klicke darauf auf Senden und dann lassen wir Shopify Magic oder Sidekick Wie Sie sehen können, erstellt es Code für uns im Backend, aber wir können uns diesen zusammen mit den Abschnittseinstellungen und allem, wenn die Verarbeitung abgeschlossen ist, in der Vorschau ansehen Abschnittseinstellungen und allem wenn die Verarbeitung abgeschlossen ist Und wie Sie hier sehen können, wurde eine Vorschau unseres Blocks generiert. Technisch gesehen ist es ein Block. Hoffentlich kann ich es immer noch tun, wenn ich hier rausklicke . Technisch gesehen erstellt es einen Block, aber wenn Sie nur einen Block in einen leeren Abschnitt einfügen, erhalten Sie im Grunde einen Abschnitt. Wenn ich also hierher zurückkehre, möchte ich sicherstellen dass ich das zuerst teste, bevor ich auf Speichern klicke, denn wenn ich auf Speichern , wird dieser Abschnitt gesperrt und ich kann keine weiteren Anweisungen geben. Nur um hier zu beachten, Leute, dass dies eine ziemlich neue Funktion ist und sich wahrscheinlich weiterentwickeln wird. Wenn Sie sich das also bis weit in die Zukunft hinein ansehen, ist es vielleicht fortgeschrittener oder die Benutzeroberfläche könnte anders sein. Ich wollte nur darauf hinweisen, dass sich das in Zukunft wahrscheinlich stark ändern wird. Zum Zeitpunkt der Aufnahme funktioniert das so. Wie Sie sehen können, gibt es mir zwei Steckplätze, um Bilder einzufügen. Also lass uns einfach reinstellen, ich werde einfach Bilder von diesen Mädchen einbauen. Es ist nicht wirklich wichtig. Wir demonstrieren hier nur, oder? Und dann schauen wir uns an, welche Optionen es uns bietet , damit wir die Bildhöhe erhöhen können, okay? Und die Lücke zwischen den Bildern, ich wollte keine Lücke, aber ich kann sie tatsächlich hinzufügen , wenn ich will, und dann einen Randradius hinzufügen. Und dann kann ich auch die Positionierung auf dem Handy kontrollieren, sodass ich sie so einrichten kann, dass sie auf dem Handy nebeneinander angezeigt wird, wenn ich will, oder gestapelt Und das sind nur Einstellungen , von denen man annahm, dass wir sie wollen. Es ist also nur eine Vermutung , aber ich wollte einen kompletten Abschnitt Ich wollte etwas, das sich über die gesamte Breite erstreckt. Lassen Sie mich also sehen, ob ich es mit weiteren Anweisungen dazu bringen kann . Ich sage: Gut. Aber kannst du es wirklich in voller Breite machen? Ich möchte nicht die übliche Polsterung links und rechts haben. Und dann, nur um ganz genau zu sein, sollte der linke Rand des linken Bilds bündig der linken Seite anliegen und umgekehrt auf der Ordnung. Drücke die Eingabetaste und lass uns sehen, ob es meine Änderungen tatsächlich versteht und sie für die Breite richtig macht. In Ordnung, es sieht also so aus, als ob es richtig verstanden wurde. Das Schlechte an der Bereitstellung von Folgeanweisungen dieses KI-Tool ist, dass es alle vorherigen Einstellungen löscht. Je nachdem, wie komplex der Abschnitt ist, kann dies also ziemlich nervig sein. Lassen Sie mich diese Bilder noch einmal hinzufügen. Okay. Und das ist im Grunde das, wonach ich gesucht habe. Also ja, es hat gute Arbeit für einen einfachen Abschnitt wie diesen geleistet. Und so können Sie die KI-Funktionen von Shubafi verwenden , um den gewünschten Look zu kreieren. Ich werde es auf dem Handy nebeneinander stellen. Und vielleicht wollten wir auf beiden Seiten etwas Text über das Bild legen. Machen Sie das verlinkbar, wir könnten diese Anweisungen auch hier bereitstellen Es ist jedoch wichtig zu beachten, dass Sie, wenn Sie auf Hier speichern klicken, dieser Abschnitt gesperrt Wenn ich also auf Speichern klicke, kann ich keine weiteren Eingabeaufforderungen erstellen, aber ich kann den Code bearbeiten, wenn ich weiß, wie man Code bearbeitet Ich kann also nicht erneut antworten, aber ich kann reingehen und den Code auf diese Weise bearbeiten Aber auch hier ist das Problem, dass Sie den Code offensichtlich verstehen müssen, um damit arbeiten zu können Also noch einmal, wenn Sie lernen möchten, wie man programmiert, ist dies das Nonplusultra in Bezug auf die Anpassung von Themes. Und hier auf Skillshare gibt es Kurse , die ich erstellt habe Sie können teilnehmen, wenn Sie die eigentliche Codierung von Shaba Fi-Themen verstehen möchten die eigentliche Codierung von Shaba Fi-Themen In diesem Kurs haben wir uns jedoch speziell darauf konzentriert eine Storefront ohne benutzerdefinierte Codierung aufzubauen Nun, nur um mit dem KI-Kram fertig zu werden, wenn wir hier rüber gehen, sollte es hier einen kleinen Button geben. Das ist ziemlich neu im letzten Jahr zum Zeitpunkt der Aufnahme. Ich kann hier reingehen und nach Änderungen fragen. Ich habe festgestellt, dass das nicht so gut funktioniert, wie es nur hier zu generieren weil ich denke, es ist ein neueres Feature, aber ich meine, ich sage voraus, dass es einfach besser werden wird , so wie all diese KI-Tools es sind. Füge über jedem Bild eine Schaltfläche die ich an einer anderen Stelle in meinem Shop verlinken kann. Drücken Sie dort die Eingabetaste. Also, wie ich schon sagte, Sie können hier keine weiteren Eingabeaufforderungen machen, aber sobald Sie einen KI-Abschnitt generiert haben, unabhängig davon, ob er von KI generiert wurde oder nicht, können Sie diesen kleinen Sidekick-Theme-Editor verwenden Und lass uns hier drüben nachschauen. Ich helfe Ihnen dabei, eine anklickbare Schaltfläche über den Bildern in diesem Abschnitt hinzuzufügen über den Bildern in diesem Abschnitt Lassen Sie mich das Thema anpassen, um Schaltflächen hinzuzufügen. Okay. Hat es geklappt, wenn wir hier rüber gehen? Ja. Okay, es wurden also Knöpfe links und rechts hinzugefügt. Also ja, wie ich bereits erwähnt habe, habe ich festgestellt, dass ich viel bessere Ergebnisse erziele , wenn ich den Abschnitt mit KI von Grund auf neu generiere den Abschnitt mit KI von Grund auf neu , indem ich das Eingabeaufforderungsfeld hier verwende. Ich empfehle also auf jeden Fall gut nachzudenken, bevor Sie auf Speichern klicken, denn ja, Ihre einzigen Optionen an dieser Stelle sind benutzerdefinierter Code oder Verwendung dieser Side-Kick-Funktion zum Nachfragen von Änderungen. Okay. Um das Ganze abzurunden, was ist, wenn die in Ihrem Thema und Ihrer KI verfügbaren Abschnitte nicht dazu beitragen, genau das gewünschte Ergebnis zu erzielen , und Sie ein zusätzliches Maß an Anpassung wünschen? Nun, wie bereits erwähnt, besteht die höchste Stufe der Anpassung, die Sie bei Themes vornehmen können , darin, den Code zu bearbeiten. Wie wir bereits gesehen haben, wird das gesamte Thema, einschließlich der Abschnittseinstellungen, angezeigt, wenn wir in einem beliebigen Block auf Code bearbeiten klicken gesamte Thema, einschließlich der Abschnittseinstellungen Wenn ich also hier nach unten scrolle, können Sie im Schema hier sehen, dass das alles JSON-Code ist Aber nur um zu demonstrieren, dass sogar die Einstellungen innerhalb des Themes alle im Code geschrieben sind. Sie haben also Zugriff auf das gesamte, sagen wir, Backend Ihres Shopify-Themas, einschließlich der Optionen, die im Theme-Customizer verfügbar sind Und genau das mache ich als Shopify-Entwickler. Ich helfe Händlern auf Shopify dabei, mithilfe von Code erweiterte Anpassungen an ihrem Shop vorzunehmen erweiterte Anpassungen an mithilfe von Code erweiterte Anpassungen an ihrem Shop , da viele Verkäufer ihre Shops außerhalb der verfügbaren No-Code-Optionen anpassen möchten ihre Shops außerhalb der verfügbaren No-Code-Optionen An dieser Stelle komme ich als Entwickler ins Spiel. Ich lasse meine Website hier, damit Sie sie sich ansehen können, falls Sie interessiert sind. Es ist Christopher Dodd.com Sie können hier die Marken sehen, mit denen ich gearbeitet habe und einige Testimonials von früheren Kunden, aber das Prinzip ist, dass Sie, wenn Sie erweiterte Anpassungen wünschen, entweder programmieren lernen oder Egal, ob das ich oder jemand anderes ist, den Sie finden können, das ist die beste Option für die vollständige Anpassung Ihres Shops Und nur um diese Lektion hier abzuschließen Wenn Sie ein Shopify-Händler sind mehr über erweiterte Anpassungen und die Funktionsweise der Technologie auf der Shopify-Plattform erfahren möchten erweiterte Anpassungen und die Funktionsweise der Technologie , habe ich auch einen YouTube-Kanal, den Sie unter dem Schrägstrich Chris Dodd Shopify auf youtube.com finden youtube.com Und auf diesem Kanal kannst du mehr darüber erfahren, was ich mache und ähnliche Themen wie das, was ähnliche Themen wie Ich habe hier zwei Videos, die sich sehr gut mit den Inhalten dieses Kurses überschneiden , was die Verwendung des Online-Shop-Editors und die Verwendung von Sidekick und Magic angeht die Verwendung des Online-Shop-Editors . Aber ich habe auch eine ganze Reihe anderer Videos verschiedenen technischen Aspekten Ihres Shopify-Shops von jemandem, der seit über sechs Jahren an der Plattform arbeitet Okay, also wenn das geklärt ist, lass uns zum Abschluss des Skillshare-Kurses kommen, und ich werde im nächsten Video auch mit dir über dein Klassenprojekt sprechen im nächsten Video auch mit dir über dein Klassenprojekt 12. Schlussbemerkung und Kursprojekt: Damit ist dieser Kurs Anpassung des Shopify-Themes Für Ihr Klassenprojekt empfehle ich Ihnen, Ihre eigene Storefront auf Shopify zu erstellen und dabei die in diesem Kurs vorgestellte Methode zu verwenden Wenn Sie ein richtiges Geschäft haben, würden Sie dafür natürlich Ihr eigenes Geschäft verwenden Aber wenn Sie diesen Kurs nur zum Üben besuchen, können Sie kostenlos einen sogenannten Development Store einrichten. Du kannst das tun, indem du dich für ein kostenloses Partnerkonto registrierst und es über das Dev-Dashboard erstellst. dann bei der Einrichtung Ihres Shopify-Shops Wählen Sie dann bei der Einrichtung Ihres Shopify-Shops ein Theme aus dem Shopify Theme Store aus und verwenden Sie den Onlineshop-Editor, um Theme Ihrer Wahl anzupassen Sie haben Ihre Storefront fertiggestellt teilen Sie sie mit der Klasse im Bereich Klassenprojekt auf die Weise, wie Sie sich am wohlsten fühlen, sei es nur durch Screenshots oder über einen direkten Link zum Wenn dir dieser Kurs gefällt, hinterlasse eine positive Bewertung und sieh dir einige meiner anderen Kurse hier auf skillshare.com an, wo ich mich mit Webentwicklung, Shopify und vielem Shopify Danke wie immer fürs Zuschauen und ich werde euch beim nächsten