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.

Einbettungscode zu WordPress hinzufügen

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

Einbettungscode zu einem WordPress-Beitrag oder einer WordPress-Seite 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 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, wie dein Buy Button 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 einen eingebetteten Buy Button zu jeder Vorlage deiner Website hinzufügen.

Schritte:

  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 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, wie dein Buy Button 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

Schritte:

  1. 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.
  2. Klicke im Abschnitt Einen Blog-Beitrag verfassen im Rich-Text-Editor auf HTML anzeigen.
  3. Füge deinen Einbettungscode in das Haupttextfeld ein.
  4. Klicke 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. 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 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.

Hinzufügen von Einbettungscode zu WiX

Nachdem du in deinem Shopify-Adminbereich einen Buy Button oder eine Kategorie erstellt hast, kannst du diese mit dem Wix Website Editor zu deiner 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.
  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 du fertig bist, klicke 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 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 auch an der richtigen Stelle angezeigt wird.
  10. Wenn du fertig bist, klicke auf Speichern.

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. Kopiere 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 testen