Webflow zu Shopify - das Beste aus beiden Welten

January 9, 2023
Marc Heine Webdesign Profil Foto

Beitrag teilen

webflow-to-shopify-das-beste-aus-zwei-welten

Für mich ist Webflow der professionellste und beste Websitebuilder auf dem Markt und ich setze jedes meiner Projekte mit diesem Tool um. Wenn es aber darum geht einen großen Onlineshop aufzusetzen, ist Shopify meine erste Wahl. Webflow bietet zwar auch eine E-Commerce Lösung, die für kleinere Shops auch ausreichend sein kann, dennoch fehlen hier einige wichtige Funktionen, gerade für den deutschen Markt.

Vorteile von Shopify

Shopify ist eine auf E-Commerce spezialisierte Plattform, die es dir ermöglicht online zu verkaufen. Gute Gründe für Shopify sind:

1. Benutzerfreundlichkeit: Shopify ist einfach zu bedienen und bietet eine intuitive Benutzeroberfläche, die es auch für Einsteiger einfach macht, schnell damit vertraut zu werden.

2. Große Funktionsvielfalt: Shopify bietet eine Vielzahl von Funktionen und Tools, die Unternehmen beim Verkauf ihrer Produkte online unterstützen. Dazu zählen beispielsweise Zahlungsoptionen, Versandoptionen, Marketing-Tools und integrierte Suchmaschinenoptimierung.

3. Sicherheit: Shopify setzt auf höchste Sicherheitsstandards und bietet zahlreiche Maßnahmen, um sicherzustellen, dass die Daten der Nutzer und die Transaktionen sicher sind.

4. Kundensupport: Shopify bietet einen ausgezeichneten Kundensupport und hat eine aktive Community, die Nutzern bei Fragen und Problemen weiterhelfen kann.

5. Flexibilität: Shopify ist sehr flexibel und bietet verschiedene Pläne und Optionen, um den Bedürfnissen von Unternehmen jeder Größe gerecht zu werden.

6. Shopify App: Von Unterwegs kannst du bequem deine Verkäufe managen.

7. Integration von Drittanbieter-Apps: Shopify ermöglicht die Integration von zahlreichen Drittanbieter-Apps, die die Funktionalität der Plattform erweitern.

8. Mobile Optimierung: Shopify ist für mobile Endgeräte optimiert und bietet eine große Auswahl an mobilen Themes.

9. Suchmaschinenoptimierung: Shopify bietet integrierte SEO-Tools, um das Ranking der Webseite in den Suchmaschinen zu verbessern.

10. Social Media Integration: Shopify ermöglicht die Integration von Social Media-Kanälen und bietet Tools zur Steigerung der Social Media-Präsenz.

11. Marketing-Tools: Shopify bietet zahlreiche Marketing-Tools, wie beispielsweise E-Mail-Marketing und Retargeting-Anzeigen.

12. Echtzeit-Analyse: Shopify bietet eine Echtzeit-Analyse der Webseitenleistung, um den Erfolg des Online-Shops zu verfolgen.

13. Zahlungsoptionen: Shopify bietet eine große Auswahl an Zahlungsoptionen, darunter auch die Integration von Zahlungsdienstleistern wie PayPal und Stripe.

14. Versandoptionen: Shopify bietet verschiedene Versandoptionen und integrierte Versand-Tools, um den Versandprozess zu vereinfachen.

15. Mehrwährungsunterstützung: Shopify unterstützt mehrere Währungen und bietet automatische Währungsumrechnungen.

16. Mehrsprachigkeit: Shopify ermöglicht die Erstellung mehrsprachiger Webseiten und das Hinzufügen von Übersetzungen.

und viele mehr…

Shopify Nachteil

Der große Nachteil an Shopify ist, dass man auf Templates angewiesen ist oder Änderungen selbst programmieren muss. Die teils kostenlosen und teils zum Kauf angebotenen Templates sehen schick aus und haben auch einige Bearbeitungsfunktionen. Allerdings wird schnell klar, dass man hier in dem was möglich ist, doch sehr eingeschränkt ist.

Das beste aus zwei Welten kombinieren

Hier kommt Webflow ins Spiel, Webflow bietet gestalterisch alles was das Designer Herz höher schlagen lässt und das ohne eine Zeile Code schreiben zu müssen. Es ist möglich, die Flexibilität von Webflow und das starke E-Commerce Fundament von Shopify gemeinsam zu nutzen.

Voraussetzungen für die Integration Webflow zu Shopify

Damit du beide Welten miteinander kombinieren kannst, müssen ein paar Voraussetzungen gegeben sein.

  1. Webflow Plan, der es dir erlaubt den Code zu exportieren (z.B. Workspace Freelancer Plan)
  2. Shopify Account mind. Basic Variante
  3. Udesly Account - Free oder All Access

Webflow Website mit Udesly als Template in Shopify integrieren

webflow-shopify-udesly integration
Quelle: Udesly

Um Webflow in Shopify zu integrieren, musst du zuerst eine Webflow E-commerce Seite erstellen. Hier kannst du auch ein Template benutzen um Zeit zu sparen. Wenn du soweit fertig bist mit deiner Website in Webflow, kannst du beginnen deine Webflow Seite mit Udesly zu Shopify zu übertragen. Das funktioniert in 5 einfachen Schritten:

1. Udesly Chrome Extension

Installiere dir die Udesly Chrome Extension und klicke während du deine Webflow Seite im Designer geöffnet hast auf die Udesly Chrome Erweiterung. Mit einem weiteren Klick auf Configure Attributes wird die erste Datei (config), die wir für den Transfer benötigen heruntergeladen.

webflow-to-hopify-confogure-attributes

2. Webflow Code Exportieren

Ebenfalls im Designer kannst du jetzt, mit dem richtigen Webflow Plan den Code deiner Website exportieren. Dazu musst du auf die beiden Klammern klicken (rechts oben im Designer) und schon wird dein Code in Form einer Zip Datei exportiert.

webflow-codeexport-icon

webflow-code-export-example-image

3. Udesly App Upload

Jetzt kannst du deine erstellte Zip und config Datei hier konvertieren. Dazu lädst du zuerst die Zip Datei hoch und im Anschluss die config Datei. Klicke anschließend auf convert und Udesly stellt dir dein fertiges Shopify Template in Form einer Zip und in einer Data-Datei zur Verfügung.

udesly-convert-a-template
udesly-theme-settings
udesly-emplate-successfully-converted

4. Theme in Shopify hinzufügen

Es ist an der Zeit dein Zip Template bei Shopify hochzuladen. Gehe dazu auf den Reiter - Onlineshop - Theme hinzufügen und lade deine Zip Datei hoch.

shopify-theme-hinzufügen

5. Shopify App - Webflow importer

Im letzten Schritt müssen wir die Webflow importer App in Shopify importieren. Hier können wir die .data Datei hinzufügen. Das sorgt dafür, dass all unsere CMS Artikel, Produkte und E-commerce Einstellungen zu Shopify transferiert werden. Nach dem Upload ist deine in Webflow erstellte Website, erfolgreich zu Shopify transferiert und du kannst die Seite in Shopify managen.

webflow-importer-app
shopify-import-data

Änderungen direkt in Shopify

Du kannst Texte auch direkt in Shopify ändern, dazu musst du nur deine Webflow Website mit einigen Attributen bearbeiten. Hier findest du weitere Infos dazu. Alles weitere wie z.B. Produkte hinzufügen und dein Backend verwalten kannst du weiterhin wie gehabt in Shopify selbst.

Webflow kannst du hier kostenlos ausprobieren:

https://webflow.grsm.io/77zg9e1s3png

*Affiliate Link