Nous allons rendre votre bouton d’ajout ou panier ou acheter maintenant vibrant !

Cette technique est souvent utilisée pour capter l’attention du client afin qu’il passe à l’action.

Il a été démonté que le taux de conversion a tendance à augmenter en activant ce bouton vibrant sur shopify.

Pour mettre en place de bouton vibrant il vous suffit de suivre ces étapes:

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:

@-webkit-keyframes shake2 {
 0% { transform:translate(0,0);-webkit-transform:translate(0,0) }
 2.0979% { transform:translate(5px,0);-webkit-transform:translate(5px,0) }
 4.1958% { transform:translate(0,0);-webkit-transform:translate(0,0) }
 6.29371% { transform:translate(5px,0);-webkit-transform:translate(5px,0) }
 8.39161% { transform:translate(0,0);-webkit-transform:translate(0,0) }
 10.48951% { transform:translate(5px,0);-webkit-transform:translate(5px,0) }
 12.58741% { transform:translate(0,0);-webkit-transform:translate(0,0) }
 100% { transform:translate(0,0);-webkit-transform:translate(0,0) }
}
#AddToCartForm .btn, #addToCart, #AddToCart, .btn-addtocart, #AddToCart-product-template, #AddToCart--product-template, #addToCart-product-template, .product__add-to-cart-button, .add_to_cart, .product-form__cart-submit, .action_button add_to_cart, .btn--add-to-cart.btn, shopify-payment-button__button, .addCart, .add-to-cart, .btn {
 animation: shake2 4.72s ease infinite;
}

Vous voila donc avec un joli bouton vibrant sur vos formulaires de votre boutique shopify.

Ps: Pour une raison que j’ignore ce bout de code ne fonctionne pas sur Fastlane et Turbo.

Vous aurez peut être envie de mettre un trust badge juste en dessous ?

Dans ce cas cliquez sur le lien ci-dessous:

Lien vers le tuto pour mettre un Trust badge de confiance

Ce tutoriel existe aussi en vidéo

Bonne installation à tous !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 10 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 80 commentaires

  1. Dommage çà marche pas pour moi mais merci beaucoup pour tout ton travail 🙂

    1. Bonjour Patrick, pas de soucis je peux l’adapter pour ton thème 😉 quel thème as tu ?

      1. C’est très sympa de ta part mais je ne connais pas le nom de mon thème malheureusement. C’est le thème gratuit de la formation de Sébastien Cerise si celà peut t’aider.

        Merci beaucoup par avance. Ton travail est monstrueux 🙂

      2. Bonjour Geoffrey,

        Mon thème est VENTURE.

        Merci à toi pour tous tes tutos supers 🙂

      3. Bonsoir,

        Super, même si malheureusement cela ne fonctionne pas pour moi…
        J’ai le thème Fastlane…

        Crois-tu que tu pourrais l’adapter dessus?

        Merci en tout cas,

        Michel

        1. Bonjour, effectivement ca ne fonctionne pas sur le Thème Fastlane

      4. Heyy !, déjà merci pour ta vidéo mais le code marche pas sur mon thème « motion », tu pourrais m’aider stp ?, merci d’avance

        1. Hello, j’ai rendu le code compatible avec ce thème, il suffit donc de remettre le bon code.

    2. bonjour le tuto est il fonctionnel avec simple ou cest moi qui fait erreur dans lapplication du code ?

      1. Non le thème simple n’est pas compatible pour le moment

  2. Bonjour, cela ne fonctionne pas non plus avec le thème début .

  3. Bonsoir,

    Ca ne marche pas pour moi.. Mon thème est debut sur shopify

    1. Ok me MP sur facebook pour adapter le tuto à votre thème rechercher: dgeo dev 😉

      1. Salut Geoffrey ! merci pour tes tutos et explications !! j’ai essayé de te chercher sur facebook pour t’envoyer un MP (comme dit plus haut ) mais je ne t’ai pas trouvé ! aurais-tu un moyen direct de te contacter ? Merci à toi !
        Emma

  4. Salut Geoffrey.!! J’ai le thème « début » aussi et ça ne fonctionne pas, merci d’avance pour ton retour…!!!

  5. Bonjour Geoffrey.
    J’ai le thème « début » aussi et ça ne fonctionne pas, merci d’avance pour ton retour !

    1. Salut, merci le tuto est désormais compatible avec le thème début

  6. Super merci beaucoup

    1. Salut Amandine et merci 😉

  7. Jaimerai ajouter le code d ajout au panier dans mon site svp, et également la photo des image carre visas, mastercard etc de strip dans mon site juste en bas de Paypal car elle n’est pas visible bien que la photo est en bas de la page

    1. Bonjour, essayez de le placer ailleurs pour tester ou alors vous avez mal copiez collez l’url de l’image

  8. Bonsoir Geoffrey , est il possible en fesant un copier coller d’ajouter un second add to cart vibrant en bas de page après la description du produit ?

  9. Ca marche parfaitement! Merci pour tes astuces

    1. Salut et merci pour le commentaire 😉

  10. Génial merci !

  11. Bonjour,

    cela ne marche pas avec le theme « Supply » j’ai l’impressoin , à moins que j’ai fais une fausse manip.

    merci pour vos formidables tutos !

    Laurent

    1. Le tuto est pourtant compatible Supply, oui reprenez les étapes une par une 😉

  12. excellent , merci

  13. Super merci beaucoup!! J’ai le thème début et ça marche nickel!

  14. Bonsoir merci pour tous ceux que tu fais, tes tutos sont super j’aimerais seulement savoir comment tu fais pour recentrer les ATC et mettre les photos dans une autre échelle ? En gros j’ai bien une application qui fait l’optimisation mais pas de la taille, seulement du poids ce qui crée par moment un déséquilibre avec les autres.
    Cordialement.

  15. ça a bien marché pour ma part merci !! Je l’ai coller dans theme >> assets >> stylesheet.css.liquid

  16. Bonjour,

    merci beaucoup pour votre travail.
    Est-ce que ce code fonctionne avec le thème Brooklyn.
    Merci !

    1. Bonjour, merci pour le com 😉
      A priori oui mais à tester

      Bonne soirée

  17. SUPER !!! marche nikel !

    Merci ! 😉

  18. Salut ! Merci pour tous ces Tutos !
    Sur Fastlane ça marche pas. J’ai gratté le web, contacté le développeur.. j’ai jamais trouvé de solution.
    Est ce que tu pourrais m’aider par hasard ?

    Merci infiniment pour ta réponse !

    Très bonne soirée.

    1. Salut, en général ca marche pas sur Fastlane navré 🙁

  19. Super, çà à marché du 1er coup, par contre je souhaiterai ajouter des boutons  » Ajouter au panier  » sur ma page d’accueil et sur mes fiches produits, pourrais tu m’expliquer comment faire.
    Merci pour tout ces tutos qui nous aide vraiment.

  20. Bonjour,

    Je possède le thème Jumpstart. J’ai copié collé le code ci dessus. Cela ne fonctionne pas, pas de compatibilité avec ce thème??

    Merci d’avance et bon boulot en tout cas 🙂

    1. Bonjour, Merci pour le com. pour jumpstart je ne me souvins plus au besoin me donner le lien du site (je ne validerai pas le commentaire pour éviter que les autres le voit 😉 ) et j’adapterai le tuto en conséquence

  21. Parfait ! Ca fonctionne . merci

  22. Bonjour,
    S’il vous comment ajouter un code pour secouer le bouton Checkout.

    Greeting

    1. Bonjour, impossible étant donné que nous n’avons pas la main sur la partie du checkout (hors thème)

  23. Bonjours j’ai un gros soucis de code j’aimerai voir si on peu ce parler en MP
    Merci

    1. Hello, regardez sur le site y a mon Facebook pour les MP 😉

  24. Bonjour,

    Je suis sur Dropizi

    Peux-u me dire comment je fais?

    Sinon énorme tes partages tu fais du bien a la communauté

    1. Bonjour, désolé je ne connais pas Dropizi. Merci 😉

  25. MERCIIIIIIIIIIIIIIIIII
    TU GEEEEREEEEES

  26. Marche parfaitement avec le thème Brooklyn
    Merci à toi!

  27. Ça fonctionne parfaitement pour moi.
    Merci Constant

  28. Merci ça fonctionne

  29. Bonjour,
    En tout cas dans le thème Impulse et faux rechercher ceci .btn–secondary .rte .btn–secondary et ajouter ceci :
    animation: shake2 3.72s ease infinite;
    animation-duration: 3.72s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: shake2;

    1. Bonjour et un grand merci pour cette information 🙂 Bonne soirée

  30. Merci maintenant mes boutons sont dans le « move » :).

    Ps : si j’applique sur toute la page, vous pensez que ma page deviendra vibrante : ».

    1. Merci pour tous vos messages sympathiques 😉 Pour la vibration de la page oui tout est possible mais cela risque de faire bizarre ^^
      Bonne journée

  31. Bonjour super tuto ca fonctionne super .
    Une petite question rien à voir avec ça mais j’ai ajouter un jour du texte sous le bouton ajout au panier et j’aimerais l’enlever mais je sait plus ou je lest foutu . Pourrait tu m’aider car je ne retrouve plus le tuto merci infiniment

    1. Hello et merci pour le commentaire. Tout dépend du thème en général c’est dans sections – product-template.liquid

  32. Bonsoir merci de m’aider bah jai bien tout fouiller et je trouve rien

  33. J’ai le thème Venture et ça fonctionne! Merci bcp!

  34. Bonjour, j’ai le theme Empire et ça ne marche avec dommage!

    1. Hello, j’ai adapté le tuto, logiquement avec le nouveau code cela devrait fonctionner 😉

  35. bonjour comment fait t on pour le changer de couleur svp

    1. Hello, c’est au niveau des options du thème

  36. Bonjour, Ce tuto n’est pas mal du tout. j’aimerais bien supprimer le bouton  »Ajouter au panier » car il sert a rien pour un site monoproduit. Quelqu’un a une idée de comment faire ? Merci d’avance!

  37. Salut Diego, un grand merci pour tes vidéos !! Comment peut ‘on faire pour faire vibrer le bouton « paiement » plutotot que l’ajout au pannier

    1. Hello et merci pour le commentaire. Difficile à dire, ca dépend du thème.

  38. Je viens de découvrir ton blog mais en 3 jours j’ai réussi à faire ce que je n’ai pas pu faire depuis 2 ans que j’ai crée ma boutique, soit les vidéos étaient trop longues ou des fois un peu complexe et je n’osais pas mais avec tes tutos c’est autre chose, courts et précis.
    Merci encore!
    Ps: S’il y a des tutos pour le marketing (pub facebook, google…) je suis preneur aussi, je nage la dedans lol

    1. Hello merci c’est sympa 😉 j’essaie d’aller droit au but et de vulgariser au max afin de simplifier l’implémentation des codes 🙂
      Ah malheureusement c’est pas mon rayon le marketing mais tu peux regarder la chaine youtube Speedecom 🙂

  39. bonjour Dev j’arrive pas vibrer le bouton d’achat
    merci m’aide

    1. Hello, si c’est le acheter maintenant dynamique de shopify ce n’est pas possible mais le ajouter au panier oui 🙂

  40. Bonjour Dgeo DEV
    bravo pour cet excellent travail !!! un grand merci de ma part et bonne continuation.
    question idiote 🙂 :c’est gratuit tout ça ! (tes conseils avisés, tes bouts de codes ,….?
    merci beaucoup!
    cdt

    1. Hello et merci pour le message 😉 oui tout est gratuit et soumis aux dons 🙂

  41. Bonsoir, ca ne fonctionne pas pour moi non plus. Je suis sur le theme debut mais j’édite mes pages avec Gempages. Merci de votre aide

    1. Hello, c’est surement à cause de gempage en effet. Il faudrait voir avec leur support si ils peuvent faire quelque chose 🙂 bonne journée.

  42. bonjour j’ai le theme motion et le code ne marche pas dessus j’aiemrais savoir si il faut ajouter ou enlever quoi que ce soit afin de le rendre actif

    1. Hello, je ne connais pas ce thème désolé, le mieux et de demander à leur support 🙂

  43. Salut Diego !

    ça marchait bien jusqu’à aujourd’hui, et ça ne marche plus, je ne sais pas pourquoi..
    J’ai pourtant rééssayer d’installer le code sur le theme DEBUT

    1. Hello, j’ai regardé votre site et visiblement le bouton fonctionne tjs 🙂

  44. Hello Dgeo,

    Merci beaucoup pour tous ces tuto, je les suis à la lettre et je dois dire que cela m’aide bcp pour optimiser mon site, alors un énorme MERCI !

    J’ai un soucis sur ce tuto qui ne fonctionne pas sur mon thème (Impulse), tu as une idée de ce qu’il faut faire pour régler ce problème ?
    J’ai déjà essayé ce qui était indiqué par « FMCONCEPT France » dans les commentaires plus haut mais je n’ai pas trouvé ce dont il parlait donc cela ne m’a pas vraiment débloqué.
    HELP HELP HELP 🙂

    Merci d’avance pour ton retour !

    1. Hello, j’ai mis à jour le code du tuto pour que ce thème soit pris en compte. tu peux retenter 😉

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