Bouton "Ajouter au panier" : bonnes pratiques pour PrestaShop

E-commerce, Ergonomie
  • Accueil
  • Blog
  • Bouton "Ajouter au panier" : bonnes pratiques pour PrestaShop

Le bouton ajouter au panier dans le e-commerce que vous soyez ou non sur PrestaShop, c’est un peu LE bouton à bichoner pour convertir vos visites en ventes rapportant plein de $$. Certes ce n’est pas le seul critères pour bien vendre mais il est important alors soignez-le.

La recette du bon bouton “ajouter au panier”

Voici un bien belle recette pour obtenir le parfait bouton “Ajouter au panier” dans votre boutique PrestaShop :

  • GROS. Oui votre bouton d’ajout au panier doit être bien visible et donc gros.
  • GRAS. Le texte du bouton doit être bien lisible avec une police en gras.
  • EFFET 3D. Comme pour les films actuels, donnez de la 3D à vos boutons d’achat, c’est plus visible et ça renforce l’impression visuelle du bouton à cliquer.
  • COULEUR. Le bouton “Add to cart” (in english please) doit être bien visible donc bien coloré et différencié des autres éléments de la page.
  • CIRCULEZ. Indiquez l’action de mouvement vers l’objectif par une flèche vers la droite car on lit de gauche à…

Avec ces quelques éléments de réponse, on devrait déjà partir vers des boutons “ajouter au panier” efficaces. Pour ne pas tomber dans des affres de webdesign, voici un bien bel article offrant une belle série de boutons dont vous pouvez vous inspirer .

Le test, il n’y a que ça de vrai

Tout est dit dans le titre, la recette donnée plus haut reprend des grands principes de e-commerce assez logiques mais peut être pas nécessairement évident pour votre domaine d’activité. Aussi, il vous faudra sûrement faire des tests sur un échantillon de produits ou bien sur votre catalogue entier pour voir si ces petits changements vous apporte un réel plus en termes de ventes.

Exemple de bouton “Ajouter au panier” optimisé

Je vous ai cité une recette sympa pour optimiser vos boutons d’ajout panier. Pour être plus concret, voici une capture et son lien pour télécharger le fichier .psd du bouton “ajouter au panier” optimisé.
bouton-ajouter-au-panier-prestashop
Télécharger le bouton Ajouter au panier pour PrestaShop
A vous de jouer et soyez créatif pour attirer l’oeil de vos visiteurs 🙂

10 commentaires sur “Bouton "Ajouter au panier" : bonnes pratiques pour PrestaShop

  1. Vieil article, mais toujours d’actualité. Merci du tips et bonne continuation Arnaud. C’est la première fois que je vois un français faire état d’un bouton 3D, et tu as raison !

    1. Bonjour Adrien,
      Merci pour ton commentaire.
      “Une poignée d’hommes parvient à s’enrichir simplement en prêtant attention aux détails que la plupart des gens négligent.” H Ford
      Une citation pour illustrer le sujet 😉

  2. Bonjour je viens de tomber sur votre article concernant le bouton ajouter au panier .
    Pour ma part mon thème est vert donc la couleur verte du bouton ajouter au panier me convient tout à fait.
    Par contre j’ai une question je souhaiterais intégrer le bouton ajouter au panier sur une page CMS ou dans cette page je parlerai d’un produit. et Les personnes intéressées pourraient directement cliquer sur le bouton sans passer par la page produit. j’ai une version 1.6 , car je sais que sur la version 1.7.5 c’est maintenant possible.
    Merci beaucoup et au plaisir de vous lire

    1. Bonjour, passez la boutique en mode catalogue dans ce cas ou utilisez un “display:none;” en CSS par exemple.

    1. Bonjour, tout dépend votre version de PrestaShop mais admettons que le bouton d’ajout panier de product.tpl ait un id=”ajout-panier” alors vous aurez dans votre css :
      [css]#product #ajout-panier {
      display:block;
      height:30px;
      width:200px;
      background:url(‘../img/atc.png’) no-repeat 0 0;
      border:none;
      text-align:center;
      line-height:30px;
      margin:0;
      padding:0;
      text-decoration:none;
      }[/css]
      En prenant soin de personnaliser la taille du bouton et de placer l’image du bouton nommée atc.png dans le dossier /img/ du thème 😉

  3. J’aime quand on se concentre sur des points d’optimisations comme celui-ci.
    Très bel article que tous les acteurs web devraient lire.

  4. Un élément essentiel de la conversion ce bouton panier !
    Mais il est parfois difficile de faire comprendre à un client, l’intérêt d’avoir un bouton vert dans un site rose et bleu 😀

Laisser un avis

Consultez les autres articles