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%; }

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

Bon tuto à tous 🙂

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

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 24 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

    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 🙁

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

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

  5. 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 😉

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

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

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

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

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

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

    Comment ajouter le ptit panier avant acheter maintenant ?

    Ca marche vraiment bien merci !

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

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations