All Collections
Zapiet - Pickup + Delivery
Design
Customize widget appearance with CSS
Customize widget appearance with CSS

Format the widget with CSS

Veno Herceg avatar
Written by Veno Herceg
Updated over a week ago

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

Did this answer your question?