Nous allons voir dans ce tutoriel comment agrandir le bouton ajout au panier sur shopify

Cet effet va grossir un peu le bouton ajouter au panier ou acheter maintenant sur toutes vos fiches produits !

Cette astuce va augmenter la visibilité du bouton et par conséquent augmenter votre taux de conversion.

Partie technique – Côté code

Rendez vous dans Online store -> Actions -> Edit CSS/HTML -> Assets -> theme.scss ou selon votre thème (style.scss, timber.scss…)

descendez tout en bas du fichier et copier/coller le code ci-dessous:

#AddToCartForm .btn, #addToCart, #AddToCart--product-template, .product__add-to-cart-button, .product-form__cart-submit, #addToCart-product-template, .action_button add_to_cart, .template-product .cont-content #addToCart, .template-product #tab-1 #addToCartBis, .template-index .index-section--featured-product #addToCart, .template-index .index-section--featured-product #addToCartBis { width:100%; clear:both; font-size:150%; }

Si vous souhaitez augmenter encore plus la taille du texte et la hauteur du bouton jouez avec la font-size: 150% mettez 200% etc…

Vous avez maintenant un joli bouton plus visible et plus sympa pour le client puisse passer plus facilement à l’action !

Bon tuto à tous 🙂

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 votes]

Cet article a 28 commentaires

  1. Bonjour, merci pour ce petit tuto ! ça marche super pour la version pc par contre pour mobile c’st pas trop ça ://, aurais-tu une solution pour adapter l affichage en version mobile ?

    1. Bonjour, oui en rajoutant ceci tout en bas du même fichier: @media screen and (max-width: 480px) {
      #AddToCartForm .btn, #addToCart, #AddToCart--product-template, .product__add-to-cart-button, .product-form__cart-submit, #addToCart-product-template, .action_button add_to_cart {
      width:100%;
      clear:both;
      font-size:16px;
      }
      }

  2. Bonjour je suis sur le thème turbo ça ne marche pas…

    1. Bonsoir,

      Oui le thème turbo n’est pas pris en compte

      Bonne soirée

  3. bonjour comment modifier aussi la largeur??

    1. La largeur prend toute la place dont le bouton dispose… si il ne prend pas toute la largeur c’est le thème que l’en empêche 🙁

  4. Hello,

    Je cherche en vain à mettre mon bouton ATC à la ligne..! (sous les sélecteurs de choix « quantité » et « couleur »)
    Une idée?

    1. Salut, mets une balise
      entre tes 2 éléments pour effectuer un reset

  5. Bonsoir, je suis sur le thème « Simple’ et ça ne marche pas, comment faire?

  6. Merci pour le tuto, sauf que ne le fait que sur 1 button ATC alors que dans la version speedlfy 1.07 tu peux mettre 2 boutons, et celui du bas n’est pas affecté par le changement

    1. Pas besoin de faire le tuto sur speedfly étant donné que la fonctionnalité est intégrée et administrable sur les 2 formulaires 😉

  7. hello,

    Je sais pas si c’est moi ou mon thème qui est pas compatible mais ça ne fonctionne pas sur le thème brooklyn, une idée ?

    thanks

  8. Bonjour,

    J’aimerai changer la couleur du bouton « ajouter au panier » de noir à vert, mais comment faire ?
    Merci !

    1. Bonjour, normalement vous avez selon le thème la main la dessus dans customize – theme settings – color (primary button)

  9. Salut Geoffrey ,
    merci pour tes conseils ! Je n’ai pas le bouton primary Button pour changer le visuel du bouton add to cart . J’aimerais changer la police qui pour moi n’est pas assez visible , comment dois-je m’y prendre?
    Merci beaucoup .

    Emma

  10. Un grand merci pour les questions posées ainsi que pour leurs réponses ! Au top

  11. Bonjour,

    J’ai mis le codage mais il a une marque de codage « null » en dessous de mon bouton « achetez maintenant ». Comment je fais pour l’enlever ?

    Cordialement,

    1. Bonsoir, vous avez surement mis le code dans un mauvais fichier, vu l’erreur vous avez confondu un fichier .js et .css 🙂

      1. Bonjour,

        Ok merci, je vais voir ça.

  12. Génial et merci pour ton travail don diego 😉

    Comment ajouter le ptit panier avant acheter maintenant ?

    Ca marche vraiment bien merci !

  13. Bonjour,

    J’aimerai savoir comment agrandir le bouton de passage à l’action sur la page  »Panier ». Le tuto pour agrandir le bouton sur la page produit a bien fonctionné et désormais j’aimerai pourvoir faire la même chose pour la page  »Panier ».

    Je vous remercie d’avance pour l’attention que vous porterez à ce commentaire

    1. Bonjour, c’est possible mais tout dépend du thème. MP au besoin avec le lien du site et je vous donnerai un hack css. Bonne soirée.

  14. Bonjour Dev,
    Je voudrai savoir comment avoir la même taille avec le badge de sécurité  » 4 bonnes raisons de commander chez nous  » un peu trop petit cordialement.

    1. Hello, tout dépend de la taille de votre image, il faudra en trouver une plus grand ou de la taille voulue 😉

  15. Bonjour

    Je n’arrive pas a le faire fonctionner sur le theme motion

    Ce n’est pas compatible avec ce theme?

    Merci en tous cas

    1. Hello, désolé je ne connais pas ce thème. lien du site en MP au besoin je mets rajouter la compatibilité en regardant le code source du thème.

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine