Allgemein
06. Oktober 2023

Webflow E-Commerce: Eine Einführung in das System

Webflow Experte - Sönke Sproll lacht
Sönke Sproll
Webflow Experte
Inhaltsverzeichnis

Rund 40% aller Internetnutzer kaufen einmal im Monat oder mehr online ein. Es ist absolut kein Geheimnis, dass es für ein Unternehmen wichtig ist sein Geschäft online professionell aufzubauen, da so eine weitere Einnahmequelle entstehen kann.

Das CMS Webflow bietet so eine E-Commerce Funktionalität, um seine Produkte im Internet zu verkaufen. Dieser Artikel gibt eine Einführung in das E-Commerce von Webflow und zieht ein Fazit, ob und wann sich das Verkaufen mit Webflow lohnt.

E-Commerce Funktionen in Webflow

Besonders interessant macht Webflow E-Commerce, dass, wie gewohnt in Webflow, sich jedes Element nach den eigenen Vorstellungen anpassen lässt. So kannst du Produktübersicht- und Produktdetailseite, den Warenkorb und den Checkout 100% individualisieren und dich so mit dem Design von deinen Konkurrenten abheben.

In Webflow hast du die Möglichkeit physische und auch digitale Produkte zu verkaufen. Mit dem neuen 'Webflow Members' können jetzt auch Mitgliedschaften erstellt werden. So können bestimmte Bereiche der Website nur für Mitglieder zugänglich gemacht werden. Du kannst Inhalte erstellen und sie so an deine Zielgruppe auf monatlicher Basis verkaufen.

Klassische E-Commerce Funktionen wie Warenkörbe, Zahlungs- und Versandoptionen werden natürlich auch geboten.

Vorteile von Webflow E-Commerce

  1. Anpassbarkeit: Webflow ermöglicht es Nutzern, fast jeden Aspekt ihres Online-Shops zu personalisieren. Dies bedeutet, dass Unternehmen eine einzigartige Website erstellen können, die sich von der Masse abhebt.
  2. Visueller Editor: Im Gegensatz zu einigen anderen Plattformen bietet Webflow einen Drag-and-Drop-Editor, mit dem Benutzer ihre Website visuell designen können, ohne Code schreiben zu müssen.
  3. Responsives Design: Webflow ermöglicht es, Websites zu erstellen, die auf allen Geräten, einschließlich Mobiltelefonen und Tablets, gut aussehen und funktionieren.
  4. Gutes Produktpanel: Das Produktpanel ist sehr übersichtlich und es lassen sich ohne Probleme neue Produkte hinzufügen

Nachteile von Webflow E-Commerce

  1. Lernkurve: Obwohl der visuelle Editor von Webflow viele Vorteile bietet, kann er für Neueinsteiger eine Herausforderung darstellen, insbesondere für diejenigen, die zuvor mit anderen Plattformen gearbeitet haben.
  2. Kosten: Für einige kleine Unternehmen oder Einzelunternehmer können die monatlichen Gebühren von Webflow teurer sein als andere E-Commerce-Optionen. Für den billigsten Plan greift Webflow sogar 2% Transaktionsgebühren ab.
  3. Fehlende erweiterte Funktionen: Einige erweiterte E-Commerce-Funktionen, die auf Plattformen wie Shopify oder WooCommerce verfügbar sind, fehlen in Webflow.
  4. Limitierte Integrationen: Obwohl Webflow einige Integrationen bietet, gibt es immer noch einige gängige Apps oder Tools, die nicht integriert werden können.

Erfolgreiche Webflow Stores

Es finden sich zahlreiche erfolgreiche Webflow-Stores, insbesondere in spezialisierten Nischen. Auffällig ist, dass diese Websites durch ein herausragendes Design bestechen, das vermutlich mit anderen E-Commerce-Plattformen nicht realisierbar wäre.

https://noonbrew.co/

NoonBrew verkauft einen belebender Tee mit natürlichen Zutaten, der Energie steigert und die Konzentration fördert. Sie haben außerdem noch MoonBrew und Superfood Honey im Angebot auf ihrer Website.

https://twigspaper.com/

Twigs, seit 2017 aktiv, bietet mit Hilfe weltweiter Künstler umweltfreundliche Grußkarten an, wobei der Fokus stets auf Nachhaltigkeit und Umweltbewusstsein liegt.

https://www.berkshirenerds.store/

Dieser Store hat nur zwei Produkte und bedient eine besondere Nische, welche direkt durch das klare und strukturierte Design angesprochen werden kann.

Einrichtung

Um dein E-Commerce Store erfolgreich aufzusetzen, musst du folgende Schritte in Webflow befolgen:

Set-Up

  1. E-Commerce aktivieren: Navigiere zur linken Seitenleiste und aktiviere die E-Commerce Funktion.
  2. Geschäftsdetails eingeben: Geschäftsadresse: Trage hier die Adresse deines Unternehmens ein. Währungseinstellungen: Wähle die gewünschte Währung für dein Geschäft aus.
  3. Produkt hinzufügen: Klicke auf die Option, ein neues Produkt hinzuzufügen. Die Bedienung dieser Funktion ist ähnlich wie beim Webflow CMS.
  4. Produkttyp auswählen: Optionen sind: Physical (physisch), Digital, Service (Dienstleistung), Advanced (fortgeschritten). Sollte dein Produkt nicht unter den ersten drei Kategorien fallen, wähle "Advanced" für erweiterte Einstellungsmöglichkeiten.
  5. Produktinformationen eingeben: Fülle alle relevanten Felder mit den Informationen zu deinem Produkt aus.
  6. Produktkategorien verwalten: Im Feld "Categories" kannst du bestehende Kategorien auswählen oder neue erstellen, indem du rechts auf das Plus-Symbol klickst.
  7. Produktvarianten hinzufügen: Unter "Options" ermöglicht dir Webflow, Varianten wie Farben oder Größen für dein Produkt hinzuzufügen.
  8. Versand und Steuereinstellungen: Wähle eine passende Versandoption für dein Produkt. Gib die entsprechenden Steuereinstellungen an.

Design

Du hast die Freiheit, alle drei Hauptbereiche nach deinem Geschmack und deiner Marke zu gestalten. Nutze Inhalte wie Bilder und Texte direkt aus der Produktdatenbank für deine Designanforderungen.

  1. Warenkorb: Hier können Kunden ihre ausgewählten Produkte sammeln und zur Kasse gehen.
  2. Produktdetailsseite: Zeigt detaillierte Informationen zu einem bestimmten Produkt.
  3. Checkout: Der Abschlussprozess, bei dem Kunden ihre Bestellungen bezahlen und abschließen können.

Darüberhinaus kannst du die E-Mails, die an deine Kunden gesendet werden, individuell gestalten und an deine Corporate Identity (CI) anpassen. Dies hilft dabei, ein konsistentes und professionelles Markenbild für deine Kunden zu gewährleisten.

Denke außerdem daran, eine Collection List zu erstellen. Platziere diese Liste auf einer statischen Unterseite, um den Nutzern eine übersichtliche Ansicht aller Produkte zu bieten.

Launch

  1. Design: Stelle sicher, dass du deine Seite ansprechend und nutzerfreundlich gestaltet hast.
  2. Zahlungsoptionen: Kunden sollten in der Lage sein, vielseitige Zahlungsmethoden zu nutzen. Biete deshalb folgende Zahlungsoptionen an: Stripe, Apple Pay, Google Pay, PayPal
  3. Integration der Zahlungsanbieter: Verbinde deine Webseite mit den oben genannten Zahlungsanbietern, um den Checkout-Prozess für deine Kunden so einfach wie möglich zu machen.

Fazit

Webflow E-Commerce ist noch recht neu, besonders im Vergleich zu Schwergewichten wie Shopify oder WooCommerce. Oft wird Shopify für viele E-Commerce-Projekte die bessere Wahl sein, vor allem wegen seiner Skalierbarkeit und seinem reinen Fokus auf den Online-Handel.

Doch es gibt Situationen, in denen Webflow für dich interessant sein könnte:

Wenn deine statische Hauptwebsite mit viel Traffic schon auf Webflow läuft und du einen kleinen Shop integrieren möchtest, kann Webflow E-Commerce ideal sein. Alles auf einer Plattform zu haben, macht vieles einfacher. Auch solltest du in der Regel bereits Erfahrung mit der Webflow Entwicklung gemacht haben und kannst deshalb deinen Shop binnen weniger Stunden aufsetzen.

Oder, wenn du ein einzigartiges und komplexes Design im Sinn hast, das vielleicht schon in Tools wie Figma entworfen wurde, dann bietet Webflow die Möglichkeit, dieses Design effizient umzusetzen und mit E-Commerce-Funktionen zu verknüpfen. Andere Anbieter sind bei weitem nicht so flexibel im Design wie Webflow, in den meisten Fällen müsstest du einen externen Entwickler beauftragen.

Letztlich solltest du die Plattform wählen, die am besten zu deinen Bedürfnissen und Zielen passt.

Jetzt mit Webflow starten*

Mit Sternchen * markierte Links sind Affiliate-Links.

Bereit für ein erfolgreiches Webflow Projekt?

Erstgespräch
Pfeil nach oben Icon
Webflow Experte - Sönke Sproll

Noch kein Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alter Mann als Webflow Experte

Noch kein
Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.