Einbettungscode hinzufügen

Nachdem Sie in Ihrem Shopify-Adminbereich einen Buy Button erstellt haben, können Sie ihn Ihrer eigenen Website oder Ihrem Blog hinzufügen.

Der Prozess des Hinzufügens von Einbettungscode zum HTML-Code Ihrer Website hängt von verschiedenen Faktoren ab: wie und wo Sie Ihre Buy Buttons anzeigen lassen möchten, Ihrer Veröffentlichungsplattform und manchmal auch vom Theme, das Sie auf dieser Plattform verwenden.

Hinweis: Wenn Sie Hilfe beim Hinzufügen von Einbettungscode zu Veröffentlichungsplattformen außerhalb von Shopify benötigen (z. B. Squarespace oder Blogs auf WordPress.org), dann fragen Sie bitte direkt bei Ihrem Website-Anbieter oder Ihrer Veröffentlichungsplattform nach Support.

Hinzufügen von Einbettungscode zu WordPress.org

Sie können den einzelnen Posts und dem Menü auf der Startseite Ihres WordPress.org-Blogs Einbettungscode 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 nutzen Sie eine andere Version. Auf der WordPress-Support-Website können Sie mehr über die verschiedenen WordPress-Versionen erfahren.

Einem WordPress-Beitrag Einbettungscode hinzufügen

So fügen Sie einem einzelnen Beitrag einen Einbettungscode hinzu:

  1. Erstellen Sie in Shopify einen Buy Button und kopieren Sie dessen Einbettungscode aus dem Dialogfeld Code einbetten (oder klicken Sie auf Einbettungscode in Zwischenablage kopieren ).
  2. Klicken Sie in Ihrem WordPress-Dashboard auf Posts.
  3. Klicken Sie auf Add New , um einen neuen Beitrag zu erstellen, oder klicken Sie auf den Namen eines vorhandenen Beitrags, in dem ein Buy Button angezeigt werden soll.
  4. Schalten Sie auf der Seite Add New Post oder Edit Post den Editor vom visuellen Modus in den Textmodus.
  5. Fügen Sie den Einbettungscode in das Haupttextfeld des Editors an der Stelle ein, an welcher der Buy Button oder die Kategorie angezeigt werden soll.
  6. Wenn Sie fertig sind, klicken Sie auf Save Draft , Preview oder Publish.

Einbettungscode zu einem Wordpress-Menü hinzufügen

So fügen Sie einem Menü auf der Startseite einen Einbettungscode hinzu:

  1. Klicken Sie in Ihrem WordPress-Dashboard auf Appearance.
  2. Klicken Sie auf Customize , um den Theme-Editor zu öffnen, und klicken Sie dann auf Widgets.
  3. Klicken Sie auf den Namen des Bereichs, in dem Sie den Buy Button oder den benutzerdefinierten Warenkorbcode hinzufügen möchten.
  4. Öffnen Sie ein vorhandenes Text -Widget, oder klicken Sie auf Add a Widget , und klicken Sie dann auf Text.
  5. Fügen Sie den Einbettungscode in das Haupttextfeld im Text -Widget ein.
  6. Speichern Sie Ihre Änderungen.

Hinweis: Wenn Sie das Verhalten oder die Darstellung des Warenkorbs Ihrer Website ändern möchten, können Sie einen benutzerdefinierten Warenkorbcode zu einem Menü auf der Startseite Ihres WordPress.org-Blogs hinzufügen.

Hinzufügen von Einbettungscode zu Ihrem Shopify-Blog

Sie können Einbettungscode zu einzelnen Beiträgen in Ihrem Shopify-Blog hinzufügen:

Hinweis: Der Buy Button erstellten einen separaten Warenkorb. Wenn Ihr Kunde auf eine andere Seite in Ihrem Onlineshop wechselt, wird der Artikel nicht mehr im Warenkorb angezeigt. Sie können den Buy Button bearbeiten, um direkt zur Kasse zu gelangen.

  1. Klicken Sie in Ihrem Shopify-Adminbereich auf Onlineshop.
  2. Klicken Sie auf Blog-Beiträge :
  3. 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.
    Schaltfläche
  5. Fügen Sie Ihren Einbettungscode in das Haupttextfeld ein.
  6. Klicken Sie auf Speichern.

Hinzufügen von Einbettungscode zu Squarespace

Achtung: Einige erweiterte Anpassungen in Squarespace sind vom Theme abhängig. Diese Anpassungen werden nicht von Shopify unterstützt, sie erfolgen auf eigene Gefahr!

Sie können Einbettungscode zu einzelnen Beiträgen in Squarespace und zu den Menüs auf Ihrer Startseite hinzufügen. In einigen Fällen möchten Sie möglicherweise beides tun. Sie können z. B. einen Warenkorb auf Ihrer Startseite einbetten, um Bestellungen über Buy Buttons zu erhalten, die Sie in einzelne Posts eingebettet haben.

So fügen Sie Einbettungscode zu Seitenelementen in Squarespace hinzu:

  1. Öffnen Sie in Ihrem Squarespace-Dashboard die Webseite, der Sie den Einbettungscode hinzufügen möchten.
  2. Suchen Sie das Element auf der Seite, auf welcher der Buy Button oder der eingebettete Warenkorb angezeigt werden soll. Bewegen Sie dann den Mauszeiger über den Bereich Page Content und klicken Sie dann auf EDIT.
  3. Klicken Sie auf den Einfügepunkt, an dem Sie den Einbettungscode hinzufügen möchten.
  4. Klicken Sie 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. Klicken Sie im Seiteneditor erneut auf SPEICHERN. Da Squarespace JavaScript in seinem Dashboard deaktiviert, müssen Sie eine Vorschau Ihrer Seite separat anzeigen, um den von Ihnen hinzugefügten Buy Button oder den eingebetteten Warenkorb zu sehen.

Hinweis: Wenn Sie einen eingebetteten Warenkorb zu einem Menü auf Ihrer Squarespace-Homepage hinzufügen, wird er Bestellungen von Buy Buttons empfangen, die Sie in einzelne Posts einbetten.

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 Sie mehr als ein Produkt auf Ihrer Wix-Website anzeigen möchten, ohne den Einbettungscode zu bearbeiten, dann können Sie eine Kategorie einbetten. Sie können eine neue Kategorie in Ihrem Shopify-Adminbereich für die Produkte erstellen, die Sie auf Wix anzeigen möchten.

So betten Sie einen einzelnen Buy Button für ein Produkt oder eine Kategorie auf Ihrer Wix-Website ein:

  1. Erstellen Sie über Ihren Shopify-Adminbereich einen Buy Button für ein Produkt oder eine Sammlung und kopieren Sie anschließend den zugehörigen Einbettungscode.
  2. Suchen Sie in Ihrem Wix-Konto die Website, die Sie im Abschnitt Meine Websites bearbeiten möchten, und klicken Sie dann auf Website bearbeiten.
  3. Klicken Sie im Wix Website Editor auf die Schaltfläche + und anschließend auf Mehr.
  4. Klicken Sie auf HTML-Code , um der Seite ein HTML-Code-Widget hinzuzufügen.
  5. Klicken Sie auf Code eingeben.
  6. Fügen Sie im Dialogfeld HTML-Einstellungen den Einbettungscode für Ihren Buy Button oder Ihre Kategorie im Feld Code hier hinzufügen ein und klicken Sie dann auf Aktualisieren.
  7. Ändern Sie die Größe des HTML-Code-Widgets, um es an den Inhalt anzupassen. Wenn Sie eine Einbettung mit einem Warenkorb erstellen, achten Sie darauf, dass der Warenkorb-Tab auch an der richtigen Stelle angezeigt wird.
  8. Wenn Sie fertig sind, klicken Sie auf Speichern.

Mehrere Produkte oder Kategorien einbetten

So betten Sie mehrere Produkte oder Kategorien auf Ihrer Wix-Website ein:

  1. Erstellen Sie über Ihren Shopify-Adminbereich einen Buy Button für ein Produkt oder eine Sammlung und kopieren Sie anschließend den zugehörigen Einbettungscode.
  2. Fügen Sie den Code in einen Code-Editor oder den Wix Website Builder ein. Wiederholen Sie die ersten beiden Schritte, bis Sie die von Ihnen benötigten Buy Buttons erstellt haben.
  3. Bearbeiten Sie die Einbettungscodes, um sicherzustellen, dass sie in der richtigen Ausrichtung angezeigt werden.
  4. Suchen Sie in Ihrem Wix-Konto die Website, die Sie im Abschnitt Meine Websites bearbeiten möchten, und klicken Sie dann auf Website bearbeiten.
  5. Klicken Sie 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. Ändern Sie die Größe des HTML-Code-Widgets, um es an den Inhalt anzupassen. Wenn Sie eine Einbettung mit einem Warenkorb erstellen, achten Sie 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) müssen Sie 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.

So fügen Sie Skript-Tags separat hinzu:

  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. Öffnen Sie den Header für die Website, auf der Sie einen Buy Button einbetten möchten.

  2. Fügen Sie das vollständige Element <script> in den Header der Seite ein.

  3. Speichern Sie Ihre Änderungen.

  4. Kopieren Sie aus dem ursprünglichen Einbettungscode Ihres Shopify-Adminbereichs nur das Element <div>. Zum Beispiel:

<div id='product-component-2dd3c8704e6'></div>
  1. Öffnen Sie die Seite Ihrer Website, auf der Sie einen Buy Button einbetten möchten.

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

  3. Speichern Sie Ihre Änderungen.

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus