Sie können das Widget mit CSS formatieren. CSS sollte in Zapiet – Abholung + Zustellung > Einstellungen > Entwickler, unter benutzerdefinierten Stile hinzugefügt werden.
Verwenden Sie das folgende CSS, je nachdem, welche Schaltflächen oder Texte Sie ändern möchten.
Ändern Sie die Hexadezimalwerte in die von Ihnen benötigten Farben.
Sollte das CSS nicht angewendet werden, fügen Sie !important nach dem Hexadezimalwert hinzu
z.B. fill: #e6017e !important;
Das hinzugefügte CSS sollte dem folgenden Screenshot ähneln.
Widget-Anpassung
Diese sind Codebeispiele, die Elemente veranschaulichen, die Sie entsprechend Ihren Themeneinstellungen mit CSS anpassen können.
Seitenbreiten-Widget
Diese CSS-Regel beeinflusst die Breite des Widgets auf der Warenkorb-Seite.
@media screen and (min-width: 768px) {
#storePickupApp {
margin-left: 0.1em !important;
max-width: 100% !important;
}
}
Symbol für inaktive Schaltfläche
Diese CSS-Regel ändert das Aussehen der Symbole für die Lieferoptionen, wenn sie im Widget nicht ausgewählt sind.
#storePickupApp .checkoutMethod .pickupIcon {
fill: #000;
}
#storePickupApp .checkoutMethod .deliveryIcon {
fill: #000;
}
#storePickupApp .checkoutMethod .shippingIcon {
fill: #000;
}
Aktives Schaltflächensymbol
Diese CSS-Regel ändert das Aussehen der Symbole für die Lieferoptionen, wenn sie im Widget ausgewählt werden.
#storePickupApp .checkoutMethod.active .pickupIcon svg {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .deliveryIcon svg {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .shippingIcon svg {
fill: #fff;
}
Hintergrund der aktiven Lieferoptionsschaltfläche
Diese CSS-Regel ändert den Hintergrund der Schaltfläche für die ausgewählte Lieferoption im Widget.
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
background: #4ba49b !important;
}
Text der aktiven Lieferoption
Diese CSS-Regel ändert das Aussehen des Textes der Schaltfläche für die ausgewählte Lieferoption im Widget.
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
color: #fff;
}
Text der inaktiven Lieferoption
Diese CSS-Regel ändert das Aussehen des Textes der Schaltflächen für nicht ausgewählte Lieferoptionen im Widget.
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod .checkoutMethodName {
color: #4BA49B !important;
}
Hintergrund der Suchschaltfläche
Diese CSS-Regel ändert den Hintergrund der Suchschaltfläche im Widget.
#storePickupApp .checkoutMethodContainer .inputWithButton .button {
background: #4BA49B !important;
}
Symbol für die Datumsauswahl
Diese CSS-Regel ändert das Aussehen des Kalendersymbols für die Datumsauswahl im Widget.
#storePickupApp .datepickerIcon {
fill: #4BA49B;
}
Hintergrund des aktiven Abholorts
Diese CSS-Regel ändert den Hintergrund des ausgewählten Abholorts im Widget.
#storePickupApp .checkoutMethodContainer .locations .location.active {
background: #4BA49B !important;
}
Text des aktiven Abholorts
Diese CSS-Regel ändert den Text des ausgewählten Abholorts im Widget.
#storePickupApp .checkoutMethodContainer .locations .location.active {
color: #4BA49B !important;
}
Text des inaktiven Abholorts
Diese CSS-Regel ändert den Text des nicht ausgewählten Abholorts im Widget.
#storePickupApp .checkoutMethodContainer .locations {
color: #4BA49B !important;
}
Link für weitere Informationen
Diese CSS-Regel ändert den Text des Links „Weitere Informationen“ im Widget.
#storePickupApp .checkoutMethodContainer .locations .location .block .moreInformationLink {
color: #4ba49b !important;
} 
Wochentag im Widget-Kalender
Diese CSS-Regel ändert das Aussehen der Wochentage im Kalender-Widget.
#storePickupApp .picker__weekday {
color: #4BA49B !important;
}
Monat im Widget-Kalender
Diese CSS-Regel ändert das Aussehen der Monate im Kalender-Widget.
#storePickupApp .picker__month {
color: #4BA49B !important;
}
Jahr im Widget-Kalender
Diese CSS-Regel ändert das Aussehen der Jahreszahlen im Kalender-Widget.
#storePickupApp .picker__month {
color: #4BA49B !important;
}
Verfügbare Termine
Diese CSS-Regel ändert das Aussehen der verfügbaren Daten im Kalender-Widget.
#storePickupApp .picker__day--infocus{
color: #4BA49B !important;
}
Verfügbare Termine beim Maus-Bewegen
Diese CSS-Regel ändert den Effekt beim Bewegen ihres Mauszeigers über verfügbare Termine im Kalender-Widget.
#storePickupApp .picker__day--infocus:hover{
color: #4BA49B !important;
}
Ausgewähltes Datum
Diese CSS-Regel ändert das ausgewählte Datum im Kalender-Widget.
#storePickupApp .picker__list-item--highlighted-2 {
color: #4BA49B !important;
}
Nicht verfügbare Termine
Diese CSS-Regel ändert das Aussehen der nicht verfügbaren Daten im Kalender-Widget.
#storePickupApp .picker--focused .picker__day--disabled, .picker__day--disabled, .picker__day--disabled:hover {
color: #4BA49B !important;
}
Hintergrund der Suchleiste
Diese CSS-Regel ändert den Hintergrund der Suchleiste innerhalb des Widgets.
#storePickupApp .checkoutMethodContainer .inputWithButton input[type=text]{
background: #4BA49B !important;
}
Suchleistentext für Abholung im Geschäft
Diese CSS-Regel passt den Platzhaltertext in der Suchleiste für Abholung innerhalb des Widgets an.
#pickupGeoSearchField::placeholder {
color: #4BA49B !important;
}
Suchleistentext für lokale Zustellung
Diese CSS-Regel passt den Platzhaltertext in der Suchleiste für lokale Zustellung innerhalb des Widgets an.
#deliveryGeoSearchField::placeholder {
color: #4BA49B !important;
}
Datumsauswahltext
Diese CSS-Regel passt den Platzhaltertext in der Datumsauswahlleiste innerhalb des Widgets an.
#storePickupApp .pickadate::placeholder {
color: #4BA49B !important;
}
Anpassung des Zustellungsüberprüfungs-Widgets
Nachfolgend finden Sie Beispielcodes, die die Elemente unseres Zustellungsüberprüfungs-Widgets veranschaulichen, die Sie mit CSS an Ihre Themeneinstellungen anpassen können.
Schaltfläche „Suche“
Diese CSS-Regel passt die Schaltfläche „Suche“ im Zustellungsüberprüfungs-Widget an.
.zapiet-delivery-validator__submit {
color: #fff !important;
}
Schaltfläche zum Schließen
Diese CSS-Regel passt die Schaltfläche zum Schließen im Zustellungsüberprüfungs-Widget an.
.zapiet-delivery-validator__close {
fill: #000 !important;
}
Hintergrund der oberen Leiste
Diese CSS-Regel ändert den Hintergrund der oberen Leiste im Zustellungsüberprüfungs-Widget.
#zapiet-delivery-validator__topbar {
background: #AED6D2 !important;
} 
Hintergrund der Popup-Nachricht
Diese CSS-Regel ändert den Hintergrund der Popup-Meldung, die erscheint, wenn eine Zustelladresse im Zustellungsüberprüfungs-Widget validiert wird.
#zapiet-delivery-validator__modal .zapiet-delivery-validator__modal__container {
background: #AED6D2 !important;
}
Popup-Nachrichtenschaltfläche
Diese CSS-Regel ändert die Schaltfläche in der Popup-Meldung, die erscheint, wenn die Zustelladresse im Zustellungsüberprüfungs-Widget validiert wird.
#zapiet-delivery-validator #zapiet-delivery-validator__modal #zapiet-delivery-validator__modal__primary-action {
color: #000000 !important;
}