Webflow ist ein Hybrid aus CMS und Homepage-Baukasten. Im Gegensatz zu herkömmlichen Website-Buildern reduziert die Anwendung das Webdesign nicht auf ein absolutes Minimum, sondern verlangt Ihnen ein Grundverständnis für Programmiervorgänge ab. Somit ist Webflow komplexer und bietet unter anderem die Möglichkeit, einen eigenen Onlineshop zu erstellen. Wie genau das funktioniert, entnehmen Sie diesem Artikel.
<h2 id="Vorteile von Webflow" data-headline="Vorteile von Webflow"><span class="first_id_number">1.</span>Vorteile von Webflow</h2>
Zwar scheint es zunächst viele Alternativen zu geben. Doch bei näherem Hinsehen steht Webflow als Hybrid zwischen Baukasten und CMS alleine da. Die Vorteile des Tools können Sie https://www.02100.com/ratgeber/10-fakten-ueber-webflow sowie der folgenden Tabelle entnehmen:
- keine Programmierer benötigt: Mit Webflow realisieren Sie selbst aufwendige Vorstellungen ohne Programmierer.
- Die Arbeit mit Quellcode entfällt weitestgehend.
- Selbst Erweiterungen fügen Sie einfach durch Vorlagen zu den Webflow-Seiten hinzu.
- keine stetigen Updates: Wenn Sie bereits mit anderen Systemen gearbeitet haben, wissen Sie, dass Updates an der Tagesordnung stehen. Und das kann viel ruinieren. Webflow verfolgt einen Ansatz ohne Plugins, wodurch Ihre Webseite stabiler und zuverlässiger wird.
- keine fehleranfälligen Plugins: Es mag seine Vorteile haben, für jede Anforderung ein Plugin zu installieren. Doch zu viele Schnittstellen aus externen Quellen machen Ihre Seite fehleranfällig. Bei Webflow gibt es weniger bewegliche Teile, um die Website zu stabilisieren.
- keine Sicherheitslücken: Anders als bei gängigen CMS müssen Sie eventuelle Sicherheitslücken nicht selbstständig schließen oder jemanden für viel Geld damit beauftragen. Webflow überwacht Ihre Website, indem es Server und System aktuell hält.
- schnelle Ladezeiten: Auch hinsichtlich der Performance ist Webflow vorne mit dabei. Der Quellcode ist effizient, sauber und folgt neuen Standards, was sich positiv auf die User Experience auswirkt.
- kurze Projektzeiten: Mit Webflow erstellen Sie Webseiten deutlich schneller, weil Projekte kein aufwendiges Setup benötigen. Ebenso entfallen Kompatibilitätsprobleme, die unnötig Budget und Zeit verbrauchen.
- einfache Inhaltspflege: Das CMS von Webflow ist benutzerfreundlich. Sie begeben sich in den Editor-Modus, klicken auf einen Text Ihrer Webseite und ändern ihn. Genau so verfahren Sie auch mit Bildern.
- Erweiterungen: Egal, ob es um eine individuelle Entwicklung oder ein gekauftes Template geht. Mithilfe von Custom Code können Sie fehlende Funktionen bei Webflow integrieren. Erweitern Sie Ihre Seite beispielsweise um Mitgliederbereiche oder binden Sie sie an weitere Datenbanken an.
- inklusives Hosting: Bei Webflow müssen Sie sich nicht um das Hosting kümmern, weil dieses wahlweise inklusive ist. Somit entfällt auch der Aufwand, ein CMS auf einem Server zu installieren sowie ein SSL-Zertifikat zu erwerben.
- leichtes SEO-Management: Meta Description, Title Tags und sonstige gängige SEO-Parameter sind mittels CMS leicht bedienbar. Alles Weitere können Sie über Custom Code integrieren.
<h2 id="Das benutzerfreundliche Low-Code-Tool" data-headline="Das benutzerfreundliche Low-Code-Tool"><span class="first_id_number">2.</span>Das benutzerfreundliche Low-Code-Tool</h2>
Mit Webflow ist es möglich, selbstständig eine Website sowie einen Onlineshop zu erstellen. Die Anmeldung nimmt nur wenige Minuten in Anspruch. Danach können Sie schon mit dem ersten Projekt loslegen. Hierfür stehen Ihnen zahlreiche Vorlagen zur Verfügung und vieles lässt sich über Drag-and-Drop lösen. Eine solche Freiheit, die Elemente auf einer Website beziehungsweise Landingpage zu designen, bietet Ihnen kaum ein anderes Tool. Um auch wirklich das Maximum aus diesen Möglichkeiten herauszuholen, erwägen Sie die Möglichkeit einer Webflow-Beratung durch Webflow-Partner wie 02100 digital. Mehr Informationen dazu finden Sie hier: https://www.02100.com/ratgeber/webflow-lernen-schulung-hilfe.
<h2 id="Den Onlineshop einrichten" data-headline="Den Onlineshop einrichten"><span class="first_id_number">3.</span>Den Onlineshop einrichten</h2>
Um einen Onlineshop mit Webflow zu erstellen, müssen Sie zunächst eine Webseite einrichten und im Editor öffnen. Sinnvoll ist daher, von vornherein mit einer Vorlage zu arbeiten, die entsprechende Onlineshop-Funktionen inkludiert. Falls nicht, können Sie einen Onlineshop auch nachträglich zu einer Seite hinzufügen.
Die für den Onlineshop relevanten Funktionen finden Sie am linken Editor-Rand, wo Sie alle Kategorien, Produkte, Gutscheine und Bestellungen verwalten können. Falls Sie dabei Hilfe benötigen, gibt es auch einen Guide, der Ihnen Schritt-für-Schritt bei der Einrichtung und Veröffentlichung hilft.
Zunächst einmal geht es darum, formale Angaben für den Onlineshop zu tätigen. So zum Beispiel die geschäftliche Adresse, wie sie auf Rechnungen und Paketen beim Kunden erscheint. Des Weiteren können Sie die Währung festlegen, das Land und die Sprache einstellen sowie den Namen Ihres Shops eingeben.
Falls nötig, stellen Sie auch die Einheit für Maße ein, damit alle Größen beispielsweise in Zentimeter und alle Gewichte in Kilogramm berechnet werden. Sobald diese Einstellungen vollzogen sind, zeigt Ihnen der Guide einen grünen Haken an. Der nächste Schritt besteht darin, Produkte zum Onlineshop hinzuzufügen, ihn zu designen und schließlich zu veröffentlichen.
<h2 id="Die Produkte und Kategorien im Onlineshop" data-headline="Die Produkte und Kategorien im Onlineshop"><span class="first_id_number">4.</span>2. Die Produkte und Kategorien im Onlineshop</h2>
Das Wichtigste an einem Onlineshop sind natürlich die Produkte. Bei Webflow verwalten Sie diese in einem eigenen Bereich. Im entsprechenden Menüpunkt sehen Sie den Namen und die Anzahl der Produkte, welche sich aktuell im Shop befinden. Wenn Sie auf das Zahnrad klicken, können Sie einstellen, welche Informationen zum jeweiligen Produkt erscheinen sollen. Gemäß der Standardeinstellung sind es: Name, Bilder, Preise, Beschreibung, Menge und Versand.
Webflow ermöglicht es Ihnen aber auch, individuelle Felder einzugeben. Falls Sie Schuhe im Onlineshop verkaufen wollen, ist das sehr praktisch, weil dadurch auch unterschiedliche Schuhgrößen auswählbar sein könnten. Eine allgemeine Orientierung verschaffen Sie sich anhand der Vorschau auf der rechten Seite.
Die passende Option, um ein neues Produkt zu erstellen, finden Sie rechts oben. Sobald Sie alle benötigten Parameter definiert haben, können Sie das Produkt veröffentlichen oder als Entwurf speichern. Letzteres eröffnet Ihnen die Möglichkeit, das Produkt zu einem späteren Zeitpunkt noch einmal zu bearbeiten.
Abgesehen von Produkten lassen sich auch Kategorien erstellen, worin Sie die Produkte gruppieren können. Auf diese Weise bauen Sie eine thematische und übersichtliche Struktur im Onlineshop auf. Die Kategorieeinstellungen finden Sie in einem eigenen Bereich, wo Sie wiederum bestimmte Felder ausfüllen müssen. Mit Webflow können Sie Kategorien außerdem als dynamisches CMS verlinken, wodurch sich neue Produkte direkt zu einer Kategorie hinzufügen lassen. Die Verwaltung der Produkte und Kategorien wird dadurch einfacher.
<h2 id="Das Shopdesign" data-headline="Das Shopdesign"><span class="first_id_number">5.</span>3. Das Shopdesign</h2>
Damit Ihr Onlineshop auch ansehnlich wird, gilt es, sich der Produktdarstellung zu widmen. Hierzu stellt Ihnen Webflow eine dynamische Seite zur Verfügung. Sie funktioniert ähnlich wie CMS-Seiten, welche Sie mit dynamischen Inhalten füllen.
Zunächst kreieren Sie eine Produkt-Beispielseite mit dem Webflow-Editor. Im Anschluss lassen sich dann Einstellungen zu einzelnen Onlineshop-Elementen vornehmen. Zu diesem gehören der Name, Bilder, Preise und Texte.
Am oberen Rand wechseln Sie zwischen verschiedenen Kategorien und Produkten, um zu vergleichen, wie sie in dem jeweiligen Design aussehen. Denn dieses muss zu allen Produkten passen. Sobald Sie etwas an dem Design ändern, wendet es Webflow auf jede Produktseite an. Es ist auch möglich, normale Elemente wie Menüs, Footer und generelle Informationen dem Onlineshop hinzuzufügen. Sie müssen nicht dynamisch sein und auf jeder Produktseite identisch aussehen.
Auf keinen Fall vergessen sollten Sie den Button "zum Warenkorb hinzufügen". Den Warenkorb selbst sowie die Bezahlseite können Sie völlig individuell bearbeiten, wodurch die Kundenerfahrung beim Einkauf ganz in Ihrer Hand liegt. Falls gewünscht, lassen sich in den Webflow-Einstellungen auch individuelle E-Mails vormerken. Diese erhalten Kunden beispielsweise nach einer erfolgreichen Bestellung in Ihrem Onlineshop.
<h2 id="Marketing mit Gutscheinen" data-headline="Marketing mit Gutscheinen"><span class="first_id_number">6.</span>4. Marketing mit Gutscheinen</h2>
Fast unerlässlich für jeden Onlineshop heutzutage ist das Marketing mit Gutscheinen und Rabatten. Auch Webflow bietet die Möglichkeit an, so etwas zu erstellen. Hierzu finden Sie im linken Menü eine Liste aller erstellten Gutscheine zum Verwalten.
Doch dafür müssen Sie einen Gutschein zunächst kreieren. Klicken Sie auf das Plus-Symbol am oberen rechten Rand und verleihen Sie dem neuen Gutschein zunächst einen Namen. Auch den Gutscheincode können Sie in dieser Ansicht generieren lassen. In den Details legen Sie schließlich fest, ob der Gutscheincode einen prozentualen oder einen festen Rabatt gewährt und wie der Aktionszeitraum definiert ist. Natürlich können Sie alle Gutscheine nachträglich bearbeiten.
<h2 id="Zahlungsmethoden Versand und Steuern" data-headline="Zahlungsmethoden, Versand und Steuern"><span class="first_id_number">7.</span>5. Zahlungsmethoden, Versand und Steuern</h2>
Bei einem vernünftigen Onlineshop spielt das Backend eine tragende Rolle, weil es alle ims Hintergrund laufenden Prozesse steuert. Dazu zählen Zahlungsmethoden, der Versand, Steuern und viele weitere Dinge. Auf diese Einstellungen greifen sie ebenfalls am linken Rand zu.
Unter Payment können Sie verschiedene Zahlungsmethoden wie PayPal, Kreditkarten oder Google- und Apple-Pay einrichten. Hierzu muss Ihr Geschäftsaccount bei PayPal oder Stripe mit dem Onlineshop verbunden werden. Andernfalls werden Sie ihn nicht veröffentlichen können. Im Bereich Check-out aktivieren Sie den Zugang zur Check-out-Seite, die Sie zuvor designt haben. Hierzu muss es mindestens eine Zahlungsmethode geben.
Legen Sie unter Shipping fest, wie der Versand in verschiedenen Ländern erfolgen soll. Wählen Sie beispielsweise aus, welche Versandarten Ihr Onlineshop anbietet und wie hoch der Versandpreis ausfällt. Stellen Sie einen Namen für die Versandmethoden ein und definieren Sie, falls nötig, individuelle Werte. So ist es möglich, den Versandpreis an die Größe beziehungsweise das Gewicht eines Produkts zu knüpfen.
In der Übersicht können Sie alle zugelassenen Versandländer überblicken, bearbeiten und nachträglich hinzufügen. In diesem Kontext müssen Sie sich auch den Steuern widmen und beispielsweise festlegen, ob sie in den Preisen enthalten sind. Für verschiedene Länder fallen entsprechend unterschiedliche Steuersätze an. Webflow berechnet die richtigen Steuern automatisch. Beachten Sie aber, dass falls etwas schiefgehen sollte, Sie als Onlineshop-Betreiber die Verantwortung tragen.
Unter Benachrichtigungen sollten Sie einstellen, dass Sie über neue Bestellungen informiert werden möchten, um diese rechtzeitig zu verschicken. Darüber hinaus lassen sich E-Mails gestalten, die die Kunden erhalten, wenn sie eine Bestellung tätigen. Klassischerweise wären das eine Bestellbestätigung sowie die Rechnung.
Zuletzt haben Sie mit Webflow die Möglichkeit, Drittanbieter wie Facebook, Google oder Shippo in Ihren Onlineshop zu integrieren. Letzteres hätte beispielsweise zur Folge, dass alle Bestellungen automatisch mit Versanddiensten verbunden wären.
<h2 id="Veröffentlichung des Shops" data-headline="Veröffentlichung des Shops"><span class="first_id_number">8.</span>6. Veröffentlichung des Shops</h2>
Da jetzt alle wichtigen Schritte, um Ihren Onlineshop mit Webflow zu erstellen, absolviert sind, muss er nur noch veröffentlicht werden. Es beginnt mit der Veröffentlichung der Webseite. Das ist nur mit einem Premium-Abo bei Webflow möglich. Zur Wahl stehen Ihnen 3 verschiedene Preispläne mit jeweils unterschiedlichen Transaktionsgebühren. Je nachdem, wofür Sie sich entscheiden, wird Webflow unterschiedlich hohe Gebühren bei jeder Bestellung im Onlineshop verrechnen.
Die 3 Preispläne beinhalten ebenfalls einen normalen Webseiten-Plan, den Sie erwerben können, um mehr Funktionen für Ihre Webseite zu bekommen. Sobald Sie einen Premium-Plan haben und bereit für die Veröffentlichung sind, aktivieren Sie zunächst den Check-out. Damit stellen Sie sicher, dass die Besucher im Warenkorb hinterlegte Produkte auch kaufen können. Veröffentlichen Sie im Anschluss Ihre Seite über den Publish-Button am oberen rechten Rand.
<h2 id="Verwalten der Bestellungen im Onlineshop" data-headline="Verwalten der Bestellungen im Onlineshop"><span class="first_id_number">9.</span>7. Verwalten der Bestellungen im Onlineshop</h2>
Nachdem Ihr Onlineshop veröffentlicht worden ist, bleibt nur noch ein Aspekt. Sobald Personen beginnen, etwas zu kaufen, gibt es die Möglichkeit, auch die Bestellungen zu verwalten. Begeben Sie sich dazu in den individuellen Editor von Webflow, wo sich auch die Produkte und Seiten verwalten lassen.
Dort finden Sie in einer Liste alle Bestellungen mit zugehöriger Bestellnummer, dem Namen des Kunden sowie dem Datum der Bestellung. Anhand des Status können Sie ablesen, wo sich eine Bestellung gerade befindet. Wurde sie versendet, zurückgeschickt oder ist sie gerade erst eingegangen? Im oberen Bereich lesen Sie ab, wie viele Bestellungen offen sind und wie viel Umsatz sie generiert haben. Auf diese Weise verlieren Sie niemals den Überblick.
