Puedes formatear el widget utilizando CSS. El CSS debe añadirse en Ajustes > Desarrolladores, debajo de Estilos personalizados.

Utiliza el CSS a continuación según los botones o el texto que deseas modificar.
Cambia los valores hexadecimales a los colores que necesites.
Si no se aplica el CSS, agrega !important después del valor hexadecimal
p.ej. llenar:
- #e6017e !important;

El CSS agregado debería verse similar a la captura de pantalla siguiente.

Personalización de widgets

A continuación se muestran ejemplos de código que demuestran los elementos que puedes modificar con CSS para que coincidan con la configuración de tu tema.

Widget de ancho de página

Esta regla CSS afectará el ancho del widget en la página del carrito.

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

Icono de botón inactivo

Esta regla CSS modifica la apariencia de los íconos de las opciones de entrega cuando están deseleccionados en el widget.

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

Icono de botón activo

Esta regla CSS modifica la apariencia de los iconos de las opciones de entrega cuando se seleccionan en el widget.

#storePickupApp .checkoutMethod.active .pickupIcon svg{
        fill: #fff;
    }
#storePickupApp .checkoutMethod.active .deliveryIcon svg {
        fill: #fff;
    }
#storePickupApp .checkoutMethod.active .shippingIcon svg {
        fill: #fff;
    }

Fondo del botón del método de pago activo

Esta regla CSS modifica el fondo del botón de la opción de entrega seleccionada en el widget.

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

Texto del método de pago activo

Esta regla CSS modifica la apariencia del texto del botón de la opción de entrega seleccionada en el widget.

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

Texto del método de pago inactivo

Esta regla CSS modifica la apariencia del texto de los botones de opciones de entrega no seleccionadas en el widget.

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod .checkoutMethodName {
      color: #4BA49B !important;
    }

Fondo del botón de búsqueda

Esta regla CSS modifica el fondo del botón de búsqueda en el widget.

#storePickupApp .checkoutMethodContainer .inputWithButton .button {
      background: #4BA49B !important;
    }

Icono del botón de búsqueda

Esta regla CSS modifica la apariencia del icono del calendario del selector de fechas en el widget.

#storePickupApp .datepickerIcon {    
      fill: #4BA49B;      
     }

Fondo de ubicación de recogida en tienda

Esta regla CSS modifica el fondo de la ubicación de recogida seleccionada en el widget.

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

Ubicación de recogida en tienda activa

Esta regla CSS modifica el texto de la ubicación de recogida seleccionada en el widget.

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

Ubicación de recogida en tienda inactiva

Esta regla CSS modifica el texto de la ubicación de recogida no seleccionada en el widget.

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

Más información enlace

Esta regla CSS modifica el texto del enlace de "Más información" en el widget.

#storePickupApp .checkoutMethodContainer .locations .location .block .moreInformationLink {
color: #4ba49b; 
}

Calendario de widgets entre semana

Esta regla CSS modifica la apariencia de los días de la semana en el widget del calendario.

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

Mes calendario del widget

Esta regla CSS modifica la apariencia de los meses en el widget del calendario.

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

Año calendario del widget

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

Fechas disponibles

Esta regla CSS modifica la apariencia de las fechas disponibles en el widget del calendario.

#storePickupApp .picker__day--infocus{
color:#4BA49B !important;
}

Las fechas disponibles se desplazan

Esta regla CSS modifica el efecto de desplazamiento para las fechas disponibles en el widget del calendario.

#storePickupApp .picker__day--infocus:hover{
color: #4BA49B; !important;
}

Fecha seleccionada

Esta regla CSS modifica la fecha seleccionada en el widget del calendario.

#storePickupApp .picker__list-item--highlighted-2{
color: #4BA49B !important;
}

Fechas no disponibles

Esta regla CSS modifica la apariencia de las fechas no disponibles en el widget del calendario.

#storePickupApp .picker--focused .picker__day--disabled, .picker__day--disabled, .picker__day--disabled:hover {
    color:#4BA49B;
}

Fondo de la barra de búsqueda

Esta regla CSS modifica el fondo de la barra de búsqueda dentro del widget.

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

Texto de la barra de búsqueda: Recogida en tienda

Esta regla CSS personaliza el texto del marcador de posición en la barra de búsqueda de recogida en la tienda dentro del widget.

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

Texto de la barra de búsqueda: entrega local

Esta regla CSS personaliza el texto del marcador de posición en la barra de búsqueda de entrega local dentro del widget.

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

Texto del selector de fecha

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

Personalización del widget del validador de entrega

A continuación se presentan ejemplos de código que demuestran los elementos de nuestro widget de validador de entrega que puedes modificar con CSS para que coincidan con la configuración de tu tema.

Botón de enviar

Esta regla CSS personaliza el botón de envío dentro del widget de validador de entrega.

.zapiet-delivery-validator__submit {
    color: #fff !important;
}

Botón de cerrar

Esta regla CSS personaliza el botón de cerrar dentro del widget de validador de entrega.

 .zapiet-delivery-validator__close {
     fill: #000 !important;
}

Fondo de la barra superior

Esta regla CSS modifica el fondo de la barra superior en el widget de validador de entrega.

#zapiet-delivery-validator__topbar {
  background: #AED6D2 !important;
}

Fondo de mensaje emergente

Esta regla CSS modifica el fondo del mensaje emergente que aparece cuando se valida la dirección de entrega en el widget de validador de entrega.

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

Botón de mensaje emergente

Esta regla CSS modifica el botón en el mensaje emergente que aparece cuando se valida la dirección de entrega en el widget de validador de entrega.

#zapiet-delivery-validator #zapiet-delivery-validator__modal #zapiet-delivery-validator__modal__primary-action{
color: #000000 !important;
}