Personnaliser les boutons dans la boutique MyCOMMERCE

Modifier la couleur ou la police des boutons de votre boutique MyCOMMERCE nécessite des modifications aux codes CSS.

Astuce: Lisez l'article suivant avant de commencer: Ajout de codes CSS à votre boutique

Dans cet article:

Grands boutons - changer la couleur
Petits boutons - changer la couleur
Boutons «Acheter maintenant»

Grands boutons - changer la couleur

Les grands boutons dans votre boutique comprennent «Ajouter au panier», «Continuer», «Payer», «Annuler la commande». Vous pouvez modifier ou ajuster individuellement tous ces boutons avec un code.

Utilisez le code CSS suivant afin de mettre à jour tous les grands boutons en même temps. Dans les exemples, vous pouvez modifier «rouge» et «noir» en n'importe quelle couleur.

/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button 
{ background-color: red;}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Kopieren

Pour modifier des boutons individuels:

Ajouter au panier

Remplacez #FFFFFFFF (blanc) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}
Kopieren

Payer

Remplacez #FFFFFFFF (blanc) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
background-color: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}Kopieren

Continuer

Remplacez #FFFFFFFF (blanc) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: #000000;
}Kopieren

Passer la commande

Remplacez #FFFFFFFF (blanc) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: #000000;
}Kopieren

Petits boutons - changer la couleur

Vous pouvez également modifier les boutons plus petits et secondaires: «Ajouter plus», «Passer à la caisse», «Continuer les achats sur la page de panier», «Vider le panier».

Voici les codes pour modifier simultanément tous les boutons:

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}Kopieren

Pour modifier des boutons individuels:

Ajouter plus

Remplacez #FFA500 (orange) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}Kopieren

Passer à la caisse

Remplacez #FFA500 (orange) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}Kopieren

Continuer les achats sur la page de panier

Remplacez #FFA500 (orange) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: #000000;
}Kopieren

Vider le panier

Remplacez #FFA500 (orange) et "#000000" (noir) par les codes de couleur que vous souhaitez voir apparaître dans votre magasin.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
color: #000000;
}Kopieren

Boutons Acheter maintenant

Vous pouvez modifier les boutons «Acheter maintenant» dans votre boutique MyCOMMERCE. Ces boutons sont affichés sur les pages des catégories.

/*Button color*/
.ec-size .ec-store .form-control--small .form-control__button {
background: #FFFAFA;
}

/*Text color*/
.ec-size .ec-store .form-control--small .form-control__button {
color: #000000;
}Kopieren

Astuce: Vous pouvez activer ces boutons pour votre boutique dans votre compte MyCOMMERCE → Paramètres → Général → Panier et caisse, en activant l’interrupteur pour «Acheter maintenant» sur les pages de liste des produits.