In diesem Artikel zeigen wir dir Schritt für Schritt, wie du Shopify in Onepage integrieren kannst. Dabei geht es vor allem darum, einzelne Produkte oder Kollektionen unkompliziert auf deiner Onepage-Seite als "Kaufen"-Button einzubetten.
📌 Hinweis: Die folgenden Schritte und Screenshots basieren auf dem Stand zum Zeitpunkt der Erstellung dieses Artikels. Die Benutzeroberfläche oder Bezeichnungen des Tools können sich inzwischen geändert haben. Sollten dir Abweichungen auffallen, empfehlen wir, die aktuellen Anleitungen im Tool zu prüfen, im Hilfe-Center des Anbieters nachzuschauen oder den Support des Anbieters zu kontaktieren.
Shopify Buy Button erstellen
In diesem Beispiel zeigen wir dir, wie du ein Produkt in Shopify anlegst und den Buy-Button einrichtest. Dasselbe Vorgehen funktioniert auch für eine Kollektion.
Schritt 1: Produkt in Shopify anlegen
Lege zunächst das Produkt in deinem Shopify-Account an, das du auf deiner Onepage-Seite verkaufen möchtest.
Klicke dazu auf "Produkte" → "Produkt hinzufügen".
Du kannst dein Produkt nach Belieben anlegen und dabei Titel, Beschreibung, Bilder, Kategorien, Preise und viele weitere Details festlegen.
Beispiel für "Handgemachte Kerzen":
Wähle anschließend "Speichern".
Schritt 2: Buy Button Add-on installieren
Installiere das offizielle Shopify-Add-on "Buy Button": Shopify Buy Button
Alternativ kannst du auch direkt im App-Store nach "Buy Button channel" suchen.
Schritt 3: Schaltfläche "Kaufen" auswählen
Nach der Installation erscheint im Shopify-Menü links der neue Punkt Schaltfläche "Kaufen". Hier wählst du Schaltfläche "Kaufen" für ein Produkt aus und wählst das gewünschte Produkt.
Schritt 4: Design- und Verhaltenseinstellung vornehmen
Du kannst nun Design- und Verhaltenseinstellungen für deinen Buy Button vornehmen. Dabei stehen dir folgende Optionen zur Verfügung:
Layout-Stil: Wähle, wie das Produkt auf deiner Seite angezeigt wird, z. B. Basic, Klassisch oder Vollansicht.
Aktion bei Klick: Bestimme, was passiert, wenn Besucher auf den Button klicken, z. B. direkt zum Warenkorb hinzufügen, Weiterleitung zum Check-out oder Produktdetails öffnen.
Schaltflächenstil: Passe Farbe, Form, Text und Größe der Kauf-Schaltfläche an, damit sie zum Design deiner Seite passt.
Layout: Feineinstellungen für Abstände, Ausrichtung und Anordnung der Elemente innerhalb der Produktbox, sowie Textanpassung.
Warenkorb: Du kannst verschiedene Texte und Farben individuell festlegen, um den Warenkorb optisch und inhaltlich an deine Website anzupassen.
Erweiterte Einstellungen: Hier kannst du festlegen, wie der Checkout-Prozess für deine Kunden abläuft, entweder durch Öffnen eines Pop-up-Fensters oder durch eine Weiterleitung in der gleichen Registerkarte.
Das Endergebnis könnte dann zum Beispiel folgendermaßen aussehen:
Wähle nach Beendigung der Anpassungen "Weiter".
Schritt 5: Embed-Code kopieren
Kopiere jetzt den Code, indem du auf "Code kopieren" klickst.
⚠️ Wichtig: Alle weiteren Einstellungen, wie die Verbindung zur Domain, die Einrichtung der Zahlungsmethoden und weitere Konfigurationen, müssen noch vorgenommen werden, damit Kunden den Kauf tatsächlich abschließen können.
Bei Fragen kannst du dich jederzeit gerne an den Shopify-Support wenden.
Code in Onepage einfügen
In Onepage kannst du den Code jetzt in jedem Abschnitt deiner Seite einbinden.
Schritt 1: Neuen Abschnitt erstellen
Öffne dein Projekt im Editor und öffne die Seite, auf der der Buy-Button erscheinen soll. Klicke auf das +-Symbol und füge einen neuen leeren Abschnitt hinzu.
Suche in der Suchleiste nach "Personalisierten Code" und füge das Element in deinen Abschnitt ein.
Schritt 2: Code einfügen
Füge bei "HTML" den zuvor kopierten Code ein.
Klicke danach auf "Veröffentlichen" oder "Update".
🎉 Jetzt ist dein Produkt erfolgreich in deinem Onepage-Projekt integriert! 🎉
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂