Shop-Darstellung: Warenkorb-Knopf und Kategorie-Leiste

PetWorkers Wave · Prüfe zuerst, ob du diese Produktlinie verwendest. Menüwege und Bilder können sich zwischen Classic und Wave unterscheiden.

Unter Layout → Shop-Darstellung legst du fest, wie der Warenkorb-Knopf auf deinen Shop-Seiten aussieht und wo er steht. Außerdem schaltest du hier die Kategorie-Leiste unter dem Menü deiner Website ein oder aus.

Wer hat Zugriff?

  • Administratoren — sehen und ändern die Shop-Darstellung.
  • BackOffice (Büro & Buchhaltung), BackOffice (Sach- und Rechnungsbearbeitung) und Beratung, Training & Betreuung — sehen das Menü Layout nicht.
  • Besucher und Kunden — sehen nur das Ergebnis auf den Shop-Seiten.
  • Details zu den Rollen: Rollen und Rechte.

Welche E-Mails werden verschickt?

Diese Seite verschickt keine E-Mails.

Kurz gesagt: Wähle unter Layout → Shop-Darstellung Position, Größe, Symbol und Farben des Warenkorb-Knopfs. Die Vorschau zeigt dir sofort das Ergebnis. Gespeichert wird erst mit Änderungen speichern.

So gestaltest du den Warenkorb-Knopf

Der Warenkorb-Knopf schwebt auf allen Shop-Seiten. Er zeigt, wie viele Artikel im Warenkorb liegen. Ein Klick öffnet den Warenkorb.

  1. Klicke im Menü auf Layout → Shop-Darstellung. Du kommst auch aus Stammdaten → Shopkategorien über den Knopf Shop-Darstellung hierher.
    Das aufgeklappte Menü Layout mit dem markierten Punkt Shop-Darstellung
    Rot markiert: Shop-Darstellung im Menü Layout.
  2. Wähle bei Position die Ecke, in der der Knopf stehen soll: „Unten rechts“, „Unten links“, „Oben rechts“ oder „Oben links“.
    Kasten Warenkorb-Knopf mit dem markierten Feld Position
    Rot markiert: das Feld Position. Ab Werk steht der Knopf „Unten rechts“.
  3. Trage bei Abstand zum Rand (px) ein, wie weit der Knopf vom Bildschirmrand entfernt steht. Ab Werk sind es 20.
    Kasten Warenkorb-Knopf mit dem markierten Feld Abstand zum Rand
    Rot markiert: Abstand zum Rand (px).
  4. Wähle bei Größe „Klein“, „Mittel“ oder „Groß“.
    Kasten Warenkorb-Knopf mit dem markierten Feld Größe
    Rot markiert: das Feld Größe.
  5. Wähle bei Symbol das Bild im Knopf, zum Beispiel „Einkaufswagen“, „Tasche“ oder „Korb“. Mit „Kein Symbol“ steht nur die Beschriftung im Knopf.
    Kasten Warenkorb-Knopf mit dem markierten Feld Symbol
    Rot markiert: das Feld Symbol, hier „Einkaufswagen“.
  6. Nimm den Haken Beschriftung „Warenkorb“ anzeigen weg, wenn du nur einen runden Knopf mit Symbol und Zähler möchtest. Mit Haken steht „Warenkorb“ im Knopf.
    Kasten Warenkorb-Knopf mit dem markierten Haken Beschriftung Warenkorb anzeigen
    Rot markiert: der Haken Beschriftung „Warenkorb“ anzeigen.
  7. Willst du eine eigene Farbe, nimm bei Hintergrundfarbe den Haken Farbe des Website-Designs weg. Mit Haken übernimmt der Knopf die Knopffarbe deiner Website (Layout → Designeinstellungen) und folgt ihr bei jeder Änderung.
    Kasten Warenkorb-Knopf mit dem markierten Haken Farbe des Website-Designs neben Hintergrundfarbe
    Rot markiert: der Haken Farbe des Website-Designs bei der Hintergrundfarbe.
  8. Klicke auf das Farbfeld links daneben und wähle die Farbe. Für die Schrift und das Symbol im Knopf machst du dasselbe bei Text- und Symbolfarbe.
    Kasten Warenkorb-Knopf mit dem markierten Farbfeld Hintergrundfarbe, der Haken daneben ist entfernt
    Der Haken ist weg. Rot markiert: das Farbfeld der Hintergrundfarbe.
  9. Schau dir in der Vorschau an, wie der Knopf aussieht. Sie folgt deinen Eingaben sofort. Der graue Kreis steht für den „Nach oben“-Button.
    Kasten Vorschau mit dem markierten Vorschaubereich, darin der Warenkorb-Knopf und ein grauer Kreis
    Rot markiert: die Vorschau mit dem Warenkorb-Knopf. Der graue Kreis darunter ist der „Nach oben“-Button.
  10. Klicke auf Änderungen speichern.
    Kasten Vorschau mit dem markierten Knopf Änderungen speichern
    Rot markiert: Änderungen speichern.

Geklappt, wenn: oben „Änderungen gespeichert.“ erscheint und der Knopf auf deinen Shop-Seiten so aussieht wie in der Vorschau. Liegt der „Nach oben“-Button in derselben unteren Ecke (oder unten in der Mitte), rückt der Warenkorb-Knopf über ihn, sobald der „Nach oben“-Button erscheint.

Shop-Seite mit markierter Kategorie-Leiste unter dem Menü und markiertem Warenkorb-Knopf unten rechts
So sieht es auf der Website aus. Rot markiert: oben die Kategorie-Leiste unter dem Menü, unten rechts der Warenkorb-Knopf mit Zähler.

So schaltest du die Kategorie-Leiste ein oder aus

Die Kategorie-Leiste steht auf allen Shop-Seiten direkt unter dem Menü deiner Website. Sie zeigt deine Kategorien, Unterkategorien klappen auf. Auf dem Handy lässt sie sich seitlich wischen.

  1. Klicke im Menü auf Layout → Shop-Darstellung.
    Das aufgeklappte Menü Layout mit dem markierten Punkt Shop-Darstellung
    Rot markiert: Shop-Darstellung im Menü Layout.
  2. Nimm im Kasten Kategorie-Leiste den Haken Kategorie-Leiste unter dem Menü anzeigen weg, wenn du keine Leiste möchtest. Setze ihn, damit sie wieder erscheint. Ab Werk ist er gesetzt.
    Kasten Kategorie-Leiste mit dem markierten Haken Kategorie-Leiste unter dem Menü anzeigen
    Rot markiert: der Haken Kategorie-Leiste unter dem Menü anzeigen.
  3. Klicke auf Änderungen speichern.
    Kasten Vorschau mit dem markierten Knopf Änderungen speichern
    Rot markiert: Änderungen speichern.

Geklappt, wenn: oben „Änderungen gespeichert.“ erscheint. Auf den Shop-Seiten ist die Leiste dann weg oder wieder da.

Oberkategorie, Symbol und „Auf der Shop-Startseite zeigen“ stellst du je Kategorie ein. Wie das geht, steht unter Unterkategorie anlegen und Kategorie auf der Shop-Startseite zeigen.

Wenn etwas nicht klappt

  • Die Kategorie-Leiste erscheint nicht. — Sie erscheint erst ab zwei Kategorien mit Artikeln im Shop oder bei einer Kategorie mit Unterkategorien. Oder der Haken „Kategorie-Leiste unter dem Menü anzeigen“ fehlt. — Ordne Artikel den Kategorien zu oder setze den Haken.
  • Der Knopf hat nicht deine Farbe. — Der Haken „Farbe des Website-Designs“ ist noch gesetzt. — Nimm ihn weg, wähle die Farbe und speichere.
  • Der Knopf springt beim Scrollen nach oben. — Der „Nach oben“-Button steht in derselben Ecke. Der Warenkorb-Knopf macht ihm Platz. — Stelle eine andere Position ein oder verschiebe den „Nach oben“-Button (Schnellanmeldung und „Nach oben“-Button).
  • Auf der Website ist noch der alte Knopf zu sehen. — Du hast nicht gespeichert. Die Vorschau allein ändert nichts. — Klicke auf Änderungen speichern.

Frage noch offen?

Wenn dir in der Anleitung etwas fehlt — schreib uns. Wir nehmen Themen aus Support-Tickets oft sofort als neue Anleitung auf.

AV-Vertrag inklusive Server in Deutschland Persönlicher Support