You can format the widget using CSS. CSS should be added in Zapiet - Pickup + Delivery > Settings > Developers, under Custom styles.
Use the CSS below depending on which buttons or text you'd like to modify.
Change the hexadecimal values to the colors you need.
Should the CSS not be applied, add !important after the hexadecimal value
e.g. fill: #e6017e !important;
The CSS added should look similar to the screenshot below.
Widget customization
Inactive button icon
#storePickupApp .checkoutMethod .pickupIcon {
fill: #000;
}
#storePickupApp .checkoutMethod .deliveryIcon {
fill: #000;
}
#storePickupApp .checkoutMethod .shippingIcon {
fill: #000;
}
Active button icon
#storePickupApp .checkoutMethod.active .pickupIcon {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .deliveryIcon {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .shippingIcon {
fill: #fff;
}
Active checkout method button background
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
background: #4ba49b !important;
}
Active checkout method text
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
color: #fff;
}
Inactive checkout method text
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod .checkoutMethodName {
color: #4BA49B !important;
}
Search button background
#storePickupApp .checkoutMethodContainer .inputWithButton .button {
background: #4BA49B !important;
}
Search button icon
#storePickupApp .datepickerIcon { fill: #4BA49B; }
Store pickup location background
#storePickupApp .checkoutMethodContainer .locations .location.active{ background: #4BA49B !important;
}
Active store pickup location
#storePickupApp .checkoutMethodContainer .locations .location.active {
color: #4BA49B; }
Inactive store pickup location
#storePickupApp .checkoutMethodContainer .locations {
color: #4BA49B !important;
}
More information link
#storePickupApp .checkoutMethodContainer .locations .location .block .moreInformationLink {
color: #4ba49b;
}
Widget calendar weekday
#storePickupApp .picker__weekday {
color: #4BA49B;
}
Widget calendar month
#storePickupApp .picker__month {
color: #4BA49B;
}
Widget calendar year
#storePickupApp .picker__month {
color: #4BA49B;
}
Available dates
#storePickupApp .picker__day--infocus{
color:#4BA49B !important;
}
Available dates hover
#storePickupApp .picker__day--infocus:hover{
color: #4BA49B; !important;
}
Selected date
#storePickupApp .picker__list-item--highlighted-2{
color: #4BA49B !important;
}
Unavailable dates
#storePickupApp .picker--focused .picker__day--disabled, .picker__day--disabled, .picker__day--disabled:hover {
color:#4BA49B;
}
Search bar background
#storePickupApp .checkoutMethodContainer .inputWithButton input[type=text]{
background:#4BA49B;
}
Delivery validator widget customization
Submit button
.zapiet-delivery-validator__submit {
color: #fff !important;
}
Close button
.zapiet-delivery-validator__close {
fill: #000 !important;
}
Top bar background
#zapiet-delivery-validator__topbar {
background: #AED6D2 !important;
}
Pop-up message background
#zapiet-delivery-validator__modal .zapiet-delivery-validator__modal__container{ border-top-left-radius: 25px !important; border-top-right-radius: 25px !important; border-bottom-right-radius: 25px !important; border-bottom-left-radius: 25px !important; }
Pop-up message button
#zapiet-delivery-validator #zapiet-delivery-validator__modal #zapiet-delivery-validator__modal__primary-action{
color: #000000 !important;
}