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 Quell-HTML deiner Website ist etwas anders, je nachdem, wie und wo deine Schaltflächen „Kaufen“ und dein Warenkorb platziert werden sollen, welche Veröffentlichungsplattform du nutzt und manchmal auch, welches Theme 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 Seite hinzufügen

1. Erstelle in Shopify eine Schaltfläche „Kaufen“ und kopiere den zugehörigen Einbettungscode aus dem Dialogfeld „Einbettungscode“ (oder klicke auf „Einbettungscode in die Zwischenablage kopieren“).
2. Gehe in deinem WordPress-Dashboard zu deinen Beiträgen oder Seiten.
3. Erstelle entweder einen neuen Beitrag oder eine neue Seite oder bearbeite einen bestehenden.
4. Klicke im Block-Editor auf die Schaltfläche +, suche nach Custom HTML und klicke dann darauf, um einen „Custom HTML“-Block einzufügen.
5. Füge den Einbettungscode in das Textfeld des „Custom HTML“-Blocks ein.
6. Optional: Verschiebe den „Custom HTML“-Block oder sieh dir eine Vorschau an, wie deine Schaltfläche „Kaufen“ angezeigt wird:
   • Um den „Custom HTML“-Block zu verschieben, klicke auf die Pfeil-Schaltflächen in der Toolbar des Blocks oder ziehe den Block an eine neue Position.
   • Um eine Vorschau der Schaltfläche „Kaufen“ anzuzeigen, klicke in der Toolbar des Blocks auf „Vorschau“.
7. Wenn du fertig bist, klicke für deinen Beitrag oder deine Seite auf die Schaltfläche „Entwurf speichern“, „Vorschau“ oder „Veröffentlichen“.

Wenn du das Classic Editor Plugin von WordPress verwendest, verwende keinen „Custom HTML“-Block, sondern wechsle im Texteditor vom Modus Visuell in den Modus Text und füge den Einbettungscode dort ein.

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 der Vorlagen deiner Website hinzufügen.

Schritte:

1. Erstelle in Shopify eine Schaltfläche „Kaufen“ und kopiere den zugehörigen Einbettungscode aus dem Dialogfeld „Einbettungscode“ (oder klicke auf „Einbettungscode in die Zwischenablage kopieren“).
2. Gehe in deinem WordPress-Dashboard zum Editor.
3. Navigiere zu der Vorlage, die du bearbeiten möchtest.
4. Klicke im Block-Editor auf die Schaltfläche +, suche nach Custom HTML und klicke dann darauf, um einen „Custom HTML“-Block einzufügen.
5. Füge den Einbettungscode in das Textfeld des „Custom HTML“-Blocks ein.
6. Optional: Verschiebe den „Custom HTML“-Block oder sieh dir eine Vorschau an, wie deine Schaltfläche „Kaufen“ angezeigt wird:
   • Um den „Custom HTML“-Block zu verschieben, klicke auf die Pfeil-Schaltflächen in der Toolbar des Blocks oder ziehe den Block an eine neue Position.
   • Um eine Vorschau der Schaltfläche „Kaufen“ anzuzeigen, klicke in der Toolbar des Blocks auf „Vorschau“.
7. Wenn du fertig bist, klicke für die Vorlage auf die Schaltfläche „Vorschau“ oder „Speichern“.

Einbettungscode zu deinem Shopify Blog hinzufügen

Schritte:

Einbettungscode zu Squarespace hinzufügen

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 vielleicht beides tun. Du kannst beispielsweise einen Warenkorb auf deiner Startseite einbetten, um Käufe über Schaltflächen „Kaufen“ zu erhalten, die du in einzelnen Beiträgen einbettest.

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 die Schaltfläche „Kaufen“ oder der eingebettete Warenkorb angezeigt werden soll, bewege deinen Cursor über den Bereich „Seiteninhalt“ und klicke dann auf „BEARBEITEN“.
3. Klicke auf die Einfügemarke, an der du den Einbettungscode hinzufügen möchtest.
4. Klicke im Dialogfeld „Inhaltsblöcke“ im Abschnitt „Mehr“ auf „Code“.
5. Kopiere in deinem Shopify-Adminbereich den Einbettungscode aus dem Dialogfeld „Einbettungscode“.
6. Füge den Einbettungscode in deinem Squarespace-Dashboard in das Dialogfeld „CODE“ ein. Stelle sicher, dass das Textfeld auf HTML eingestellt ist.
7. Klicke im Dialogfeld „Code bearbeiten“ auf „Anwenden“.
8. Klicke im Seiteneditor erneut auf Speichern. Da Squarespace JavaScript in seinem Dashboard deaktiviert, musst du dir deine Seite separat in der Vorschau ansehen, um zu bestätigen, dass die Schaltfläche „Kaufen“ oder der eingebettete Warenkorb funktioniert.

Wenn du die Schritte abgeschlossen hast und deine Schaltfläche „Kaufen“ nicht geladen wird, musst du möglicherweise das Laden von Ajax deaktivieren. Weitere Details findest du unter Ajax aktivieren oder deaktivieren.

Einbettungscode zu Wix hinzufügen

Nachdem du in deinem Shopify-Adminbereich eine Schaltfläche „Kaufen“ oder eine Kollektion erstellt hast, kannst du sie über den 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, kannst du eine Kollektion einbetten. Du kannst in deinem Shopify-Adminbereich für die Produkte, die du auf Wix anzeigen möchtest, eine neue Kollektion erstellen.

Schritte:

1. Erstelle in deinem Shopify-Adminbereich eine Schaltfläche „Kaufen“ für ein Produkt oder eine Kollektion und kopiere dann den entsprechenden Einbettungscode.

2. Finde in deinem Wix-Konto im Abschnitt „Meine Websites“ die Website, die du bearbeiten möchtest, und klicke dann auf „Website bearbeiten“.
3. Klicke im Wix Website Editor auf die Schaltfläche + und dann auf „Mehr“.
4. Klicke auf „HTML-Code“, um der Seite ein HTML-Code-Widget hinzuzufügen.
5. Klicke auf „Code eingeben“.
6. Füge im Dialogfeld „HTML-Einstellungen“ den Einbettungscode für deine Schaltfläche „Kaufen“ oder deine Kollektion in das Feld „Hier deinen Code hinzufügen“ ein und klicke dann auf „Aktualisieren“.
7. Passe die Größe des HTML-Code-Widgets an seine Inhalte an. Wenn du eine Einbettung mit einem Warenkorb erstellst, stelle sicher, dass der Warenkorb-Tab an der richtigen Stelle angezeigt wird.
8. Wenn du fertig bist, klicke auf „Speichern“.

Mehrere Produkte oder Kollektionen einbetten

Schritte:

1. Erstelle in deinem Shopify-Adminbereich eine Schaltfläche „Kaufen“ für ein Produkt oder eine Kollektion und kopiere dann den entsprechenden Einbettungscode.
2. Füge den Code in einen Code-Editor oder den Wix Website-Builder ein. Wiederhole die ersten beiden Schritte, bis du die benötigten Schaltflächen „Kaufen“ erstellt hast.
3. Bearbeite die Einbettungscodes, um sicherzustellen, dass sie mit der richtigen Ausrichtung angezeigt werden.
4. Finde in deinem Wix-Konto im Abschnitt „Meine Websites“ die Website, die du bearbeiten möchtest, und klicke dann auf „Website bearbeiten“.
5. Klicke im Wix Website Editor auf die Schaltfläche + und dann auf „Mehr“.
6. Klicke auf „HTML-Code“, um der Seite ein HTML-Code-Widget hinzuzufügen.
7. Klicke auf „Code eingeben“.
8. Füge im Dialogfeld „HTML-Einstellungen“ den bearbeiteten Code für deine Schaltflächen „Kaufen“ in das Feld „Hier deinen Code hinzufügen“ ein und klicke dann auf „Aktualisieren“.
9. Passe die Größe des HTML-Code-Widgets an seine Inhalte an. Wenn du eine Einbettung mit einem Warenkorb erstellst, stelle sicher, 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 und den Rest des Einbettungscodes auf der Seite einfügen, auf der die Schaltfläche „Kaufen“ angezeigt werden soll.

Schritte:

1. Kopiere aus dem Einbettungscode, der bei der Erstellung einer Schaltfläche „Kaufen“ generiert wird, sowohl das <div>-Element als auch das <script>-Element. 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>

2. Öffne den Header der Seite für die Website, auf der du eine Schaltfläche „Kaufen“ einbetten möchtest.
3. Füge das gesamte <script>-Element in den Header der Seite ein.
4. Speichere deine Änderungen.
5. Kopiere aus dem ursprünglichen Einbettungscode in deinem Shopify-Adminbereich nur das <div>-Element. Beispiel:

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

6. Öffne die Seite auf deiner Website, auf der du eine Schaltfläche „Kaufen“ einbetten möchtest.
7. Füge das <div>-Code-Snippet in die Seite ein.
8. Speichere deine Änderungen.