On va grossir un peu le bouton ajouter au panier ou acheter maintenant sur une fiche produit !

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

Rendez vous 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 bouton plus visible pour le client pour qu’il passe plus facilement à l’action !

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

🤗 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 22 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 !

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 Booster ton taux de conversion ?

J'ai 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

En savoir plus