Nous allons voir dans ce tutoriel comment créer des animations CSS sur votre boutique shopify

Même si d’un point de vue conversion ça n’apporte rien, l’internaute aime les trucs qui bougent en le rendant donc plus enclin à parcourir votre site car il se dit… Waouh ça claque c’est des pros ! et oui il en faut peu pour convaincre un potentiel client 🙂

Attention ce tutoriel est un peu plus complexe que les autres et il vous faudra mettre les mains dans le camboui et comprendre ce que vous faites mais pas d’inquiétude on va y aller étape par étape.

Je rappelle que ce tutoriel est fait pour mettre des effets sur votre page d’accueil ! si vous souhaitez mettre des effets ailleurs il faudra adapter le tutoriel.

Voir ce que ce que ça donne sur la démo

L’installation des bibliothèques utiles

Rendez-vous dans un premier temps dans les fichiers de votre thème:
Boutique en ligne – Actions – Modifier le code – trouvez le dossier Layout le fichier Theme.liquid
Trouvez ensuite la fermeture de la balise </head> et juste sur la ligne du dessus copiez/collez le code suivant:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>

Une fois que le système est en place nous allons voir comment appliquer différents effets sur chaque section de votre thème shopify.

Les différents effets d’animation

Ci-dessous vous trouverez des codes avec des exemples pour vous montrer à quoi cela doit ressembler ! Par contre il faudra appliquer ce principe sur les différentes balises sur votre code existant.

Si vous souhaitez les tester vous pouvez les copier/coller dans votre fichier theme.liquid dans le dossier Layout, juste avant la fermeture de la balise </body>. Par contre n’oubliez pas de supprimer les tests 😉

Apparition en fondu

<div class="wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.8s">Apparition en fondu</div>

Apparition vers la gauche

<div class="wow slideInLeft" data-wow-duration="1.2s" data-wow-delay="0.8s">Apparition vers la gauche</div>

Apparition vers la droite

<div class="wow slideInRight" data-wow-duration="1.2s" data-wow-delay="0.8s">Apparition vers la droite</div>

Apparition vers le bas

<div class="wow fadeInDown" data-wow-duration="1.2s" data-wow-delay="0.8s">Apparition vers le bas</div>

Apparition vers le haut

<div class="wow fadeInUp" data-wow-duration="1.2s" data-wow-delay="0.8s">Apparition vers le haut</div>

Dans ces exemples on peut repérer 3 éléments:

  • La "class" ou vous devez mettre impérativement et à chaque fois wow et le type d’effet (exemple : wow fadeIn = fondu),
  • Le "data-wow-duration" qui détermine la durée de l’effet en seconde,
  • Le "data-wow-delay" qui détermine à partir de combien de temps l’effet se déclenche en arrivant sur la zone.

Le temps est déjà bien réglé sur ce qu’il se fait en général mais si vous souhaitez modifier cela vous savez désormais comment faire 😉

Comment appliquer ces effets sur mon thème Shopify ?

Maintenant qu’on a nos codes d’exemples il va falloir mettre dans chacune de vos sections un des effets.
Vous êtes je le présume toujours dans vos fichiers ! il faut à ce stade ouvrir le dossier Sections et trouver sur quelle section vous voulez mettre un effet. C’est à ce moment la que cela ce complique…
Si vous voulez mettre un effet sur le carrousel d’image il faudra trouver un fichier du nom de slideshow.liquid ou slider.liquid ou carrousel.liquid etc… bref vous comprenez le principe 🙂

Liste de ce qu’on voit en général sur les thèmes:

  • slideshow.liquid = slider
  • featured-product.liquid = produit mis en avant
  • custom-content = contenu libre
  • newsletter.liquid = newsletter
  • etc…

Le conseil de Dgeo

Dans chaque fichier tout en haut écrivez « toto1 », autre fichier « toto2 » etc etc… comme ça vous allez identifier vos sections 😉

Bon cette fois il va falloir repérer une <div … bien souvent la class va déjà exister vous aurez donc un truc de ce style:
<div id="shopify-section..." class="blablablla"...  dans la classe rajoutez : class="blablablla wow fadeIn"

Juste après les guillemets mettez le reste en mettant un petit espace avant de coller le code suivant : data-wow-duration="1.2s" data-wow-delay="0.8s"

Ca va donner ca : <div id="shopify-section..." class="blablablla wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.8s" ….
Désormais votre effet s’appliquera au moment du scroll sur cette zone ! il ne vous reste plus qu’à le faire sur les autres zones.

Si vous n’avez pas de class ajoutez la comme dans l’exemple du dessus !

Ce tutoriel existe aussi en vidéo

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 4 commentaires

  1. Bonjour merci pour ce tuto une fois de plus bien complet !
    Juste une question j’ai plusieurs featured row comment faire pour ne pas que l’effet s’applique à tous les modules featured row ?
    Merci encore

    1. Bonjour et merci pour le message. Alors la ca devient compliqué 🙂 il faudrait un code conditionnel assez complexe à mettre en place 🙁

  2. Bonjour trop d’erreurs dans la vidéo je me suis perdu

    1. Oui pour une fois j’ai laissé 😉 je trouve intéressant de montrer les erreurs que les personnes peuvent va 🙂 cela reste plus formateur.

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation