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.

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 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: #### Schritte: ## 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. 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.

Hinzufügen von Einbettungscode zu WiX

Nachdem du in deinem Shopify-Adminbereich eine Schaltfläche "Kaufen" 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 eine Schaltfläche "Kaufen" 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 deine Schaltfläche "Kaufen" 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 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 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 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 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.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen