() translation by (you can also view the original English article)
Heute ist es mit Hilfe von Plattformen wie WordPress und Shopify ziemlich einfach geworden, eine komplette Website zu erstellen oder Produkte und Dienstleistungen online zu verkaufen.
WordPress, das beliebteste und leistungsfähigste CMS, ermöglicht es Ihnen, fast alle Arten von Websites zu erstellen, einschließlich Online-Shops. Shopify hingegen ist eine verwaltete, gehostete Plattform, die speziell für den Aufbau von schnellen und einfach zu verwaltenden Online-Shops entwickelt wurde.
Dieses Tutorial zeigt Ihnen, wie Sie WordPress mit Shopify integrieren und nutzen können, um das beste Ergebnis für Ihr Online-Geschäft zu erzielen.
Ob angestellt, Unternehmer oder selbstständig tätig, ist es für alle in der heutigen digitalen Welt wichtig, gute Antworten auf die folgenden Fragen zu finden: was ist Shopify und wie funktioniert Shopify?
Sobald Sie in der digitalen Welt Umsätze generieren möchten, sollten Sie den eigenen Shopify Shop erstellen. Shopify Seiten ermöglichen so vielfältige kreative Umsetzungen, dass für jede Businessidee etwas dabei ist. Durch den digitalen Vertrieb können Sie langfristig Ihre selbständige Tätigkeit erfolgreich weiter skalieren.
Wenn Sie sich überlegen, dass Sie Freelancer werden möchten, sollten Sie sich zuerst damit auseinandersetzen, wie Sie Einkünfte aus selbständiger Arbeit generieren können. Die digitale Welt könnte für Ihre Businessidee den großartigen Anfang darstellen.
Warum Sie WordPress mit Shopify verbinden sollten
Es gibt viele Möglichkeiten, einen Online-Shop mit WordPress zu erstellen (z.B. mit dem WooCommerce Plugin). Wenn Sie jedoch einen Online-Shop direkt auf Ihrer WordPress-Website installieren, entstehen zusätzliche Kosten und Inhalte (wie Seiten, Produkte, Bilder und Code), die Ihre Website drastisch verlangsamen können.
Die Verwaltung Ihres Online-Shops am selben Ort wie Ihr Blog, Ihre Webseiten und vielleicht Ihr Ticketingsystem könnte Sie außerdem überfordern.
Es könnte also eine gute Idee sein, Ihre Shop-Seiten und deren Funktionen (wie den Zahlungs- und Kassiervorgang) ganz von Ihrer WordPress-Website zu trennen. Die Verwendung von Shopify in Kombination mit WordPress wird Ihrem Online-Geschäft helfen:
- Besser und schneller arbeiten, sowohl für Sie als auch für Ihre Besucher
- Nutzen Sie die Vorteile, die WordPress und Shopify bieten
- Sind Sie leicht zu verwalten (mit zwei separaten und leistungsstarken Admin-Panels)
- Wachsen Sie schneller mit mehr Tools (Shopify-Apps, WordPress-Plugins usw.)
- Nutzen Sie den starken Support von Shopify
- Betreiben Sie doppelte Shops von einem Backend und mehreren WordPress-Frontends aus
Wie Sie Shopify mit WordPress über ein Plugin integrieren
Wenn es um das Hinzufügen von Funktionen zu WordPress geht, haben Sie die Wahl zwischen der Verwendung eines Plugins oder der manuellen Umsetzung mit eigenem Code. In diesem Abschnitt möchte ich ShopWP verwenden, ein leistungsstarkes WordPress-Plugin, mit dem Sie Ihre Website mit einem Shopify-Shop verbinden können.
1. ShopWP WordPress-Plugin installieren
Um es zu installieren, gehen Sie in Ihren WordPress-Adminbereich, navigieren Sie zu Plugins > Neu hinzufügen und suchen Sie nach ShopWP. Wenn es wie im Screenshot unten erscheint, klicken Sie auf Jetzt installieren und aktivieren Sie es.
2. Verbinden Sie Ihren Shopify-Shop
Nach der Installation und Aktivierung sehen Sie einen neuen Menüpunkt (ShopWP) im Seitenleistenmenü. Wählen Sie ShopWP und klicken Sie unter der Registerkarte Verbinden auf Beginnen Sie den Verbindungsprozess.
Sie werden zu einem neuen Fenster weitergeleitet, in dem Sie in vier Schritten eine Verbindung zwischen Ihrer WordPress-Website und Ihrem Shopify-Shop herstellen können. Geben Sie zunächst die URL Ihres Shopify-Shops ein und klicken Sie auf Verbinden Sie Ihren Shopify-Shop.
Sie werden auf die Shopify-Website weitergeleitet, wo Sie sich bei Ihrem Konto anmelden müssen, um die ShopWP-App in Ihrem Shopify-Onlineshop zu installieren. Wenn Sie auf die Schaltfläche App installieren klicken, werden Sie automatisch wieder zum Verbindungsprozess weitergeleitet.
3. Konfigurieren Sie die WordPress-Einstellungen
Nach der erfolgreichen Verbindung zwischen Ihrer WordPress-Seite und Ihrem Shopify-Konto möchte das Plugin, dass Sie einige Einstellungen vornehmen.
Die Schaltfläche Listing-Seite aktivieren (die Sie auf dem Screenshot oben sehen können) erstellt Standardseiten für die Auflistung Ihrer Shopify-Produkte auf Ihrer WordPress-Website. Wenn Sie die Einstellung Produktdetailseite erstellen aktivieren, wird eine einzelne Seite für jedes Produkt auf Ihrer Website erstellt, um die Details Ihrer Produkte auf Ihrer WordPress-Website selbst zu präsentieren.
Ich ziehe es vor, beides zu deaktivieren, weil ich mit den vorgefertigten Shortcodes des Plugins Auflistungsseiten erstellen und die Benutzer auf die Shopify-Produktdetailseite umleiten möchte, wenn sie auf ein Produkt klicken. Dieser Ansatz hilft mir auch, meine WordPress-Website aufgeräumter und schneller zu halten.
Sie können diese Optionen auch später auf der Registerkarte Einstellungen Ihres Plugins ändern. Wenn Sie fertig sind, klicken Sie auf Weiter zum nächsten Schritt und wählen Sie auf dem nächsten Bildschirm eine Währung für die Preise.
Zuletzt nehmen Sie noch einige grundlegende Einstellungen für Ihren Warenkorb und den Kassiervorgang vor. Wenn Sie die erste Option deaktivieren, wird der WordPress-Warenkorb ausgeschaltet. Das ist eine gute Wahl, wenn Sie sich dafür entschieden haben, Produkte direkt mit Ihrem Shopify-Shop zu verknüpfen (im Schritt oben).
Wenn Sie das Gefühl haben, dass alles so eingestellt ist, wie Sie es wünschen, klicken Sie auf Speichern und die Einrichtung beenden.
Das war's! Sie haben Ihre WordPress-Website erfolgreich mit einem Shopify-Konto verbunden. Wenn Sie alle oben genannten Schritte korrekt ausgeführt haben, können Sie auf der Registerkarte Verbinden unter dem ShopWP-Plugin eine Meldung sehen, die Sie über den Verbindungsstatus informiert.
4. Synchronisieren Sie Ihren Shopify-Shop mit Ihrer WordPress-Seite
Nachdem Sie Ihre WordPress-Website mit Ihrem Shopify-Konto verbunden haben, können Sie auf die Registerkarte Sync unter dem ShopWP-Menüpunkt gehen und auf Sync Detail Page klicken, um Shopify-Produkte zu synchronisieren und Ihrer WordPress-Website hinzuzufügen.
Wenn Sie auf diese Schaltfläche klicken, werden automatisch alle verfügbaren Produkte aus Ihrem Shopify-Shop auf die WordPress-Website kopiert. Jetzt können Sie das Untermenü Produkte (unter dem ShopWP-Menüpunkt) aufrufen, um alle hinzugefügten Produkte zu sehen und die erfolgreiche Synchronisierung sicherzustellen.
5. Produkte auf der WordPress-Seite anzeigen
Um Produkte auf Ihrer Website anzuzeigen, können Sie ShopWP's vorgefertigte Shortcodes verwenden und sie zu einer neuen Seite hinzufügen. Erstellen Sie also eine neue Seite und nennen Sie sie, wie Sie wollen (ich habe sie Store genannt). Fügen Sie einen der ShopWP-Shortcodes hinzu (ich habe [wps_products] verwendet, um alle meine Produkte in einer Liste zu präsentieren).
Veröffentlichen Sie Ihre neue Seite und sehen Sie sie sich an!
Glückwunsch! Wenn Benutzer nun auf ein Produkt klicken, werden sie auf die Detailseite des Produkts in Ihrem Shopify-Shop weitergeleitet und können es von dort aus kaufen (Sie können auch die On-Click-Aktionen für die Produkte ändern).
Erinnern Sie sich daran, dass Sie jedes Mal, wenn Sie ein neues Produkt zu Ihrem Shopify-Shop hinzufügen, wie bisher auf die Schaltfläche Synchronisieren klicken müssen. Wenn Sie die automatische Synchronisierung aktivieren möchten, müssen Sie die Premium-Version des ShopWP-Plugins kaufen (auf der Registerkarte Lizenz).
Wie Sie Shopify ohne Plugins mit WordPress verbinden
Einige WordPress-Designer und Website-Manager ziehen es vor, so wenig Plugins wie möglich auf ihren Websites zu installieren, da Plugins Tausende von zusätzlichen Codezeilen zu Ihrer Website hinzufügen können. Die gute Nachricht ist, dass Shopify selbst eine offizielle Möglichkeit zur Verfügung gestellt hat, um seine Produkte auf anderen Plattformen anzuzeigen, und zwar die Kaufschaltflächen!
Wenn Sie also ein oder mehrere Shopify-Produkte auf Ihrer WordPress-Website anzeigen möchten, ohne irgendwelche Plugins oder Apps zu installieren, lesen Sie weiter, um zu erfahren, wie Sie Shopify Buy Buttons verwenden können.
1. Gehen Sie zu den Shopify-Einstellungen
Zunächst loggen Sie sich in Ihr Shopify-Konto ein und klicken in der linken unteren Ecke auf Einstellungen.
2. Einen Vertreibskanal hinzufügen
Wählen Sie Vertriebskanäle aus dem Seitenmenü und klicken Sie auf Vertriebskanal hinzufügen. Daraufhin öffnet sich ein Popup-Fenster, in dem Sie den Buy Button in der Liste finden können. Klicken Sie auf das Plus-Symbol, um ihn für Ihren aktuellen Shopify-Shop zu aktivieren.
3. Einen Buy Button erstellen
Auf dem nächsten Bildschirm sehen Sie eine einzelne Schaltfläche namens Kaufschaltfläche erstellen, die Sie auswählen müssen. Wählen Sie die Art der Kaufschaltfläche, die Sie erstellen möchten.
Ich ziehe es vor, eine Liste von Produkten auf meiner WordPress-Website anzuzeigen, anstatt ein einzelnes Produkt. Ich wähle also den zweiten Punkt (Kollektionskaufbutton). Das erste Element (Product Buy Button) eignet sich für die Präsentation eines einzelnen Produkts in einem Blogbeitrag, einer Seitenleiste, einer Fußzeile usw.
4. Wählen Sie eine Produktsammlung
Nachdem Sie also auf den Kollektions-Kaufbutton geklickt haben, wählen Sie in dem Popup-Fenster eine Kollektion aus und klicken auf die grüne Schaltfläche - Auswählen.
Auf der nächsten Seite können Sie das Aussehen Ihrer Produktliste in einem einfach zu bedienenden Live-Editor anpassen. Ändern Sie es nach Belieben und klicken Sie auf Weiter in der oberen rechten Ecke.
5. JavaScript-Schnipsel kopieren
Nun können Sie den Code kopieren, der die Sammlung Ihrer Produkte enthält (die Sie in den vorherigen Schritten erstellt und angepasst haben).
Kopieren Sie den Code und fügen Sie ihn an der gewünschten Stelle ein! Um Produkte auf Ihrer WordPress-Website anzuzeigen, müssen Sie eine neue Seite erstellen und diesen Code dort einfügen.
Dann veröffentlichen Sie Ihre Seite und sehen Sie sie sich an. Erledigt!
Benutzer manuell von WordPress zu Shopify umleiten
Wenn Sie einen einfacheren Weg suchen, oder wenn Sie Ihre Produkte nicht auf Ihrer WordPress-Website präsentieren möchten, dann haben Sie noch eine weitere Möglichkeit! Bei dieser letzten Methode lernen Sie, wie Sie Benutzer von WordPress zu Shopify leiten und sie nach erfolgreicher Zahlung wieder zu WordPress zurückbringen können.
1. Menüpunkt mit Shopify-Link hinzufügen
Gehen Sie in Ihrem WordPress-Dashboard zu Auftritt > Menüs, erstellen Sie einen neuen Menüpunkt und verlinken Sie ihn mit Ihrem Shopify-Shop. Fügen Sie ihn dann in das Hauptmenü Ihrer Website ein und klicken Sie auf Menü speichern.
Mit diesem einfachen Trick können Sie Ihre Besucher von WordPress zu Ihrem Shopify-Shop leiten, wo sie Ihre Produkte erkunden und kaufen können. Wie Sie auf dem Screenshot unten sehen können, ist alles für Ihre Kunden in Ihrem Shopify-Shop vorbereitet.
2. Benutzer zurückholen
Wenn Sie Kunden nach dem Kauf eines Produkts wieder auf Ihre WordPress-Website zurückbringen möchten, müssen Sie Ihrem Shopify-Shop einige Funktionen hinzufügen. Dieser zusätzliche Code kann in das Feld Zusätzliche Skripte eingefügt werden, wie im folgenden Screenshot dargestellt.
Die Umleitung von Nutzern nach der Zahlung auf Ihrer Website ist ein wenig umständlich, aber ein Problem, das in der Shopify-Community angesprochen wurde. Die von Shopify-Mitarbeitern vorgeschlagene Lösung finden Sie hier in der Shopify Community.
Lassen Sie uns nun einen Schritt weiter gehen und die Benutzererfahrung verbessern, wenn ein Besucher von Ihrer WordPress-Website zu Ihrem Shopify-Shop wechselt.
Themes für eine nahtlose WordPress Shopify Integration
Viele Entwickler haben ihre Themes für verschiedene CMS und Frameworks erstellt, so dass Sie sie sowohl auf WordPress als auch auf Shopify verwenden können. Sie finden sie auf ThemeForest und Envato Elements.
Lassen Sie uns einige dieser Themes hervorheben, die Sie separat für WordPress und Shopify herunterladen und installieren können, um ein einheitliches Design für beide Seiten Ihrer Website zu haben.
1. Unero - Clean & Minimal Shopify Sections Theme
Unero ist eines der beliebtesten Shopify-Themes auf ThemeForest, das mit mehr als 16 vorgefertigten Themes und vielen weiteren Funktionen ausgestattet ist. Wenn Sie dieses minimalistische Theme in Ihrem Shopify-Shop installieren, wird die Aufmerksamkeit auf Ihre Produkte gelenkt und Verwirrung bei der Erkundung Ihres Shops und dem Kaufprozess vermieden.
Mit seiner WordPress-Version können Sie die gleiche Umgebung für Ihre WordPress-Website schaffen.
2. Roxxe - Responsive Multipurpose Shopify Theme
Dieses Theme ist ein leistungsstarkes Mehrzweck-Theme, das sowohl für Shopify als auch für WordPress verfügbar ist. Es bietet Ihnen 79 einbaufertige Homepages für Shopify und 15 Demos für Ihre WordPress-Website. Werfen Sie einen Blick auf die Live-Vorschau auf ThemeForest, um mehr darüber zu erfahren.
3. iOne - Drag & Drop Minimal Responsive Shopify Theme
Dieses Theme ist ein weiteres beeindruckendes minimalistisches Shopify-Theme, das verschiedene Demos und integrierte Funktionen für Ihren Shop enthält. Schauen Sie sich die WordPress-Version an und wenn Sie weitere Shopify- und WordPress-Themes sehen möchten, finden Sie diese auf Envato Elements oder ThemeForest.
Zusammenfassung
In diesem Tutorial haben Sie gelernt, wie Sie zwei der beliebtesten Website-Baukästen miteinander verbinden, um einen schnellen und leistungsstarken Online-Shop zu erstellen. Wenn Sie mehr über Shopify und WordPress lesen möchten, besuchen Sie Tuts+ oder werfen Sie einen Blick auf die folgenden Artikel.
