Lien essai gratuit shopify

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 {
 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 !

43 commentaires sur “Tuto bouton vibrant sur shopify

      1. Patrick

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

        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. emma Bajen

        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

  1. Cande

    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

  2. LAURENT THERRY

    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

  3. archier

    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.

  4. Charles

    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.

  5. hamster

    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.

  6. PN38

    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

      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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*