All Collections
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

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

More information link

#storePickupApp .checkoutMethodContainer .locations .location .block .moreInformationLink {
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;
}

Did this answer your question?