Das Wichtigste in Kürze
- Viele Themes haben eine „Akzentfarbe“ (Accent) oder „Linkfarbe“ im Theme-Editor > Theme-Einstellungen > Farben.
- Wenn dein Theme keine eigene Einstellung für Linkfarben hat, kannst du den
a-Selektor im CSS anpassen.- Hover-Zustände lassen sich mit
a:hoverin CSS separat anpassen.- Fudge kann Linkfarben anhand einer einfachen Textbeschreibung ändern, falls du keine Lust hast, CSS zu schreiben.
Die Linkfarbe gehört zu den Einstellungen, die manche Themes direkt zugänglich machen und andere tief im Code verstecken. Hier erfährst du, wo du suchen musst – und wie du das Ganze anpasst.
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
| Ziel | Methode |
|---|---|
| Alle Linkfarben ändern | Theme-Einstellungen > Farben > Akzent/Link, oder CSS a {} |
| Link-Hover-Farbe ändern | CSS a:hover {} |
| Links nur im Seiteninhalt ändern | CSS .rte a {} |
| Navigationslink-Farbe ändern | Theme-Einstellungen > Farben > Header, oder CSS auf Nav-Selektor |
Wie ändere ich das Bild, das angezeigt wird, wenn ich einen Shopify-Link in sozialen Medien teile?
Das ist eine ganz andere Einstellung als die Linkfarbe – es ist dein Open Graph (OG) Bild. Um das Bild zu ändern, das angezeigt wird, wenn die URL deines Shops auf Facebook, Twitter oder per iMessage geteilt wird, gehe auf Onlineshop → Konfiguration → Bild zum Teilen in sozialen Netzwerken und lade dein bevorzugtes Bild hoch. Einzelne Produkt- und Kategorieseiten verwenden standardmäßig ihr eigenes erstes Bild. Um die OG-Bilder pro Seite anzupassen, bearbeite den SEO-Bereich der jeweiligen Seite. Das hat nichts mit der Linkfarbe in deinem Shop zu tun.
FAQ
Die Akzentfarbe ist eine umfassendere Theme-Farbe, die gleich mehrere Elemente steuert: Links, primäre Button-Hintergründe, Icon-Highlights und Fokus-Zustände. Die Linkfarbe (wenn separat vorhanden) steuert nur die <a>-Tags. Wenn dein Theme beides anbietet, überschreibt die Linkfarbe die Akzentfarbe für Links. Gibt es nur die Akzentfarbe, teilen sich all diese Elemente dieselbe Farbe.
Im Fließtext (Produktbeschreibungen, Blogbeiträge, Seitentexte): Ja. Unterstreichungen sind das universelle „Das ist ein Link“-Signal und wichtig für die Barrierefreiheit (Accessibility). In der Navigation: Nein – hier signalisiert der Kontext (Hover-Status, Position) die Klickbarkeit. Einige moderne Marken nutzen „underline-on-hover“ (Unterstreichen nur beim Drüberfahren) für Fließtext-Links – das funktioniert, beeinträchtigt die Lesbarkeit beim Überfliegen des Textes jedoch leicht.
Nicht direkt. Google rankt nicht anhand von Linkfarben. Aber kontrastarme Linkfarben schaden der Barrierefreiheit (WCAG), was wiederum ein weiches Ranking-Signal ist. Achte darauf, dass Links mindestens ein Kontrastverhältnis von 3:1 zum Hintergrund haben und sich optisch gut vom umliegenden Text abheben – und zwar nicht nur durch die Farbe allein.
In Shopify-Themes, die sich eine „Akzentfarbe“ für Links und Buttons teilen, brauchst du CSS, um beides sauber zu trennen: Sprich nur a:not(.btn):not(.button) für deine Links an. Der einfachere Weg: Beschreibe in Fudge, was du willst („ändere alle Fließtext-Links auf Marineblau, ohne Button-Farben zu ändern“), und das Tool schreibt das exakt passende CSS für dich, ohne dass du nach Selektoren suchen musst. Manche Themes bieten aber auch separate Farbeinstellungen für Buttons – schau also sicherheitshalber zuerst unter Theme-Einstellungen → Farben nach.
Ja, entweder über Abschnitts-Farbschemata (bei modernen Themes) oder CSS-Scoping. Jedes Farbschema kann seine eigene Linkfarbe definieren. Oder du grenzt das CSS ein, z.B. mit .section-blog a { color: ... }, um die Linkfarbe nur in ganz bestimmten Abschnitten zu überschreiben. Das ist besonders praktisch im Blog im Vergleich zu Produktseiten, wo der Kontext ein ganz anderer ist.
Passend dazu: Link zu Text in Shopify hinzufügen.
Passend dazu: Markenfarben in Shopify aktualisieren.