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:hoverin 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
| 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 übergreifendere Theme-Farbe, die mehrere Elemente steuert: Links, Hintergründe von primären Buttons, Hervorhebungen von Icons und Focus-States. Die Linkfarbe (wenn sie als separate Option verfügbar ist) steuert nur <a>-Tags. Wenn dein Theme beides anbietet, überschreibt die Linkfarbe die Akzentfarbe für Links. Wenn nur die Akzentfarbe verfügbar ist, 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 helfen bei der Barrierefreiheit (Accessibility). In der Navigation: nein – der Kontext (Hover-State, Position) signalisiert die Klickbarkeit. Einige moderne Marken setzen bei Links im Fließtext nur auf ein Underline-on-Hover – das funktioniert zwar, beeinträchtigt aber leicht die Lesbarkeit beim Überfliegen.
Nicht direkt. Google rankt nicht basierend auf der Linkfarbe. Aber kontrastarme Linkfarben schaden der Barrierefreiheit (WCAG), was ein sogenannter weicher Ranking-Faktor ist. Stelle sicher, dass Links ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund aufweisen und sich optisch vom umgebenden Fließtext abheben – und das nicht nur durch die Farbe allein.
In Shopify-Themes, die eine gemeinsame „Akzentfarbe“ für Links und Buttons verwenden, brauchst du CSS, um diese zu trennen: Sprich mit a:not(.btn):not(.button) nur die Links an. Der einfachere Weg: Beschreibe Fudge einfach, was du möchtest („Ändere alle Linkfarben im Text zu Navy, ohne die Button-Farben zu verändern“) und das Tool schreibt dir das richtige CSS mit korrektem Scoping, ohne dass du selbst nach Selektoren suchen musst. Einige Themes bieten auch separate Farbeinstellungen für Buttons an – schau am besten direkt unter Theme-Einstellungen → Farben nach.
Ja, über die Farbschemata der Abschnitte (bei modernen Themes) oder über CSS-Scoping. Jedes Farbschema kann seine eigene Linkfarbe definieren. Oder du grenzt das CSS mit z. B. .section-blog a { color: ... } ein, um die Linkfarbe nur in bestimmten Abschnitten zu überschreiben. Das ist besonders praktisch für Blogbeiträge im Vergleich zu Produktseiten, wo der Kontext jeweils ein anderer ist.
Verwandt: Einen Text-Link in Shopify hinzufügen.
Verwandt: Markenfarben in Shopify aktualisieren.