Das Wichtigste in Kürze
- Füge den Aktionslink über Onlineshop > Navigation > Menüpunkt hinzufügen hinzu.
- Einige Themes unterstützen von Haus aus Hervorhebungen für Navigationspunkte – sieh dazu im Theme-Editor > Header nach.
- Für eigene Farben, fetten Text oder ein Badge brauchst du CSS, das genau diesen Navigationspunkt anspricht.
- Mit Fudge kannst du jeden Navigationslink genau nach deinen Vorstellungen stylen, ohne Code schreiben zu müssen.
Ein „Sale“- oder „Neu“-Link in der Header-Navigation – besonders in einer Kontrastfarbe wie Rot – sorgt verlässlich für mehr Klicks. Hier zeigen wir dir, wie du ihn hinzufügst und richtig hervorhebst.
Warum du uns vertrauen kannst
Wir haben bereits hunderte Shopify-Storefronts aufgebaut und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.
Schritt 1 – Den Menüpunkt hinzufügen
Schritt 1. Gehe zu Onlineshop > Navigation > klicke auf Hauptmenü.
Schritt 2. Klicke auf Menüeintrag hinzufügen.
Schritt 3. Lege den Namen so fest, wie er in der Navigation angezeigt werden soll – „Sale“, „Neu“, „Angebote“, „Limited Edition“ usw.
Schritt 4. Setze den Link auf das Ziel – normalerweise eine Kategorie: Klicke in das Link-Feld und suche nach deiner Sale-Kategorie oder gib den Pfad manuell ein (z. B. /collections/sale).
Schritt 5. Klicke auf Hinzufügen und dann auf Menü speichern.
Der Punkt erscheint nun in deiner Navigation. Standardmäßig sieht er genauso aus wie alle anderen Navigationspunkte. Im nächsten Schritt lassen wir ihn hervorstechen.
Verwandt: Create a Mega Menu in Shopify.
Schritt 2 – Den Promo-Link stylen
Prüfe, ob dein Theme dies nativ unterstützt
Einige Shopify-Themes bieten eine integrierte Option, um einen bestimmten Navigationspunkt hervorzuheben. Bevor du Code schreibst, überprüfe:
Onlineshop > Themes > Anpassen > Header
Suche nach Einstellungen wie:
- „Menüpunkt hervorheben“ (Highlight menu item) – gib die Bezeichnung des Menüpunkts ein, der hervorgehoben werden soll
- „Navigationslink hervorheben“ (Accent navigation link) – wähle einen Link aus, der anders dargestellt werden soll
- Farbwähler für einzelne Elemente in den Navigationseinstellungen
Themes wie Impulse, Prestige und Broadcast enthalten dies oft. Wenn dein Theme diese Option hat, nutze sie – das ist die sauberste Lösung.
Option 2 – CSS-Targeting
Wenn dein Theme keine integrierte Option zur Hervorhebung hat, kannst du den Navigationspunkt mit CSS ansteuern. Der Selektor hängt davon ab, wie dein Theme die Navigation rendert, aber ein gängiger Ansatz ist die Ansteuerung über das href-Attribut des Links:
a[href='/collections/sale'] {
color: #e00;
font-weight: 700;
}Dies kann zur CSS-Datei deines Themes hinzugefügt werden (Onlineshop > Themes > Code bearbeiten > assets/base.css oder ähnlich) oder über ein <style>-Tag in einem benutzerdefinierten Liquid-Snippet.
Du kannst dies Fudge einfach beschreiben: „Färbe den ‘Sale’-Menüpunkt in der Hauptnavigation rot.“ Fudge findet den richtigen Selektor für dein spezielles Theme und wendet das Styling an.
Verwandt: Navigationsmenüs in Shopify bearbeiten.
Ein Badge zu einem Navigationspunkt hinzufügen
Ein kleiner Badge (eine farbige Pille oder ein Punkt, der über dem Navigationspunkt liegt) ist ein stärkeres visuelles Signal als Farbe allein. Dies erfordert eine kleine HTML- und CSS-Anpassung in deinem Header-Template.
Ansätze:
- Verwende ein CSS-
::after-Pseudoelement, um den Badge hinzuzufügen, ohne das HTML zu ändern - Oder füge ein
<span>-Element innerhalb des Anchor-Tags des Navigationspunkts hinzu und gib ihm eine Klasse für das Styling
Das wird oft gefragt. Beschreibe es Fudge einfach so: „Füge dem Menüpunkt ‘Neuheiten’ in der Hauptnavigation einen kleinen roten ‘NEU’-Badge hinzu.“
Saisonale Promo-Links
Viele Shops nutzen zeitlich begrenzte Promo-Links – einen „Black Friday“-Link im November oder einen „Summer Sale“-Link im Juli. Best Practice ist dabei:
- Erstelle die Collection im Voraus
- Füge den Navigationspunkt hinzu, sobald der Sale live geht
- Entferne ihn nach Ende des Sales (Onlineshop > Navigation > Punkt löschen > Speichern)
Einige Shops nutzen ein separates „Promotional“-Menü, das während Kampagnenzeiten über die Theme-Editor-Einstellungen ein- und ausgeschaltet wird. Bitte deinen Developer, dies einmal einzurichten, damit du für künftige Kampagnen nur noch das Menü austauschen musst.
Passend dazu: Markenfarben in Shopify aktualisieren.
Passend dazu: Ein Mega Menu in Shopify erstellen.
Passend dazu: Eine Promotionsseite in Shopify erstellen.
Animierte oder blinkende Navigationslinks
Einige Shops gehen noch weiter und fügen dem Promo-Nav-Link eine dezente Animation hinzu – ein sanftes Pulsieren, ein blinkender Punkt oder ein Farbübergang –, um noch mehr Aufmerksamkeit zu erregen.
Das ist mit CSS-Keyframe-Animationen machbar. Beschreibe Fudge einfach genau den Effekt, den du möchtest: „Lass den ‘Sale’ Nav-Link alle 2 Sekunden sanft zwischen weißem und rotem Text pulsieren.“
FAQ
Ja – typischerweise bringt das 2-4× mehr Klicks als ein ungestylter Navigationspunkt. Der Anstieg kommt durch den Kontrast, nicht unbedingt durch das Wort "Sale". Teste es in deinem Shop: Ein farblich hervorgehobener "New In"- oder "Bestseller"-Link funktioniert oft genauso gut wie "Sale", ohne dass deine Marke durch ständige Rabatte entwertet wird.
Wahrscheinlich eher nicht. Ein dauerhafter "Sale"-Link erzieht die Käufer dazu, auf Rabatte zu warten, und entwertet deine Vollpreisprodukte. Behalte ihn für echte Sale-Zeiträume (BFCM, Schlussverkauf am Ende der Saison) bei und entferne ihn zwischen den Kampagnen. Die zeitliche Begrenzung macht ihn gerade so effektiv.
Ja, mit CSS. Füge dem Menüpunkt über dein Header-Liquid eine Klasse hinzu (oder verwende den Selektor [href="..."]) und setze display: none innerhalb eines @media (max-width: 768px)- oder @media (min-width: 769px)-Blocks, je nachdem, bei welchem Breakpoint du ihn ausblenden willst.
Am einfachsten: Tippe das Emoji direkt in den Namen des Menüpunkts ein (z. B. 🔥 Sale). Die sauberere Lösung: Beschreibe Fudge, was du willst ("rendere ein Flammen-SVG neben dem Sale-Nav-Link"), und Fudge bearbeitet das Header-Liquid, um ein Icon innerhalb des Anchor-Tags basierend auf der URL oder dem Handle des Menüpunkts zu rendern.
Ja. Füge ein benutzerdefiniertes dataLayer-Event in das Header-Liquid ein, das ausgelöst wird, wenn der Link geklickt wird, oder verwende den Google Tag Manager, um einen Klick-Trigger einzurichten, der auf den CSS-Selektor des Links abzielt. Das Event kann dann an GA4, Meta oder eine andere Analyseplattform weitergeleitet werden.
