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

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

Widget is not showing on cart page

Delivery validator widget

Changing the default widget options

Checkout widget

Important: Widget update required