Você pode formatar o widget usando CSS. O CSS precisa ser adicionado em Configurações > Desenvolvedores, na seção de Estilos personalizados.

Use o CSS abaixo, dependendo de quais botões ou textos você deseja modificar.
Altere os valores hexadecimais para as cores de sua preferência.
Se o CSS não for aplicado, adicione !important após o valor hexadecimal, por exemplo: fill: #e6017e !important;.

O CSS adicionado deve parecer com a captura de tela abaixo.

Customização do widget

Abaixo estão exemplos de códigos que demonstram os elementos que você pode modificar com CSS para alinhar às configurações do seu tema.s.

Widget de largura da página

Esta regra de CSS afetará a largura do widget na página do carrinho.

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

Ícone de botão inativo

Esta regra de CSS modifica a aparência dos ícones de opções de entrega quando não estão selecionados no widget.

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

Ícone de botão ativo

Esta regra de CSS modifica a aparência dos ícones de opções de entrega quando estão selecionados no 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;
}

Fundo do botão da opção de entrega ativa

Esta regra de CSS modifica o fundo do botão da opção de entrega selecionada no widget.

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

Texto da opção de entrega ativa

Esta regra de CSS modifica a aparência do texto da opção de entrega selecionada no widget.

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

Texto da opção de entrega inativa

Esta regra de CSS modifica a aparência do texto dos botões de opções de entrega não selecionadas no widget.

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

Fundo do botão de busca

Esta regra de CSS modifica o fundo do botão de busca no widget.

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

Ícone do seletor de data

Esta regra de CSS modifica a aparência do ícone do calendário no widget.

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

Fundo da localização de recolha ativa

Esta regra de CSS modifica o fundo da localização de recolha selecionada no widget.

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

Texto da localização de recolha ativa

Esta regra de CSS modifica o texto da localização de recolha selecionada no widget.

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

Texto da localização de recolha inativa

Esta regra de CSS modifica o texto das localizações de recolha não selecionadas no widget.

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

Texto do link "Mais informações"

Esta regra de CSS modifica o texto do link "Mais informações" no widget.

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

Dias da semana no calendário no widget

Esta regra de CSS modifica a aparência dos dias da semana no widget de calendário.

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

Meses no calendário no widget

Esta regra de CSS modifica a aparência dos meses no widget de calendário.

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

Anos no calendário no widget

Esta regra de CSS modifica a aparência dos anos no widget de calendário.

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

Datas disponíveis

Esta regra de CSS modifica a aparência das datas disponíveis no widget de calendário.

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

Efeito hover em datas disponíveis

Esta regra de CSS modifica o efeito hover nas datas disponíveis no widget de calendário.

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

Data selecionada

Esta regra de CSS modifica a data selecionada no widget de calendário.

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

Datas indisponíveis

Esta regra de CSS modifica a aparência das datas indisponíveis no widget de calendário.

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

Fundo da barra de busca

Esta regra de CSS modifica o fundo da barra de busca no widget.

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

Texto da barra de busca para recolha

Esta regra de CSS personaliza o texto placeholder da barra de busca de recolha no widget.

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

Texto da barra de busca para entrega local

Esta regra de CSS personaliza o texto placeholder da barra de busca de entrega local no widget.

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

Texto do seletor de data

Esta regra de CSS personaliza o texto placeholder na barra do seletor de data no widget.

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

Customização do widget de validador de entrega

Abaixo estão códigos de exemplo que demonstram os elementos do nosso widget validador de entrega que você pode modificar com CSS para alinhar com as configurações do seu tema.

Botão de envio

Esta regra de CSS personaliza o botão de envio no widget de validador de entrega.

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

Botão de fechar

Esta regra de CSS personaliza o botão de fechar no widget de validador de entrega.

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

Fundo da barra superior

Esta regra de CSS modifica o fundo da barra superior no widget de validador de entrega.

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

Fundo da mensagem pop-up

Esta regra de CSS modifica o fundo da mensagem pop-up que aparece quando o endereço de entrega é validado no widget de validador de entrega.

#zapiet-delivery-validator__modal .zapiet-delivery-validator__modal__container { 
background: #AED6D2 !important;
}

Botão da mensagem pop-up

Esta regra de CSS modifica o botão na mensagem pop-up que aparece quando o endereço de entrega é validado no widget de validador de entrega.

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