Vous pouvez formater le widget en utilisant le CSS. Le CSS doit être ajouté dans 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

Vous trouverez ci-dessous des exemples de code illustrant les éléments que vous pouvez modifier avec le CSS pour correspondre aux paramètres de votre thème.

Widget de la largeur de la page

Cette règle CSS affectera la largeur du widget sur la page du panier.

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

Icône du bouton inactif

Cette règle CSS modifie l'apparence des icônes des options de livraison lorsqu'elles sont désélectionnées dans le widget.

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

Icône du bouton actif

Cette règle CSS modifie l'apparence des icônes des options de livraison lorsqu'elles sont sélectionnées dans le widget.

#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 l'option de livraison active

Cette règle CSS modifie l'arrière-plan du bouton de l'option de livraison sélectionné dans le widget.

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

Texte de l'option de livraison active

Cette règle CSS modifie l'apparence du texte du bouton d'option de livraison sélectionné dans le widget.

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

Texte de l'option de livraison inactive

Cette règle CSS modifie l'apparence du texte des boutons d'option de livraison non sélectionnés dans le widget.

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

Arrière-plan du bouton Rechercher

Cette règle CSS modifie l'arrière-plan du bouton de recherche dans le widget.

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

Icône du sélecteur de date

Cette règle CSS modifie l'apparence de l'icône du calendrier du sélecteur de date dans le widget.

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

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

Cette règle CSS modifie l'arrière-plan de l'emplacement de ramassage sélectionné dans le widget.

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

Emplacement de ramassage en magasin actif

Cette règle CSS modifie le texte de l'emplacement de ramassage sélectionné dans le widget.

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

Emplacement de ramassage en magasin inactif

Cette règle CSS modifie le texte de l'emplacement de ramassage non sélectionné dans le widget.

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

Texte du lien Plus d'informations

Cette règle CSS modifie le texte du lien "Plus d'informations" dans le widget.

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

Semaine du calendrier du widget

Cette règle CSS modifie l'apparence des jours de la semaine dans le widget calendrier.

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

Mois du calendrier du widget

Cette règle CSS modifie l'apparence des mois dans le widget calendrier.

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

Année du calendrier du widget

Cette règle CSS modifie l'apparence des années dans le widget calendrier.

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

Dates disponibles

Cette règle CSS modifie l'apparence des dates disponibles dans le widget calendrier.

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

Survol des dates disponibles

Cette règle CSS modifie l'effet de survol des dates disponibles dans le widget de calendrier.

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

Date sélectionnée

Cette règle CSS modifie la date sélectionnée dans le widget calendrier.

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

Dates indisponibles

Cette règle CSS modifie l'apparence des dates indisponibles dans le widget calendrier.

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

Arrière-plan de la barre de recherche

Cette règle CSS modifie l'arrière-plan de la barre de recherche au sein du widget.

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

Texte de la barre de recherche – Ramassage en magasin

Cette règle CSS personnalise le texte d'espace réservé dans la barre de recherche de ramassage en magasin au sein du widget.

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

Texte de la barre de recherche – Livraison locale

Cette règle CSS personnalise le texte d'espace réservé dans la barre de recherche de livraison locale au sein du widget.

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

Texte du sélecteur de date

Cette règle CSS personnalise le texte d'espace réservé dans la barre de sélection de date du widget.

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

Personnalisation du widget du validateur de livraison

Vous trouverez ci-dessous des exemples de codes illustrant les éléments de notre widget validateur de livraison que vous pouvez modifier avec CSS pour correspondre aux paramètres de votre thème.

Bouton de soumission

Cette règle CSS personnalise le bouton de soumission dans le widget validateur de livraison.

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

Bouton de fermeture

Cette règle CSS personnalise le bouton de fermeture dans le widget validateur de livraison.

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

Arrière-plan de la barre supérieure

Cette règle CSS modifie l'arrière-plan de la barre supérieure du widget validateur de livraison.

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

Arrière-plan du message contextuel

Cette règle CSS modifie le fond du message contextuel qui apparaît lorsque l'adresse de livraison est validée dans le widget validateur de livraison.

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

Bouton de message contextuel

Cette règle CSS modifie le bouton dans le message contextuel qui apparaît lorsque l'adresse de livraison est validée dans le widget validateur de livraison.

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