> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revoq.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://revoq.crisp.help/de/article/eigene-widerrufs-seite-einbinden-ytzwf1/).

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/0/a/9d0aebb43b89f800/bildschirmfoto-2026-05-22-um-1_iflz33.png)


| 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:

```css
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

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

### Unterstreichung hinzufügen

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

### Als Button-Optik (eingerahmt)

```css
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:

1. Öffne deinen Shop in einem **Inkognito-Fenster** (Browser-Cache umgehen).
2. Scrolle in den Footer.
3. 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:

```css
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

* [Form-Branding an dein Shop-Design anpassen](#)
* [Go-Live Checkliste durchgehen](https://revoq.crisp.help/de/article/go-live-checkliste-bist-du-startklar-fur-den-19-juni-2026-1ep6mbe/)