Hilfe
Einloggen

Schaltfläche „Kaufen“, eingebettete Kollektion oder eingebetteten Warenkorb anpassen oder entfernen

Du kannst das Erscheinungsbild oder das Verhalten einer Schaltfläche „Kaufen“, einer eingebetteten Kollektion oder eines eingebetteten Warenkorbs ändern, indem du den entsprechenden Einbettungscode im Quell-HTML deiner Webseite bearbeitest. Du kannst eine Einbettung auch löschen, indem du den Code von deiner Webseite entfernst.

Eine Schaltfläche „Kaufen“ zeigt ein Produkt mit einem Kauf-Button an. Eine eingebettete Kollektion zeigt mehrere Produkte an. Ein eingebetteter Warenkorb zeigt einen eigenständigen Warenkorb an, den Kund:innen auf verschiedenen Seiten nutzen können.

Einbettungscode ist das Code-Snippet, das du aus deinem Shopify-Adminbereich kopiert und in das HTML deiner Webseite eingefügt hast, als du die Schaltfläche „Kaufen“ oder den Warenkorb erstellt hast. Der Einbettungscode ist in JavaScript geschrieben, der Programmiersprache, die verwendet wird, um Webseiten interaktive Funktionen hinzuzufügen.

Auf dieser Seite

Den Einbettungscode für die Schaltfläche „Kaufen“ verstehen

Jede Schaltfläche „Kaufen“ besteht aus separaten Teilen, die als Komponenten bezeichnet werden. Eine Komponente ist ein benannter Abschnitt des Einbettungscodes, der einen Teil der Nutzererfahrung für die Schaltfläche „Kaufen“ steuert. Wenn du beispielsweise ein Produkt mit einem Warenkorb zu deiner Webseite hinzufügst, generiert der Einbettungscode die folgenden Komponenten:

  • eine product-Komponente, die die Produktinformationen und den Kauf-Button anzeigt
  • eine cart-Komponente, die den Inhalt des Warenkorbs anzeigt
  • eine toggle-Komponente für den Warenkorb, die das Symbol zum Öffnen des Warenkorbs anzeigt

Wenn deine Produktkomponente ein Popup-Fenster mit Produktdetails öffnet, generiert der Einbettungscode zwei zusätzliche Komponenten: eine modal-Komponente für das Popup selbst und eine modalProduct-Komponente für die Produktinformationen im Popup.

Im folgenden Code-Snippet gibt es separate Komponenten für product und cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Jede Komponente wird durch ein Konfigurationsobjekt im Einbettungscode konfiguriert. Ein Objekt ist eine strukturierte Gruppe von Einstellungen, die als Liste von Schlüssel-Wert-Paaren formatiert ist:

  • Ein Schlüssel ist der Name einer Einstellung, wie z. B. buttonDestination.
  • Ein Wert ist das, worauf die Einstellung festgelegt ist, wie z. B. 'cart'.

Ein Objekt ähnelt einer Tabellenkalkulation: Jeder Schlüssel entspricht einem Spaltennamen und jeder Wert entspricht dem Inhalt einer Zelle. Um das Aussehen oder Verhalten deiner Schaltflächen „Kaufen“ zu ändern, bearbeite die Schlüssel und Werte innerhalb der Konfigurationsobjekte.

Jede Komponente verfügt über viele bearbeitbare Schlüssel. Eine vollständige Liste der bearbeitbaren Schlüssel findest du in der Entwicklerdokumentation. Um einen Schlüssel zu konfigurieren, der noch nicht in deinem Einbettungscode enthalten ist, füge den Schlüssel dem entsprechenden Objekt hinzu. Ein Beispiel findest du unter Das Layout einer Produkteinbettung ändern.

Komponentenstile anpassen

Jede Komponente hat ein verschachteltes styles-Konfigurationsobjekt, das das Aussehen der Komponente steuert. Ein verschachteltes Objekt ist ein Objekt, das in einem anderen Objekt platziert ist.

Das styles-Objekt verwendet CSS, die Sprache, die beschreibt, wie Webseitenelemente visuell gestaltet werden. Jeder Schlüssel auf oberster Ebene im styles-Objekt repräsentiert ein Element in der Komponente, z. B. den Titel oder den Button. Innerhalb dieses Schlüssels ist jeder verschachtelte Schlüssel eine CSS-Eigenschaft (zum Beispiel background-color oder border) und der Wert ist ein CSS-Wert.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Jede gültige CSS-Eigenschaft kann zu styles hinzugefügt werden. Stelle sicher, dass Eigenschaftsnamen mit Bindestrichen in Anführungszeichen gesetzt werden.

Weitere Informationen zur CSS-Anpassung findest du in der Entwicklerdokumentation.

Komponenten von eingebetteten Kollektionen

Eingebettete Kollektionen verwenden dieselben Konfigurationsobjekte wie Schaltflächen „Kaufen“. Um das Layout oder andere Eigenschaften von Produkten innerhalb der Kollektion zu bearbeiten, suche das product-Konfigurationsobjekt und bearbeite es auf die gleiche Weise wie eine Produkteinbettung. Um Eigenschaften der Kollektion selbst zu bearbeiten, wie z. B. den Text des Buttons Nächste Seite, bearbeite stattdessen das productSet-Konfigurationsobjekt.

Einige Schlüssel, wie z. B. der Text einer Komponente, werden durch verschachtelte Objekte konfiguriert. Der Text für den Button Nächste Seite befindet sich beispielsweise im text-Objekt der productSet-Komponente:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Ein Produktdetail-Modal ist ein Popup-Fenster, das Produktinformationen anzeigt. Um deine Kundschaft zu einem Produktdetail-Modal anstelle des Warenkorbs weiterzuleiten, bearbeite den Einbettungscode der Schaltfläche „Kaufen“ im Quell-HTML deiner Webseite.

Schritte:

  1. Öffne den HTML-Code der Seite, die die Produkteinbettung enthält, die du ändern möchtest.
  2. Suche das product-Konfigurationsobjekt.
  3. Suche den buttonDestination-Schlüssel im Objekt:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ändere den Wert dieses Schlüssels in 'modal', einschließlich der Anführungszeichen:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Speichere deine Änderungen.

Layout einer Produkteinbettung ändern

Ein horizontales Layout für eine Produkteinbettung platziert das Bild neben den Produktdetails statt darüber. Um zu diesem Layout zu wechseln, bearbeite den Einbettungscode der Schaltfläche „Kaufen“ im Quell-HTML deiner Webseite.

Schritte:

  1. Öffne den HTML-Code der Seite, die die Produkteinbettung enthält, die du ändern möchtest.
  2. Suche das product-Konfigurationsobjekt.
  3. Füge einen layout-Schlüssel hinzu und lege den Wert auf 'horizontal' fest. Stelle sicher, dass der Wert die Anführungszeichen enthält und die vorherige Zeile mit einem Komma endet:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Speichere deine Änderungen.

Aussehen und Verhalten einer Warenkorbeinbettung ändern

Um das Aussehen oder Verhalten eines Warenkorbs zu ändern, bearbeite das cart-Konfigurationsobjekt in deinem Einbettungscode.

Schritte:

  1. Öffne den HTML-Code der Seite, die den Warenkorb enthält, den du bearbeiten möchtest.
  2. Suche das cart-Konfigurationsobjekt in deinem Einbettungscode:
options: {
      cart: {
        startOpen: false
      }
}
  1. Bearbeite einen bestehenden Schlüssel oder füge einen neuen hinzu, um das Aussehen oder Verhalten des Warenkorbs zu ändern. Eine vollständige Liste der konfigurierbaren Schlüssel findest du in der Entwicklerdokumentation.
  2. Speichere deine Änderungen.

Löschen einer Schaltfläche „Kaufen“, einer eingebetteten Kollektion oder eines eingebetteten Warenkorbs

Um eine Schaltfläche „Kaufen“, eine eingebettete Kollektion oder einen eingebetteten Warenkorb von deiner Webseite zu entfernen, lösche den zugehörigen Einbettungscode aus dem Quell-HTML.

Schritte:

  1. Öffne den HTML-Quellcode der Webseite, die die Schaltfläche „Kaufen“, die eingebettete Kollektion oder den eingebetteten Warenkorb enthält.
  2. Lösche den gesamten Einbettungscode aus dem Quell-HTML, beginnend mit <script data-shopify-buy-ui> und endend mit </script>. Im Folgenden findest du ein Beispiel für den Einbettungscode einer Schaltfläche „Kaufen“:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      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({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Speichere deine Änderungen.