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

Page-width widget

This is an example code, you need to adjust in according to your theme settings.

@media screen and (min-width: 768px) {
    #storePickupApp {
        margin-left: 0.1em !important;
        max-width: 100% !important;
    }
}

Inactive button icon

#storePickupApp .checkoutMethod .pickupIcon {
        fill: #000; !important
    }
#storePickupApp .checkoutMethod .deliveryIcon {
        fill: #000 !important;
    }
#storePickupApp .checkoutMethod .shippingIcon {
        fill: #000 !important;
    }

Active button icon

#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 checkout method button background

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
    background: #4ba49b !important;
}

Active checkout method text

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
        color: #fff !important;
      }

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

Store pickup location background

#storePickupApp .checkoutMethodContainer .locations .location.active { background: #4BA49B !important;
}

Active store pickup location

#storePickupApp .checkoutMethodContainer .locations .location.active {
        color: #4BA49B !important; 
      }

Inactive store pickup location

#storePickupApp .checkoutMethodContainer .locations { 
    color: #4BA49B !important;
}

Widget calendar weekday

#storePickupApp .picker__weekday {
     color: #4BA49B !important;
}

Widget calendar month

#storePickupApp  .picker__month  {
    color: #4BA49B !important;
 }

Widget calendar year

#storePickupApp  .picker__month  {
    color: #4BA49B !important;
 }

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

Search bar background

#storePickupApp .checkoutMethodContainer .inputWithButton input[type=text]{
background:#4BA49B !important;
}

Search bar text - Store pickup

#pickupGeoSearchField::placeholder {
    color: #4BA49B !important;
}

Search bar text - Local delivery

#deliveryGeoSearchField::placeholder {
    color: #4BA49B !important;
}

Date picker text

#storePickupApp .pickadate::placeholder {
    color: #4BA49B !important;
}

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

Managing locations using CSV

Delivery validator widget

Delivery validation by city name

Editing the store pickup “More information” pop-up

Theme troubleshooting