Webflow & Shopify - Buy Button Integration

Webflow & Shopify - Buy Button Integration

Webflow & Shopify - Buy Button Integration
Cedrik
Co-Founder
clock icon
9
min.
calendar icon
July 8, 2020

Table of contents

<h2 id="Der Shopify Buy Button" data-headline="Der Shopify Buy Button"><span class="first_id_number">1.</span>Worum geht es?</h2>


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 Plug-ins 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.

Shopify Screenshot


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 das 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 Modell haben wir zum Beispiel bei HYDRAGUN benutzt, um einen kompletten Shop, Blog und weitere 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 mehrere Änderungen durchgeführt. Jeder Shop-Betreiber oder jede E-Commerce-Marke sollte sich dieses Modell einmal genauer angucken.


<h2 id="SEO Vorteile" data-headline="SEO Vorteile"><span class="first_id_number">2.</span>Wie sieht es mit SEO aus?</h2>

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.) bleibt 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, um 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 zur Implementierung von Shopify in Webflow ist eine ganz klare Empfehlung. Es kann das Beste aus zwei Welten genutzt werden, um ein einmaliges Online Shopping Erlebnis zu schaffen. Hierbei wird nicht nur auf Performance, sondern auch auf Funktionalität und vor allem das Kundenerlebnis geachtet. Wir konnten diesen Mix aus Tools schon mehrfach bei unseren Kunden einsetzen 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 unsere Kunden durch die Implementierung mit Webflow und Shopify langfristig Geld sparen konnten.

<div class="rtf-blog-element cc-filled"><p class="rtf-blog-heading cc-white">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. </p><a href="/de/kontakt" class="c-button cc-border w-inline-block"><div class="c-button-text cc-mr15">Termin vereinbaren</div><div class="c-big-arrow-link_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14">
 <path id="arrow_right" data-name="arrow_right" d="M15,5,13.59,6.41,18.17,11H2v2H18.17l-4.59,4.59L15,19l7-7Z" transform="translate(-2 -5)" fill="currentColor"></path>
</svg></div></a></div>

1
close
Our initial consultation is free of charge!

Estimated response time: Within a Day

phone icon
040 22898620

Interested in working with us?

Get in touch