Wichtige Erkenntnisse
- Füge den Promo-Link über Onlineshop > Navigation > Menüeintrag hinzufügen hinzu.
- Einige Themes unterstützen nativ Highlight-Styles für Navigationspunkte – prüfe dies im Theme-Editor > Header.
- Für benutzerdefinierte Farben, fetten Text oder ein Badge benötigst du CSS, das genau diesen Menüpunkt anspricht.
- Fudge kann jeden Navigationslink so stylen, wie du es beschreibst, ohne dass du Code schreiben musst.
Ein „Sale“- oder „Neu“-Link in der Header-Navigation – besonders in einer Kontrastfarbe wie Rot – sorgt konsistent für Klicks. Hier erfährst du, wie du ihn hinzufügst und hervorhebst.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5.0-Bewertung 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 enthalten eine integrierte Option, um einen bestimmten Navigationspunkt hervorzuheben. Bevor du Code schreibst, prüfe:
Onlineshop > Themes > Anpassen > Header
Suche nach Einstellungen wie:
- „Menüpunkt hervorheben“ – gib das Label des Menüpunkts ein, der hervorgehoben werden soll
- „Akzent-Navigationslink“ – wähle einen Link aus, der anders dargestellt werden soll
- Farbauswahl pro Element in den Navigationseinstellungen
Themes wie Impulse, Prestige und Broadcast bieten dies oft an. Wenn dein Theme diese Funktion hat, nutze sie – das ist die sauberste Lösung.
Option 2 – CSS-Targeting
Wenn dein Theme keine integrierte Highlight-Option hat, kannst du den Navigationspunkt per CSS ansprechen. Der Selektor hängt davon ab, wie dein Theme die Navigation rendert, aber ein gängiger Ansatz ist das Targeting über das href-Attribut des Links:
a[href="/collections/sale"] {
color: #e00;
font-weight: 700;
}Dies kann in der CSS-Datei deines Themes hinzugefügt werden (Onlineshop > Themes > Code bearbeiten > assets/base.css oder ähnlich) oder über einen <style>-Tag in einem Custom Liquid Snippet.
Du kannst dies Fudge so beschreiben: „Mache den ‘Sale’-Punkt in der Hauptnavigation rot.“ Fudge identifiziert den richtigen Selektor für dein spezifisches Theme und wendet das Styling an.
Passend dazu: Navigationsmenüs in Shopify bearbeiten.
Ein Badge zu einem Navigationspunkt hinzufügen
Ein kleines Badge (ein farbiger Button oder Punkt über dem Navigationspunkt) ist ein stärkeres visuelles Signal als nur die Farbe. Dies erfordert eine kleine HTML- und CSS-Änderung an deinem Header-Template.
Ansätze:
- Verwende ein CSS
::afterPseudo-Element, um das Badge ohne Änderung des HTML hinzuzufügen - Oder füge ein
<span>-Element innerhalb des Anchor-Tags des Navigationspunkts mit einer Klasse für das Styling hinzu
Dies ist eine häufige Anfrage. Beschreibe es Fudge: „Füge ein kleines rotes ‘NEU’-Badge zum ‘Neuheiten’-Punkt in der Hauptnavigation 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 eine 2-4x höhere Click-Through-Rate als bei ungestylten Nav-Links. Die Steigerung kommt vom Kontrast, nicht unbedingt durch das Wort „Sale“. Teste es in deinem Shop: Ein farblich hervorgehobener „New In“ oder „Bestseller“-Link performt oft genauso gut wie „Sale“, ohne die markenabwertende Assoziation von dauerhaften Rabatten.
Besser nicht. Ein dauerhafter „Sale“-Link trainiert Käufer darauf, auf Rabatte zu warten, und wertet deine Vollpreis-Produkte ab. Behalte ihn für echte Sale-Zeiträume (BFCM, Schlussverkauf am Saisonende) und entferne ihn zwischen den Kampagnen. Gerade die zeitliche Begrenzung macht ihn so effektiv.
Ja, mit CSS. Füge dem Menüpunkt über deine Header-Liquid eine Klasse hinzu (oder nutze den [href="..."] Selektor) und wende display: none innerhalb eines @media (max-width: 768px) oder @media (min-width: 769px) Blocks an, je nachdem ab welchem Breakpoint er versteckt werden soll.
Am einfachsten: Tippe das Emoji direkt in den Namen des Menüpunkts ein (z. B. 🔥 Sale). Die sauberere Lösung: Beschreibe was du von Fudge möchtest („rendere ein Flammen-SVG neben dem Sale-Nav-Link“) und es bearbeitet die Header-Liquid so, dass ein Icon im Anchor-Tag gerendert wird, basierend auf der URL oder dem Handle des Menüpunkts.
Ja. Füge ein benutzerdefiniertes dataLayer-Event in der Header-Liquid hinzu, das beim Klicken auf den Link feuert, oder nutze den Google Tag Manager, um einen Click-Trigger einzurichten, der auf den CSS-Selektor des Links abzielt. Das Event kann dann an GA4, Meta oder jede andere Analytics-Plattform weitergeleitet werden.
