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.
Inactive button icon color
#storePickupApp .checkoutMethod .pickupIcon {
fill: #e6017e;
}
#storePickupApp .checkoutMethod .deliveryIcon {
fill: #e6017e;
}
#storePickupApp .checkoutMethod .shippingIcon {
fill: #e6017e;
}
Active button icon color
#storePickupApp .checkoutMethod.active .pickupIcon {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .deliveryIcon {
fill: #fff;
}
#storePickupApp .checkoutMethod.active .shippingIcon {
fill: #fff;
}
Active checkout method button background color
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
background: #e6017e;
}
Active checkout method text color
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
color: #fff;
}
Inactive checkout method text color and style
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod .checkoutMethodName {
font-style: normal;
text-transform: uppercase;
white-space: normal;
font-size: 1.3rem;
letter-spacing: .15em;
color: #e6017e;
}
Search button background color
#storePickupApp .checkoutMethodContainer .inputWithButton .button {
background: #e6017e;
}
Search button icon color
#storePickupApp .datepickerIcon { fill: #e6017e; }