Shopify Buy Button: In nur 3 Schritten E-Commerce-Funktionen zu jeder Website hinzufügen

Mit dem Buy Button von Shopify kannst du die E-Commerce-Tools von Shopify vollständig in jede beliebige Website integrieren – egal ob sie mit WordPress, Squarespace, Wix oder einem anderen Website-Builder erstellt wurde.

Shopify ist nicht nur für vollwertige E-Commerce-Unternehmen geeignet. Jeder, der seine Projekte monetarisieren möchte (ob Blogger:in, Künstler:in, Schriftsteller:in, Designer:in, Podcaster:in oder Influencer:in), kann vom Online-Verkauf profitieren.

Die Einrichtung eines Onlineshops braucht jedoch Zeit. Gleichzeitig wird durch die Umleitung des Web-Traffics die Kaufabwicklung erschwert, was sich wiederum negativ auf deinen Umsatz auswirken kann. Der Shopify Buy Button ist deine Lösung!

1. Den "Buy Button"-Vertriebskanal zu deinem Shopify-Shop hinzufügen

Im ersten Schritt meldest du dich in deinem Shopify-Shop an. Wenn du den Buy Button unter deinen Vertriebskanälen im linken Menü siehst, wurde der Vertriebskanal bereits hinzugefügt. Ist dies der Fall, kannst du mit Schritt 2 fortfahren.

Auf dem Desktop

1. Rufe die Seite für den "Buy Button"-Vertriebskanal im Shopify App Store auf (du kommst auch auf diese Seite, indem du zu "Einstellungen" > "Apps und Vertriebskanäle" > "Shopify App Store" gehst und nach "Buy Button" suchst).
2. Klicke auf App hinzufügen und dann auf dem nächsten Bildschirm auf Vertriebskanal hinzufügen.

Nachdem die Seite aktualisiert wurde, solltest du den Buy Button unter Vertriebskanäle im Menü auf der linken Seite sehen. Pinne den Kanal in deinem Navigationsbereich an, damit du später leichter darauf zugreifen kannst.

Wenn du den Buy Button nicht angepinnt hast, kannst du ihn wiederfinden, indem du auf Vertriebskanäle und dann unter deinen installierten Kanälen auf Buy Button klickst.

Auf Mobilgeräten 

1. Öffne die Shopify-App auf deinem mobilen Endgerät und wähle im unteren Menü die Option "Shop" aus.
2. Wähle neben Vertriebskanäle die Option "Kanal hinzufügen" (auf dem iPhone) oder + (auf Android).
3. Wähle "Buy Button" aus der Liste der Optionen und tippe dann auf "Buy Button hinzufügen".

2. Einen Buy Button erstellen

Sobald du den "Buy Button"-Vertriebskanal hinzugefügt hast, kannst du mit der Erstellung deines Buy Buttons beginnen. Navigiere zu deiner "Buy Button"-Seite, indem du entweder auf Buy Button klickst (wenn du ihn an deine Navigation gepinnt hast) oder indem du zu Einstellungen > Apps und Vertriebskanäle > Buy Button > Vertriebskanäle öffnen gehst.

Klicke dort auf "Create a Buy Button" (Buy Button erstellen).

Du kannst Buy Buttons entweder für ein einzelnes Produkt oder für eine ganze Produktkategorie erstellen. Auf dem nächsten Bildschirm wirst du gefragt, welche Option du nutzen möchtest. Klicke auf die gewünschte Option und suche dann nach dem Produkt oder der Produktkategorie, die du für die Erstellung deines Buy Buttons verwenden möchtest.

Vergewissere dich, dass das entsprechende Kontrollkästchen markiert ist und klicke dann auf "Auswählen".

Sobald du deine Auswahl getroffen hast, gelangst du zum Buy Button Editor, in dem du das Erscheinungsbild deines Buy Buttons anpassen kannst.

So passt du deinen Buy Button an

Im Buy Button Editor siehst du auf der linken Seite eine Reihe von Optionen, mit denen du das Aussehen deines Buy Buttons anpassen kannst. Auf der rechten Seite siehst du eine Vorschau deines Buy Buttons.

Passe die Optionen auf der linken Seite nach deinen Vorstellungen an. Deine Vorschau wird automatisch mit den Anpassungen aktualisiert, damit du schon beim Erstellen deines Buy Buttons prüfen kannst, wie er später aussehen wird. In der Vorschau kannst du sehen, wie dein Buy Button sowohl auf dem Desktop als auch auf mobilen Bildschirmen aussehen wird. Dazu klickst du oben im Editor auf das Desktop- oder Mobile-Symbol. 

Lesetipp: In diesem ultimativen Guide zeigen wir dir, wie du in nur 8 Schritten deine erste eigene Website erstellen kannst.

Hier ist eine Übersicht über die Optionen, die du anpassen kannst:

• Product variant (Produktvariante): Wähle aus, welche Varianten des Produkts du über den Buy Button anbieten möchtest. In der Standardeinstellung werden alle Varianten ausgewählt.
• Layout: Hier kannst du zwischen den Optionen Basic, Classic und Full wählen. Auf der rechten Seite siehst du eine Vorschau zu jedem Layout, sobald du es aus der "Layout"-Dropdown-Liste ausgewählt hast.
• Action when people click (Aktion, wenn Leute klicken): Wähle zwischen "Add product to cart" (Produkt in den Warenkorb legen), "Direct to Checkout" (Direkt zum Checkout) oder "Open product details" (Produktdetails öffnen). Mit der Option "Add product to cart" wird ein Warenkorb-Widget auf der rechten Seite deines Bildschirms erstellt. Mit der Option "Direct to checkout" wird ein "Jetzt kaufen"-Button erstellt, der die Kund:innen direkt zum Checkout führt (beachte, dass die Kund:innen mit dieser Option nicht mehr als einen Artikel in ihren Warenkorb legen können). Mit der Option "Open product details" wird ein "Produkt anzeigen"-Button erstellt, der ein Pop-up mit Produktinformationen und einem "Zum Warenkorb"-Button öffnet.
• Button style (Button-Stil): Hier kannst du die Farben, die Schriftart, die Größe und die Eckform deines Buy Buttons anpassen. 
• Layout: Im Layout-Menü kannst du das Layout deines Buttons noch genauer anpassen, so zum Beispiel die Schriftfarben, den Text der Schaltflächen und die Schriftart. 
• Shopping cart (Warenkorb): Hier kannst du die Einstellungen deines Warenkorb-Widgets anpassen, einschließlich der Texte und Farben. Beachte, dass diese Option ausgegraut ist, wenn du das Layout "Direct to checkout" verwendest, da es hierbei kein Warenkorb-Widget gibt. 
• Detailed pop-up (Detailliertes Pop-up): Wenn du unter "Action when people click" die Option "Open product details" auswählst, kannst du in diesem Abschnitt den Text, die Farben und die Schriftart für das Pop-up anpassen.
• Advanced settings (Erweiterte Einstellungen): Hier kannst du einstellen, wie der Checkout deinen Nutzer:innen angezeigt wird. Du kannst entweder die Option "Open pop-up window" (Pop-up-Fenster öffnen) wählen, wodurch ein Pop-up-Checkout erstellt wird, der sich nach Abschluss der Bestellung schließt. Die zweite Option lautet "Redirect in the same tab" (Umleitung im selben Tab), wodurch die Nutzer:innen von ihrem Browserfenster aus zu deiner Shopify-Checkout-Seite weitergeleitet werden und nach Abschluss der Transaktion zu deiner Seite zurückkehren. 

Denke daran, dass die Anpassung dieser Einstellungen keine Änderungen an bereits eingebetteten Buy Buttons bewirkt. Deshalb ist es sinnvoll, dass du dir etwas Zeit nimmst, um den Buy Button ganz nach deinem Geschmack anzupassen, bevor du zum nächsten Schritt übergehst.

Wenn du mit deinem Entwurf zufrieden bist, klickst du oben rechts auf die Schaltfläche "Next" (Weiter).

3. Code für die Einbettung des Buy Buttons in den HTML-Code deiner Website einfügen

Wenn du auf "Next" klickst, wird der Einbettungscode für deinen Buy Button automatisch generiert. Klicke auf die Schaltfläche "Copy Code" (Code kopieren), wenn du ihn auf einer Website einbinden möchtest, oder auf die Schaltfläche "Keep Customizing" (Weiter anpassen), wenn du zum Buy Button Editor zurückkehren und weitere Anpassungen vornehmen möchtest. 

Lesetipp: Hier vergleichen wir für dich Ecwid vs. Shopify und stellen fest, welches Tool sich besser für deinen Onlineshop eignet!

Der Code, den du hier kopiert hast, kann in den HTML-Code einer beliebigen Website eingefügt werden und erstellt einen Buy Button und einen Warenkorb, der direkt mit deinem Shopify-Adminbereich verknüpft ist. So kannst du von jeder beliebigen Website aufgegebene Bestellungen aus deinem Shopify-Adminbereich verwalten und bearbeiten.

Das Hinzufügen des Einbettungscodes kann sich unterschiedlich gestalten, je nachdem, wie der Button aussehen soll, welchen Website-Builder du verwendest oder sogar welches Theme du auf der Plattform benutzt. 

Im Folgenden findest du eine Übersicht über die gängigsten Stellen, an denen sich ein Shopify Buy Button einbinden lässt, und die Schritte, die du dafür jeweils ausführen musst.

Im Shopify Podcast erzählen dir unsere erfolgreichen Gäste von ihren E-Commerce-Abenteuern. Hör rein!

Abonniere am besten direkt den Shopify Podcast und verpasse keine Folge mehr!

3a) Hinzufügen des Einbettungscodes zu einer Landingpage oder einem Blogbeitrag in deinem Shopify-Store

Hinweis: Wenn du einen Buy Button in deinen Shopify-Store oder -Blog implementierst, kann dies zu Problemen im Checkout-Prozess führen. Aus diesem Grund raten wir davon ab und empfehlen, lieber Permalinks zu nutzen, um deinen Warenkorb vorher zu laden.

In deinem Shopify-Store sind bereits Produktseiten und ein Warenkorb integriert. Gelegentlich gibt es jedoch Situationen, in denen du einen Buy Button direkt auf einer Seite oder in einem Blogbeitrag einfügen möchtest, um so für noch mehr Benutzerfreundlichkeit zu sorgen.

Wenn du zum Beispiel einen Blogbeitrag über ein neu erschienenes Produkt schreibst, möchtest du deinen Leser:innen vielleicht eine einfache Möglichkeit zum direkten Kauf im Beitrag geben, anstatt sie erst auf eine separate Seite zu leiten. 

In einem solchen Szenario solltest du die hier beschriebenen Schritte befolgen: 

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Blog-Beiträge oder Onlineshop > Seiten, je nachdem, ob du den Buy Button zu einem Blog-Beitrag oder einer Seite hinzufügen möchtest. 
2. Wähle den Blog-Beitrag oder die Seite aus, zu der du den Buy Button hinzufügen möchtest.
3. Klicke im Inhaltsfenster auf die Schaltfläche <>, um von der Bearbeitungsansicht zur HTML-Ansicht zu wechseln. 
4. Füge den zuvor kopierten Einbettungscode in den HTML-Editor an der Stelle ein, an der er erscheinen soll. Klicke auf Speichern.

Sobald du deine Seite oder deinen Blogbeitrag gespeichert hast, wird dein Buy Button der Seite hinzugefügt. Wenn du dir eine Vorschau ohne Veröffentlichung ansehen möchtest, wählst du oben rechts im Seiteneditor die Option Vorschau (oder Seite ansehen, wenn du sie zu einer Seite hinzufügst).

3b) Einen Buy Button zu einer Squarespace Website hinzufügen

Bei Squarespace kannst du deinen Buy Button zu einzelnen Beiträgen oder zu Menüs auf deiner Homepage hinzufügen. So gehst du dafür vor: 

1. Logge dich in dein Squarespace-Dashboard ein und öffne die Seite, auf der du einen Buy Button hinzufügen möchtest.
2. Bewege den Mauszeiger über den Inhaltsbereich des Seitenelements, in dem der Buy Button erscheinen soll, und klicke auf Bearbeiten. 
3. Wähle den Punkt aus, an dem du den Einbettungscode hinzufügen möchtest. 
4. Wähle im Menü Inhaltsblöcke unter dem Abschnitt Mehr die Option Code. 
5. Vergewissere dich, dass im Dropdown-Menü oben rechts HTML ausgewählt ist, und füge dann den Code für die Einbettung des Buy Buttons in das Code-Feld ein. 
6. Klicke abschließend auf Übernehmen.

Denke daran, dass einige benutzerdefinierte Squarespace-Themes fortgeschrittene HTML-Kenntnisse für die Anpassungen erfordern können. In solchen Fällen wendest du dich am besten direkt an einen Entwickler oder eine Entwicklerin, der oder die dir beim Hinzufügen von benutzerdefiniertem Code helfen kann.

Lesetipp: So kannst du eine eigene Website erstellen. 

3c) Einen Buy Button zu einem WordPress-Blog hinzufügen

So fügst du einen Buy Button zu einem Beitrag auf deiner WordPress.org-Seite hinzu: 

• Gehe in deinem WordPress-Dashboard zu deinen Beiträgen und wähle den Beitrag aus, dem du einen Buy Button hinzufügen möchtest.
• Je nach der von dir verwendeten Version des WordPress-Editors führst du einen der folgenden Schritte aus: 

• Wenn du den klassischen Editor für deine WordPress-Website verwendest, klickst du im Editor auf den Tab Text, um von der visuellen Ansicht zur Textansicht zu wechseln.
• Wenn du den Block-Editor für deine WordPress-Website verwendest, klickst du auf den +-Button und wählst dann die Option Benutzerdefiniertes HTML.
• Füge den Code zum Einbetten des Buy Buttons an der Stelle ein, an dem der Button erscheinen soll. 
• Je nachdem, was du tun möchtest, klickst du abschließend auf Entwurf speichern, Vorschau oder Veröffentlichen. 

Lesetipp: Erfahre, wie es das Wiener Startup Tapkey vom WordPress-Blog zum Shopify-Store geschafft hat.

Du kannst den Einbettungscode auch in ein WordPress-Menü einfügen. Hierfür gehst du wie folgt vor: 

1. Klicke in deinem WordPress-Dashboard auf Darstellung.
2. Wähle Anpassen, um den Design-Editor zu öffnen, und anschließend Widgets. 
3. Wähle den Bereich aus, in dem du deinen Buy Button hinzufügen möchtest.
4. Klicke auf Widget hinzufügen, dann auf Text.
5. Füge den Einbettungscode für den Buy Button ein.
6. Klicke auf Speichern & Veröffentlichen. 

Beachte, dass die Shopify Buy Buttons mit der WordPress.org-Plattform kompatibel sind, aber nicht mit WordPress.com-Plattform, da hier die HTML-Anpassung nur eingeschränkt möglich ist.

3d) Einen Buy Button zu Wix hinzufügen

Um einen Shopify Buy Button zu deiner Wix-Website hinzuzufügen, folgst du diesen Schritten: 

1. Wähle in deinem Wix-Dashboard auf der Seite Meine Websites die Website aus, der du den Buy Button hinzufügen möchtest. Anschließend wählst du Website bearbeiten. 
2. Klicke im Website-Editor von Wix auf + und dann auf Mehr. Wähle HTML-Code. Damit fügst du ein HTML-Code-Widget zu deiner Seite hinzu. 
3. Klicke auf Code eingeben. Füge im Pop-up-Fenster HTML-Einstellungen deinen Code zum Einbetten des Buy Buttons in das Feld Code hier hinzufügen ein.
4. Klicke abschließend auf Übernehmen. 
5. Passe die Größe des HTML-Code-Widgets nach deinem Geschmack an. Achte darauf, dass der Warenkorb-Tab sichtbar ist, sofern du einen Buy Button mit einem Warenkorb eingebettet hast. 
6. Wenn du mit der Anpassung fertig bist, klickst du auf Speichern.

Wenn du Buy Buttons für mehrere Produkte einbetten möchtest, ist es am besten, wenn du statt eines Buy Buttons für ein einzelnes Produkt einen Kategorie-Button einbettest. Wenn du mehrere Buttons für einzelne Produkte einbindest, sehen die Besucher:innen für jedes Produkt einen separaten Warenkorb.

Lesetipp: Hier stellen wir dir die 5 besten Wix-Alternativen vor.

3e) Shopify Buy Button mit Script-Tags hinzufügen

In einigen Fällen verlangen Website-Builder (wie z. B. Unbounce), dass du die <script>-Tags separat in den Header einfügst, während du den Rest des Codes in den Body deiner Seite einfügst, und zwar dort, wo der Buy Button erscheinen soll. 

Dazu musst du das <script>-Element vom <div>-Element in deinem Code zum Einbetten des Buy Buttons trennen. Du siehst das <div>-Element oben im Code. Es sieht ungefähr so aus: 

<div id="product-component-1655929612938"></div>

Das Script-Element (das viel länger ist) macht den Rest des Einbettungscodes aus und beginnt mit <script type="text/javascript"> und endet mit </script>.

Sobald du diese Elemente voneinander getrennt hast, kannst du die folgenden Schritte ausführen:

1. Öffne den Seitenheader der Website, auf der du deinen Buy Button einbetten möchtest.
2. Kopiere das <script>-Element und füge es vollständig in den Header deiner Website ein.
3. Speichere deine Änderungen.
4. Öffne nun den Seiteneditor für die Seite, auf der du deinen Shopify Buy Button hinzufügen möchtest.
5. Kopiere das <div>-Element und füge es an der Stelle auf der Seite ein, an der dein Buy Button erscheinen soll. 
6. Speichere deine Änderungen.

Kostenloses Webinar: In 30 Minuten zum eigenen Onlineshop

Du willst selbst mal sehen, wie schnell du einen Shop aufsetzen kannst?

Der Shopify-Experte und leidenschaftliche Shop-Betreiber Adrian Piegsa zeigt dir, wie du dich anmeldest, eine Domain verknüpfst, Produkte auswählst und natürlich alle rechtlichen Vorgaben umsetzt.

Jetzt kostenlos teilnehmen

Mit dem Buy Button von Shopify jede Website mit E-Commerce-Funktionen aufwerten

Shopify Buy Buttons helfen Händler:innen, ihre Kundschaft dort anzusprechen, wo sie sich aufhält – unabhängig von der Seite oder der Plattform. Die Bequemlichkeit, direkt an Kund:innen zu verkaufen, ohne sie auf eine andere Seite verweisen zu müssen, reduziert Reibungsverluste und kann dazu beitragen, den Umsatz zu steigern. 

Mit einem strategisch platzierten Buy Button auf einer Blogseite können Kund:innen auf einfache Weise Produkte kaufen, ohne die Seite zu verlassen, auf der sie sich gerade befinden. 

Für Blogger:innen, Künstler:innen, Autor:innen, Designer:innen, Podcaster:innen, Influencer:innen und alle anderen, die ihre Arbeit monetarisieren wollen, bieten die Buy Buttons von Shopify eine einfache Möglichkeit, die Vorteile der E-Commerce-Plattform von Shopify zu nutzen, ohne eine komplett neue Website erstellen zu müssen. 

Mit den anpassbaren Stilen, Farben und Funktionen der Shopify Buy Buttons kannst du jede Seite oder Website in einen vollwertigen Onlineshop verwandeln.