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 17 votes]

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 30 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 !

  11. Bonjour,

    Je suis tes tuto depuis une semaine et franchement c’est incroyable. MERCI!

    Je souhaite mettre une animation pour les badges de confiance mais je trouve pas ou placer le code. Une idée?

  12. Bonjour

    J’aimerais appliqué une animation sur tout un bloc de mon site.
    Avec la console j’arrive à trouver l’intitulé le nom de la classe qui m’interresse mais je n’arrive pas à trouver dans le code du thème la partie correspondante
    Peux tu m’aider, s’il te plait ?

    1. Hello, tu peux nous demander une intervention ici 🙂 speedecom.freshdesk.com

  13. Salut Dgeo.
    Merci beaucoup pour tes tutorials premièrement , ils me sont d’une utilité indescriptible.

    Je rencontre des difficultés avec celui-ci par contre. QUand je teste les animations apparaît un simple « Apparition en fondu » sur fond blanc a la place de l’animation. J’ai pourtant bien installé les bibliothèques ( enfin fait comme recommandé ).

    Une idée sur ce qui ne va pas ? J’utilise le thème Debut donc je ne pense pas que ca ait un lien avec le choix du thème .

    1. Hello, c’est étrange… la comme ça je ne vois pas, il faudrait investiguer davantage

  14. Bonjour Dgeo
    dis moi comment je peux faire pour appliquer une modif simplement sur la bannière de satisfaction du bas en mouvement comme montre sur la video ?

    1. Hello, il me semble que je le montre en fin de vidéo 🙂

  15. Coucou,
    Tout d’abord, merci pour tes tutos ! C’est génial, c’est hyper complet et j’ai pu métamorphoser mon site.
    Par contre, je n’arrive pas à faire fonctionner tes animations CSS sur mes sections… Je ne comprends pas alors que j’ai essayé plusieurs fois en suivant bien tes conseils. J’utilise le thème Début.
    Rien ne s’anime et je vois juste « Apparition etc… » apparaître au niveau de mes sections

    1. Hello, il faudrait m’envoyer le lien de la boutique afin de voir si des erreurs sont visibles dans la console

  16. coucou je suis bloqué à la première étape, j’ai mis le code puis les 4 codes de défilement mais malheureusement rien n’apparait … est-il possible de m’aider s’il vous plait ?

    1. Hello, il me faudrait un lien svp en MP 😉

  17. Super tuto encore une fois, le seul problème c’est que sa fais un peu sauter ma page au moment de l’animation (sur pc et mobile). Du coup, obligé de re scroll pour revenir où j’étais, ça fais site qui déconne un peu…

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