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: 4.8 sur 4 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 36 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 🙁

      1. Bonjour dgeo22, j’ai un souci sur mon bouton quantité… on voit les fleches pour choisir la quantité mais on ne voit plus les chiffres s’afficher, comment faire svpppp

        1. Hello, il faut voir avec le support de votre thème

  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.

  16. Bonjour

    merci pour ce tuto, j’ai actuellement le thème MOTION, et quand je met le code pour agrandir le bouton, rien ne se passe, ya t’il une manip particulière pour le theme MOTION?

    Merci

    1. Hello 🙂 ah ne connaissant pas ce thème, je ne sais pas navré 🙁 le mieux serait de demander à leur support

  17. Salut Diego !

    Et comment faire pour le bouton ACHETEZ MAINTENANT ? « url-masquée »
    Il est plus petit que ajoutez au panier…

    1. Dans le css zone width:100%; rajouter width:100% !important; et ca fonctionnera

  18. Bonjour

    Avez-vous un tips pour centrer (et non à gauche ou à droite) un bouton ajouter au panier sur mobile ?

    Merci d’avance

    1. Hello, par rapport à ce tuto ? car logiquement il prend tout l’espace. Sinon faut mettre dans la balise btn un style du genre : ….button style= »margin:0 auto; »…. Ajouter au panier …/button…

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème 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