Code der Schaltfläche "Kaufen" zu HTML hinzufügen

Nachdem du in deinem Shopify-Adminbereich eine Schaltfläche "Kaufen" erstellt hast, kannst du sie deiner eigenen Website oder deinem Blog hinzufügen.

Der Prozess des Hinzufügens von Einbettungscode zum HTML-Code deiner Website hängt von verschiedenen Faktoren ab: davon, wie und wo du deine Buy Buttons und deinen Warenkorb anzeigen möchtest, von deiner Veröffentlichungsplattform und manchmal auch vom Theme, das du auf dieser Plattform verwendest.

Hinweis

Wenn du Hilfe beim Hinzufügen von Einbettungscode zu Veröffentlichungsplattformen außerhalb von Shopify benötigst (z. B. Squarespace oder WordPress), dann frage bitte direkt bei deinem Website-Anbieter oder deiner Veröffentlichungsplattform nach Unterstützung.

Einbettungscode zu WordPress hinzufügen

Du kannst Einbettungscode zu Beiträgen, Seiten oder Vorlagen auf deiner WordPress-Website hinzufügen.

Hinweis

Eingebettete Buy Buttons sind mit selbst gehosteten WordPress.org-Websites und mit bestimmten von WordPress.com angebotenen Plänen kompatibel. Die untenstehende Dokumentation wurde mit Blick auf die neuesten WordPress-Versionen verfasst. Möglicherweise ist eine andere Version auf deiner Website installiert. Auf der WordPress-Support-Website kannst du mehr über die verschiedenen WordPress-Versionen erfahren.

Einbettungscode zu einem WordPress-Beitrag oder einer WordPress-Seite hinzufügen

1. Erstelle in Shopify eine Schaltfläche "Kaufen" und kopiere deren Einbettungscode aus dem Dialogfeld Code einbetten (oder klicke auf Einbettungscode in Zwischenablage kopieren).
2. Gehe in deinem WordPress-Dashboard zu deinen Beiträgen und Seiten.
3. Erstelle entweder einen neuen Beitrag oder eine neue Seite oder bearbeite einen vorhandenen Beitrag bzw. eine vorhandene Seite.
4. Klicke im Blockeditor auf die Schaltfläche +, suche nach Benutzerdefiniertes HTML und klicke dann, um einen benutzerdefinierten HTML-Block einzufügen.
5. Füge den Einbettungscode in das Textfeld des benutzerdefinierten HTML-Blocks ein.

6. Optional: Verschiebe den benutzerdefinierten HTML-Block oder generiere eine Vorschau, um zu sehen, wie deine Schaltfläche "Kaufen" angezeigt wird:

   • Um den benutzerdefinierten HTML-Block zu verschieben, klicke auf die Pfeil-Schaltflächen in der Toolbar des Blocks oder ziehe den Block an eine neue Stelle.
   • Um eine Vorschau des Buy Buttons anzuzeigen, klicke auf Vorschau in der Toolbar des Blocks.

7. Sobald du fertig bist, klicke auf die Schaltfläche Entwurf speichern, Vorschau oder Veröffentlichen für deinen Beitrag oder deine Seite.

Wenn du das Classic Editor Plugin von WordPress nutzt, musst du nicht den benutzerdefinierten HTML-Block nutzen, sondern kannst den Text-Editor vom Modus Visuell in den Modus Text versetzen und den Einbettungscode in den Editor kopieren.

Einbettungscode zu einer WordPress-Vorlage hinzufügen

Wenn dein WordPress-Theme den Website-Editor unterstützt, kannst du eine eingebettete Schaltfläche "Kaufen" zu jeder Vorlage deiner Website hinzufügen.

Schritte:

1. Erstelle in Shopify eine Schaltfläche "Kaufen" und kopiere deren Einbettungscode aus dem Dialogfeld Code einbetten (oder klicke auf Einbettungscode in Zwischenablage kopieren).
2. Gehe in deinem WordPress-Dashboard zum Editor.
3. Navigiere zu der Vorlage, die du bearbeiten möchtest.
4. Klicke im Blockeditor auf die Schaltfläche +, suche nach Benutzerdefiniertes HTML und klicke dann, um einen benutzerdefinierten HTML-Block einzufügen.
5. Füge den Einbettungscode in das Textfeld des benutzerdefinierten HTML-Blocks ein.

6. Optional: Verschiebe den benutzerdefinierten HTML-Block oder generiere eine Vorschau, um zu sehen, wie deine Schaltfläche "Kaufen" angezeigt wird:

   • Um den benutzerdefinierten HTML-Block zu verschieben, klicke auf die Pfeil-Schaltflächen in der Toolbar des Blocks oder ziehe den Block an eine neue Stelle.
   • Um eine Vorschau des Buy Buttons anzuzeigen, klicke auf Vorschau in der Toolbar des Blocks.

7. Sobald du fertig bist, klicke auf die Schaltfläche Vorschau oder Speichern für die Vorlage.

Hinzufügen von Einbettungscode zu deinem Shopify-Blog

Hinweis

Die Schaltfläche "Kaufen" erstellt einen separaten Warenkorb. Wenn dein Kunde auf eine andere Seite in deinem Onlineshop wechselt, wird der Artikel nicht mehr im Warenkorb angezeigt. Du kannst die Schaltfläche "Kaufen" bearbeiten, um den Checkout direkt zu öffnen.

Hinweis: #### Schritte:

Desktop

1. Gib im Shopify-Adminbereich zu Onlineshop > Blog-Beiträge.
2. Klicke auf der Seite Blog-Beiträge auf den Titel des Blog-Beitrags, den du bearbeiten möchtest, oder klicke auf Blog-Beitrag hinzufügen, um einen neuen zu erstellen.
3. Klicke im Abschnitt Einen Blog-Beitrag verfassen im Rich-Text-Editor auf HTML anzeigen.
4. Füge deinen Einbettungscode in das Haupttextfeld ein.
5. Klicke auf Speichern.

iPhone

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Blog-Beiträge.

Android

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Blog-Beiträge.

## Hinzufügen von Einbettungscode zu Squarespace

Achtung

Einige erweiterte Anpassungen in Squarespace sind spezifisch für Themes. Diese Anpassungen werden nicht von Shopify unterstützt.

Du kannst Einbettungscode zu einzelnen Beiträgen in Squarespace und zu den Menüs auf deiner Startseite hinzufügen. In einigen Fällen möchtest du möglicherweise beides tun. Du kannst z. B. einen Warenkorb auf deiner Startseite einbetten, um Bestellungen über Buy Buttons zu erhalten, die du in einzelne Posts eingebettet hast.

Schritte:

1. Öffne in deinem Squarespace-Dashboard die Webseite, auf der du den Einbettungscode hinzufügen möchtest.
2. Mache das Element auf der Seite ausfindig, in dem die Schaltfläche "Kaufen" oder der eingebettete Warenkorb angezeigt werden soll. Bewege dann den Mauszeiger über den Bereich Seiteninhalt und klicke auf BEARBEITEN.
3. Klicke auf den Einfügepunkt, an dem du den Einbettungscode hinzufügen möchtest.
4. Klicke im Abschnitt Weitere des Dialogfelds Inhaltsblöcke auf Code.
5. Kopiere den Einbettungscode in deinem Shopify-Adminbereich aus dem Dialogfeld Code einbetten.
6. Füge den Einbettungscode in deinem Squarespace-Dashboard in das Dialogfeld CODE ein. Stelle sicher, dass das Textfeld für den Empfang von HTML eingerichtet ist.
7. Klicken Sie im Dialogfeld CODE BEARBEITEN auf ÜBERNEHMEN.
8. Klicke im Seiteneditor erneut auf SPEICHERN. Da Squarespace JavaScript in seinem Dashboard deaktiviert, musst du eine Vorschau deiner Seite separat anzeigen, um zu bestätigen, dass die Schaltfläche "Kaufen" bzw. der eingebettete Warenkorb funktioniert.

Wenn du diese Schritte abgeschlossen hast und die Schaltfläche "Kaufen" dennoch nicht geladen wird, musst du möglicherweise das Laden von Ajax deaktivieren. Mehr Informationen findest du unter Ajax aktivieren oder deaktivieren.

Hinweis

Wenn du einen eingebetteten Warenkorb zu einem Menü auf deiner Squarespace-Startseite hinzufügst, erhält der Warenkorb Bestellungen von Buy Buttons, die du in einzelne Posts einbettest.

Hinzufügen von Einbettungscode zu WiX

Nachdem du in deinem Shopify-Adminbereich eine Schaltfläche "Kaufen" oder eine Kollektion erstellt hast, kannst du diese mit dem Wix Website Editor zu deiner Wix-Website hinzufügen.

Achtung

Wenn du Buy Buttons für mehrere Produkte oder Kollektion einbetten möchtest, musst du den Einbettungscode bearbeiten, bevor du ihn zum HTML-Code-Widget von Wix hinzufügst. Wenn du mehr als eine Schaltfläche "Kaufen" in deine Wix-Website einbettest, ohne den Einbettungscode zu bearbeiten, wird Kunden, die mehr als ein Produkt kaufen möchten, für jedes Produkt ein separater Warenkorb angezeigt.

Wenn du mehr als ein Produkt auf deiner Wix-Website anzeigen möchtest, ohne den Einbettungscode zu bearbeiten, dann kannst du eine Kategorie einbetten. Du kannst eine neue Kategorie in deinem Shopify-Adminbereich für die Produkte erstellen, die du auf Wix anzeigen möchtest.

Schritte:

1. Erstelle über deinen Shopify-Adminbereich eine Schaltfläche "Kaufen" für ein Produkt oder eine Kollektion und kopiere anschließend den zugehörigen Einbettungscode.

Hinweis

Wenn du deine Schaltfläche "Kaufen" für eine Wix-Website erstellst, kannst du die Option Weiterleitung in der gleichen Registerkarte aufgrund von Einschränkungen bei Wix nicht nutzen.

1. Suche in deinem Wix-Konto die Website, die du im Abschnitt Meine Websites bearbeiten möchtest, und klicke dann auf Website bearbeiten.
2. Klicke im Wix Website Editor auf die Schaltfläche + und anschließend auf Mehr.
3. Klicken Sie auf HTML-Code , um der Seite ein HTML-Code-Widget hinzuzufügen.
4. Klicken Sie auf Code eingeben.
5. Füge im Dialogfeld HTML-Einstellungen den Einbettungscode für deine Schaltfläche "Kaufen" oder deine Kollektion in das Feld Code hier hinzufügen ein und klicke dann auf Aktualisieren.
6. Ändere die Größe des HTML-Code-Widgets, um es an den Inhalt anzupassen. Wenn du eine Einbettung mit einem Warenkorb erstellst, achte darauf, dass der Warenkorb-Tab an der richtigen Stelle angezeigt wird.
7. Wenn du fertig bist, klicke auf Speichern.

Mehrere Produkte oder Kollektionen einbetten

Schritte:

1. Erstelle über deinen Shopify-Adminbereich eine Schaltfläche "Kaufen" für ein Produkt oder eine Kollektion und kopiere anschließend den zugehörigen Einbettungscode.
2. Füge den Code in einen Code-Editor oder den WiX-Website-Builder ein. Wiederhole die ersten beiden Schritte, bis du die Buy Buttons erstellt hast, die du benötigst.
3. Bearbeite die Einbettungscodes, um sicherzustellen, dass sie in der richtigen Ausrichtung angezeigt werden.
4. Suche in deinem Wix-Konto die Website, die du im Abschnitt Meine Websites bearbeiten möchtest, und klicke dann auf Website bearbeiten.
5. Klicke im Wix Website Editor auf die Schaltfläche + und anschließend auf Mehr.
6. Klicken Sie auf HTML-Code , um der Seite ein HTML-Code-Widget hinzuzufügen.
7. Klicken Sie auf Code eingeben.
8. Füge im Dialogfeld HTML-Einstellungen den bearbeiteten Code für deine Buy Buttons in das Feld Code hier hinzufügen ein und klicke dann auf Aktualisieren.
9. Ändere die Größe des HTML-Code-Widgets, um es an den Inhalt anzupassen. Wenn du eine Einbettung mit einem Warenkorb erstellst, achte darauf, dass der Warenkorb-Tab an der richtigen Stelle angezeigt wird.
10. Wenn du fertig bist, klicke auf Speichern.

Hinweis

Benötigst du Hilfe mit dem Wix Editor? Kontaktiere den Wix-Support.

Skript-Tags separat hinzufügen

Bei einigen Plattformen (wie Unbounce) musst du die <script>-Tags des Einbettungscodes in den Header der Seite einfügen und den Rest des Einbettungscodes an der Stelle, an der die Schaltfläche "Kaufen" angezeigt werden soll.

Schritte:

1. Kopiere aus dem Einbettungscode, der beim Erstellen einer Schaltfläche "Kaufen" generiert wird, sowohl das Element <div> als auch das Element <script>. Zum Beispiel:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

1. Öffne den Header für die Website, in die du eine Schaltfläche "Kaufen" einbetten möchtest.
2. Füge das vollständige Element <script> in den Header der Seite ein.
3. Speichere deine Änderungen.
4. Kopiere aus dem ursprünglichen Einbettungscode deines Shopify-Adminbereichs nur das Element <div>. Zum Beispiel:

<div id='product-component-2dd3c8704e6'></div>

1. Öffne die Seite deiner Website, in die du eine Schaltfläche "Kaufen" einbetten möchtest.
2. Füge das Code-Snippet <div> in die Seite ein.
3. Speichere deine Änderungen.