So änderst du die Linkfarbe in Shopify (2026)

Das Wichtigste in Kürze

• Viele Themes haben eine Akzentfarbe (“Accent”) oder Link-Farbe im Theme-Editor > Theme-Einstellungen > Farben.
• Wenn dein Theme keine eigene Einstellung für die Link-Farbe hat, sprich den a-Selektor im CSS an.
• Du kannst Link-Hover-Zustände separat mit a:hover im CSS stylen.
• Fudge kann Link-Farben durch eine einfache Textbeschreibung ändern, falls du kein CSS schreiben möchtest.

Um die Link-Farbe in Shopify zu ändern, gehe zu Onlineshop → Themes → Anpassen → Theme-Einstellungen → Farben und bearbeite das Farbfeld für Links oder Akzente. Wenn dein Theme keines hat oder die Akzentfarbe auch deine Buttons färbt, füge a { color: #deinefarbe; } unter Theme-Einstellungen → Eigenes CSS hinzu.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem entwickeln wir Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Sterne-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 Link-Farbe verwenden, wirkt sich die Akzentfarbe normalerweise auf Folgendes aus:

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

Wenn du die Akzentfarbe änderst, ändern sich all diese Elemente auf einmal. Wenn du nur Links – und keine Buttons – ändern möchtest, brauchst du CSS.

Um deine gesamte Markenpalette zu ändern, sieh dir Markenfarben in Shopify aktualisieren an.

Methode 2 – Linkfarbe mit CSS ändern

Wenn dein Theme im Theme-Editor keine eigene Link-Farbe bietet oder du die Link-Farbe getrennt von der Button-Farbe festlegen möchtest, ist CSS der richtige Weg.

Schritt 1. Gehe zu Onlineshop > Themes > Anpassen > Theme-Einstellungen > Eigenes CSS.

Schritt 2. Füge die folgenden Regeln ein und klicke auf Speichern:

/* Default link color */
a {
    color: #1a4b8c;
}

/* Link hover color */
a:hover {
    color: #0d2e5e;
}

/* Links inside a specific area only */
.rte a {
    color: #1a4b8c;
}

Wenn dein Theme keine Einstellung für “Eigenes CSS” hat, bearbeite stattdessen das Stylesheet einer Kopie. Dupliziere dein Theme (das Drei-Punkte-Menü (…) neben deinem Theme, dann Duplizieren). Öffne bei der Kopie das Drei-Punkte-Menü (…), dann Code bearbeiten, öffne Assets > base.css (oder das Haupt-Stylesheet deines Themes – suche nach der größten .css-Datei im Assets-Ordner), füge dieselben Regeln ganz unten hinzu und klicke auf Speichern. Sieh dir die Vorschau der Kopie an und veröffentliche sie anschließend.

Die .rte-Klasse

In vielen Shopify-Themes sind Inhalte aus dem Seiten-Editor und Produktbeschreibungen in eine Klasse namens .rte (Rich-Text-Editor) gewrappt. Die Verwendung von .rte a als Selektor zielt nur auf Links in diesen Inhaltsbereichen ab, ohne Navigationslinks oder Button-Texte zu beeinflussen.

Für theme-weite Farben und Schriftarten, sieh dir Farben und Schriftarten in Shopify aktualisieren an.

Link-Unterstreichungen stylen

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

/* Remove underlines from all links */
a {
    text-decoration: none;
}

/* Add underlines only on hover */
a:hover {
    text-decoration: underline;
}

/* Underline only links in body content */
.rte a {
    text-decoration: underline;
}

Um überhaupt neue Links hinzuzufügen, sieh dir Einen Link zu Text in Shopify hinzufügen an.

Navigationslink-Farbe ändern

Navigationslinks werden in den meisten Themes unabhängig von den Links im Fließtext formatiert.

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

Wenn es das nicht gibt, ziele mit CSS auf die Navigationslinks ab. Klicke in deinem Browser mit der rechten Maustaste auf einen Navigationslink, 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 nicht gerne CSS schreibst, ist der Store-Editor von Fudge genau das Richtige. Beschreibe einfach, was du möchtest:

“Ändere alle Hyperlink-Farben in #1a4b8c. Beim Hover auf #0d2e5e abdunkeln.”

“Mache Links in Produktbeschreibungen unterstrichen und blau.”

Fudge schreibt das CSS und wendet es als Entwurf an. Du überprüfst das Ergebnis, bevor es live geht, und wenn die neue Farbe nicht passt, kannst du die Änderung mit einem Klick rückgängig machen.

Für Textfarben jenseits von Links, sieh dir Schriftfarbe in Shopify ändern an.

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 Link-Farbe: Es geht um dein Open Graph (OG) Bild. Um das Bild zu ändern, das angezeigt wird, wenn deine Shop-URL auf Facebook, Twitter oder iMessage geteilt wird, gehe zu Onlineshop → Konfigurationen → Bild für das Teilen in sozialen Netzwerken und lade dein gewünschtes Bild hoch. Einzelne Produkt- und Kategorie-Seiten (Collections) verwenden standardmäßig ihr hervorgehobenes Bild. Der Bereich für die Suchmaschinen-Vorschau in Shopify hat kein Bild-Feld, daher erfordert ein benutzerdefiniertes OG-Bild für eine einzelne Seite ein Metafeld sowie eine Theme-Anpassung. Dies hat nichts mit der Hyperlink-Farbe in deinem Store zu tun.

FAQ