Buy Button-Code zu HTML hinzufügen

Nachdem du in deinem Shopify-Adminbereich einen Buy Button erstellt hast, kannst du ihn 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: wie und wo du deine Buy Buttons und deinen Warenkorb anzeigen lassen möchtest, 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 Blogs auf WordPress.org), dann frage bitte direkt bei deinem Website-Anbieter oder deiner Veröffentlichungsplattform nach .

Hinzufügen von Einbettungscode zu einem WordPress.org-Blog

Du kannst Einbettungscodes zu einzelnen Beiträgen und zum Menü auf der Startseite deines WordPress.org-Blogs hinzufügen.

Hinweis: Eingebettete Buy Buttons sind mit der WordPress.org-Plattform kompatibel, nicht jedoch mit WordPress.com. Diese Dokumentation bezieht sich auf WordPress 4.2.2. Möglicherweise nutzt du eine andere Version. Auf der WordPress-Support-Website kannst du mehr über die verschiedenen WordPress-Versionen erfahren.

Einem WordPress-Beitrag Einbettungscode hinzufügen

  1. Erstelle in Shopify einen Buy Button und kopiere dessen Einbettungscode aus dem Dialogfeld Code einbetten (oder klicke auf Einbettungscode in Zwischenablage kopieren).
  2. Gehe in deinem WordPress-Dashboard zu deinen Posts.
  3. Erstelle einen neuen Beitrag oder bearbeite einen bestehenden Beitrag, in dem du einen Buy Button anzeigen möchtest.
  4. Je nachdem, welche WordPress-Version du verwendest, führst du einen der folgenden Schritte aus:

    • Ändere im Beitrag den Texteditor von Visuell auf Textmodus.
    • Klicken Sie im blockEditor auf die Schaltfläche + , suchen Sie nach Custom HTMLund klicken Sie dann auf Benutzerdefiniertes HTML.
  5. Füge den Einbettungscode in das Textfeld an der Stelle ein, an welcher der Buy Button oder die Kategorie angezeigt werden soll.

  6. Wenn du fertig bist, klicke auf Entwurf speichern, Vorschau oder Veröffentlichen.

Einbettungscode zu einem Wordpress-Menü hinzufügen

Schritte:

  1. Klicken Sie in Ihrem WordPress-Dashboard auf Appearance.
  2. Klicke auf Customize, um den Theme-Editor zu öffnen, und klicke dann auf Widgets.
  3. Klicke auf den Namen des Bereichs, in dem du den Buy Button oder den benutzerdefinierten Warenkrobcode hinzufügen möchtest.
  4. Öffne ein vorhandenes Text-Widget, oder klicke auf Ein Widget hinzufügen, und klicke dann auf Text.
  5. Füge den Einbettungscode in das Haupttextfeld im Text-Widget ein.
  6. Speichere deine Änderungen.

Hinweis: Wenn du das Verhalten oder die Darstellung des Warenkorbs deiner Website ändern möchtest, kannst du einen benutzerdefinierten Warenkorb-Code zu einem Menü auf der Startseite deines WordPress.org-Blogs hinzufügen.

Hinzufügen von Einbettungscode zu deinem Shopify-Blog

Hinweis: Der Buy Button 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 den Buy Button bearbeiten, um direkt zum Checkout zu gelangen.

Schritte:

  1. Klicken Sie auf der Seite Blog-Beiträge auf den Titel eines Blog-Beitrags, den Sie bearbeiten möchten, oder klicken Sie auf Blog-Beitrag hinzufügen, um einen neuen Beitrag zu erstellen. 4. Klicken Sie im Abschnitt Schreiben Sie Ihren Blog-Beitrag im Rich-Text-Editor auf HTML anzeigen. 5. Fügen Sie Ihren Einbettungscode in das Haupttextfeld ein. 6. Klicken Sie auf Speichern.

Hinzufügen von Einbettungscode zu Squarespace

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. Suche das Element auf der Seite, auf der du den Buy Button oder den eingebetteten Warenkorb anzeigen möchtest, bewege den Mauszeiger über den Bereich Seiteninhalt und klicke dann 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. Kopieren Sie den Einbettungscode in Ihrem Shopify-Adminbereich aus dem Dialogfeld Code einbetten.
  6. Fügen Sie den Einbettungscode in Ihrem Squarespace-Dashboard in das Dialogfeld CODE ein. Stellen Sie 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 deine Seite einzeln anzeigen, um den hinzugefügten Buy Button oder eingebetteten Warenkorb anzuzeigen.

Wenn du die Schritte abschließt und dein Buy Button nicht geladen wird, musst du möglicherweise AJAX Loading deaktivieren. Um weitere Details anzuzeigen, gehe zu Aktivieren oder Deaktivieren von AJAX.

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

Hinzufügen von Einbettungscode zu WiX

Nachdem Sie in Ihrem Shopify-Adminbereich einen Buy Button oder eine Kategorie erstellt haben, können Sie diese mit dem Wix Website Editor zu Ihrer Wix-Website hinzufügen.

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 einen Buy Button für ein Produkt oder eine Kategorie und kopiere anschließend den zugehörigen Einbettungscode.

Hinweis: Wenn du deinen Buy Button für eine Wix-Website erstellst, kannst du die Option Weiterleitung im selben Tab 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 deinen Buy Button oder deine Kategorie 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 auch an der richtigen Stelle angezeigt wird.
  7. Wenn Sie fertig sind, klicken Sie auf Speichern.

Mehrere Produkte oder Kategorien einbetten

Schritte:

  1. Erstelle über deinen Shopify-Adminbereich einen Buy Button für ein Produkt oder eine Kategorie und kopiere anschließend den zugehörigen Einbettungscode.
  2. Füge den Code in einen Code-Editor oder die WiX Website-Erstellung 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ügen Sie im Dialogfeld HTML-Einstellungen den bearbeiteten Code für Ihre Buy Buttons in das Feld Code hier hinzufügen ein und klicken Sie 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 auch an der richtigen Stelle angezeigt wird.
  10. Wenn Sie fertig sind, klicken Sie auf Speichern.

Hinweis: Benötigen Sie Hilfe mit dem Wix Editor? Kontaktieren Sie 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 dort, wo der Buy Button angezeigt werden soll.

Schritte:

  1. Kopieren Sie aus dem Einbettungscode, der beim Erstellen eines Buy Button 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, auf der du einen Buy Button 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, auf der du einen Buy Button einbetten möchtest.

  2. Füge das Code-Snippet <div> in die Seite ein.

  3. Speichere deine Änderungen.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren