Das Wichtigste in Kürze
- Viele Themes haben eine „Accent“- oder „Link“-Farbe unter Theme-Editor > Theme-Einstellungen > Farben.
- Wenn dein Theme keine eigene Einstellung für die Linkfarbe hat, kannst du den
a-Selektor im CSS ansprechen.- Den Hover-Status von Links kannst du mit
a:hoverin CSS separat stylen.- Fudge kann Linkfarben anhand einer einfachen Textbeschreibung anpassen, falls du lieber kein CSS schreiben möchtest.
Die Linkfarbe ist eine dieser Einstellungen, die bei manchen Themes direkt griffbereit ist und bei anderen tief im Code versteckt liegt. Hier erfährst du, wo du suchen musst und wie du sie in jedem Fall ändern kannst.
Warum du uns vertrauen kannst
Wir haben bereits hunderte Shopify-Storefronts aufgebaut und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 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 dedizierte Link-Farbe hat oder du die Link-Farbe unabhängig von der Button-Farbe festlegen möchtest, ist CSS die beste Wahl.
Schritt 1. Dupliziere dein Theme. Gehe zu Onlineshop > Themes > Aktionen > Duplizieren.
Schritt 2. Gehe in deinem aktiven Theme zu 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 unten in der Datei CSS-Regeln hinzu:
/* Standard-Link-Farbe */
a {
color: #1a4b8c;
}
/* Link-Hover-Farbe */
a:hover {
color: #0d2e5e;
}
/* Links nur innerhalb eines bestimmten Bereichs */
.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 oder nie unterstrichen. Du kannst dies mit CSS steuern:
/* Unterstreichungen von allen Links entfernen */
a {
text-decoration: none;
}
/* Unterstreichungen nur beim Hovern hinzufügen */
a:hover {
text-decoration: underline;
}
/* Nur Links im Fließtext unterstreichen */
.rte a {
text-decoration: underline;
}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 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 Link-Farben ändern | Theme-Einstellungen > Farben > Akzent/Link, oder CSS a {} |
| Link-Hover-Farbe ändern | CSS a:hover {} |
| Nur Links im Seiteninhalt ändern | CSS .rte a {} |
| Navigationslink-Farbe ändern | Theme-Einstellungen > Farben > Header, oder CSS für 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 (Accent color) ist eine allgemeinere Theme-Farbe, die mehrere Elemente steuert: Links, Hintergründe von primären Buttons, Icon-Highlights, Focus-States. Die Link-Farbe (falls separat verfügbar) steuert nur <a>-Tags. Wenn dein Theme beides bietet, überschreibt die Link-Farbe 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 Underline-on-Hover – das funktioniert, beeinträchtigt aber leicht die Lesbarkeit beim Überfliegen.
Nicht direkt. Google rankt nicht basierend auf der Link-Farbe. Aber kontrastarme Link-Farben schaden der Barrierefreiheit (WCAG), was ein weiches Ranking-Signal ist. Stelle sicher, dass Links einen Kontrast von mindestens 3:1 zum Hintergrund haben und sich optisch vom umgebenden Fließtext abheben – nicht nur durch die Farbe allein.
In Shopify-Themes, die eine "Akzentfarbe" für Links und Buttons teilen, brauchst du CSS, um diese zu trennen: Nutze a:not(.btn):not(.button) nur für Links. Der einfachere Weg: Beschreibe Fudge was du möchtest ("ändere alle Link-Farben im Fließtext zu Marineblau, ohne die Button-Farben zu beeinflussen") und es schreibt das richtige, eingegrenzte CSS für dich, ohne dass du nach Selektoren suchen musst. Einige Themes bieten auch separate Farbeinstellungen für Buttons – prüfe zuerst Theme-Einstellungen → Farben.
Ja, über Abschnitts-Farbschemata (Section Color Schemes in modernen Themes) oder CSS-Scoping. Jedes Farbschema kann seine eigene Link-Farbe definieren. Oder du grenzt CSS wie .section-blog a { color: ... } ein, um die Link-Farbe nur in bestimmten Abschnitten zu überschreiben. Sehr nützlich für Blogbeiträge im Vergleich zu Produktseiten, wo der Kontext unterschiedlich ist.
Verwandt: Einen Link zu Text in Shopify hinzufügen.
Verwandt: Markenfarben in Shopify aktualisieren.