Comment créer un bouton vibrant sur shopify ?

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:

Boutique en ligne -> Actions -> Modifier code -> Ressources (Assets) -> base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

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, .ProductForm__AddToCart {
 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 14 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 99 commentaires

  1. Patrick

    10 Nov 2017 Répondre

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

    1. dgeo22

      11 Nov 2017 Répondre

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

      1. Patrick

        16 Nov 2017 Répondre

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

        23 Fév 2018 Répondre

        Bonjour Geoffrey,

        Mon thème est VENTURE.

        Merci à toi pour tous tes tutos supers 🙂

      3. Michel

        28 Fév 2018 Répondre

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

          2 Mar 2018 Répondre

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

      4. jawad brahim bounab

        11 Fév 2021 Répondre

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

          11 Fév 2021 Répondre

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

      5. Teddy

        21 Jan 2023 Répondre

        Bonsoir pour le thème dawn il ya pas theme.css
        merci

        1. Dgeo Dev

          9 Fév 2023 Répondre

          Hello, regardez le fichier base.css

      6. Germ Obed

        26 Fév 2023 Répondre

        ca ne marche pas pour moi. Vous avez yb nouveau pour la V2

    2. dany murray

      27 Fév 2018 Répondre

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

      1. dgeo22

        2 Mar 2018 Répondre

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

  2. cyril

    11 Nov 2017 Répondre

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

  3. Nabil

    16 Nov 2017 Répondre

    Bonsoir,

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

    1. dgeo22

      16 Nov 2017 Répondre

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

      1. emma Bajen

        17 Mar 2018 Répondre

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

    19 Nov 2017 Répondre

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

    1. Vivien

      22 Mar 2023 Répondre

      Moi de même ca fonctionne pas avec le thème Origin

  5. Muhovic

    23 Nov 2017 Répondre

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

    1. dgeo22

      30 Nov 2017 Répondre

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

  6. amandine

    30 Nov 2017 Répondre

    Super merci beaucoup

    1. dgeo22

      30 Nov 2017 Répondre

      Salut Amandine et merci 😉

  7. Cande

    14 Déc 2017 Répondre

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

      17 Déc 2017 Répondre

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

  8. cyril

    19 Déc 2017 Répondre

    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. stéphane fernandes

    4 Jan 2018 Répondre

    Ca marche parfaitement! Merci pour tes astuces

    1. dgeo22

      14 Jan 2018 Répondre

      Salut et merci pour le commentaire 😉

  10. Charles

    20 Jan 2018 Répondre

    Génial merci !

  11. LAURENT THERRY

    21 Jan 2018 Répondre

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

      25 Jan 2018 Répondre

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

  12. Mica

    18 Fév 2018 Répondre

    excellent , merci

  13. Margot

    22 Fév 2018 Répondre

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

  14. archier

    26 Fév 2018 Répondre

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

    5 Mar 2018 Répondre

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

  16. Sylvie

    26 Mar 2018 Répondre

    Bonjour,

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

    1. Dgeo GD

      30 Mar 2018 Répondre

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

      Bonne soirée

  17. Gabriel

    30 Mar 2018 Répondre

    SUPER !!! marche nikel !

    Merci ! 😉

  18. Charles

    4 Avr 2018 Répondre

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

      5 Avr 2018 Répondre

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

  19. hamster

    8 Avr 2018 Répondre

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

    12 Avr 2018 Répondre

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

      14 Avr 2018 Répondre

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

    20 Oct 2018 Répondre

    Parfait ! Ca fonctionne . merci

  22. Abdelaziz Dihmani

    19 Nov 2018 Répondre

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

    Greeting

    1. Dgeo Dev

      24 Nov 2018 Répondre

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

  23. matthieu

    6 Déc 2018 Répondre

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

    1. Dgeo Dev

      7 Déc 2018 Répondre

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

  24. kocorico

    13 Déc 2018 Répondre

    Bonjour,

    Je suis sur Dropizi

    Peux-u me dire comment je fais?

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

    1. Dgeo Dev

      16 Déc 2018 Répondre

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

  25. Moune

    7 Jan 2019 Répondre

    MERCIIIIIIIIIIIIIIIIII
    TU GEEEEREEEEES

  26. Leat

    22 Mar 2019 Répondre

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

  27. Arnaud

    28 Mar 2019 Répondre

    Ça fonctionne parfaitement pour moi.
    Merci Constant

  28. Eol

    12 Juil 2019 Répondre

    Merci ça fonctionne

  29. FMCONCEPT France

    13 Août 2019 Répondre

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

      13 Août 2019 Répondre

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

  30. Andriano

    2 Oct 2019 Répondre

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

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

    1. Dgeo Dev

      5 Oct 2019 Répondre

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

    6 Oct 2019 Répondre

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

      6 Oct 2019 Répondre

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

  32. Nono

    7 Oct 2019 Répondre

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

  33. Jo

    1 Nov 2019 Répondre

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

  34. Jos

    24 Fév 2020 Répondre

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

    1. Dgeo Dev

      26 Fév 2020 Répondre

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

  35. fiona

    29 Mar 2020 Répondre

    bonjour comment fait t on pour le changer de couleur svp

    1. Dgeo Dev

      29 Mar 2020 Répondre

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

  36. chopi

    2 Avr 2020 Répondre

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

    6 Mai 2020 Répondre

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

      11 Mai 2020 Répondre

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

  38. Abdoulaye

    31 Mai 2020 Répondre

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

      1 Juin 2020 Répondre

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

    6 Juin 2020 Répondre

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

    1. Dgeo Dev

      6 Juin 2020 Répondre

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

  40. Mahwechi

    6 Août 2020 Répondre

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

      7 Août 2020 Répondre

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

  41. mounir

    2 Oct 2020 Répondre

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

      5 Oct 2020 Répondre

      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. Mohamed Akhy

    11 Déc 2020 Répondre

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

      14 Déc 2020 Répondre

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

  43. Willizm

    4 Jan 2021 Répondre

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

      5 Jan 2021 Répondre

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

  44. Baptiste

    20 Jan 2021 Répondre

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

      20 Jan 2021 Répondre

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

  45. SABB

    17 Juil 2021 Répondre

    Salut dgeo super ta video, le code ne fonctionne pas sur mon theme prestige :'( as tu un autre moyen pour le bouton vibrant?

    1. Dgeo Dev

      19 Juil 2021 Répondre

      Hello, j’ai rajouté la prise en charge du thème prestige. Tu peux reprendre ce nouveau code et tester 🙂

  46. SABB

    19 Juil 2021 Répondre

    merci beaucoup 🙂

  47. farid sabeur

    30 Juil 2021 Répondre

    Sakur Dego, est ce possible d inserer une image sur la page checkout ?

    1. Dgeo Dev

      31 Juil 2021 Répondre

      Hello, non ce n’est pas possible car shopify ne donne pas l’accès à cette partie

  48. farid sabeur

    18 Nov 2021 Répondre

    Salut dgeo, est il possible de changer le shake2 en bounce ou pulse?? j’ai essayer ca ne marche pas

    1. Dgeo Dev

      18 Nov 2021 Répondre

      Hello, oui mais il faut modifier les effets dans @-webkit-keyframes shake2 { … } checher pulse et bounce css sur codepen afin de trouver des bouts de codes sympas 😉

  49. Noé

    3 Fév 2022 Répondre

    Hello Diego, est ce que le tuto est possible pour un bouton dans l accueil ( diaporama theme brooklyn ) ?
    Merci !

    1. Dgeo Dev

      4 Fév 2022 Répondre

      Hello, oui il suffit de trouver la class du bouton et de le rajouter dans la partie css 😉

  50. Max Volny

    6 Fév 2023 Répondre

    Salut, est-ce que le code est compatible avec le theme refresh ? Il semble pas fonctionner pour moi

    1. Dgeo Dev

      9 Fév 2023 Répondre

      Non navré mais tu vous avez le lien de la démo je pourrai rejouter la compatibilité 🙂

  51. Germain Obed

    26 Fév 2023 Répondre

    Salut dgeo jutilise SENSE sur shopify.

  52. GOANEX32

    29 Mai 2023 Répondre

    Bonjour je suis sur le thème DAWN , je souhaite faire l’animation sur le bouton achat pourrait tu m’aider ?

  53. kevin

    17 Sep 2023 Répondre

    Salut j’ai le theme DAWN et sa ne marche pas non plus dans base.css merci de ton retour

Laisser un commentaire

Fermer le menu
×
×

Panier