Tuto : Comment Mettre une animation sur votre bouton ajouter au panier

vignette
Le bouton Ajouter au panier attirera le plus d’attention possible et augmentera efficacement la conversion de n’importe quelle page de produit dans votre magasin.

Si vous voulez créer cet effet pour votre bouton Ajouter au panier, c’est très simple ! Suivez ces étapes :

Etape 1 : Ajouter le code CSS

Depuis votre administrateur Shopify, vers la boutique en ligne > Thème.
Trouvez le thème que vous voulez modifier, puis cliquez sur Action > Modifier le code.
Dans la section Assets, trouvez le fichier SCSS (ex : theme.scss ou style.scss…) et ouvrez ce fichier dans l’éditeur de code en ligne.
Allez à la ligne de fin et collez le code ci-dessous

 

 
.btn-shake:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
 
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
 
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
 
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

Cliquez sur Enregistrer

Etape 2 : Ajouter une nouvelle classe pour les boutons
Maintenant, vous devez trouver tous les boutons que vous voulez ajouter cet effet et ajouter une nouvelle classe btn-shake pour eux.

 

Bon codage !

Poster un Commentaire

Laisser un commentaire

  S’abonner  
Notifier de