Zum Inhalt springen
Start » JTL-Plugin: Menü Badges

JTL-Plugin: Menü Badges

Mehr Aufmerksamkeit im Menü – mit Badges für „Neu“, „Aktion“ & „Rabatt“

Mit PAW Menü Badges markierst du wichtige Menüpunkte direkt in der Navigation – dezent, aber auffällig. Perfekt für Aktionen, neue Kategorien, zeitlich begrenzte Angebote oder Hinweise wie „Aktuell“. Regeln lassen sich flexibel steuern, ohne dass du am Theme-Code herumfummeln musst.

Ideal für: Shops mit Aktionen, saisonalen Kategorien, Launches oder Menü-Updates.

Was du damit erreichst

  • Menüführung verbessern – Nutzer sehen sofort, was gerade wichtig ist.
  • Aktionen pushen – „Sale“/„Rabatt“ wird direkt im Menü wahrgenommen.
  • Neuheiten hervorheben – neue Kategorien/Seiten werden nicht übersehen.
  • Mehr Klicks auf relevante Ziele – ohne zusätzliche Banner oder Popups.

Flexible Regeln statt Hardcoding

  • Keyword/URL-Matching – Badge erscheint bei bestimmten Links/URLs.
  • Link-Text oder CSS-Klasse – für präzise Zuordnung (je nach Theme).
  • Kategorie-SEO – ideal für Kategorie-Menüpunkte (stabiler als Link-Text).
  • Reihenfolge/Priorität – erste passende Regel gewinnt (sauber steuerbar).

Optik, die zum Theme passt

  • Rund / eckig – je nach Stil des Menüs.
  • Schatten optional – für etwas mehr „Pop“, wenn gewünscht.
  • Farben pro Badge – Hintergrund und Textfarbe individuell.
  • CSS-Klasse pro Regel – Feintuning über eigenes Theme-CSS möglich.

Typische Anwendungsfälle

  • „Aktion“ auf Sale-Landingpage oder Aktionskategorie.
  • „Neu“ auf neue Kategorie nach Sortimentsupdate.
  • „Rabatt“ auf zeitlich begrenzte Promo.
  • „Aktuell“ auf Ratgeber/News/Info-Seite.
Kurz gesagt Menü-Badges sind ein einfacher Hebel: Nutzer sehen sofort, was wichtig ist – ohne dass du das Menü umbauen musst. Einrichten, Regeln setzen, fertig.

PAW Menü-Badges – Dokumentation

Mit dem Plugin lassen sich Badges direkt an Menülinks hängen – z. B. „NEU“, „AKTION“, „RABATT“ oder „AKTUELL“. Regeln können per URL, Link-Text, CSS-Klasse oder Kategorie-SEO gematcht werden.

Einrichtung Globales Styling Menu-Selector Regeln anlegen Priorität Tipps FAQ

Überblick

Die Konfiguration besteht aus drei Teilen: Allgemein (aktivieren + Optik), Theme/Ziel-Selector (wo das Badge angehängt wird) und Regeln (wann welcher Badge erscheint).

Merksatz Erst wenn der Selector stimmt, kann das Plugin Badges zuverlässig an den Menüpunkt hängen.
PAW Menü-Badges – Einstellungsseite

Screenshot: Einstellungsseite (Allgemein, Selector, Regeln).

Einrichtung (Step-by-Step)

Plugin aktivieren

In Allgemein den Haken bei „Aktiv“ setzen, damit Badges im Frontend angezeigt werden.

Optik grob festlegen

Ebenfalls in Allgemein (globales Styling): optional „Badge rund“ und „Schatten“ aktivieren sowie die Größe wählen. Die Vorschau zeigt direkt, wie der Badge grundsätzlich aussieht.

CSS Selector für Menü-Links setzen

Unter Theme / Ziel-Selector den Selector eintragen, mit dem die Menülinks gefunden werden. Beispiel (häufig): .nav-link.

Erste Regel anlegen

Im Bereich Regeln eine Regel erstellen (z. B. Badge „NEU“ für eine Kategorie oder eine Aktion-Seite), dann Speichern.

Im Frontend prüfen

Seite neu laden und Menü prüfen. Falls nichts erscheint: zuerst Selector prüfen und anschließend Hard-Reload (Strg+F5).

Globales Styling (Allgemein)

Hier stellst du das Grundlayout ein – Regeln können einzelne Aspekte später überschreiben.

Option Wirkung Hinweis
Aktiv Badges im Frontend anzeigen. Wenn „aus“, wird nichts ausgegeben – egal welche Regeln existieren.
Badge rund Pill-Style (sonst eher eckig). Sieht im Menü meist „ruhiger“ aus.
Schatten Leichter Shadow-Effekt für „Pop“. Dezent einsetzen – je nach Theme kann’s schnell zu viel sein.
Größe Small/Medium/… je nach Plugin. Small ist oft die beste Wahl für Hauptnavigation.
Vorschau Zeigt das globale Styling. Hilft beim schnellen Check, bevor Regeln gebaut werden.

Theme / Ziel-Selector (CSS)

Der Selector bestimmt, welche Menü-Elemente geprüft werden. Das Plugin hängt den Badge am passenden Menülink an. Wenn dein Theme mehrere Menüs hat (Desktop/Mobile/Sticky), kann es sein, dass du einen Selector wählen musst, der alle Varianten abdeckt – oder spezifischer werden musst.

So findest du den richtigen Selector (kurz)
  1. Frontend öffnen → Maus auf Menüpunkt → Rechtsklick → „Untersuchen“
  2. Im HTML die Klassen/Struktur prüfen (meist a-Tag)
  3. Einen stabilen Selector wählen (z. B. .nav-link, .main-nav a, nav a)
Wenn nichts erscheint 90% der Fälle: Selector trifft nicht. Testweise sehr allgemein starten (z. B. nav a) und dann verfeinern. 

.nav-link
.main-nav a
.navbar a
nav .menu a

Regeln anlegen

Regeln sagen dem Plugin, wann ein Badge angezeigt wird. Du wählst zuerst den Match-Typ und definierst dann, worauf gematcht werden soll (Match-Wert). Anschließend legst du Text und Farben fest.

Feld Wofür es ist Beispiel
Match-Typ Wie die Regel den Menüpunkt erkennt. URL / Link-Text / CSS-Klasse / Kategorie (SEO)
Match-Wert Der konkrete Wert, auf den gematcht wird. /sale/ oder Kategorie-SEO /Restposten-Sonderposten-Angebote
Badge-Text Text im Badge. NEU, AKTION, -10%
Hintergrund Badge-Hintergrundfarbe. Gelb für NEU, Rot für AKTION
Textfarbe Schriftfarbe im Badge. Schwarz auf Gelb, Weiß auf Rot
Zusätzliche CSS-Klasse (optional) Für eigenes Theme-CSS (Feintuning). is-sale oder badge-hot
Rundung (optional) Regel kann globale Rundung übernehmen oder überschreiben. „Global übernehmen“ oder individuell

Regel erstellen

Im Bereich Regeln auf + Regel klicken.

Match-Typ wählen

Wähle den Typ, der am sichersten ist: Kategorie (SEO) ist ideal für Kategorie-Menüpunkte, URL für feste Seiten wie Aktionen, Link-Text nur wenn sich Texte nicht ändern.

Match-Wert eintragen

Je nach Typ den passenden Wert setzen. Bei Kategorie (SEO) kannst du oft direkt die Kategorie auswählen.

Badge gestalten

Badge-Text, Hintergrund und Textfarbe setzen. Optional CSS-Klasse ergänzen.

Aktivieren und speichern

Regel auf aktiv setzen und unten rechts Speichern klicken.

Praxis Für Aktionen: Match-Typ URL + Match-Wert /sale/ oder die Aktionsseite. Für Kategorien: Match-Typ Kategorie (SEO) ist am robustesten.

Priorität / Reihenfolge der Regeln

Regeln werden von oben nach unten geprüft – die erste passende Regel gewinnt. Deshalb sollten allgemeine Regeln eher weiter unten stehen und spezielle Regeln weiter oben.

Typischer Stolperstein Wenn ein Menüpunkt immer den falschen Badge bekommt, liegt fast immer eine zu allgemeine Regel darüber. Lösung: Reihenfolge anpassen oder Match-Wert präziser machen.

Tipps aus der Praxis

  • Weniger ist mehr: zu viele Badges im Hauptmenü wirken schnell unruhig.
  • Kontraste: Textfarbe immer so wählen, dass es im Theme gut lesbar bleibt.
  • Match stabil halten: Kategorie-SEO oder URL ist robuster als Link-Text.
  • Mobile beachten: manche Themes haben ein eigenes Mobile-Menü mit anderen Klassen → Selector ggf. anpassen.
  • Feintuning: über „Zusätzliche CSS-Klasse“ kannst du einzelne Badges im Theme gezielt stylen.
/* Beispiel: eigenes Styling für eine Regelklasse */
.badge-hot { 
  /* hier dein Theme-CSS */
}

FAQ / Troubleshooting

Es erscheint kein Badge – was zuerst prüfen?

1) Plugin „Aktiv“? 2) Regel ist aktiv? 3) Selector trifft wirklich die Menülinks? Als Test den Selector einmal grob setzen (z. B. nav a) und prüfen, ob dann überhaupt etwas erscheint.

Badge erscheint am falschen Menüpunkt

Match-Typ/Match-Wert prüfen. Häufig ist die Regel zu allgemein (z. B. kurzer URL-Teil). Außerdem die Regel-Reihenfolge: oben gewinnt.

Desktop ok, Mobile nicht

Viele Themes nutzen ein separates Mobile-Menü mit anderen Klassen. Dann braucht es entweder einen allgemeineren Selector oder mehrere Selektoren (je nach Plugin-Feldformat).

Support Wenn du mir sagst, welches Theme (und wie das Menü im Frontend aufgebaut ist), kann ich dir den optimalen Selector und 2–3 Musterregeln (NEU/AKTION/RABATT) direkt fertig machen.