Hintergrundfarbe einer Verlinkung ändern

[Dagmar-Lioba]

Hey ihr Lieben,

auf meiner Hilfe-Seite 'Retouren' habe ich sowas wie das hier im Text stehen: Bitte druckt den Retourenschein aus und legt ihn zusammen mit blablabla ins Paket. Das Wort Retourenschein hab ich verlinkt. Doch leider sieht man das nicht, da die Verlinkung die gleiche Farbe hat wie der Hintergrund: Grau. Der Kunde sieht die Verlinkung also nicht, ergo kriege ich ständig mails mit: Hatte keinen Retourenschein im Paket liegen usw. In den Theme-Einstellungen unter "Farbe" hab ich nicht gefunden, wo man die Farbe von Verlinkungen verändern kann. Weiß das einer von euch zufällig? Wahrscheinlich ist es ganz easy, aber ich steh auf dem Schlauch.

Danke im Voraus!
Dagmar

[Ben310]

Schwer zu sagen ohne ein konkretes beispiel. Hast du eins für uns?

[Dagmar-Lioba]

Also, auf meiner Retouren-Seite, auf der beschrieben ist, was man machen muss, wenn man was zurückschicken will, ist bei dem Wortlaut 'füllt den Retourenschein aus' unter dem Wort Retourenschein ein dünner Strich, den man aber in der Mobil-Ansicht fast nicht wahrnimmt. Ich hätte jetzt gerne, dass das Wort Retourenschein nicht nur sanft unterstrichen ist, sondern in einer komplett anderen Hintergrundfarbe (wie bei einem Button), damit die Leute checken, dass man da draufklicken muss, um zum Retourenschein zu gelangen.
Ich hätte euch gern einen Screenshot angehängt, aber warum auch immer, geht nur Dateityp csv und mp4. 

[Gabe · Accepted solution]

Hey @Dagmar-Lioba 

Du kannst jederzeit einen Screenshot hier reinhängen über dem folgenden Button, oder bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren:

Um die Farbe von Verlinkungen in deinem Shopify-Shop zu ändern, musst du normalerweise ein wenig im Code deines Themes herumwerkeln. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Am besten die Datei finden, die für die Styles deiner Seite zuständig ist. Dies ist oft eine Datei namens base.css oder style.scss.liquid im Verzeichnis "Assets".

In dieser CSS-Datei suchst du nach Einträgen, die a, a:link, a:visited oder a:hover heißen könnten. Das sind die CSS-Selektoren für Links.

Ändere die Farbwerte bei diesen Selektoren zu einer Farbe, die du bevorzugst. Wenn du willst, dass der Link wie ein Button aussieht, kannst du etwas in der Art hinzufügen:

a.retourenschein-button {
  background-color: #DEINE_FARBE; /* Ersetze #DEINE_FARBE mit dem Hex-Code deiner gewünschten Farbe */
  color: #FFFFFF; /* Das ist die Textfarbe, weiß ist meistens gut lesbar auf bunten Buttons */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  margin: 5px 0; /* Ein wenig Abstand oben und unten */
}

Dann gehst du zu der HTML-Datei, die für deine Retourenseite zuständig ist. Dies könnte eine spezielle page.return.liquid oder ähnlich benannte Datei im Verzeichnis "Templates" sein.

Finde das <a>-Tag, das deinen Retourenschein-Link umgibt, und füge die Klasse retourenschein-button hinzu, wie hier:

<a href="DEIN_LINK_ZUM_RETURENSCHEIN" class="retourenschein-button">Retourenschein</a>

Falls du dich nicht wohl dabei fühlst, Code-Änderungen vorzunehmen, oder falls du keine Zeit hast, diese Änderungen zu machen, könnte es sinnvoll sein, wie gesagt, einen Shopify-Experten oder einen Entwickler zu konsultieren, der sich damit auskennt.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Dagmar-Lioba]

Danke Gabe, vielen Dank für die ausführliche Beschreibung, das war sehr hilfreich! Hatte zwar gehofft, dass es eine einfachere Lösung gibt... aber nicht schlimm, ich werde darüber nachdenken, mir dafür einen Experten zu holen. Danke!

[Gabe]

Geren und halte uns auf dem laufenden wie das geht! 😉