Beaucoup d'entre vous nous font la remarque, le bouton "Achetez" tel qu'il est par défaut ne convient par forcemment au thème de votre boutique ; voici donc quelques pistes pour vous aider dans sa personnalisation.
Allez dans la rubrique "préférences" > "personnalisez votre thème" > "Configuration du thème", puis dans le champ "Feuille de style". L'exemple qui suit vous montre comment créer un bouton vert.
Pour changer sa couleur :
.productInList .buynow a:link {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:visited {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:hover {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
Voici le résultat :
Pour lui ajouter une image de fond :
.productInList .buynow a:link {background:transparent;color:#374a08; padding:0 20px 0 20px;}
.productInList .buynow a:visited {background:transparent;color:#374a08; padding:0 20px 0 20px;}
.productInList .buynow a:hover {background:transparent;color:#374a08; padding:0 20px 0 20px;}div .buynow {height:26px;background:transparent url(/pub/background-buy.jpg) no-repeat center center;}
Notez bien qu'il faut au préalable
envoyer l'image "background-buy.jpg" (qui est le fond du bouton sans le
texte) dans votre Gestionnaire d'images.
Voici le résultat :
Voilà, vous savez désormais comment changer l'apparence de votre bouton fétiche !
EDIT : pour changer le bouton dans les catégories, vous devez modifier les paramètres suivants :
.productInList .buynow a:link {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:visited {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:hover {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productDetail .blocprice td.buynow a:link {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productDetail .blocprice td.buynow a:visited {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productDetail .blocprice td.buynow a:hover {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productDetail .blocprice td {background:#ffffff;border-color:#ffffff}
( Dans cet exemple, le tableau qui encadre le bouton a des bords et un fond blancs )








Commentaires
Merci, cependant je viens d'essayer et le bouton "achetez" n'est modifié que sur la page d'accueil et non pas au niveau des catégories boutique...
lucie.mest-ce normal?
Et pouvons-nous modifier le mot "acheter" ?
Bonjour Lucie M.
en effet, j'ai aussi changé il y a quelques jours mes couleurs de bouton. ils sont bleus !
si je ne fais pas d'erreur il faut modifier cette ligne afin de changer les couleurs dans les catégories :
.productDetail table.blocprice {
background-color:#A7C9EA; // fond;
border:2px solid #3094F9; // bordure de droite et de gauche;
}
.productDetail .blocprice td { border-bottom: 2px solid #3094F9; // bordure du bas ;
border-top: 2px solid #3094F9; // bordure du haut
}
.productDetail .blocprice td.buynow a{background-color:#1260fb;
color:#fefeFE;
color: #fefefe // couleur du texte
background-color: #fefefe // couleur du fond
}
.productDetail .blocprice td.buynow a:hover{ background-color:#a7c9ea;
color:#2D7C00; // idem mais quand la souris est dessus
background-color: #F2E100;
}
mahisard@ bientôt :-)
http://emaillerie.42stores.com
:-)
Pour moi, petit souci! je n'ai pas la feuille de style... Je ne peux pas faire autrement?
CecileJ'aurai souhaité enlever la forme impérative pour l'infinitif acheter, moins directif.
Hubert valeriComment faire , merci.
Avec le choix "Xolson" pour l'aspect de la boutique, il n'y a pas de feuille de style ou je me trompe ?
HubertPour ce qui est du texte présent dans le bouton, il n'est pour le moment pas modifiable, mais ça ne saurait tarder...
Pour le modèle "Blowup", il suffit de cliquer sur le 2ème bouton "configuration du thème".
Par contre la feuille de style du modèle Xolson peut très bien être modifié, il faut bien aller dans "configuration du thème" également
Pour toute autre question technique, adressez-vous directement au support, il est fait pour ça !
Alex