Advertisement
  1. Web Design
  2. Shopify

Wie Sie WordPress mit Ihrem Shopify-Shop verbinden (und warum Sie das tun sollten)

Scroll to top
Read Time: 10 min

German (Deutsch) translation by Ines Willenbrock (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.

Installieren Sie ein neues Plugin auf Ihrer WordPress WebsiteInstallieren Sie ein neues Plugin auf Ihrer WordPress WebsiteInstallieren Sie ein neues Plugin auf Ihrer WordPress Website

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.

Verbindung zwischen WordPress und Shopify startenVerbindung zwischen WordPress und Shopify startenVerbindung zwischen WordPress und Shopify starten

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.

Der erste Schritt des VerbindungsprozessesDer erste Schritt des VerbindungsprozessesDer erste Schritt des Verbindungsprozesses

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.

Installieren Sie die ShopWP-App in Ihrem Shopify-ShopInstallieren Sie die ShopWP-App in Ihrem Shopify-ShopInstallieren Sie die ShopWP-App in Ihrem Shopify-Shop

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.

Einstellungen für das ShopWP-Plugin anpassenEinstellungen für das ShopWP-Plugin anpassenEinstellungen für das ShopWP-Plugin anpassen

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.

Wählen Sie eine Währung für Ihren ShopWählen Sie eine Währung für Ihren ShopWählen Sie eine Währung für Ihren Shop

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.

Speichern und die Einrichtung abschließenSpeichern und die Einrichtung abschließenSpeichern und die Einrichtung abschließen

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.

Produkte von Shopify zu WordPress hinzufügenProdukte von Shopify zu WordPress hinzufügenProdukte von Shopify zu WordPress hinzufü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). 

Erstellen Sie eine neue Seite und fügen Sie ihr Shortcodes hinzuErstellen Sie eine neue Seite und fügen Sie ihr Shortcodes hinzuErstellen Sie eine neue Seite und fügen Sie ihr Shortcodes hinzu

Veröffentlichen Sie Ihre neue Seite und sehen Sie sie sich an!

Werfen Sie einen Blick auf Ihren Shopify-Shop in WordPressWerfen Sie einen Blick auf Ihren Shopify-Shop in WordPressWerfen Sie einen Blick auf Ihren Shopify-Shop in WordPress

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.

Shopify EinstellungsseiteShopify EinstellungsseiteShopify Einstellungsseite

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.

Buy Button zu Ihren Verkaufskanälen hinzufügenBuy Button zu Ihren Verkaufskanälen hinzufügenBuy Button zu Ihren Verkaufskanälen hinzufügen

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.

Wählen Sie den Typ des Buy Button, den Sie erstellen möchtenWählen Sie den Typ des Buy Button, den Sie erstellen möchtenWählen Sie den Typ des Buy Button, den Sie erstellen möchten

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.

Dies setzt voraus, dass Sie in Ihrem Shopify-Shop bereits Produktkollektionen erstellt haben. Falls nicht, können Sie dies tun, indem Sie im linken Menü Ihres Shopify-Kontos zu Produkte > Kollektionen > Kollektion erstellen navigieren.
Wählen Sie eine KollektionWählen Sie eine KollektionWählen Sie eine Kollektion

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.

Passen Sie die Kollektion anPassen Sie die Kollektion anPassen Sie die Kollektion an

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, den Sie erzeugt habenKopieren Sie den Code, den Sie erzeugt habenKopieren Sie den Code, den Sie erzeugt 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.

Fügen Sie Ihren Code in eine neue WordPress-Seite einFügen Sie Ihren Code in eine neue WordPress-Seite einFügen Sie Ihren Code in eine neue WordPress-Seite ein

Dann veröffentlichen Sie Ihre Seite und sehen Sie sie sich an. Erledigt!

Ihre Sammlung wird auf Ihrer Wordpress-Website angezeigtIhre Sammlung wird auf Ihrer Wordpress-Website angezeigtIhre Sammlung wird auf Ihrer Wordpress-Website angezeigt

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.

Erstellen Sie einen neuen Link zu Ihrem Shopify-Shop und fügen Sie ihn in Ihre WordPress-Website einErstellen Sie einen neuen Link zu Ihrem Shopify-Shop und fügen Sie ihn in Ihre WordPress-Website einErstellen Sie einen neuen Link zu Ihrem Shopify-Shop und fügen Sie ihn in Ihre WordPress-Website ein

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.

Benutzer sehen Ihren Shopify Store, nachdem sie auf den Link geklickt habenBenutzer sehen Ihren Shopify Store, nachdem sie auf den Link geklickt habenBenutzer sehen Ihren Shopify Store, nachdem sie auf den Link geklickt haben

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.

Benutzer nach dem Kauf mit einem Code auf Ihre WordPress-Seite umleitenBenutzer nach dem Kauf mit einem Code auf Ihre WordPress-Seite umleitenBenutzer nach dem Kauf mit einem Code auf Ihre WordPress-Seite umleiten

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.

    Unero Shopify Demo

    Unero WordPress Demo

    Unero - schönes Theme für Shopify und WordPressUnero - schönes Theme für Shopify und WordPressUnero - schönes Theme für Shopify und WordPress

    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.

    Roxxe Shopify Demo

    Roxxe WordPress Demo

    Roxxe - gut gestaltetes Shopify-Theme - WordPress-Version verfügbarRoxxe - gut gestaltetes Shopify-Theme - WordPress-Version verfügbarRoxxe - gut gestaltetes Shopify-Theme - WordPress-Version verfügbar

    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.

    iOne Shopify Demo

    iOne WordPress Demo

    iONE - attraktives Shopify-Theme mit minimalistischem Design - WordPress-Version bereitiONE - attraktives Shopify-Theme mit minimalistischem Design - WordPress-Version bereitiONE - attraktives Shopify-Theme mit minimalistischem Design - WordPress-Version bereit

    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.

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.