Wie startest du einen E-Commerce-Shop mit Webflow?
Menschen und Handel haben eine lange, gemeinsame Geschichte. Im Laufe der Geschichte hat die Menschheit Handel getrieben, um die benötigten und erwünschten Güter und Dienstleistungen zu erwerben. Vom Tauschhandel über die Entwicklung von Währungssystemen bis hin zum Aufstieg des Online-Shoppings von heute hat sich die Art und Weise, wie Menschen mit dem Handel interagieren, im Laufe der Zeit verändert.
Statistiken von Forbes belegen das erhebliche Wachstum des E-Commerce-Umsatzes deutlich. Allein im Jahr 2023 wird ein Umsatzanstieg von 10,4 % erwartet, der sich auf beeindruckende 6,3 Billionen US-Dollar beläuft. Dem Bericht zufolge werden die E-Commerce-Umsätze bis 2026 – also innerhalb von nur drei Jahren – beeindruckende 8,1 Billionen US-Dollar erreichen.
In einer Welt, in der alles in einem rasanten Tempo voranschreitet, unterstreichen diese Zahlen, wie wichtig es ist, schnell eine Online-E-Commerce-Präsenz aufzubauen.
E-Commerce mit Webflow
Webflow ist ein echter Game-Changer für den E-Commerce. Es ist eine benutzerfreundliche Plattform, die es Unternehmen ermöglicht, beeindruckende Online-Shops zu erstellen – ganz ohne Programmierkenntnisse. Mit Webflow kannst du deine Website gestalten, Produkte verwalten, Zahlungen sicher verarbeiten und Bestellungen nahtlos verfolgen. Alles ist für jedes Gerät optimiert, um deinen Kunden ein reibungsloses Einkaufserlebnis zu bieten.
Darüber hinaus lässt sich Webflow problemlos mit anderen Tools integrieren, um deine E-Commerce-Abläufe zu optimieren. Mit Webflow kannst du einen professionellen Online-Shop aufbauen, mehr Kunden erreichen und dein Umsatzpotenzial steigern.
Eines sollten wir erwähnen: Webflow bietet keine kostenlosen E-Commerce-Pläne an. Du musst einen der nachfolgenden Site-Pläne auswählen, der für dein Unternehmen geeignet ist, und dann deinen Webflow-Shop einrichten!
Wie richtest du deinen Webflow E-Commerce-Shop ein?
Beim Einrichten deines E-Commerce-Shops kannst du eine vorgefertigte E-Commerce-Website-Vorlage verwenden oder deine Website von Grund auf selbst gestalten.
Nachdem du deinen E-Commerce-Site-Plan ausgewählt hast, musst du als ersten Schritt beim Einrichten deines Webflow E-Commerce-Shops die E-Commerce-Funktionalität aktivieren.
Wenn du eine vorgefertigte Webflow-E-Commerce-Vorlage auswählst, werden E-Commerce-Funktionen automatisch für dich aktiviert. — In diesem Zusammenhang findest du hier einige Webflow E-Commerce-Vorlagen für die Mode, Technologie, Verlagsbranche und andere Branchen! — Wenn du hingegen von Grund auf selbst gestaltest, musst du E-Commerce manuell aktivieren. Befolge dafür die nachfolgenden Schritte!
Gehe zuerst zum Seitenpanel und klicke auf die E-Commerce-Shop-Schaltfläche, wie unten zu sehen.
Nachdem du darauf geklickt hast, erscheint eine Meldung, die dich zur Bestätigung deiner Auswahl auffordert. Wähle einfach „Los geht’s“ und fahre mit der Konfiguration fort.
Danach öffnet sich das Fenster des Einrichtungsassistenten, das dir 3 Phasen mit Schritten zeigt, die du befolgen musst, um deinen E-Commerce-Shop zu erstellen.
Den Webflow-E-Commerce-Einrichtungsassistenten abschließen
Weiter geht es mit der ersten Phase des Prozesses – das Fenster des Einrichtungsassistenten öffnet sich wie unten gezeigt.
Es gibt 12 Schritte oder weniger, je nachdem, ob du diese Informationen zuvor in den Webflow-Site-Einstellungen ausgefüllt hast. Du kannst sie der Reihe nach ausfüllen oder zuerst die Produkte hinzufügen und später vervollständigen, was du ausgelassen hast.
Wir zeigen sie in der Reihenfolge der Liste, damit du nicht den Überblick verlierst.
1. Eine Geschäftsadresse hinzufügen
Der erste Schritt der ersten Phase (Shop einrichten) ist das Hinzufügen einer Geschäftsadresse.
Klicke im Einrichtungsassistenten auf Geschäftsadresse hinzufügen, wie oben gezeigt, und ein weiteres Fenster öffnet sich.
Gib deinen Firmennamen ein und fülle die anderen Pflichtfelder aus, bevor du zum nächsten Schritt gehst.
2. Währungseinstellungen überprüfen
Gleiche Vorgehensweise hier: Wähle im Einrichtungsassistenten Währungseinstellungen überprüfen und wähle deine Shop-Währung zusammen mit deiner Sprache und anderen obligatorischen Informationen aus.
3. Ein Produkt hinzufügen
Der dritte und einer der wichtigsten Schritte beim Erstellen deines Shops ist das Hinzufügen deiner Produkte.
Produkte sind das Herzstück des Shops; ohne sie, wie man so sagt, müsste man einfach „Den Schlüssel umdrehen und das Geschäft schließen“.
Um ein Produkt hinzuzufügen, klicke einfach auf den Hyperlink-Text Produkt hinzufügen, und du gelangst zu den untenstehenden Fenstern.
Hier kannst du einen Beispielartikel hinzufügen, wenn du ihn vorher ausprobieren möchtest, oder auf den Button Neues Produkt klicken und die erforderlichen Informationen ausfüllen, wie im folgenden Bild zu sehen.
4. Eine Versandmethode hinzufügen
Wie bei den anderen Schritten: Klicke einfach auf den Hyperlink Versandmethode hinzufügen und dann auf Versandzone hinzufügen.
Mit Versandzonen kannst du zwischen verschiedenen Versandmethoden wie preisbasiertem, gewichtsbasiertem oder Pauschalversand wählen, je nach deinen Präferenzen.
Nachdem du Versandzone hinzufügen ausgewählt hast, erscheint das folgende Fenster, in dem du die Versandmethoden auswählen und die anderen notwendigen Felder ausfüllen kannst.
5. Steuereinstellungen überprüfen
Dies ist der letzte Schritt, bevor du mit der Gestaltung deines Shops beginnst. Klicke dazu auf den Hyperlink Einstellungen überprüfen im Einrichtungsassistenten und wähle dann die gewünschte Steuerkategorie aus. Du kannst auch die automatische Steuerberechnungsfunktion einrichten.
Deinen Shop gestalten
Nachdem du die erste Phase des Einrichtungsassistenten abgeschlossen hast, ist es Zeit, deinen Shop zu gestalten. Hier sind die 4 Schritte, die du in diesem Teil befolgen musst:
1. Warenkorb hinzufügen und gestalten
Gehe zuerst zum Teil „Shop gestalten“ des Einrichtungsassistenten und wähle die erste Aufgabe aus: deinen Warenkorb hinzufügen und gestalten.
Klicke auf den Hyperlink-Text Warenkorb hinzufügen, und das Haupt-Design-Fenster öffnet sich. Scrolle nach unten zum E-Commerce-Bereich und wähle das Warenkorb-Symbol.
Danach erscheint ein weiteres Fenster mit den Warenkorbeinstellungen. Du kannst die Einstellungen dort ändern oder das Fenster schließen und sie später im rechten Seitenpanel der visuellen Arbeitsfläche überprüfen.
2. Die E-Commerce-Produktseite gestalten
Der zweite Schritt nach dem Hinzufügen deines Warenkorbs ist die Gestaltung der Produktseite.
Klicke einfach auf den Button „Elemente hinzufügen“ und fahre mit dem Design fort. Das Gestalten einer Produktseite ist genauso wie das Erstellen jeder anderen Seite in Webflow – also zeig deine Kreativität.
3. Die E-Commerce-Checkout-Seite gestalten
Wie im vorherigen Schritt ist das Gestalten der Checkout-Seite dasselbe wie das Gestalten einer anderen Seite in Webflow.
Der einzige Unterschied ist, dass nach dem Aktivieren der E-Commerce-Funktionalität automatisch eine Checkout-Seite mit den obligatorischen Informationen erstellt wird, die vor dem Versand ausgefüllt werden müssen.
Du musst nur Farben und andere Designelemente hinzufügen, die dir gefällen, damit die Checkout-Seite zu deinen ästhetischen Vorlieben passt.
Klicke einfach auf den Hyperlink-Text Zur Checkout-Seite, und sofort wird das Checkout-Seiten-Fenster im Design-Canvas angezeigt, wo du Farben und andere Elemente nach deinen Wünschen hinzufügen kannst.
4. E-Commerce-E-Mails gestalten
E-Commerce-E-Mails sind der letzte Schritt in der zweiten Phase der Einrichtung deines Webflow-E-Commerce-Shops.
In diesem Bereich gestaltest du die Bestell-E-Mails, egal ob die Bestellung bestätigt, versendet, erhalten oder erstattet wurde. Jede E-Mail-Seite benötigt etwas Feinabstimmung, damit das Design mit dem Rest der Seite konsistent ist.
Bevor du diese Nachrichten versendest, ist es empfehlenswert, E-Mail-Listen zu validieren, um die Zustellbarkeit sicherzustellen und Bounces zu vermeiden.
Klicke dazu auf den Hyperlink „Zu den E-Mail-Einstellungen“ und lade dein Markenlogo im sich öffnenden Fenster hoch. Fahre dann mit den anderen Details, Farben und E-Mail-Nachrichtentexten fort, wenn du sie einzigartiger und unverwechselbarer gestalten möchtest.
Deinen Shop starten
Der dritte und abschließende Teil beim Aufbau deines Webflow-E-Commerce-Shops ist die Veröffentlichung deiner Website für die Öffentlichkeit.
Dafür musst du diese 4 zusätzlichen Schritte vor der endgültigen Veröffentlichung deiner Website durchführen:
1. Zahlungsanbieter hinzufügen
Wie das Sprichwort sagt: „Nichts ist umsonst“ – bevor du deine Website startest, musst du einen Anbieter einbinden, um Zahlungen in deinem Shop zu akzeptieren.
Um diese Aufgabe abzuschließen, klicke auf den Hyperlink-Text Zahlungsanbieter hinzufügen und verbinde dann einen der im nächsten Fenster angezeigten Zahlungsanbieter – Stripe oder PayPal.
Webflow akzeptiert Zahlungsmethoden per Kredit- oder Debitkarte (Visa, Mastercard, American Express, Discover, Diners Club, JCB) über Stripe und PayPal sowie
Web-Zahlungen (wie Apple Pay und Google Pay) über Stripe.
2. Hosting hinzufügen
Wie zu Beginn dieses Artikels erwähnt, bietet Webflow keine kostenlose Option für E-Commerce-Shops an.
Obwohl du deine Website erstellen kannst, bist du ohne einen Site-Plan nicht in der Lage, sie zu veröffentlichen, wenn du keinen der Premium-E-Commerce-Site-Pläne abonniert hast.
Wenn du noch keinen E-Commerce-Site-Plan hinzugefügt hast, gehe zum Hyperlink-Text Hosting hinzufügen in der letzten Phase des Einrichtungsassistenten und wähle einen der Pläne aus, wie zuvor in der Abbildung der Site-Pläne gezeigt.
Wichtig ist auch zu wissen, dass du, wenn du bereits einen anderen Hosting-Plan hast, diesen auf einen E-Commerce-Plan upgraden musst, um eine E-Commerce-Website veröffentlichen zu können.
3. SSL aktivieren
Um sicherzustellen, dass deine Zahlungsabwicklung sicher ist, musst du SSL (Secure Sockets Layer) aktivieren.
Klicke einfach auf den Hyperlink SSL aktivieren in deinem Einrichtungsassistenten, und du wirst direkt zum Veröffentlichungs-Tab der Site-Einstellungen weitergeleitet.
Scrolle danach nach unten zu den Erweiterten Veröffentlichungsoptionen und schalte den SSL aktivieren-Toggle auf „Ein“.
4. Checkout aktivieren
Der letzte Schritt vor der Veröffentlichung deiner Website ist das Aktivieren des Checkout-Buttons. Kein Nutzer kann eine Bestellung in deinem Shop aufgeben, wenn du diesen Schritt übersprungen hast.
Klicke auf den Hyperlink Checkout aktivieren, schalte den Toggle im sich öffnenden Fenster ein, klicke auf Speichern und du bist fertig!
Live gehen
Der letzte und einfachste Schritt ist das Veröffentlichen deiner Website. Wähle einfach den Veröffentlichen-Button, wie beim Veröffentlichen jeder anderen Webflow-Seite auf deinen Domains, und schon kann es losgehen!
Fazit
Die Reise zum Aufbau eines Online-E-Commerce-Shops mit Webflow eröffnet Unternehmen eine Welt voller aufregender Möglichkeiten, um im ständig wachsenden digitalen Marktplatz erfolgreich zu sein.
In einer Ära, in der visuelle Entscheidungsfindung überwiegt, erweist sich Webflow als echter Game-Changer, der Unternehmern ermöglicht, fesselnde Online-Shops zu erstellen, ohne komplexe Programmierkenntnisse zu benötigen. Mit wenigen Klicks und einem Funken Kreativität können Unternehmen ihrer Fantasie freien Lauf lassen und visuell beeindruckende E-Commerce-Websites gestalten, die Kunden begeistern.
Wenn du einige fantastische Beispiele für E-Commerce-Website-Vorlagen und mehr entdecken möchtest, schau dir unsere Vorlagen im Webflow-Store an. Als Extra-Bonus kannst du dir auch diese hilfreiche YouTube-Playlist von Charli Marie ansehen, die dir weitere Unterstützung bietet und eventuelle Unklarheiten beim Aufbau deines eigenen E-Commerce-Shops klärt!
