You can format the widget using CSS. CSS needs to be added in 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
Below are examples of code that demonstrate the elements you can modify with CSS to match your theme settings.
Page-width widget
This CSS rule will affect the width of the widget on the cart page.
@media screen and (min-width: 768px) {
#storePickupApp {
margin-left: 0.1em !important;
max-width: 100% !important;
}
}
Inactive button icon
This CSS rule modifies the appearance of the delivery option icons when they are unselected in the widget.
#storePickupApp .checkoutMethod .pickupIcon {
fill: #000 !important;
}
#storePickupApp .checkoutMethod .deliveryIcon {
fill: #000 !important;
}
#storePickupApp .checkoutMethod .shippingIcon {
fill: #000 !important;
}
Active button icon
This CSS rule modifies the appearance of the delivery option icons when they are selected in the widget.
#storePickupApp .checkoutMethod.active .pickupIcon svg {
fill: #fff !important;
}
#storePickupApp .checkoutMethod.active .deliveryIcon svg {
fill: #fff !important;
}
#storePickupApp .checkoutMethod.active .shippingIcon svg {
fill: #fff !important;
}
Active delivery option button background
This CSS rule modifies the background of the selected delivery option button in the widget.
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
background: #4ba49b !important;
}
Active delivery option text
This CSS rule modifies the appearance of the selected delivery option button text in the widget.
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
color: #fff !important;
}
Inactive delivery option text
This CSS rule modifies the appearance of the unselected delivery option buttons text in the widget.
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod .checkoutMethodName {
color: #4BA49B !important;
}
Search button background
This CSS rule modifies the background of the search button in the widget.
#storePickupApp .checkoutMethodContainer .inputWithButton .button {
background: #4BA49B !important;
}
Date picker icon
This CSS rule modifies the appearance of the date picker calendar icon in the widget.
#storePickupApp .datepickerIcon {
fill: #4BA49B !important;
}
Active pickup location background
This CSS rule modifies the background of the selected pickup location in the widget.
#storePickupApp .checkoutMethodContainer .locations .location.active { background: #4BA49B !important;
}
Active pickup location text
This CSS rule modifies the text of the selected pickup location in the widget.
#storePickupApp .checkoutMethodContainer .locations .location.active {
color: #4BA49B !important;
}
Inactive pickup location text
This CSS rule modifies the text of the unselected pickup location in the widget.
#storePickupApp .checkoutMethodContainer .locations {
color: #4BA49B !important;
}
More information link text
This CSS rule modifies the text of the "More information" link in the widget.
#storePickupApp .checkoutMethodContainer .locations .location .block .moreInformationLink {
color: #4ba49b !important;
} 
Widget calendar weekday
This CSS rule modifies the appearance of weekdays in the calendar widget.
#storePickupApp .picker__weekday {
color: #4BA49B !important;
}
Widget calendar month
This CSS rule modifies the appearance of months in the calendar widget.
#storePickupApp .picker__month {
color: #4BA49B !important;
}
Widget calendar year
This CSS rule modifies the appearance of years in the calendar widget.
#storePickupApp .picker__month {
color: #4BA49B !important;
}
Available dates
This CSS rule modifies the appearance of the available dates in the calendar widget.
#storePickupApp .picker__day--infocus {
color:#4BA49B !important;
}
Available dates hover
This CSS rule modifies the hover effect for available dates in the calendar widget.
#storePickupApp .picker__day--infocus:hover {
color: #4BA49B !important;
}
Selected date
This CSS rule modifies the selected date in the calendar widget.
#storePickupApp .picker__list-item--highlighted-2 {
color: #4BA49B !important;
}
Unavailable dates
This CSS rule modifies the appearance of the unavailable dates in the calendar widget.
#storePickupApp .picker--focused .picker__day--disabled, .picker__day--disabled, .picker__day--disabled:hover {
color:#4BA49B !important;
}
Search bar background
This CSS rule modifies the background of the search bar within the widget.
#storePickupApp .checkoutMethodContainer .inputWithButton input[type=text]{
background:#4BA49B !important;
}
Search bar text for Store pickup
This CSS rule customizes the placeholder text in the store pickup search bar within the widget.
#pickupGeoSearchField::placeholder {
color: #4BA49B !important;
}
Search bar text for Local delivery
This CSS rule customizes the placeholder text in the local delivery search bar within the widget.
#deliveryGeoSearchField::placeholder {
color: #4BA49B !important;
}
Date picker text
This CSS rule customizes the placeholder text in the date picker bar within the widget.
#storePickupApp .pickadate::placeholder {
color: #4BA49B !important;
}
Delivery validator widget customization
Below are example codes that demonstrate the elements of our delivery validator widget that you can modify with CSS to match your theme settings.
Submit button
This CSS rule customizes the submit button within the delivery validator widget.
.zapiet-delivery-validator__submit {
color: #fff !important;
}
Close button
This CSS rule customizes the close button within the delivery validator widget.
.zapiet-delivery-validator__close {
fill: #000 !important;
}
Top bar background
This CSS rule modifies the background of the top bar in the delivery validator widget.
#zapiet-delivery-validator__topbar {
background: #AED6D2 !important;
} 
Pop-up message background
This CSS rule modifies the background of the pop-up message that appears when the delivery address is validated in the delivery validator widget.
#zapiet-delivery-validator__modal .zapiet-delivery-validator__modal__container {
background: #AED6D2 !important;
}
Pop-up message button
This CSS rule modifies the button in the pop-up message that appears when the delivery address is validated in the delivery validator widget.
#zapiet-delivery-validator #zapiet-delivery-validator__modal #zapiet-delivery-validator__modal__primary-action{
color: #000000 !important;
}