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.
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 mit 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 ein <style>-Tag in einem Custom Liquid Snippet.
Du kannst dies Fudge so beschreiben: „Lass den ‘Sale’-Punkt in der Hauptnavigation in rotem Text erscheinen.“ Fudge identifiziert den richtigen Selektor für dein spezielles Theme und wendet das Styling an.
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 Promo-Links in der Navigation für begrenzte Zeiträume – einen „Black Friday“-Link im November, einen „Summer Sale“-Link im Juli. Eine gute Praxis ist:
- Die Kategorie im Voraus erstellen
- Den Menüpunkt hinzufügen, wenn der Sale live geht
- Ihn nach Ende des Sales wieder entfernen (Onlineshop > Navigation > Eintrag löschen > Speichern)
Einige Shops verwenden ein separat angelegtes „Promotions-Menü“, das während Aktionszeiträumen über die Einstellungen im Theme-Editor ein- und ausgeschaltet wird. Bitte deinen Developer, dies einmal einzurichten, dann ist für zukünftige Kampagnen nur noch ein Menü-Wechsel nötig.
Animierte oder blinkende Navigationslinks
Manche Shops gehen noch weiter und fügen dem Promo-Link eine subtile Animation hinzu – ein sanftes Pulsieren, ein blinkender Punkt oder ein Farbübergang –, um zusätzliche Aufmerksamkeit zu erregen.
Dies lässt sich mit CSS-Keyframe-Animationen umsetzen. Beschreibe Fudge genau den Effekt, den du möchtest: „Lass den ‘Sale’-Link alle 2 Sekunden sanft zwischen weißem und rotem Text pulsieren.“
