So änderst du die Linkfarbe in Shopify (2026)

Das Wichtigste auf einen Blick

• Viele Themes haben eine „Akzent“- oder „Link“-Farbe unter Theme-Einstellungen > Farben.
• Wenn dein Theme keine eigene Einstellung für die Linkfarbe hat, nutze den a-Selektor in CSS.
• Hover-Zustände von Links kannst du separat mit a:hover in CSS stylen.
• Fudge kann Änderungen der Linkfarbe anhand einer einfachen Beschreibung auf Englisch vornehmen, falls du kein CSS schreiben möchtest.

Die Linkfarbe ist eine dieser Einstellungen, die manche Themes direkt anbieten und andere im Code verstecken. Hier erfährst du, wo du suchen musst und wie du es so oder so löst.

Warum du uns vertrauen kannst

Wir haben hunderte Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-basierten Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.

Methode 1 – Zuerst Theme-Einstellungen > Farben prüfen

Viele moderne Shopify-Themes enthalten eine eigene Farbeinstellung für Links.

Schritt 1. Gehe zu Onlineshop > Themes > Customizer.

Schritt 2. Klicke in der linken Seitenleiste auf Theme-Einstellungen.

Schritt 3. Öffne den Bereich Farben.

Schritt 4. Suche nach einem Farbfeld mit der Beschriftung Link, Akzent oder Primärer Akzent. Wenn es vorhanden ist, klicke darauf, um die Farbe zu ändern.

Schritt 5. Klicke auf Speichern.

Was die „Akzent“-Farbe normalerweise steuert

In Themes, die eher eine Akzentfarbe als eine spezifische Linkfarbe verwenden, wirkt sich die Akzentfarbe normalerweise auf Folgendes aus:

• Hyperlink-Text
• Button-Hintergründe (primäre Buttons)
• Icon-Highlights
• Aktive Navigationspunkte

Das Ändern der Akzentfarbe ändert all diese Elemente gleichzeitig. Wenn du nur die Links ändern willst – nicht aber die Buttons –, benötigst du CSS.

Methode 2 – Linkfarbe mit CSS ändern

Wenn dein Theme im Theme-Editor keine eigene Linkfarbe hat oder wenn du die Linkfarbe getrennt von der Buttonfarbe festlegen möchtest, ist CSS der richtige Weg.

Schritt 1. Dupliziere dein Theme. Gehe zu Onlineshop > Themes > Aktionen > Duplizieren.

Sch Schritt 2. Gehe bei deinem aktiven Theme auf Aktionen > Code bearbeiten.

Schritt 3. Öffne Assets > base.css (oder das Haupt-Stylesheet deines Themes – suche nach der größten .css-Datei im Assets-Ordner).

Schritt 4. Füge am Ende der Datei CSS-Regeln hinzu:

/* Standard-Linkfarbe */
a { color: #1a4b8c; }

/* Link-Farbe beim Hovern */
a:hover { color: #0d2e5e; }

/* Nur Links in einem bestimmten Bereich */
.rte a { color: #1a4b8c; }

Schritt 5. Klicke auf Speichern.

Die .rte-Klasse

In vielen Shopify-Themes werden Inhalte aus dem Seiteneditor und Produktbeschreibungen in eine Klasse namens .rte (Rich Text Editor) gehüllt. Die Verwendung von .rte a als Selektor spricht nur Links in diesen Inhaltsbereichen an, ohne Navigationslinks oder Button-Texte zu beeinflussen.

Link-Unterstreichungen stylen

Standardmäßig sind Links in den meisten Themes entweder immer unterstrichen oder gar nicht. Du kannst dies mit CSS steuern:

/* Unterstreichungen bei allen Links entfernen */
a { text-decoration: none; }

/* Unterstreichungen nur beim Hovern hinzufügen */
a:hover { text-decoration: underline; }

/* Nur Links im Hauptinhalt unterstreichen */
.rte a { text-decoration: underline; }

Navigationslink-Farbe ändern

Navigationslinks werden in den meisten Themes separat von den Textlinks im Body gestylt.

Prüfe im Theme-Editor unter Theme-Einstellungen > Farben, ob es eine Option für Navigation oder Header gibt.

Falls nicht, sprich die Navigationslinks per CSS an. Klicke mit der rechten Maustaste auf einen Navigationslink im Browser, wähle „Untersuchen“ und notiere dir die CSS-Klassennamen. Füge dann eine Regel wie diese hinzu:

.header__menu-item a { color: #333333; }

Der genaue Klassenname variiert je nach Theme.

Fudge für Änderungen der Linkfarbe nutzen

Wenn du lieber kein CSS schreiben möchtest, erledigt Fudge das für dich. Beschreibe einfach, was du willst:

„Ändere alle Hyperlink-Farben in #1a4b8c. Beim Hovern in #0d2e5e abdunkeln.“

„Mache Links in Produktbeschreibungen unterstrichen und blau.“

Fudge schreibt das CSS und wendet es als Entwurf an. Du prüfst es, bevor es live geht.

Kurzübersicht

Wie ändere ich das Bild, das angezeigt wird, wenn ich einen Shopify-Link in sozialen Medien teile?

Das ist eine andere Einstellung als die Linkfarbe – es ist dein Open Graph (OG) Bild. Um das Bild zu ändern, das erscheint, wenn deine Store-URL auf Facebook, Twitter oder iMessage geteilt wird, gehe zu Onlineshop → Konfiguration → Bild für Social Sharing und lade dein gewünschtes Bild hoch. Einzelne Produkt- und Kategorieseiten verwenden standardmäßig ihr jeweils erstes Bild. Um OG-Bilder pro Seite anzupassen, bearbeite den SEO-Bereich der jeweiligen Seite. Dies hat nichts mit der Hyperlink-Farbe in deinem Store zu tun.