Erstelle einfach einen Online-Shop mit Webflow, welches dir beim Designen die größten Freiheiten gibt, im Vergleich zu anderen Anbietern, ohne eine Zeile Code schreiben zu müssen. Wie du das alles machst und was alles möglich ist, erkläre ich dir in diesem Tutorial.
Als Erstes schauen wir uns an, wie wir einen Online-Shop einrichten können und werfen dann einen ausführlichen Blick darauf wie wir Produkte und Kategorien für unseren Shop erstellen und verwalten können. Anschließend zeige ich dir, wie du die Produktseiten deines Shops dynamisch designst und Produkte auf deiner Webseite anzeigen lassen kannst. Auch wie du Gutscheine erstellen kannst, sowie alles zur Zahlungsmethode, Versand und Co. einstellst, werden wir uns anschauen. Abschließend gehen wir dann noch darauf ein, wie wir den Shop veröffentlichen und dann Bestellungen verwalten können. Dieser Artikel ist der letzte Teil meiner Webflow Tutorial-Serie. Ich rate dir vorher mind. den zweiten Teil der Tutorial Serie anzuschauen, wo ich dir den Webflow Editor erkläre, auf welchen ich in diesem Artikel nicht allgemein eingehen werde.
Online-Shop einrichten
Wenn wir einen Online-Shop in Webflow erstellen wollen, müssen wir grundsätzlich eine Webseite erstellen und im Editor öffnen. Hier ist es sinnvoll, wenn man mit einer Vorlage arbeitet, eine zu verwenden, wo die Online-Shop Funktionen mit dabei sind. Dies erkennen wir an dem Shop-Symbol bei der Vorlage. Das macht den Start einfacher. Aber schlussendlich kannst du zu jeder Webflow Seite, einen Online-Shop hinzufügen. Hier finden wir alles Relevante am linken Rand im Editor. Hier können wir direkt alle Produkte, Kategorien, Gutscheine und Schließlich auch Bestellungen verwalten. Ganz oben haben wir aber auch einen Guide, der uns Hilft einen Shop einzurichten und schließlich zu veröffentlichen. Klicken wir auf diesen, können wir als Erstes unsere geschäftliche Adresse angeben. Diese wird dann auf Paketen, Rechnungen und Co. angezeigt beim Kunden. Neben der Adresse können wir hier auch einen Namen für unseren Store eingeben, sowie die Währung festlegen. Neben der Währung können wir auch noch das Land und Sprache einstellen, in welchem unser Shop verfügbar sein soll, sowie wie Preise vom Format aussehen sollen. Hier können wir auch eine eigene Formatierung eingeben, wo aber die Standardeinstellung meistens zur Währung passt. Anschließend können wir hier auch den Guide deaktivieren, welcher meiner Meinung nach aber sehr praktisch ist, um den Überblick nicht zu verlieren. Zum Schluss können wir hier noch die Einheit für Maße einstellen, wo in Deutschland Metric System Standard ist, also dass Größen in CM gerechnet werden und Gewicht mit KG. Haben wir die Sachen eingestellt, erkennen wir am grünen Haken im Guide, das es erledigt ist. Als Nächstes wollen wir Produkte zu unserem Store hinzufügen, diesen dann Designen und Launchen. Das schauen wir uns jetzt in den folgenden Kapiteln noch ganz genau an.
Produkte & Kategorien erstellen & verwalten
Wenn wir einen Online-Shop führen wollen, ist das wichtigste natürlich unsere Produkte, welche wir verkaufen wollen. Diese können wir im Editor unter Online-Shop am linken Rand, in einem eigenen Bereich verwalten. Das ähnelt sehr dem Inhalt von Kollektionen, wenn wir ein CMS in Webflow erstellen. Falls dich das interessiert, kannst du auch das vorherige Video dieser Tutorial Serie anschauen. Beim Menüpunkt der Produkte, sehen wir auch neben dem Namen, wie viele Produkte sich gerade in unserem Online-Store befinden. Hier können wir, wenn wir jetzt auf das Zahnrad klicken, einstellen, was für Informationen auf den Produktseiten jeweils zu einem Produkt angezeigt werden können, bzw. wir beim Erstellen eines Produktes angeben können. Hier haben wir standardmäßig schon die wichtigsten Dinge eingestellt, also bspw. Name, Beschreibung, Bilder, Preise, Mengen oder Versand. Hier können wir aber auch neue individuelle Felder eingeben, was bei Besonderheiten zum Beispiel spannend ist. Z.B. wenn wir Schuhe verkaufen wollen, sollten auch unterschiedliche Schuhgrößen angezeigt werden und auswählbar sein. Auf der rechten Seite sehen wir auch die Vorschau, wie wir im nächsten Schritt dann ein Produkt erstellen können und welche Informationen wir dort eingeben können. Wenn wir Online-Produkte anbieten wollen, können wir hier auch Downloads nach dem Kauf bereitstellen. Wo die Leute dann eine externe Datei herunterladen können. Du merkst, hier hast du viele verschiedene Möglichkeiten an Optionen, welche bei deinen Produkten verfügbar sein können. Wir können jedes Feld auch nachträglich nochmal bearbeiten oder löschen. Diese Optionen solltest du einstellen, bevor du anfängst Produkte zu erstellen, da dies nachträgliche Korrekturen minimiert. Wir wollen jetzt aber unsere Produkte auch erstellen und bestehende verwalten. Dafür klicken wir einfach auf den Productnamen im Menü und es öffnet sich eine Liste, mit allen unseren Produkten. Hier sehen wir verschiedene Parameter, welche wir über die Nadel am rechten Rand auch individuell einstellen können. Am oberen Rand, können wir die Produkte auch durchsuchen und mehrere auswählen, um einfach mehrere löschen oder deaktivieren zu können. Daneben können wir auch Produkte in- oder exportieren und nochmal die Einstellungen der Parameter öffnen, welche wir uns gerade angeschaut haben. Ganz rechts oben können wir jetzt aber auch ein neues Produkt erstellen. Hier können wir jetzt für das neue Produkt alle Felder ausfüllen, die wir vorhin eingestellt haben. Unter Optionen können wir beim Template auch verschiedene Größen für das Produkt einstellen, wo wir dann auch für die verschiedenen Größen unterschiedliche Bilder und Preise festlegen können. Haben wir das erfolgreich gemacht, können wir über Create, dass Produkt direkt veröffentlichen oder über den Pfeil daneben, es als Entwurf speichern, um es noch nicht im Shop anzuzeigen, aber im Editor zu einem späteren Zeitpunkt weiterbearbeiten oder veröffentlichen zu können. Wir können jedes Produkt nachträglich auch nochmal komplett bearbeiten, in dem wir auf dieses in der Übersicht klicken. Neben den Produkten, können wir jetzt auch Kategorien erstellen, in welchen wir Produkte gruppieren können, um eine thematische Struktur in unserem Shop aufbauen zu können. Diese finden wir in einem eigenen Bereich, unter den Produkten und vom Prinzip funktionieren diese genau gleich. Hier können wir über die Einstellungen verschiedene Felder für die Kategorien einstellen, welche wir dann in der Übersicht, beim Erstellen von neuen, ausfüllen können. Bei den Einstellungen der Produkte, können wir dann die Kategorien als dynamische CMS als Feld verlinken, was uns beim Erstellen von neuen Produkten ermöglicht, direkt diese zu einer Kategorie hinzufügen zu können. So können wir einfach Produkte und Kategorien verwalten.
Shopdesigns verwalten
Doch jetzt ist es natürlich auch wichtig, wie die Produkte in unserem Online-Shop dargestellt werden. Klicken wir auf die Seiten im Editor, am linken Rand haben wir jetzt einen Extra-Bereich für unseren Online-Shop. Hier finden wir eine dynamische Seite für unsere Produkte und Kategorien. Diese funktionieren genau gleich wie CMS Seiten, welche wir mit dynamischen Inhalten füllen können. Wir können jetzt bei den Produkten, normal mit dem Editor eine Beispielseite erstellen, für ein Produkt, wie seine einzelne Produktseite im Shop aussehen soll. Wir können dann über die Einstellungen der einzelnen Elemente, wie z.b. dem Namen, diesen mit einem bestimmten Parameter von unseren Produkten verknüpfen und dann wird immer dieser Parameter von dem jeweiligen Produkt dort angezeigt. So können wir Bilder, Preise, Namen, Texte und alles andere, einfach dynamisch verknüpfen und haben trotzdem die komplette Freiheit, wie unsere Produkt oder Kategorieseiten aussehen sollen. Am oberen Rand, können wir auch zwischen unseren verschiedenen Produkten oder Kategorien wechseln, um zu sehen, wie andere in dem Design aussehen. Das ist super wichtig, dass Design so zu erstellen, das alle Produkte gut in diesem aussehen. Ändern wir was an dem Design, wird es bei jeder Produktseite angewendet. Wir können natürlich auch normale Elemente auf der Seite, wie ein Menü, Footer oder generelle Informationen zum Shop hinzufügen, welche nicht dynamisch sind und bei jeder Produktseite, dann gleich aussehen. Auf der Produktseite solltest, du natürlich auch den “zum Warenkorb hinzufügen” Button nicht vergessen. Auch wie der Warenkorb aussieht und die Bezahlseite, können wir unter Seiten im Menü auswählen und komplett individuell bearbeiten. Dadurch haben wir komplette Freiheit zu gestalten, wie die Experience für den Kunden beim Einkaufen ist. Sowas bietet aktuell kein anderer Anbieter so frei an, wo man nicht Code schreiben muss. Hier haben wir dann auf den jeweiligen Seiten besondere Elemente, wie Schaltflächen für verschiedene Zahlungsmethoden und eine Produktübersicht und Preiszusammenfassung. Hier haben Online-Shop kompatible Vorlagen meistens auch schon ein super design, was du einfach individuell noch anpassen kannst. Du hast hier zwar alle Freiheiten, wo du aber auch immer doppelt prüfen solltest, ob alle Funktionen auf der Seite sind, die Notwendig sind. Denn es gibt nichts Blöderes, wenn jemand ein Produkt bei dir kaufen will, aber bspw. die Bezahlungsschaltfläche fehlt. In den Einstellungen von Webflow, welche wir über das Zahnrad am linken Rand öffnen können, können wir unter Mail auch individuelle Einstellungen zu E-Mails welche Kunden bekommen, nach dem Kauf eines Produktes zum Beispiel. Wo wir auch individuelle Nachrichten und Co. einfügen können. Wir haben jetzt die Produktseiten und Shop Funktionen designt, aber natürlich sollen unsere Produkte auch auf unseren normalen Seiten, der Webseite zu sehen sein. Dafür können wir einfach Collections Lists als Element auf unsere normale Webseite ziehen und dort unsere Produkte als Datenbank verknüpfen. Wenn wir jetzt in ein Feld der Kollektion bspw. ein Bild oder Text hinzufügen, können wir diese, wie auf den Produktseiten, mit einem bestimmten Parameter unserer Produkte verknüpfen und dann werden diese dynamisch angezeigt. Hier können wir dann auch alles wieder selbst designen und in den Einstellungen der Collection List auch festlegen, nach was für Kriterien Produkte angezeigt werden sollen und wie diese in der Liste sortiert werden. So können wir unsere Produkte auch einfach auf unserer Startseite oder individuellen Seiten anzeigen. Wenn du mehr zum Thema Collection Lists und dynamischen Inhalten erfahren willst, kannst du dir auch gerne das vorherige Video von dieser Tutorial-Serie anschauen, wo ich dir erkläre wie du in Webflow CMS Datenbanken erstellen kannst.
Auf meinem Instagram-Account @simontutorial habe ich dir einige spannende Designs vorgestellt, wie so ein Shop mit Webflow aussehen könnte, damit du etwas Inspiration erhalten kannst. Folge uns auf Instagram um keine weiteren Bonusinhalte zu allen unseren Tutorials mehr zu verpassen.
Gutscheine
Fast jeder Shop betreibt heutzutage Marketing mit besonderen Rabatten und Gutscheine. Sowas können wir auch in Webflow erstellen, im Shop-Bereich im linken Menü, in einem ganz eigenen Bereich. Hier haben wir eine Liste aller erstellen Gutscheine und können diese verwalten. Aber als Erstes schauen wir uns jetzt an, wie wir einen neuen Gutschein erstellen können. Dafür klicken wir am oberen rechten Rand auf das Plus, wo wir dem neuen Gutschein einen Namen und Notizen geben können. Das wichtigste, den Gutscheincode, können wir hier dann auch individuell erstellen oder einen neuen Code generieren lassen. Hier solltest du darauf achten, dass du keinen Code doppelt verwendest. Unter Details können wir dann festlegen ob der Gutscheincode den Preis mit einem bestimmten Prozentsatz reduziert oder ob ein bestimmter Betrag abgezogen wird. Unter Datum können wir dann festlegen, von wann bis wann der Gutscheincode funktioniert oder ob er für immer funktionieren soll, sowie wie oft der Gutscheincode verwendet werden kann. Ganz unten können wir auch einfach immer den Gutscheincode aktivieren oder deaktivieren. In der Gutscheinübersicht sehen wir dann auch alle Gutscheine, wo wir auch sehen, ob diese gerade aktiv sind und wie viel Prozent und Co. diese abziehen. Hier können wir über die Nadel auch individuell einstellen, was wir hier sehen wollen. Wir können alle Gutscheine nachträglich natürlich auch nochmal bearbeiten, in dem wir diese hier einfach erneut auswählen. Die Gutscheincodes kannst du jetzt verbreiten, wie du es willst, sei es als Text auf deiner Webseite oder über Social Media Kanäle. Was du als Letztes aber nicht vergessen solltest, ist auf der Checkout-Seite, das Discount Feld hinzuzufügen, damit die Kunden dann beim Bezahlen auch einen Gutscheincode eingeben können. Du findest das Discount-Feld als eigenes Elemente über das plus, wenn du die Checkout-Seite bearbeitest. So einfach kannst du auch Gutscheine in deinem Webflow Online-Shop verwenden.
Shop Einstellungen (Zahlungsmethoden, Versand, Steuern & Co.)
Was bei einem Shop auch sehr wichtig sind, sind die Sachen, die im Hintergrund laufen, also welche Zahlungsmethoden verfügbar sind, sowie der Versand, Steuern und vieles mehr. Das können wir alles über die Einstellungen am linken Rand, in einem eigenen Bereich einstellen. Die allgemeinen Einstellungen haben wir schon beim Einrichten des Shops besprochen. Unter Payment haben wir jetzt die Möglichkeit, entweder eine Bezahlung mit PayPal zu ermöglichen oder eine Kreditkartenzahlung, wo auch Google und Apple Pay drunter laufen einzurichten. Dafür brauchen wir entweder einen Account bei Stripe oder PayPal, welchen wir hier verbinden müssen. Hier müssen wir natürlich geschäftliche Konten haben, da wir ja richtig geschäftsfähig mit dem Verkaufen von Produkten sind. Wir müssen einen von beiden auf jeden Fall verbinden, um unseren Online-Shop zu veröffentlichen. Wir können hier nach dem Verbinden, die Verbindung auch immer nachträglich bearbeiten oder wieder entfernen. Im Bereich Checkout, müssen wir diese Funktionen für unseren Online-Shop aktivieren, um auf die Checkout-Seite, welche wir vorhin designt haben, gelangen zu können. Dafür müssen wir eine Zahlungsmethode aktiviert haben und einen Webflow Premium Online-Shop Abo haben, später noch mehr dazu. Unter Shipping können wir jetzt unseren Versand für jedes Land individuell einstellen. Hier können wir einzelne Länder oder mehrere Länder wählen und dann festlegen, was für einen Versand wir dafür anbieten können, bzw. nach was sich der Versandpreis richtet. Hier müssen wir dann einen Namen für die jeweilige Versandmethode einstellen und können noch individuelle Werte für diesen Eingeben. Wenn wir bspw. sagen, dass der Versandpreis nach Größe oder Gewicht geht, können wir hier festlegen, wie hoch der Preis für die verschiedenen Größen ist. Wir können hier aber auch bspw. den Versandpreis nach Produktpreis festlegen, womit wir bspw. einfach sagen können, dass der Versand ab einem Wert von 100 € kostenlos ist, was die Kunden vielleicht dazu motiviert, mehr einzukaufen. In der Übersicht sehen wir dann natürlich alle angelegten Versandländer und können die nachträglich immer nochmal bearbeiten. Im nächsten Bereich können wir jetzt noch Steuern festlegen, also ob diese in unseren Preisen enthalten sind. Hier können wir für verschiedene Länder andere Steuersätze erstellen. Hier berechnet dir Webflow automatisch die richtigen Steuern für das Land, aber falls etwas falsch sein sollte, bist du als Shopbetreiber immer noch verantwortlich dafür. Unter Benachrichtigungen können wir jetzt noch einstellen, dass wir über neue Bestellungen benachrichtigt werden sollen, damit wir die Produkte bspw. versenden können. Hier können wir individuelle E-Mail-Adresse eingeben, an welche diese Benachrichtigungen gesendet werden. Hier können wir aber auch einstellen, welche E-Mails der Kunde erhält, wenn er eine Bestellung getätigt hat. Also bspw. die Rechnung und wenn das Produkt verschickt wurde. Als letztes können wir unter Integrationen auch unseren Online-Shop mit Drittanbietern verbinden. Wo du dich bspw. mit Google oder Facebook verbinden kannst, um deine Produkte darüber auch via. Werbeanzeigen oder der Suche zu verbreiten. Hier können wir uns aber auch mit Shippo verbinden, was automatisch alle unsere Bestellungen mit Versanddiensten verbindet. Wie Shippo genau funktioniert, findest du auf der offiziellen Seite von denen heraus. Die ganzen Einstellungen, die wir in diesem Kapitel angeschaut haben, sind essenziell für deinen Shop und solltest du vor der Veröffentlichung detailliert durch gehen, damit alles richtig ist und es nicht zu schwerwiegenden Fehlern für dich in der Zukunft kommt.
Shop veröffentlichen
Wir haben jetzt alle wichtigen Aspekte für das Erstellen eines Online-Shops mit Webflow besprochen. Jetzt wollen wir ihn natürlich auch veröffentlichen. Dafür müssen wir im ersten Schritt die Webseite veröffentlichen. Um einen öffentlichen Online-Shop über Webflow zu hosten, musst ein Online-Shop Abo für die Seite abschließen. Hier bietet dir Webflow 3 verschiedene Preispläne an, welche sich von den Transaktionsgebühren unterscheiden, also wie viel sich Webflow bei jeder Bestellung als Gebühr bei dir erhebt und wie viel Geld du über deinen Online-Shop verdienst. Die Online-Shop-Pläne beinhalten auch immer einen normalen Webseiten-Plan, welchen man erwerben kann, wenn man mehr Funktionen für die Webseite haben will, aber keinen Online-Shop betreibt. Über diesen Link kommst du auch nochmal detailliert zu allen Preisen und im ersten Teil dieser Tutorial Serie, habe ich auch noch genauer über die verschiedenen Preise gesprochen. Haben wir jetzt einen Premium-Plan, müssen wir als Erstes den Checkout in den Einstellungen unseres Shops aktivieren, damit die Besucher Produkte aus dem Warenkorb kaufen können. Jetzt müssen wir unsere Seite nur noch normal über Publish am oberen rechten Rand veröffentlichen und unser Onlineshop sollte funktionieren. So einfach können wir den Shop dann veröffentlichen. Vor der Veröffentlichung solltest du natürlich sicher gehen, dass deine Produkte, Designs und Einstellungen stimmen.
Bestellungen verwalten
Nach der Veröffentlichung fehlt jetzt noch ein letzter Aspekt, nämlich wenn Personen etwas in unserem Shop kaufen, können wir alle Bestellungen auch verwalten. Dafür gehen wir in unseren individuellen Editor bei Webflow, wo wir auch unsere Produkte und Forms, sowie Seiten verwalten können. Zu den Orders kommen wir auch direkt über den Online-Shop Bereich. Hier sehen wir jetzt in einer Liste, alle Bestellungen mit Bestellnummer, Namen des Kunden, sowie das Datum der Bestellung und was er bestellt hat. Unter Status sehen wir auch immer, wo sich die Order gerade befindet, also ob wir sie versendet haben, sie zurückgeschickt wurde oder die Bestellung gerade erst eingegangen ist. Ganz oben im Orders-Bereich sehen wir auch wie viele Bestellungen wir aktuell offen haben und wie viel Geld wir mit diesen verdient haben. Wir können oberhalb natürlich auch nach einer bestimmten Bestellung suchen und die Bestellungen auch individuell sortieren. Haben wir auf eine Bestellung geklickt, sehen wir auch genau, welche Produkte der Kunde bestellt hat, sowie seine Adresse und Bezahlinformationen, was für den Versand relevant ist. Am oberen rechten Rand können wir dann festlegen, ob die Bestellung erfolgreich versendet, beendet oder zurückgeschickt wurde. So verlieren wir nie den Überblick über jede Bestellung. Wir haben hier auch eine History, wo wir sehen, zu welchem Zeitpunkt wir die Order erhalten haben und verschickt haben. Falls unser Kunde keine Bestellbestätigung erhalten hat, können wir diese auch am oberen rechten Rand erneut senden. Das war jetzt nur ein kleiner Einstieg, wie du deine Bestellungen im Webflow Editor verwalten kannst. Das Thema ist natürlich noch wesentlich komplexer und würde den Rahmen des Videos sprengen. Aber du solltest dir jetzt vorstellen können, wie das funktionieren könnte.
Jetzt weißt du wie du mit Webflow einen individuellen Online-Shop erstellen kannst. Falls du wissen willst, wie man dynamische Inhalte, den Webflow Editor an sich oder dein Webflow Account verwendest, dann schau doch auch in den anderen Artikeln dieser Tutorial Serie vorbei, Link zu allen hier. Um keine neuen Tutorials mehr zu verpassen, kannst du meinen YouTube-Kanal gerne kostenlos abonnieren. Über das Teilen des Artikels freue ich mich immer sehr. Falls du noch Fragen oder Feedback haben solltest, kannst du dieses gerne in den Kommentaren hinterlassen, bis zum nächsten Mal.
