Nous allons voir dans ce tutoriel comment décorer son site Shopify pour Noël et les fêtes de fin d’année !

Le script va simuler un effet de neige qui tombe en continu, ainsi vos clients se sentiront joyeux et enclin à effectuer un achat de Noël.

Ce code a été développé spécialement pour décorer votre site Shopify pour Noël afin d’apporter un peu de joie sur votre boutique.

Comment l’installer un effet de neige?

Rendez-vous dans online store (boutique en ligne) – cliquez sur le bouton Actions – Edit code (modifier code).

Trouvez le dossier Assets – et cliquez sur « Créer un nouveau asset » – « Créer un fichier vide » – nommez-le « snow » et sélectionnez « .js » ! maintenant que notre fichier est créé il faut le remplir en copiant la partie JS du code ci-dessous:

Cliquez sur JS et copiez/collez le code de la partie gauche de l’encart ci-dessous:

Le code étant trop long je ne peux le mettre comme d’habitude sur cet article mais vous allez pouvoir  le récupérer sur mon codepen !

Maintenant rendez-vous dans Layout – theme.liquid et trouvez la fermeture de la balise </head> (faite un ctrl + F pour recherchez cette occurrence). Juste avant ce </head> copiez/collez le code suivant qui va donc insérer notre effet de neige sur votre boutique Shopify.

Code pour l’avoir partout sur le site

<script src="{{ 'snow.js' | asset_url }}" defer="defer"></script>

Code pour l’avoir uniquement sur la page d’accueil

{% if template.name == "index" %}
<script src="{{ 'snow.js' | asset_url }}" defer="defer"></script>
{% endif %}

Il ne vous reste plus qu’à cliquer sur save (enregistrer) et de profiter de ce joli spectacle en vous souhaitant de joyeuses fêtes de fin d’année 🙂

N’oubliez pas de le supprimer une fois noël terminé 😀

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

Cet article a 55 commentaires

  1. Bonjour et merci pour ce tuto.
    Comment faire si on veut cette effet juste sur la page d’accueil et pas sur les pages produits ?

    1. Bonjour, il faut faire une condition sinon essaie de coller le code dans templates – index.liquid si tu l’as

  2. Salut à toi.
    J’ai testé le code sur le thème Début et ça fonctionne très bien.
    Merci beaucoup.

  3. Merci beaucoup! ca marche sur Supply. j’ai bien noté les lignes de codes pour modifier après les fêtes. super top votre site. tout à marche pour moi, sauf le panier vibrant.

  4. Bonjour,

    Merci pour tous ces tutos et ton travail de qualité!

    « An error prevented theme.liquid from being saved »

    Voici le message qui s’affiche lorsque je veux enregistrer le bout de code.
    Et ce n’est pas la première fois.
    Tu saurais me dire pourquoi?

    1. Hello, merci pour le message 🙂 Non ca me dit rien, tu as bien copiez/collez le code complet ?

      1. Oui j’utilise Ctrl+C puis Ctrl+V

        Je viens de ré-essayer et ça a marché!!! Le rendu est magnifique, encore merci pour tout ce contenu de qualité.
        Et bonne continuation 🙂

      2. Il me semblait avoir répondu, je n’ai pas dû poster.

        Tout fonctionne finalement, c’est magnifique ces flocons de neige sur le site.

        Merci beaucoup!

  5. Ca fonctionne sur Venture! Merci beaucoup!

  6. SUPER !! des autos géniaux. Merci !

    1. Merci pour le commentaire 😉

  7. Hello, si tu as déjà mis un code à cet endroit comme un checkout x par exemple.

  8. bonsoir, comment le mettre seulement dans la barre du header

    1. Hello, ce n’est pas possible avec ce code navré. C’est possible mais cela demande une adaptation et un code sur mesure sur votre site 🙂

  9. Excellent!! Merci

  10. C’est génial, mais je trouve qu’il y a trop de neige et qu’elle tombe trop vite. Y a-t-il un moyen de paramétrer cela ?

    1. Hello, merci pour le message. oui c’est possible mais ca demande pas mal de codage 🙁

      1. OK. Tant pis, c’est déjà bien comme ça. 🙂

  11. Merci, c’est exactement ce que je voulais sans jamais penser pouvoir le faire, t’es un as !

    1. Hello, Super ravi d’avoir pu vous aider 🙂 Bonne soirée.

  12. Salut Dgeo, tu est un bon, merci pour ce bout de code. You are the best. longue vie au web !

    1. Hello, merci c’est sympa 😉 bonne réussite !

  13. Merci fonctionne très bien !

    Peut-on rajouter la possibilité pour le client de pouvoir activer/désactiver le script ?

    Merci d’avance,et super tes autres tutos,continue comme ça 🙂

  14. Hello comment fait-on pour mettre des effets sur les images ou le texte (fondue,…) ?
    Je cherche partout un tuto et impossible de trouver !
    Sa pourrez vachement m’aider et faire un site plus pro et clean pour tous le monde !
    Merci

    1. Hello et merci pour le message. alors c’est dans les idées de tutos mais cela reste assez technique et assez complexe selon les thèmes. Je remets l’idée sur le tapis mais je ne promets rien 😉

  15. Bonjour DGEO,
    Serait-il possible de faire tomber des étoiles, des gouttes d’eau ou bien des cœurs à la place des flocons ?
    Je te remercie d’avance !

    1. Hello, c’est potentiellement possible mais pas avec ce script 😉

  16. Bonjour,

    le code ne marche plus ? Je ne parviens pas à le faire fonctionner. Merci

    1. Hello, effectivement le code n’était plus accessible 🙂 c’est désormais fonctionnel ! merci d’avoir trouvé cette coquille 😉

  17. Hello, le code ne fonctionne plus pour Novembre 2020 ? Je vois qu’il date de l’année dernière ? Ou alors je n’ai pas exactement compris quel code fallait il copier

    1. Hello, le tuto était encore en cours d’écriture 🙂 il est désormais terminé et la version vidéo sera disponible à partir de lundi prochain

  18. Bonjour , merci pour votre tuto mais je ne comprend pas quel code prendre , quand je clic sur JS cest tout un paragraphe de code qui s affiché et vous dans votre vidéo c est juste une ligne alors je comprend pas je trouve pas le code, pourriez vous m aider svp?

    1. Hello, le tuto n’était pas terminé 😉 il l’est désormais mais je vous recommande d’attendre la version vidéo qui sortira lundi prochain

  19. Tuto mis à jour avec une nouvelle intégration plus pratique et modulaire 🙂

  20. Bonjour ! Si vous avez changé le code ça ne marche toujours pas ! J’ai réussi toutefois en recopiant celui qui est dans la vidéo et là ca a fonctionné 🙂 par contre impossible de le mettre uniquement sur la page d’accueil … la modif est sur le site entier … Même en intégrant l’autre ligne ! Mais merci quand même pour tout tes tutos qui sont au top !!!

    1. Hello le mieux est d’attendre la vidéo qui sort lundi 😉

  21. Autant ça marchait l’an dernier, autant cette année non !

    1. Hello le mieux est d’attendre la vidéo qui sort lundi 😉

  22. Salut l’amis

    {% if template.name == « index » %}

    {% endif %}

    {% if template.name == « index » %}

    {% endif %}

    C’est pas ‘theme.js’ mais plutôt ‘snow.js’ dans le nom du fichier à renseigner pour src=

    Merci pour le tuto et le code

    1. Hello, yes merci y avait effectivement une coquille 🙂 c’est corrigé

  23. Bonjour,
    Effectivement les tutos sont géniaux. La vidéo est-elle déjà en ligne ? Je ne la trouve pas sur Youtube.

    1. Hello, oui elle est présente

  24. Mercii beaucoup pour le tuto!! Trop bien expliqué. Je l’ai réussi du premier coup 🙂

  25. Hello, j’ai essayé ce code mais il ne fonctionne pas sur le theme motion, j’écris ce commentaire pour éviter que les gens perdent du temps inutilement en essayant sur ce thème, et j’en profite pour te remercier de tout le savoir que tu nous partages.
    Un grand merci

    1. Hello, il est censé fonctionner partout peu importe le theme 🙂 il doit avoir un conflit quelque part. Au besoin me linker l’url de la boutique avec le code noel actif pour regarder 😉

  26. Je suis ravi de vos tutoriels.
    Que l’Eternel compose vos chiffres d’affaires en cette fin d’année par la fonction exponentielle neperienne et votre durée de vie par la fonction factorielle.
    Amen!!!!

    1. Merci et qu’il en soit de même pour vous 🙂

  27. Un grand merci Dgeo, vraiment constructifs tes tutos. Ton partage du savoir est grandement apprécié.

  28. Merci beaucoup, il fonctionne très bien sur la dernière version de motion, le problème est que quand je consulte le site sur téléphone , il est un peu lent , en gros les neige tombent tres lentement, et la barre dynamique en haut défile lentement aussi, vous savez d ou viens le problème et comment le régler svp ?

    1. Hello, oui c’est normal c’est un script assez gourmand malheureusement 🙁

  29. Hello,
    Merci beaucoup pour ce tuto !
    Est-ce possible de mettre cet effet uniquement sur le header et footer de la page d’accueil ? et pas la page d’accueil entière ?

    1. Hello, à non navré ce n’est malheureusement pas possible avec ce tutoriel.

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