Farbe Warenkorb bei Theme EXPANSE ändern

[aline5]

Hallo zusammen :),

ich möchte auf meiner Seite culinarico.de die Farbe des Warenkorb Buttons ändern -> in rot/grün also vollflächig. 

Wie kann ich das anpassen? 🙂 Danke & liebe Grüße // Aline

[Gabe]

Hey Aline! @aline5 

Danke für die Frage und bei einer Design Frage hilft es uns immer wenn du ein Mockup oder Wireframe hier mit einfügst, so dass wir die genauen Stellen und Farben Hex Codes haben denn so einfach geht das nicht wenn es nicht im Theme Editor möglich ist. Hast du es über dem Theme Editor versucht -> "Theme-Einstellungen" -> "Farben"?

Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

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

Um die Farbe des Warenkorb-Buttons zu ändern, kann die Methode zur Anpassung des Codes unterschiedlich sein. Grundsätzlich macht man das im CSS Code, die den Stil des Warenkorb-Buttons definiert. Normalerweise befindet sich diese Datei im Ordner "css" oder "styles" im Theme Code. Also gehe zum Theme -> Aktionen -> Duplizieren -> Code bearbeiten -> Assets. 

Um die Farbe des Warenkorb-Buttons in rot/grün zu ändern, kann man einen "generellen" CSS-Code wie den folgenden verwenden:

button.add-to-cart {
    background-color: red; /* Hintergrundfarbe des Buttons auf Rot setzen */
    color: #fff; /* Schriftfarbe auf Weiß setzen */
    border: none; /* Keinen Rahmen um den Button setzen */
    padding: 10px 20px; /* Abstand zwischen Schrift und Rahmen definieren */
}

button.add-to-cart:hover {
    background-color: green; /* Hintergrundfarbe des Buttons auf Grün ändern, wenn der Mauszeiger darüber schwebt */
}

Wenn du eins unserer Shopify Themes hättest dann würde der Code in etwa wie folgt aussehen:

.btn-cart, .add-to-cart-btn {
    background-color: red; /* Hintergrundfarbe des Buttons auf Rot setzen */
    color: #fff; /* Schriftfarbe auf Weiß setzen */
    border: none; /* Keinen Rahmen um den Button setzen */
    padding: 10px 20px; /* Abstand zwischen Schrift und Rahmen definieren */
}

.btn-cart:hover, .add-to-cart-btn:hover {
    background-color: green; /* Hintergrundfarbe des Buttons auf Grün ändern, wenn der Mauszeiger darüber schwebt */
}

Dieser Code definiert das Styling des Buttons mit der Klasse "add-to-cart" und ändert die Hintergrundfarbe, die Schriftfarbe und den Abstand zwischen Schrift und Rahmen. Wenn der Mauszeiger über den Button schwebt, ändert sich die Hintergrundfarbe auf Grün.

Alternativ kan man den Code in den HTML-Code des Shops einfügen, indem man ihn zwischen <style>-Tags einfügt.

Wie gesagt, diese angaben sind ohne Gewähr und dienen lediglich dazu dich in die richtige Richtung zu weisen!