So fügst du Promo-Links zur Shopify-Navigation hinzu (2026)

Die wichtigsten Erkenntnisse

• Füge den Werbe-Link über Onlineshop > Navigation > Menüpunkt hinzufügen hinzu.
• Einige Themes unterstützen native Hervorhebungen für Nav-Elemente - prüfe das im Theme-Editor > Header.
• Für benutzerdefinierte Farben, fetten Text oder ein Badge benötigst du CSS, das genau dieses Nav-Element anspricht.
• Fudge kann jeden Navigations-Link nach deinen Vorgaben stylen, ohne dass du Code schreiben musst.

Ein „Sale“- oder „Neu“-Link in der Header-Navigation – besonders in einer auffälligen Kontrastfarbe wie Rot – sorgt durchgehend für mehr 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 ::after Pseudo-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:

1. Erstelle die Collection im Voraus
2. Füge den Navigationspunkt hinzu, sobald der Sale live geht
3. 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