Warenkorb-Symbol anzeigen

Schritte zum Gestalten oder Ausblenden des Warenkorb-Symbols deines Shops.

Zuletzt aktualisiert: 13. September 2024

Alle Websites unterstützen ein Warenkorb-Symbol, das die Anzahl der Artikel im Einkaufswagen eines Kunden anzeigt und zur Bestellseite führt.

Gestalten Sie das Symbol

Wie du das Warenkorb-Symbol gestalten kannst, hängt von der Version deiner Website ab.

Das Warenkorb-Symbol wird standardmäßig als Einkaufswagen in der Kopfzeile angezeigt.

So aktivierst und gestaltest du das Warenkorb-Symbol:

  1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
  2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
  3. Klicke auf Elemente hinzufügen.
  4. Aktiviere den Schalter Warenkorb.
  5. Klicke auf eine beliebige Stelle außerhalb des Editors.
  6. Klicke auf das Warenkorb-Symbol in deinem Header und dann auf das Bleistift-Symbol.
  7. Wähle den Stil aus.
    • Wenn du Symbol auswählst, wähle ein Warenkorb-, Korb- oder Taschen-Symbol aus, das in deinem Header angezeigt werden soll. Klicke dann auf Zurück, um die Größe des Warenkorb-Symbols festzulegen.
    • Wenn du Text wählst, wird anstelle eines Symbols ein benutzerdefinierter Text mit bis zu 10 Zeichen angezeigt, der deinen Navigationslink-Stilen entspricht.
  8. Aktiviere unter Rand einen Rand, der das Symbol umgibt, indem du eine Randform auswählst. Wähle dann Kontur oder Gefüllt aus, um das Design zu ändern. Wenn du Kontur wählst, lege die Stärke der Kontur fest.
  9. Um „0“ neben dem Warenkorb anzuzeigen, bevor Kunden etwas hinzufügen, aktiviere den Schalter Im Warenkorb „0“ anzeigen.
  10. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Warenkorb-Symbol „Text“ auf Mobilgeräten

Wenn dein Warenkorb-Symbol auf Text festgelegt ist, zeigt das Symbol die Anzahl der Artikel im Warenkorb auf Mobilgeräten an. Die Website zeigt zunächst „(0)“ im Header als Warenkorb-Symbol an. Das Ändern des Schalters Im Warenkorb „0“ anzeigen hat keinen Einfluss darauf, wie dies auf Mobilgeräten angezeigt wird.

Die Anzeige des Warenkorb-Symbols hängt von Ihrem Template ab. Denke daran:

  • In den meisten Templates wird das Warenkorb-Symbol automatisch auf allen Seiten angezeigt, nachdem ein Kunde etwas in seinen Warenkorb legt.
  • In einigen Templates ist das Symbol ein permanenter Bestandteil der Kopfzeile.
  • Der Warenkorb wird nicht angezeigt, wenn Express-Kasse aktiviert ist.
  • Wenn Ihr Warenkorb nicht angezeigt wird, lesen Sie unsere Tipps zur Fehlerbehebung.

Anzeige nach Template

Diese Template-Familien haben den klassischen Button:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford – Aber er wird unter den Kopfzeilenelementen angezeigt
  • Five
  • Flatiron – Aber er wird unter der Kopfzeile angezeigt
  • Forte – Aber er wird in der unteren rechten Ecke angezeigt
  • Galapagos
  • Ishimoto
  • Momentum – Er wird jedoch oben links angezeigt, wenn sich die Navigationsleiste unten befindet, oder unten links, wenn sich die Navigationsleiste oben befindet.
  • Montauk
  • Native
  • Pacific – Aber er ist ein Rechteck und Sie können die Farben und Schriftart einstellen. Der Button sieht auf Mobilgeräten gleich aus (keine Navigationsleiste).
  • Supply – Aber es ist ein Rechteck.
  • Wells – Aber es ist ein Rechteck.
  • Wexley

Diese Template-Gruppen verfügen über erweiterte Optionen:

  • Brine
  • Skye
  • Tremont
  • Farro
  • York

Du kannst noch weitere Elemente gestalten, u. a. den Button „Zum Warenkorb hinzufügen“, die Shop-Seite und den Button „Einkauf fortsetzen“.

Klassischer Button

Die meisten Templates unterstützen den klassischen Button, der das Warenkorb-Symbol in einer schwarzen, pillenförmigen Schaltfläche in der oberen rechten Ecke anzeigt. Er wird automatisch auf allen Seiten angezeigt, nachdem ein Kunde einen Artikel zu seinem Warenkorb hinzugefügt hat. Er hat keine Stil-Optionen.

classic-button-desktop.png

Auf Mobilgeräten erscheint der klassische Button unten als Navigationsleiste:

classic-button-mobile.png

Erweiterte Stil-Optionen

Du kannst den Stil des Warenkorbs im Menü „Website-Stile“ in den folgenden Template-Gruppen anpassen:

Template-Gruppe Computer-Display Darstellung auf Mobilgeräten

Brine

Wird als Warenkorb, Text oder Tasche in der Kopfzeile angezeigt. Die Anzeige lässt sich verbergen. Mehr erfahren.

Separate Stile für Mobilgeräte. Wird in der oberen oder unteren Navigationsleiste als Warenkorb, Text oder Tasche angezeigt. Kann verborgen werden. Mehr erfahren.

Farro

Wird als Warenkorb, Text oder Tasche in der Kopfzeile angezeigt. Die Anzeige lässt sich verbergen. Weitere Informationen.

Separate Stile für Mobilgeräte. Wird in der oberen oder unteren Navigationsleiste als Warenkorb, Text oder Tasche angezeigt. Kann versteckt werden. Weitere Informationen.

Pacific

Wird in einem rechteckigen Button in der oberen rechten Ecke angezeigt. Nur Text. Du kannst die Farben anpassen. Kann nicht verborgen werden. Mehr erfahren.

Sieht genauso aus wie am Desktop. Wird rechts unten angezeigt. Kann nicht ausgeblendet werden. Mehr erfahren.

Skye

Wird oben rechts als Taschensymbol angezeigt, nachdem du eine Shop-Seite zu deiner Website hinzugefügt hast. Kann nicht ausgeblendet werden. Mehr erfahren.

Sieht genauso aus wie am Desktop. Wird unten in einer Navigationsleiste angezeigt. Mehr erfahren.

Tremont

Wird als Text mit der Navigation oder als Taschen- oder Warenkorbsymbol in der rechten oberen Ecke angezeigt. Kann verborgen werden. Mehr erfahren.

Sieht genauso aus wie am Desktop. Wird rechts oben (Symbol) oder unterhalb der Navigationslinks angezeigt, wenn du auf das Menü-Symbol (Text) tippst. Wenn es auf einem Computer ausgeblendet ist, ist es auch auf Mobilgeräten ausgeblendet. Mehr erfahren.

York

Wird als Warenkorb, Text oder Tasche in der Kopfzeile angezeigt. Die Anzeige lässt sich verbergen. Weitere Informationen.

Separate Stile für Mobilgeräte. Wird unterhalb der Navigationslinks angezeigt, wenn Sie auf das Menüsymbol tippen. Kann versteckt werden. Weitere Informationen.

Warenkorb-Symbol ausblenden

Wie du das Warenkorb-Symbol ausblenden kannst, hängt von der Version deiner Website ab.

So blenden Sie das Symbol in der Kopfzeile Ihrer Website aus:

  1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
  2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
  3. Klicke auf Elemente hinzufügen.
  4. Deaktiviere den Schalter Warenkorb.
  5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Wenn du das Warenkorb-Symbol ausblendest, wird unten auf der Seite ein entsprechendes Symbol angezeigt, wenn jemand ein Produkt in den Warenkorb legt. So änderst du die Farbe des Symbols:

  1. Wenn du eine Seite bearbeitest, öffne Website-Stile und klicke dann auf Farben.
  2. Lege unter Button die Farben für den Hintergrund und den Text fest. Der Warenkorb folgt dem Standard-Farbschema deiner Website.
  3. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Es ist nicht möglich, das Symbol zu deaktivieren oder seine Größe und Form zu ändern.

Ohne das Warenkorb-Symbol können Kunden den Kassenbereich nicht selbst finden. Sie sollten es nur ausblenden, wenn Sie Express-Kasse verwenden oder nur Abonnementprodukte verkaufen. In diesen Fällen werden Kunden nach der Auswahl eines Produkts automatisch zum Kassenbereich weitergeleitet.

Du kannst die unten aufgeführten Website-Stil-Anpassungen verwenden, um den Warenkorb in diesen Template-Gruppen auszublenden oder anzuzeigen:

  • BrineWarenkorb-Position
  • FarroWarenkorb-Position
  • TremontWarenkorb-Linkanzeige
  • YorkWarenkorb-Position

In dieser Anleitung

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.