Farbe der "Checkout-Schaltfläche" ändern?

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ein Nutzer möchte die Farbe der Checkout-Schaltfläche im Shopify Theme “Refresh Version 12.0” ändern, da diese aktuell weiß bzw. ausgegraut erscheint. Die Beschriftung konnte bereits auf “Kasse” geändert werden, aber die Farbanpassung ist noch nicht gelungen.

Vorgeschlagene Lösung via CSS:

  • Rechtsklick auf den Button → “Untersuchen” wählen
  • HTML-Klasse des Elements identifizieren
  • Im Shopify Dashboard unter “Code bearbeiten” die CSS-Datei (meist “theme.css”) öffnen
  • Folgenden Code am Ende einfügen:
.deineButtonKlasse {
  background-color: #gewünschte-farbe;
}

Die Diskussion bleibt offen, da noch keine Rückmeldung zur Umsetzung erfolgte. Es wird empfohlen, zunächst die Theme-Einstellungen zu prüfen, bevor CSS-Anpassungen vorgenommen werden.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hallo zusammen,

ich würde gerne in meinem Theme Refresh Version 12.0 die Farbe der " Checkout-Schaltfläche" in meinem Warenkorb ändern. Diese ist nämlich leider gerade weiß bzw. sieht fast schon wie ausgegraut aus.

Konnte die Betitelung schon auf “Kasse” abändern aber die Farbe hat leider noch nicht geklappt. Kann mir hierbei eventuell jemand weiterhelfen?

Vielen Dank im Voraus. :slightly_smiling_face:

LG Jonas

JonasSonntag199_1-1704346695912.png
JonasSonntag199_1-1704346695912.png578×293 36.1 KB

2

Hi Jonas,

Vielleicht gibt es in deinem Theme eine Einstellung dafür, wahrscheinlich hast du danach aber schon gesucht. Was immer geht, ist CSS.

Dafür machst du Folgendes:

  1. Rechtklick auf den Button und “Untersuchen” auswählen
  2. Finde die Klasse des HTML Elements heraus (Hier wäre eine Anleitung dafür)
  3. Gehe im Shopify Dashboard bei deinem Theme auf “Code bearbeiten” und finde die CSS Datei (heißt meisten etwas wie ‘theme.css’)
  4. Füge folgenden Code ganz am Ende der Datei ein
/* Je nach herausgefundener Klasse den Namen ändern*/

.deineButtonKlasse {
  background-color: #aeaeae; /* Hier gewünschte Farbe angeben */
}
1 Like