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;
}

Verwandte Artikel

Den Wortlaut im Widget ändern

Das Warenkorb-Widget in Ihrem Theme aktivieren

Zustellungsüberprüfungs-Widget

Zustellungsüberprüfung: Erweiterter Postleitzahlenabgleich

Checkout-Widget