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

Wichtigste Erkenntnisse

• Füge den Aktions-Link über Onlineshop > Navigation > Menüpunkt hinzufügen hinzu.
• Einige Themes unterstützen native Highlight-Styles für Navigationspunkte – überprüfe dazu den Theme-Editor > Header.
• Für benutzerdefinierte Farben, fetten Text oder ein Badge brauchst du CSS, das genau diesen Navigationspunkt anspricht.
• Fudge kann jeden Navigations-Link genau nach deinen Vorstellungen stylen, ohne dass du Code schreiben musst.

Um einen Aktions-Link zur Shopify-Navigation hinzuzufügen, fügst du einen Menüpunkt unter Onlineshop > Navigation > Hauptmenü hinzu, verlinkst ihn mit deiner Sale-Kategorie und stylst ihn dann mit den Header-Highlight-Einstellungen deines Themes oder einer kleinen CSS-Anpassung. Ein „Sale“- oder „Neu“-Link in einer Kontrastfarbe wie Rot zieht in der Regel Klicks an.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir haben außerdem Fudge entwickelt, den KI-Operator für Shopify-Shops, 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üpunkt hinzufügen.

Schritt 3. Lege den Namen auf das fest, was in der Navigation angezeigt werden soll – „Sale“, „Neu eingetroffen“, „Angebote“, „Limited Edition“ usw.

Schritt 4. Setze den Link auf das Ziel – typischerweise 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 Menüpunkte. Der nächste Schritt besteht darin, ihn hervorzuheben.

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 Highlight-Option hat, kannst du den Navigationspunkt über CSS ansprechen. Der Selektor hängt davon ab, wie dein Theme die Navigation rendert, aber ein gängiger Ansatz ist das Ansprechen über das href-Attribut des Links:

.header__menu-item[href='/collections/sale'] {
    color: #e00;
    font-weight: 700;
}

Dieser Selektor zielt auf die Header-Menü-Links im Dawn-Theme ab. In anderen Themes solltest du dem Selektor die Klasse für die Header-Navigation deines Themes voranstellen, da ein einfaches a[href='/collections/sale'] auch Footer-Links und Banner-Buttons umgestaltet, die auf dieselbe Kategorie verweisen.

Füge das CSS zur CSS-Datei deines Themes oder in einen <style>-Tag in einem benutzerdefinierten Liquid-Snippet hinzu. Um die CSS-Datei zu öffnen, gehst du zu Onlineshop > Themes, klickst auf das Drei-Punkte-Menü (…) neben deinem Theme, dann auf Code bearbeiten und öffnest die Datei assets/base.css oder ähnlich.

Du kannst dies Fudge, dem KI-Operator für Shopify-Shops, in seinem Store Editor beschreiben: „Mache den Menüpunkt ‘Sale’ in der Hauptnavigation rot.“ Fudge identifiziert den korrekten Selektor für dein spezifisches Theme und entwirft das Styling für dich als Vorschau.

Weitere Änderungen am Menü findest du unter Navigationsmenüs in Shopify bearbeiten.

Ein Badge zu einem Navigationspunkt hinzufügen

Ein kleines 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-Änderung in deinem Header-Template.

Ansätze:

• Verwende ein CSS-::after-Pseudoelement, um das Badge hinzuzufügen, ohne das HTML zu ändern
• Oder füge ein <span>-Element innerhalb des Anchor-Tags des Navigationspunkts mit einer Klasse für das Styling hinzu

Beschreibe es Fudge: „Füge einen kleinen roten ‚NEU‘-Badge zum Menüpunkt ‚Neuheiten‘ in der Hauptnavigation hinzu.“

Saisonale Promo-Links

Viele Shops nutzen Aktions-Links in der Navigation für begrenzte Zeiträume – ein „Black Friday“-Link im November, ein „Summer Sale“-Link im Juli. Eine bewährte Methode ist:

1. Erstelle die Kategorie im Voraus
2. Füge den Navigationspunkt hinzu, wenn der Sale live geht
3. Entferne ihn, nachdem der Sale endet (Onlineshop > Navigation > Menüpunkt löschen > Speichern)

Einige Shops verwenden ein separates „Aktions“-Menü, das während Kampagnenzeiträumen über die Einstellungen im Theme-Editor ein- und ausgeschaltet wird. Bitte deinen Entwickler, dies einmal einzurichten, und für zukünftige Kampagnen musst du nur noch das Menü austauschen.

Um der Kampagne eine eigene Landingpage zu geben, siehe Eine Aktionsseite 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