Comment agrandir le bouton ajout au panier sur shopify ?

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 Boutique en ligne -> Actions -> Modifier le code -> Ressources (Assets) -> base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

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]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 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 38 commentaires

  1. Iliess Elbach

    13 Déc 2017 Répondre

    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. dgeo22

      17 Déc 2017 Répondre

      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. Quentin

    5 Jan 2018 Répondre

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

    1. dgeo22

      14 Jan 2018 Répondre

      Bonsoir,

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

      Bonne soirée

  3. Quentin

    5 Jan 2018 Répondre

    bonjour comment modifier aussi la largeur??

    1. dgeo22

      14 Jan 2018 Répondre

      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. Mattéo

        19 Nov 2020 Répondre

        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. Dgeo Dev

          20 Nov 2020 Répondre

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

  4. max

    30 Jan 2018 Répondre

    Hello,

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

    1. dgeo22

      1 Fév 2018 Répondre

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

  5. Oho

    9 Mar 2018 Répondre

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

  6. laurent

    11 Mar 2018 Répondre

    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. Dgeo GD

      16 Mar 2018 Répondre

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

  7. geo

    15 Mar 2018 Répondre

    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. Sylvie

    27 Mar 2018 Répondre

    Bonjour,

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

    1. Dgeo GD

      30 Mar 2018 Répondre

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

  9. emma Bajen

    11 Avr 2018 Répondre

    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. Jonathan

    22 Avr 2018 Répondre

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

  11. Guy

    20 Oct 2018 Répondre

    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. Dgeo Dev

      25 Oct 2018 Répondre

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

      1. Guy

        11 Nov 2018 Répondre

        Bonjour,

        Ok merci, je vais voir ça.

  12. haddou

    20 Fév 2019 Répondre

    Génial et merci pour ton travail don diego 😉

    Comment ajouter le ptit panier avant acheter maintenant ?

    Ca marche vraiment bien merci !

  13. Louis Moeschler

    22 Sep 2019 Répondre

    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. Dgeo Dev

      23 Sep 2019 Répondre

      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. Clems

    14 Nov 2019 Répondre

    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. Dgeo Dev

      15 Nov 2019 Répondre

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

  15. fred

    7 Juil 2020 Répondre

    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. Dgeo Dev

      10 Juil 2020 Répondre

      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. fred

    21 Sep 2020 Répondre

    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. Dgeo Dev

      22 Sep 2020 Répondre

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

  17. William

    29 Déc 2020 Répondre

    Salut Diego !

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

    1. Dgeo Dev

      29 Déc 2020 Répondre

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

  18. Victor

    21 Juin 2021 Répondre

    Bonjour

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

    Merci d’avance

    1. Dgeo Dev

      22 Juin 2021 Répondre

      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…

  19. Multi-Tronic

    23 Oct 2021 Répondre

    salut super tes tuto un petit soucis sur le thème Venture
    sur la version mobile parfait texte centrer dans le bouton tout et parfait
    mais sur la version ordinateur le texte n’est pas centrer dans le bouton il et sur la gauche du bouton et non au milieu auriez-vous une solutions.?

    merciii

    1. Dgeo Dev

      25 Oct 2021 Répondre

      Hello, oui tu peux dans theme.scss.liquid mettre tout en bas ceci : .dg-addToCartFormGrid .btn { padding:10px; }

Laisser un commentaire

Fermer le menu
×
×

Panier