Vous pouvez formater le widget en utilisant le CSS. Le CSS doit être ajouté dans Zapiet - Ramassage + Livraison > Paramètres > Développeurs, sous Styles personnalisés.

Utilisez le CSS ci-dessous en fonction des boutons ou du texte que vous souhaitez modifier.
Remplacez les valeurs hexadécimales par les couleurs dont vous avez besoin.
Si le CSS n'est pas appliqué, ajoutez !important après la valeur hexadécimale
- par exemple : fill: #e6017e !important;
Le CSS ajouté devrait ressembler à la capture d'écran ci-dessous.

Personnalisation du widget

Widget de la largeur de la page

Ceci est un exemple de code, vous devez l'ajuster en fonction des paramètres de votre thème.

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

Icône du bouton inactif

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

Icône du bouton actif

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

Arrière-plan du bouton de la méthode de paiement active

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

Texte de la méthode de paiement active

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

Texte de la méthode de paiement inactive

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

Arrière-plan du bouton Rechercher

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

Icône du bouton Rechercher

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

Arrière-plan de l'emplacement de ramassage en magasin

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

Emplacement de ramassage en magasin actif

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

Emplacement de ramassage en magasin inactif

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

Lien Plus d'informations

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

Semaine du calendrier du widget

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

Mois du calendrier du widget

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

Année du calendrier du widget

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

Dates disponibles

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

Survol des dates disponibles

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

Date sélectionnée

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

Dates indisponibles

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

Arrière-plan de la barre de recherche

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

Texte de la barre de recherche – Ramassage en magasin

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

Texte de la barre de recherche – Livraison locale

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

Texte du sélecteur de date

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

Personnalisation du widget du validateur de livraison

Bouton de soumission

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

Bouton de fermeture

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

Arrière-plan de la barre supérieure

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

Arrière-plan du message contextuel

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

Bouton de message contextuel

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