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 !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 12 votes]

Cet article a 18 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.

  3. Bonjour , Pour le thème Venture sa ne s’applique pas ?

    1. hello, logiquement oui car le thème importe peu 🙂

  4. Salut ! Merci pour ce tuto.

    Je crois que les blocs ne portent pas les memes noms l’éditeur de code ? Peux tu m’aider stp?

    1. Hello, désolé mais je n’ai pas compris la question. Si le thème ne génère pas d’identifiants cela risque d’être compliqué 🙁

  5. Bonjour je ne trouve plus le code pour supprimer le bandeau

    1. Hello, surement dans le theme.liquid du dossier layout. Faut refaire le tuto à l’envers pour retrouver les codes 😉

  6. Hello, toujours aussi clair,net et précis. Je suis tes tutos depuis maintenant 3 ans et c’est plaisir heureusement qu’il y a un Monsieur comme toi. Merci, Merci, Merci!
    Petites questions qui n’ont rien à voir avec le tuto de dessus :
    – Comment mettre les textes en minuscule sur les titres de produit (nom du produit) dans la partie collection sur shopify ?
    – Est-ce que plus tard, tu envisageras de faire un petit tuto sur : comment mettre par exemple le menu sur le coté latéral dans une collection par exemple.
    Merci à toi encore

    1. Hello et merci pour le commentaire 🙂 oui c’est uen bonne idée je note cela dans les idées de tutos. Après certains thèmes comme speedfly le propose en natif 🙂

  7. Bonjour,
    Comment peut on avoir plus d effet?

  8. Bonjour Dev
    Cela ne marche pas en version smartphone c’est normal ?

    1. Hello, normalement oui il suffit de tester sur le site de démo 🙂

  9. Bonjour!

    Merci beaucoup, j’apprends beaucoup grâce à vous.
    Pour ce tutoriel, je n’ai pas réussi même en persévérant. J’aimerais insérer en fondu juste une phrase de mon texte (rich text). J’ai retrouvé cette phrase dans l’explorateur de google chrome. En revanche sur Shopify cette phrase n’apparaît pas dans rich-text.liquid. Le problème est que je n’arrive pas à retrouver mon « rich text » dans mon code Shopify…

    Merci énormément dans tous les cas!
    Je ne manquerai pas vos prochaines vidéos.

  10. Bonjour Dev,
    Merci beaucoup pour tous ces tutos qui nous aident à tous !
    J’ai un petit problème avec l’effet fondu, lorsque je vais sur le site version mobile, parfois l’image qui est censé se mettre en fondue se met à clignoter comme si le fondu se répétait plusieurs fois
    Une idée du soucis?
    Merci beaucoup par avance !

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

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

S'abonner à la chaine