Artikel über: Anpassung & Design

Footer-Link zur Widerrufs-Seite optisch hervorheben

Der Link zur Widerrufs-Seite muss sich laut EU-Direktive 2023/2673 dauerhaft und gut auffindbar im Shop befinden. Optisch hervorheben kannst du den Link über Shopifys Menü-Einstellungen nicht – dafür brauchst du ein paar Zeilen Custom CSS. Das ist optional, aber empfehlenswert.

Im Shopify-Footer-Menü sehen alle Links standardmäßig gleich aus: gleiche Schriftfarbe, gleiche Schriftstärke. Damit geht dein Widerrufs-Link in der Linkliste neben Impressum, AGB und Datenschutz unter. Mit ein paar Zeilen CSS gibst du ihm eine andere Farbe und/oder mehr Gewicht.

Voraussetzung

Du hast die Widerrufs-Seite bereits in deinem Footer-Menü verlinkt. Falls noch nicht: Eigene Widerrufs-Seite einbinden.

Wichtig zu wissen: Du brauchst die URL-Endung deiner Widerrufs-Seite. Wenn deine Seite unter deinshop.de/pages/widerrufsformular erreichbar ist, lautet die Endung widerrufsformular. Diese Endung kommt gleich in den CSS-Code.

Schritt 1 · Custom CSS im Theme-Editor öffnen

Gehe in deinem Shopify-Admin zu Online Store → Themes → Anpassen.
Klicke oben links auf das Zahnrad-Icon (Theme Einstellungen).
Scrolle in der Seitenleiste ganz nach unten zu Custom CSS.

Hinweis: Der Bereich heißt bei manchen Themes "Custom CSS", bei anderen "Additional CSS" oder ist unter "App embeds" zu finden. Falls du keinen "Custom CSS"-Bereich siehst, prüfe ob dein Theme diese Funktion überhaupt unterstützt. Vintage Themes haben in der Regel keinen Custom-CSS-Bereich.

Schritt 2 · CSS-Code einfügen

Kopiere den folgenden Code und füge ihn in das Custom-CSS-Feld ein:

a[href*="widerrufsformular"],
a[href*="widerrufsformular"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
}

Wichtig: Ersetze in beiden Zeilen das Wort widerrufsformular durch die URL-Endung deiner eigenen Widerrufs-Seite. Beispiele:

Deine Seite ist deinshop.de/pages/widerruf-einreichen → widerruf-einreichen
Deine Seite ist deinshop.de/pages/bestellung-widerrufen → bestellung-widerrufen

Klicke oben rechts auf Save, damit die Änderungen aktiv werden.

Schritt 3 · Eigene Farbe wählen

Im Code oben ist die Farbe #e51c23 (kräftiges Rot) als Beispiel hinterlegt. Du kannst sie an dein Shop-Design anpassen:

Akzentfarbe deines Shops – wirkt integriert
Kontrastfarbe wie Rot, Orange oder Lila – fällt sofort auf
Schwarz (#000000) in Kombination mit font-weight: bold – dezent, aber spürbar

Du brauchst den Farbcode im HEX-Format (z. B. #e51c23). Wenn du dir unsicher bist, welche Farbe du nimmst: Schau in deine Shop-Designs (z. B. die Button-Farbe deiner Produktseiten) – dort findest du oft passende Töne.

Tipp: Vermeide Grau- oder Pastelltöne. Der Sinn der Hervorhebung ist, dass der Link gut sichtbar ist und sofort auffällt.

Weitere Anpassungs-Möglichkeiten

Wenn du mehr als nur Farbe und Schriftstärke ändern willst, hier ein paar weitere Optionen:

Schriftgröße erhöhen

a[href*="widerrufsformular"],
a[href*="widerrufsformular"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
  font-size: 1.1em;
}

Unterstreichung hinzufügen

a[href*="widerrufsformular"],
a[href*="widerrufsformular"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
  text-decoration: underline;
}

Als Button-Optik (eingerahmt)

a[href*="widerrufsformular"],
a[href*="widerrufsformular"]:hover {
  color: #ffffff !important;
  background-color: #e51c23;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
}

Schritt 4 · Ergebnis prüfen

Nach dem Speichern:

Öffne deinen Shop in einem Inkognito-Fenster (Browser-Cache umgehen).
Scrolle in den Footer.
Der Widerrufs-Link sollte sich jetzt deutlich von den anderen Links abheben.

Sieht etwas nicht wie erwartet aus? Dann gehe die Häufigen Probleme unten durch.

Häufige Probleme

Der Link sieht aus wie vorher

Browser-Cache leeren oder im Inkognito-Modus prüfen
Prüfe, ob du im Code die richtige URL-Endung verwendet hast (Tippfehler in widerrufsformular sind häufig)
Hast du oben rechts im Theme-Editor auf Save geklickt?

Mehrere Links werden hervorgehoben

Der Selektor a[href*="..."] reagiert auf alle Links, die das angegebene Wort in der URL enthalten. Wenn du z. B. widerruf als Endung verwendest, wird auch ein Link zu widerrufsbelehrung mit hervorgehoben.

Lösung: Verwende eine eindeutigere URL-Endung in deiner Widerrufs-Seite (z. B. widerrufsformular statt nur widerruf).

Der Code beeinflusst andere Bereiche meines Shops

Wenn du auf anderen Seiten ebenfalls Links zur Widerrufs-Seite hast (z. B. in der Widerrufsbelehrung), werden diese ebenfalls hervorgehoben – das ist normal und meistens auch gewünscht.

Wenn du das nur im Footer willst, kannst du den Selektor präziser machen:

footer a[href*="widerrufsformular"],
footer a[href*="widerrufsformular"]:hover {
  color: #e51c23 !important;
  font-weight: bold;
}

Funktioniert in den meisten Themes, kann aber je nach Theme-Struktur variieren.

Nächste Schritte

Aktualisiert am: 22/05/2026

War dieser Beitrag hilfreich?

Danke!