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:

Verwandt: Add a Link to Text in Shopify.

• 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 wird der Inhalt aus dem Seiteneditor und den Produktbeschreibungen in eine Klasse namens .rte (Rich Text Editor) eingeschlossen. Wenn du .rte a als Selektor verwendest, sprichst du gezielt nur die Links in diesen Inhaltsbereichen an, ohne Navigationslinks oder Buttontexte zu beeinflussen.

Verwandt: Farben und Schriftarten in Shopify aktualisieren.

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 CSS nicht selbst schreiben möchtest, übernimmt Fudge das für dich. Beschreibe einfach, was du willst:

„Ändere alle Hyperlink-Farben in #1a4b8c. Beim Darüberfahren (hover) dunkle sie auf #0d2e5e ab.“

„Mache Links in Produktbeschreibungen unterstrichen und blau.“

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

Verwandt: Schriftfarbe in Shopify ändern.

Kurzübersicht

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

Dabei handelt es sich um 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 → Vorschaubild für soziale Netzwerke und lade dein bevorzugtes Bild hoch. Einzelne Produkt- und Kollektionsseiten verwenden standardmäßig ihr jeweils erstes Bild. Um die OG-Bilder pro Seite anzupassen, bearbeite den SEO-Bereich der jeweiligen Seite. Das hat nichts mit der Hyperlink-Farbe in deinem Shop zu tun.

Verwandt: Einen Link zu Text in Shopify hinzufügen.

Verwandt: Markenfarben in Shopify aktualisieren.