Webflow & Shopify - Buy Button Integration

Cedrik Dudek
Co-Founder
Stand:
07/2020

Worum geht es?


Eines der besten Modelle, die wir unseren Kunden anbieten, ist unser Webflow/Shopify-Modell. Hierbei handelt es sich um die Frontend Implementierung in Webflow und die Shop/Backend Implementierung mit Shopify. Dadurch entstehen mehrere Vorteile. In erster Linie können wir dadurch die Vorteile der einzelnen Tools noch besser nutzen um unseren Kunden ein unschlagbares Projekt zu entwickeln. 


Die verschiedenen Page Builder, welche mit Shopify benutzt werden können, kommen nicht an das Potential, welches wir mit Webflow schaffen. Mit Webflow erstellen wir ein besseres Kundenerlebnis für Ihre Website. Sobald Ihre Kunden einen Artikel kaufen, wird der Kunde zu Shopify weitergeleitet. Dadurch können Sie immer noch alle Vorteile und Funktionen von Shopify nutzen und können Marketingkampagnen, Upselling oder Warenkorbabbruch Kampagnen zur Unterstützung Ihres Shops betreiben. Bei einigen Projekten haben wir auch Shopify Plugins auf der Webflow Seite implementiert. Dadurch können Sie, trotz der Verwendung von Webflow im Frontend, auf Tausende Plugins von Shopify zugreifen. Es ist dadurch zum Beispiel möglich, Kundenbewertungen oder Gutschein Plugins auf der Seite zu implementieren um weitere Verkäufe zu steigern.


Bei einigen Kunden konnten wir die Conversion Rate von 7% auf bis zu 25% erhöhen und somit nachweislich für mehr Umsatz im Unternehmen sorgen. 

Die Integration mit Webflow und Shopify funktioniert am besten für kleine bis mittelgroße Shops. Bei großen Shops ist die Implementierung aufwendiger, das Ergebnis bleibt aber das gleiche und auch hier kann man von einer optimierten Conversion Rate ausgehen.

Die Implementierung in kleine Shops ist hingegen sehr einfach, gerade wenn nur ein paar verschiedene Produkte verkauft werden, können wir die neue Website schnell umsetzen. 

Viele Entwickler, welche mit Shopify und Webflow arbeiten wollen, greifen auf Tools wie Udesly zurück. Dieser Prozess ist aber sehr zeitaufwendig und führt bei späteren Änderungen im Projekt immer wieder zu Problemen. Da das Webflow Frontend dann als Theme in Shopify hinterlegt ist, muss durch eine Änderung immer wieder ein neues Theme hochgeladen werden. Durch die Verwendung von Webflow können wir diese Probleme umgehen, da wir im Frontend ausschließlich Webflow nutzen. So werden Änderungen einfach im Webflow Designer angepasst und sind mit wenigen Klicks live auf der Website.

Wir empfehlen daher ganz klar die Verwendung von:
Webflow im Frontend.
Shopify im Backend.


Wir erstellen die Homepage, die Produktseite, Impressum und den Rest der Seite in Webflow und können neue Designwünsche direkt und live anpassen. Sobald Sie mit der Entwicklung zufrieden sind, können wir mit der Implementierung von Shopify zu Webflow beginnen. Dafür verwenden wir den Shopify Buy Button.

 


Durch den Shopify Buy Button lassen sich alle Funktionen von Shopify auf einen Button herunterbrechen. Die Optionen die Shopify mit dem Buy Button mitliefert sind sehr umfangreich. Der Buy Button kann mit oder ohne Mengenfelde implementiert werden. Es kann die genaue CI des Shops übernommen werden. Es besteht die Wahl zwischen der Weiterleitung zum Warenkorb oder direkt zum Checkout. Viele weitere Optionen lassen den Buy Button schon vor der Implementierung sehr an Ihre Bedürfnisse anpassen.  Mit der Integration des Buy Buttons, haben wir außerdem direkt den Warenkorb und den Checkout integriert. Nach der Integration kann Ihre Seite live gehen und Sie können anfangen Produkte über Shopify zu verkaufen. Für Sie ändert sich nichts. Sie nutzen Shopify weiterhin als Ihren Checkout, Ihre Auftragsverwaltung und Ihr Fulfillment.


Dieses Model haben wir zum Beispiel bei HYDRAGUN benutzt um einen kompletten Shop, Blog und weiteren Seiten innerhalb weniger Wochen zu erstellen und zu launchen. Auch bei HYDRAGUN können wir eine Steigerung der Conversion Rate erwarten. Alleine dadurch, dass für das Kaufen eines Produkts nur wenige Klicks nötig sind, haben wir ein sehr gutes Kundenerlebnis. Je weniger Klicks die Kunden machen, desto höher ist die Chance, dass ein Produkt verkauft wird. Bei HYDRAGUN führen alle CTA’s zur Produktseite und dort kann das Produkt mit einem Klick in den Warenkorb gelegt werden. Es ist sogar möglich den Nutzer mit dem zweiten Klick sofort auf die Checkout Seite zu leiten. Dadurch schaffen wir es, dass der Kunde effektiv zwei Klicks bis zum CHeckout benötigt. Auch bei HYDRAGUN haben wir nicht nur einen Shop oder eine Produktseite implementiert, sondern arbeiten auch mit Blog Beiträgen, Vision und Social Integrations. All das wäre bei Shopify schwer umsetzbar. Durch die Umsetzung in Webflow konnten wir alle weiteren Funktionen und Seiten einfach hinzufügen und haben im Laufe des Projekts schon mehrer Änderungen durchgeführt. Jeder Shop Betreiber oder jede E-Commerce-Marke sollte sich diese Modell einmal genauer angucken.

Vereinbaren Sie noch heute einen Beratungstermin.

Wie sieht es mit SEO aus?


Bei den Kunden, mit denen wir dieses Modell durchgeführt haben, haben wir bisher keine SEO Probleme feststellen können. Nur der Checkout Link wird auf einer Subdomain eingerichtet. Der restliche Content (Produktseite, Startseite, Blog, usw.) bleiben auf einer Domain, sodass hier kein Content verloren geht. Das Frontend Ihrer Website befindet sich also auf Ihrer Hauptdomain, während sich das Backend (Checkout) auf Ihrer Sub-Domain befindet.


Durch die Nutzung von Webflow können weitere Interaktionen hinzugefügt werden um Ihre Website und den Shop noch professioneller wirken zu lassen. Wir arbeiten in diesem Bereich mit Video und Lottie Elementen und haben in vielen Projekten Custom Code eingefügt noch mehr Interaktionen zu erstellen. Außerdem können natürlich Mengenfeldern, Variationen usw. hinzugefügt werden. Sogar die Implementierung von Abonnements wird durch einfache Änderungen bei Webflow ermöglicht.

Unser Fazit zu der Implementierung von Shopify in Webflow ist eine ganz klare Empfehlung. Es kann das beste aus zwei Welten genutzt werden um eine einmaliges Online Shopping Erlebnis zu erschaffen. Hierbei wird nicht nur auf Performance sonder auch auf Funktionalität und vor allem das Kundenerlebnis geachtet. Wir konnten diesen Mix aus Tools schon mehrfach bei unseren Kunden einsetzten und konnten bisher immer eine Steigerung der Conversion Rate und dadurch eine Steigerung des Umsatzes erzielen. Und nicht nur das. Durch die Integration von Webflow konnten wir die Wartung und Implementierung neuer Funktionen auf der Website des Kunden sehr schnell und günstig umsetzen, sodass unserer Kunden durch die Implementierung mit Webflow und Shopify langfristig Geld sparen konnten.


Falls Sie mehr zu dem Thema erfahren möchten, beraten wir Sie gerne und unterstützen Sie auch bei der Umsetzung. Vereinbaren Sie dazu einen kostenlosen Beratungstermin. 


Diesen Beitrag weiterempfehlen:

Über den Autor

Cedrik Dudek
Co-Founder

Cedrik ist Co-Founder von 02100 und schafft es, mithilfe von Low-Code, Unternehmen bis zu 75% produktiver zu machen. 02100 bietet Custom Web-App und Website Entwicklung mit Low-Code an.

Für Unternehmen
Low-Code vs. No-Code
Low Code und No Code sind Entwicklungs-Ansätze in der IT, die mit wenigen beziehungsweise vollständig ohne Programmierkenntnisse auskommen. Doch was unterscheidet die beiden Ansätze?
Mehr erfahren...
Für Unternehmen
Low-Code: Chancen und Möglichkeiten
Die digitale Transformation ist ein herausfordernder Prozess, der besonders den Mittelstand vor hohe Anforderungen stellt. Low Code bietet neue Lösungen.
Mehr erfahren...
Für Unternehmen
Webflow & Shopify - Buy Button Integration
Durch die Integration von Shopify und Webflow können wir ganz neue Nutzererlebnisse schaffen und nachweislich mehr Umsatz für unsere Kunden erzeugen.
Mehr erfahren...

Jetzt Kontakt aufnehmen

Vielen Dank! Wir haben deine Anfrage erhalten und melden uns bei dir.
Bitte fülle alle Felder aus um deine Anfrage zu senden.
1
Unsere Erstberatung ist kostenlos!

Geschätzte Antwortzeit: innerhalb eines Tages