„In den Warenkorb“-Buttons: Top 10+ Best Practices zur Umsatzkonversion

Veröffentlicht: 2022-10-06

Sie können Hunderte von Besuchern auf Ihrer E-Commerce-Website empfangen. Wenn sie jedoch keine Dinge kaufen, wird Ihr Unternehmen nicht davon profitieren.

Kunden müssen Produktseiten besuchen und Artikel zu ihren Online-Warenkörben hinzufügen. Sie können sie dann durch den Bestellvorgang führen, sie nach Zahlungs- und Versandinformationen fragen und als Ergebnis einen Verkauf tätigen. Die einfachste Methode ist die Verwendung von „In den Warenkorb“-Buttons.

In diesem Artikel zeige ich Ihnen die Bedeutung von „In den Warenkorb“-Buttons und die Top 10+ Best Practices für Sie, um die besten „In den Warenkorb“-Buttons zu erstellen, die Verkäufe generieren.

Inhaltsverzeichnis
[Anzeigen Ausblenden]
  1. Was sind „In den Warenkorb“-Buttons?
  2. Wie können die Schaltflächen „In den Warenkorb“ bei der Konvertierung helfen?
  3. Wie kann der „In den Warenkorb“-Button Ihr Branding stärken?
  4. „In den Warenkorb“-Buttons: Top 10 Best Practices
    1. Wählen Sie Abgerundete Ecken
    2. Wählen Sie die Farbe der Schaltfläche „In den Warenkorb“ mit Bedacht aus
    3. Bringen Sie Ihren Button zum Platzen, indem Sie Stilelemente verwenden
    4. Betrachten Sie den Schaltflächen-Hover-Effekt
    5. Schaltfläche "In den Warenkorb" klebrig machen
    6. Automatisieren Sie Schaltflächenänderungen für nicht vorrätige Artikel
    7. Reduzieren Sie Unordnung
    8. Verfolgen Sie die Conversion-Rate
    9. Probieren Sie einen anderen Text für Ihre Schaltfläche „In den Warenkorb“ aus
    10. Testen Sie regelmäßig auf Usability
  5. Top 5+ Design-Inspirationen für „In den Warenkorb“-Buttons mit den meisten Conversions
    1. Kaufknöpfe von Warby Parker
    2. Birchbox's In den Warenkorb Optionen
    3. Goldes Preis im Knopf
    4. Etsys Erklärung zum Hinzufügen zum Einkaufswagen
    5. Die Vorbestellungs-Warenkorb-Schaltfläche von Ratio Coffee
  6. Endeffekt,

Was sind „In den Warenkorb“-Buttons?

„In den Einkaufswagen“-Schaltflächen sind rechteckige, kleine und anklickbare Schaltflächen, die es Kunden ermöglichen, einen Artikel in ihren Online-Einkaufswagen zu legen, wenn sie darauf klicken. Sie werden normalerweise unter dem Produktnamen, dem Produktpreis und der Produktbeschreibung auf einer einzigen Produktseite platziert.

Sie können sich ein typisches Beispiel für das Layout der „In den Warenkorb“-Schaltfläche in der WooCommerce-Shop-Demo unten ansehen:

Schaltflächen zum Hinzufügen zum Warenkorb-1

In einigen Fällen können die „In den Warenkorb“-Buttons auch auf der Shop- oder Kategorieseite oder im zugehörigen Produktbereich platziert werden. So können die Kunden die Artikel, die ihnen gefallen, bequem in den Warenkorb legen, ohne einen weiteren Schritt zur Einzelproduktseite gehen zu müssen. Das kann Ihnen helfen, den Umsatz zu steigern.

Schaltflächen zum Hinzufügen zum Warenkorb-2

Aber heutzutage müssen Sie mit den Schaltflächen, die Sie verwenden, erfinderischer sein, um sie attraktiver zu machen, was mehr Kunden dazu ermutigen kann, Produkte in ihre Online-Warenkörbe zu legen.

Wie können die Schaltflächen „In den Warenkorb“ bei der Konvertierung helfen?

Das Hauptziel jedes Internetunternehmens ist es, Website-Besucher in zukünftige Kunden umzuwandeln.

Der Wunsch eines Besuchers, Zeit auf einer Website zu verbringen und die nächste erforderliche Aktivität auszuführen, wird von der Benutzererfahrung bestimmt. Ein profitabler „In den Warenkorb“-Button kann Ihnen den zusätzlichen Impuls geben, der erforderlich ist, um Ihre Besucher in den Trichter zu schicken.

Stellen Sie sich vor, Ihr Kunde hat sich gerade diese wunderschönen Nike-Sneaker angesehen. Sie haben die Funktionen und Preise und passen perfekt zu seinen Füßen. Sie haben den magischen Gegenstand mit der Aufschrift „In die Tasche“ genau dort platziert, wo er hingehört. Diese atemberaubenden Paar Schuhe werden den Verbraucher zweifellos dazu inspirieren, sie in ihren Einkaufswagen zu legen. Sie haben bereits den halben Krieg gewonnen!

Jetzt, da Sie ihre Aufmerksamkeit haben, belohnen Sie sie mit ein paar süßen Angeboten, und schwupps, Sie haben einen neuen Kunden gewonnen.

Überlegen Sie angesichts des Vorstehenden, was passieren würde, wenn die Idee „In den Warenkorb“ nicht existieren würde.

Lassen Sie uns untersuchen, was passiert, wenn auf den Produktseiten kein „In den Warenkorb“-Button vorhanden ist!

  • Ihre Kunden besuchten häufig die Produktseite und verließen sie dann, um zur Auszahlungsseite zu gelangen.
  • Kunden können durch das Verfahren verwirrt werden und es versäumen, etwas Entscheidendes in ihren Warenkorb zu legen.
  • Kunden werden den Prozess als mühsam und zeitaufwändig empfinden.
  • Es wird das Gleichgewicht Ihres Online-Geschäfts mit einer höheren Absprungrate stören, und die schlechte Navigation des Benutzers wird ihm weiter schaden.

Sie erkennen jetzt die Bedeutung der Schaltfläche „In den Warenkorb“ für die Gewinnung von Kunden. Aber es ist noch vorteilhafter für Ihr Unternehmen. Lassen Sie uns untersuchen, wie die Schaltfläche „In den Warenkorb“ Ihrem Online-Geschäft zugute kommen könnte:

  • Indem jede Transaktion, die auf der Plattform stattfindet, genau aufgezeichnet wird, unterstützt sie den Anbieter und stärkt und verbessert die SEO der Website und die Suchrankings.
  • Es erweckt den Eindruck, dass der Inhaber des Online-Shops ein rücksichtsvoller und zuverlässiger Online-Verkäufer ist, was ihn dazu ermutigt, sein Geschäft proaktiver anzugehen.
  • Dies erhöht die durchschnittlichen Seitenaufrufe und die Verweildauer, während die Absprungrate und die Anzahl leerer Warenkörbe im Online-Shop verringert werden.
  • Es verbessert den Gesamtbetrieb des Online-Shops und ermöglicht es dem Eigentümer, ein strukturiertes Kundenportfolio zu erstellen und zu verwalten.
  • Die Benachrichtigungen für Verbraucher über Rabatte und Sonderangebote sind an der Kasse praktisch, was dazu beiträgt, die Kasse in Ihrem Geschäft zu beschleunigen.
  • Verbindet problemlos Shopping-Lösungen von Drittanbietern und hilft bei der übersichtlichen Darstellung von Preisen, Steuern und Zusatzgebühren.

Die Schaltflächen „In den Warenkorb“ steigern letztendlich den Umsatz, was jedes Unternehmen tun möchte.

Wie kann der „In den Warenkorb“-Button Ihr Branding stärken?

Die Schaltfläche „In den Warenkorb“ mag zunächst wie eine kleine, unwichtige Komponente erscheinen, hat jedoch die Macht, Kunden für Ihr Unternehmen zu gewinnen. Form, Farbe, Schriftart und Text Ihrer Schaltfläche haben alle einen Einfluss auf diese Beziehung.

Außerdem ist der Text auf Schaltflächen entscheidend. Im Vergleich zu „Add to Cart“ klingt „Add to Shopping Bag“ eher nach gehobenen Kaufhäusern. Für alteingesessene Katalogunternehmen, die jetzt Internetbestellungen akzeptieren, kann „Jetzt bestellen“ effektiv sein. Der Ausdruck „In den Warenkorb“ wird im Vereinigten Königreich häufiger verwendet.

„In den Warenkorb“-Buttons: Top 10 Best Practices

Wählen Sie Abgerundete Ecken

Sie werden vielleicht bemerken, dass die „Zum Warenkorb hinzufügen“-Buttons bei den großen drei amerikanischen Online-Händlern Amazon, Walmart und Apple alle abgerundete Ecken haben.

Es hat sich gezeigt, dass Verbraucher mehr von Elementen der Benutzeroberfläche (UI) mit abgerundeten Kanten angezogen werden als von solchen mit scharfen. Contour Bias ist eine psychologische Theorie, die es beschreibt. Selbst wenn sie digital sind, werden scharfe Gegenstände standardmäßig von unserem Gehirn gemieden.

Die „In den Einkaufswagen“-Schaltflächen auf Ihren Produkt- oder Service-Websites werden sich viel freundlicher und optimistischer anfühlen, wenn Sie sich für abgerundete Ecken entscheiden.

Wählen Sie die Farbe der Schaltfläche „In den Warenkorb“ mit Bedacht aus

Die Farbe Ihres In-den-Warenkorb-Buttons sollte mit den Farben Ihrer Marke übereinstimmen, um die Konsistenz mit dem Rest Ihres Online-Shops zu wahren. Aber es ist entscheidend, eine Farbe (oder vielleicht sogar einen Farbverlauf) auszuwählen, die ihm hilft, sich abzuheben.

Zum Beispiel hat die Website für REI die Schaltflächen „In den Warenkorb“, die dunkelgrün auf einem weißen Hintergrund sind. Auf den Produktseiten hat auch jeder andere Button und Hyperlink einen viel helleren Farbton. Dies erzeugt den Kontrast, der erforderlich ist, um die Aufmerksamkeit der Kunden auf die Schaltfläche zu lenken.

Auf der anderen Seite kann die Auswahl eines hellgrauen Buttons dazu führen, dass dieser vor einem weißen Hintergrund verschwindet, was die Conversions verringern kann.

Glücklicherweise können Sie die Farbe der Schaltflächen „In den Warenkorb“ mit einigen Optimierungen ganz einfach anpassen:

Schaltflächen zum Hinzufügen zum Warenkorb-3

Bringen Sie Ihren Button zum Platzen, indem Sie Stilelemente verwenden

Nachdem Sie sich für eine Farbe entschieden haben, die sich vollständig vom Hintergrund Ihrer Website abhebt, können Sie Ihren In den Warenkorb-Button weiter anpassen, indem Sie zusätzliche auffällige Designelemente hinzufügen. Ein dünner Rand und ein weicher Schatten können beispielsweise dazu beitragen, dass Ihr Button dreidimensionaler erscheint.

Zusätzlich können Sie nach der Schaltflächenbezeichnung einen Pfeil einfügen. Dies sagt den Kunden, dass sie im Prozess vorankommen und einer Lösung einen Schritt näher kommen, nachdem sie auf die Schaltfläche geklickt haben.

Betrachten Sie den Schaltflächen-Hover-Effekt

Ihre Handlungsaufforderung kann noch mehr Aufmerksamkeit erhalten, wenn die von Ihnen verwendeten Schaltflächen reaktionsschnell sind, d. h. sie ändern ihre Farbe oder bewegen sich, wenn Sie mit der Maus darüber fahren.

Diese Hover-Effekte lenken nicht nur die Aufmerksamkeit auf Ihren Button, sondern können Kunden auch wissen lassen, dass er funktionsfähig ist, und sie zum nächsten Schritt des Kaufprozesses führen, wenn sie darauf klicken.

Wenn Sie beispielsweise bei Target mit der Maus über die Schaltflächen „Zum Warenkorb hinzufügen“ fahren, erscheint ein tieferer Rotton. Es ist eine kleine Verbesserung, die ihren Produktlistenseiten ein ansprechenderes, interaktiveres Gefühl verleiht und die Anklickbarkeit ihrer Schaltflächen erhöht.

Auf Websites wie CodePen finden Sie eine Menge Beispiele für Schaltflächen-Hover-Effekte zusammen mit CSS- und HTML-Code, um Ihr Webteam zu motivieren.

Schaltfläche "In den Warenkorb" klebrig machen

Damit Menschen auf ihren Mobilgeräten einkaufen können, zielen Marken darauf ab, den Prozess so einfach wie möglich zu gestalten. Abgesehen davon, dass es zeitaufwändig ist, bis ganz nach oben auf einer Seite zu navigieren, nur um ein Produkt in den Einkaufswagen zu legen, kann das Durchsuchen von Produkten auf einem kleinen Bildschirm frustrierend sein.

In diesem Fall sollten Sie in Betracht ziehen, die Schaltfläche „In den Warenkorb“ klebrig zu machen, wenn Besucher auf Ihrer Produktseite nach oben oder unten scrollen. Für E-Commerce-Unternehmen, die die Konversion mobiler Verkäufe steigern möchten, bietet diese interessante Funktion eine unkomplizierte Option.

Schaltflächen zum Hinzufügen zum Warenkorb-4

Wenn Sie einen WooCommerce-Onlineshop betreiben, können Sie mithilfe des Woostify-Themas ganz einfach klebrige Schaltflächen zum Hinzufügen zum Warenkorb erstellen.

Automatisieren Sie Schaltflächenänderungen für nicht vorrätige Artikel

Das Vorhandensein einer „In den Einkaufswagen“-Schaltfläche auf einer Produktliste zeigt an, dass der Artikel für Kunden zum Kauf verfügbar ist.

Wenn Kunden Ihre Produktbilder durchgesehen, die Produktbeschreibung gelesen und auf die Schaltfläche „In den Warenkorb“ geklickt haben, werden sie von Ihrer Website darüber informiert, dass der Artikel nicht vorrätig ist.

Wenn ein Produkt nicht auf Lager ist, denken Sie darüber nach, den Text Ihres Buttons automatisch auf „Nicht auf Lager“ zu ändern und seine Farbe zu verblassen, um die Benutzererfahrung in Ihrem Online-Shop zu verbessern.

Obwohl sich diese Optimierung nicht sofort auf Ihre Conversion-Rate auswirkt, verhindert sie, dass Kunden beim Kauf schlechte Erfahrungen machen, und schreckt sie davon ab, wiederzukommen.

Reduzieren Sie Unordnung

Der „In den Warenkorb“-Button kann durch seine Größe auffallen, aber das ist nur effektiv, wenn um ihn herum genügend weißer Raum vorhanden ist.

Eine überladene Produkt- oder Service-Website, z. B. eine mit übermäßig viel Text oder eine unorganisierte, lenkt die Aufmerksamkeit von der Schaltfläche ab, auf die Kunden schließlich klicken sollen.

Geben Sie Ihrem „In den Warenkorb“-Button etwas Luft zum Atmen und platzieren Sie Seitenelemente nicht zu nah beieinander. Ihr CTA wird sichtbarer, je weniger Unordnung Sie haben.

Verfolgen Sie die Conversion-Rate

Das Vornehmen von Designanpassungen allein reicht nicht aus, um Ihre In-den-Warenkorb-Schaltflächen zu optimieren. Es erfordert auch, dass Sie die Wirksamkeit Ihrer Schaltflächen überwachen, damit Sie feststellen können, ob Ihre Verbesserungen den Umsatz wirklich steigern oder ob Sie noch einige Änderungen vornehmen müssen.

Sie können Schaltflächenklicks und Konversionsraten auf Ihrer Website mithilfe von Programmen wie Google Analytics und einigen Website-Erstellern wie Squarespace überwachen. Sie können mehr darüber erfahren, wie Ihre Kunden auf sich ändernde Farben, Designkomponenten, Effekte und andere Dinge reagieren, indem Sie diese Daten regelmäßig überwachen, insbesondere wenn Sie Änderungen an Ihren „In den Warenkorb“-Schaltflächen vornehmen.

Profi-Tipp: Nehmen Sie nach und nach Anpassungen vor, damit Sie Schaltflächenelemente mit positiven Auswirkungen von solchen mit negativen Auswirkungen testen und unterscheiden können.

Probieren Sie einen anderen Text für Ihre Schaltfläche „In den Warenkorb“ aus

Für verschiedene Unternehmen können mehrere Handlungsaufforderungen (CTAs) effektiv sein. Experimentieren Sie mit Ihrer Schaltflächenformulierung und testen Sie zusätzlich die Konversionsraten verschiedener Schaltflächenstile.

Wenn Sie beispielsweise einen Dropshipping-Shop wie Amazon betreiben, kann der traditionelle CTA „In den Warenkorb“ nicht so nützlich sein wie „Bei Amazon kaufen“. Das würde Besucher dazu bringen, auf Ihrer Website einzukaufen und ihren Kaufbetrag zu erhöhen. Aufgrund seiner Fähigkeit, das Bindungsgefühl der Kunden zu reduzieren, kann dieser CTA auch bei hochpreisigen Transaktionen effektiv sein.

Schaltflächen zum Hinzufügen zum Warenkorb-5

Nicht alle E-Commerce-Websites erfordern eine Schaltfläche „In den Warenkorb“. Manchmal kann ein Call-to-Action wie „ Jetzt kaufen “ das Gefühl der Dringlichkeit verstärken und zu einem schnelleren Abschluss führen, wenn Sie davon ausgehen, dass Kunden nur ein Produkt oder eine Dienstleistung von Ihnen kaufen werden oder wenn Ihre Preise niedriger sind.

Testen Sie regelmäßig auf Usability

Stellen Sie sicher, dass Sie einen umfassenden Usability-Test für Ihre Schaltfläche „In den Warenkorb“ durchführen, wenn Sie Änderungen daran vornehmen. Kunden sollen den Checkout-Vorgang als einfach und intuitiv empfinden, fragen Sie daher Ihre Endverbraucher, wie übersichtlich und effektiv die Funktion des Buttons ist.

Auch wenn Sie nichts ändern, überprüfen Sie Ihre Schaltfläche „In den Warenkorb“ auf Probleme. Ein Client kann aufgrund unzureichender Funktion leicht verloren gehen.

Top 5+ Design-Inspirationen für „In den Warenkorb“-Buttons mit den meisten Conversions

Sind Sie bereit, die Schaltfläche „In den Warenkorb“ in Ihrem Online-Shop zu verherrlichen? Hier sind sechs hervorragende Beispiele, von denen Sie sich inspirieren lassen können.

Kaufknöpfe von Warby Parker

Schaltflächen zum Hinzufügen zum Warenkorb-6

Ein Warenkorb-Button sollte nicht langweilig sein. Es soll die Aufmerksamkeit auf die Seite lenken und es dem Verbraucher einfach und unkompliziert machen, auf die Schaltfläche zu klicken und den Artikel zu kaufen, den er sich ansieht.

Dies kann jedoch für Geschäfte, die Dinge mit verschiedenen Möglichkeiten verkaufen, schwierig sein.

Schauen Sie sich an, wie Warby Parker das macht. Eine Brille kann Hunderte verschiedener Konfigurationen haben, wie z. B. Rahmengrößen, Brillenglasstärken und Add-Ons wie Blaulichtblocker. Kunden können dadurch verwirrt werden; Sie verwenden jedoch eine Schaltfläche „In den Warenkorb“ mit der Überschrift „ Objektive auswählen und kaufen “, um Kunden durch den Prozess der Personalisierung des Produkts zu führen.

Birchbox's In den Warenkorb Optionen

Betreiben Sie ein Geschäft, das Dinge über Abonnementmodelle verkauft? Sie können die Schaltfläche „In den Warenkorb“ immer noch schmücken, wie dieses Birchbox-Beispiel zeigt.

Schaltflächen zum Hinzufügen zum Warenkorb-7

Das Faszinierende an diesem Beispiel ist die für die Schaltfläche verwendete Sprache. Sie haben die langweilige und übertriebene „In den Warenkorb “-Sprache zugunsten einer „ Abonnieren “-Nachricht eliminiert.

Goldes Preis im Knopf

Viele Verbraucher legen Produkte in ihren Einkaufswagen, schließen die Transaktion jedoch nicht ab, weil sie auf der Checkout-Seite zusätzliche Kosten wie Lieferung, Versand oder Steuern finden.

Schaltflächen zum Hinzufügen zum Warenkorb-8

Sie können dies umgehen, indem Sie den Inhalt Ihrer Schaltfläche „In den Warenkorb“ ändern, wie es Golde auf seiner E-Commerce-Website getan hat. Sie haben den Produktpreis innerhalb der Schaltfläche. Wenn Sie zur Checkout-Seite gelangen, wissen Sie genau, wie viel Sie bezahlen werden. Dies könnte bis zur Hälfte der Aufgabe des Einkaufswagens verhindern.

Etsys Erklärung zum Hinzufügen zum Einkaufswagen

Auf den ersten Blick scheint dieses Etsy-Beispiel für die Schaltfläche „In den Warenkorb“ nichts Besonderes zu sein. Direkt unter der Schaltfläche befindet sich jedoch ein kurzer Hinweis, der angibt, wie viele Personen die gleichen Artikel in ihrem Online-Warenkorb haben.

Schaltflächen zum Hinzufügen zum Warenkorb-8

Dies erzeugt für den Benutzer ein Gefühl der Dringlichkeit, die Taste zu drücken. Sie möchten den Artikel in Ihren Online-Warenkorb legen, bevor er ausverkauft ist.

Es hilft auch beim Social Proof. Sie zeigen, dass andere Personen an dem Produkt interessiert sind und es sogar in ihren Einkaufswagen gelegt haben. Wenn andere Menschen etwas kaufen möchten, kann dies potenzielle Kunden davon überzeugen, dasselbe zu tun.

Die Vorbestellungs-Warenkorb-Schaltfläche von Ratio Coffee

Die Schaltfläche „In den Warenkorb“ ist auch dann nützlich, wenn Ihr Online-Geschäft derzeit einen bestimmten Artikel nicht auf Lager hat.

Eigentlich müssen Sie nur den Text der Schaltfläche in „Vorbestellung“ ändern, wie es Ratio im folgenden Beispiel tut. Dies ermöglicht es dem Kunden immer noch, den Artikel zu kaufen, ihn in seinen Warenkorb zu legen und den Bestellvorgang abzuschließen. Der Artikel wird einfach versendet, sobald er wieder auf Lager ist.

Schaltflächen zum Hinzufügen zum Warenkorb-9

Mit dem Woostify-Design können Sie mit wenigen Klicks ganz einfach eine Vorbestellung für bestimmte Produkte einrichten.

Endeffekt,

Also! Dieser Artikel ist für Sie, wenn Sie die Aufgabe des Einkaufswagens verringern und den Umsatz steigern möchten! Ihre Schaltfläche „In den Warenkorb“ ist eine entscheidende Designkomponente, die zum Handeln anregen muss.

Trotz ihrer geringen Größe sind „Zum Warenkorb hinzufügen“-Buttons ein Muss für jeden Online-Händler. Diese winzigen, rechteckigen, gelegentlich farbigen Anklickbaren dienen als Erweiterung Ihres Brandings und verknüpfen Produkte mit Einkaufswagen. Es ist von entscheidender Bedeutung, die Auswahl und Einrichtung geeigneter Designs für „In den Einkaufswagen“-Schaltflächen für Ihre E-Commerce-Website sorgfältig zu prüfen.