Comment créer une animation CSS sur Shopify

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 Mise en page (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 Mise en page (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.8 sur 18 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

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 35 commentaires

  1. Romain Boulanger

    27 Mar 2020 Répondre

    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. Dgeo Dev

      27 Mar 2020 Répondre

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

  2. Val

    29 Mar 2020 Répondre

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

    1. Dgeo Dev

      29 Mar 2020 Répondre

      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. Manon Damart

    6 Avr 2020 Répondre

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

    1. Dgeo Dev

      7 Avr 2020 Répondre

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

  4. Marco.S

    13 Avr 2020 Répondre

    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. Dgeo Dev

      14 Avr 2020 Répondre

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

    18 Avr 2020 Répondre

    Bonjour je ne trouve plus le code pour supprimer le bandeau

    1. Dgeo Dev

      18 Avr 2020 Répondre

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

  6. Joel

    31 Mai 2020 Répondre

    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. Dgeo Dev

      1 Juin 2020 Répondre

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

    10 Juin 2020 Répondre

    Bonjour,
    Comment peut on avoir plus d effet?

  8. D

    20 Août 2020 Répondre

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

    1. Dgeo Dev

      21 Août 2020 Répondre

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

  9. Loïs

    19 Nov 2020 Répondre

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

    19 Nov 2020 Répondre

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

    3 Déc 2020 Répondre

    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. Auguste .K

    4 Déc 2020 Répondre

    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. Dgeo Dev

      4 Déc 2020 Répondre

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

  13. Jean-baptiste

    10 Jan 2021 Répondre

    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. Dgeo Dev

      11 Jan 2021 Répondre

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

  14. harry

    11 Jan 2021 Répondre

    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. Dgeo Dev

      13 Jan 2021 Répondre

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

  15. Laura

    17 Fév 2021 Répondre

    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. Dgeo Dev

      18 Fév 2021 Répondre

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

  16. Sephora

    12 Mar 2021 Répondre

    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. Dgeo Dev

      13 Mar 2021 Répondre

      Hello, il me faudrait un lien svp en MP 😉

  17. dams

    25 Juil 2021 Répondre

    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…

  18. Gérardson

    21 Fév 2022 Répondre

    merci beaucoup

  19. sahit

    19 Mar 2023 Répondre

    bonjour j’ai pas trouver le fichier hero.liquid

    1. Dgeo Dev

      22 Mar 2023 Répondre

      Bonjour, hero ? je ne parle pas de ca il me semble, vous pouvez préciser votre pensée svp? 🙂

  20. Mélinda

    15 Avr 2023 Répondre

    Bonjour,

    Je ne comprend pas je met bien les codes aux bons endroits mais mêmes les tests ne sont pas visible sur ma boutique.

    1. Dgeo Dev

      16 Avr 2023 Répondre

      Hello, c’est étrange en effet ? quel thème ? sinon on peut s’en occuper au besoin me contacter ici : speed-ecom.eu/support

Laisser un commentaire

Fermer le menu
×
×

Panier