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
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.“
