Changer le bouton "Achetez".
Par Alex Conseils pour évoluer
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...
est-ce normal?
Et pouvons-nous modifier le mot "acheter" ?
Pour moi, petit souci! je n'ai pas la feuille de style... Je ne peux pas faire autrement?
J'aurai souhaité enlever la forme impérative pour l'infinitif acheter, moins directif.
Comment 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 ?