Tuto bouton vibrant sur shopify

Un bouton vibrant sur shopify ca vous branche ?

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

Cette technique est souvent utiliser 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, #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 {
 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

Bonne installation à tous !

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

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

  11. excellent , merci

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

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

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

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

  16. SUPER !!! marche nikel !

    Merci ! 😉

  17. 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é 🙁

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

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

  20. Parfait ! Ca fonctionne . merci

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

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

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

  24. MERCIIIIIIIIIIIIIIIIII
    TU GEEEEREEEEES

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

  26. Ça fonctionne parfaitement pour moi.
    Merci Constant

Laisser un commentaire

Fermer le menu
×
×

Panier