Schaltflächen im MyCOMMERCE Shop personalisieren

Das Ändern der Farbe oder Schriftart der Schaltflächen (Buttons) in Ihrem MyCOMMERCE Shop erfordert Änderungen an den CSS-Codes.

Tipp: Lesen Sie den folgenden Artikel, bevor Sie damit loslegen: Hinzufügen von CSS-Codes zu Ihrem Shop

In diesem Artikel:

Grössere Schaltflächen - Farben ändern
Kleinere Schaltflächen - Farben ändern
"Jetzt kaufen" Schaltflächen

Grössere Schaltflächen - Farben ändern

Zu den grossen Schaltflächen in Ihrem Shop gehören "Zum Warenkorb hinzufügen", "Fortfahren" , "zur Kasse" , "Bestellung aufgeben". Sie können alle diese Schaltflächen mit einem Code ändern oder einzeln anpassen.

Verwenden Sie den folgenden CSS-Code, um alle grösseren Schaltflächen auf einmal zu aktualisieren. In den Beispielen können Sie "red" und "black" in jede beliebige Farbe ändern.

/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button 
{ background-color: red;}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Kopieren

So ändern Sie die Farben der einzelnen Schaltflächen:

Zum Warenkorb hinzufügen

Ersetzen Sie #FFFFFFFF (weiss) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}
Kopieren

Zur Kasse

Ersetzen Sie #FFFFFFFF (weiss) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
background-color: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}Kopieren

Fortfahren

Ersetzen Sie #FFFFFFFF (weiss) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: #000000;
}Kopieren

Bestellung aufgeben

Ersetzen Sie #FFFFFFFF (weiss) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: #000000;
}Kopieren

Kleinere Schaltflächen - Farben ändern

Sie können auch die kleineren Schaltflächen die sekundären Schaltflächen ändern: "Mehr hinzufügen", "zur Kasse gehen", "Weiter einkaufen auf der Warenkorbseite", "Warenkorb leeren".

Hier ist der Code, um alle Schaltflächen gleichzeitig zu ändern.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}Kopieren

So ändern Sie einzelnen Schaltflächen:

Mehr hinzufügen

Ersetzen Sie #FFA500 (orange) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}Kopieren

Zur Kasse gehen

Ersetzen Sie #FFA500 (orange) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}Kopieren

Weiter einkaufen auf der Warenkorbseite

Ersetzen Sie #FFA500 (orange) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: #000000;
}Kopieren

Warenkorb leeren

Ersetzen Sie #FFA500 (orange) und "#000000" (schwarz) durch die Farbcodes, die in Ihrem Geschäft erscheinen sollen.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
color: #000000;
}Kopieren

Schaltflächen für den Jetzt kaufen

Sie können die Schaltflächen "Jetzt kaufen" in Ihrem MyCOMMERCE Shop ändern. Diese Schaltflächen werden auf den Kategorieseiten angezeigt.

/*Button color*/
.ec-size .ec-store .form-control--small .form-control__button {
background: #FFFAFA;
}

/*Text color*/
.ec-size .ec-store .form-control--small .form-control__button {
color: #000000;
}Kopieren

Tipp: Sie können diese Schaltflächen für Ihren Shop in Ihrem MyCOMMERCE Konto → Einstellungen → Allgemein → Warenkorb & Kasse aktivieren, indem Sie den Schalter für "Jetzt kaufen" anzeigen auf den Produktlistenseiten aktivieren.