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 Ressources (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:

<br /> See the Pen Effet de neige qui tombe pour Noël en Javascript by Dgeo Dev<br /> (@dgeo-dev) on CodePen.<br />

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 Mise en page (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="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<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="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<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 34 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.

« Comment afficher des informations selon le type de contenu sur Shopify

Barre d’information Fidélité avec Code Promo et nombre de Visites sur Shopify »

Cet article a 99 commentaires

Adam
8 Déc 2018 Répondre

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. Dgeo Dev
  16 Déc 2018 Répondre
  
  Bonjour, il faut faire une condition sinon essaie de coller le code dans templates – index.liquid si tu l’as
Rom Ain
8 Déc 2018 Répondre

oh top !!
Manu
11 Déc 2018 Répondre

Salut à toi.
J’ai testé le code sur le thème Début et ça fonctionne très bien.
Merci beaucoup.
gems
15 Déc 2018 Répondre

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.
Nurhan
20 Déc 2018 Répondre

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. Dgeo Dev
  20 Déc 2018 Répondre
  
  Hello, merci pour le message 🙂 Non ca me dit rien, tu as bien copiez/collez le code complet ?
  1. Nurhan
    20 Déc 2018 Répondre
    
    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. Nurhan
    28 Déc 2018 Répondre
    
    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!
Jo
1 Nov 2019 Répondre

Ca fonctionne sur Venture! Merci beaucoup!
Sarah
7 Nov 2019 Répondre

SUPER !! des autos géniaux. Merci !
1. Dgeo Dev
  7 Nov 2019 Répondre
  
  Merci pour le commentaire 😉
Romain
7 Nov 2019 Répondre

Hello, si tu as déjà mis un code à cet endroit comme un checkout x par exemple.
hugo
12 Nov 2019 Répondre

bonsoir, comment le mettre seulement dans la barre du header
1. Dgeo Dev
  12 Nov 2019 Répondre
  
  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 🙂
yoyo
20 Nov 2019 Répondre

Excellent!! Merci
Le Marginal Magnifique
3 Déc 2019 Répondre

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. Dgeo Dev
  4 Déc 2019 Répondre
  
  Hello, merci pour le message. oui c’est possible mais ca demande pas mal de codage 🙁
  1. Le Marginal Magnifique
    10 Déc 2019 Répondre
    
    OK. Tant pis, c’est déjà bien comme ça. 🙂
Christian DAUGAS
7 Déc 2019 Répondre

Merci, c’est exactement ce que je voulais sans jamais penser pouvoir le faire, t’es un as !
1. Dgeo Dev
  7 Déc 2019 Répondre
  
  Hello, Super ravi d’avoir pu vous aider 🙂 Bonne soirée.
Bachir
10 Déc 2019 Répondre

Salut Dgeo, tu est un bon, merci pour ce bout de code. You are the best. longue vie au web !
1. Dgeo Dev
  10 Déc 2019 Répondre
  
  Hello, merci c’est sympa 😉 bonne réussite !
Pierre
12 Déc 2019 Répondre

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 🙂
Edouard
18 Déc 2019 Répondre

Top merci !
Echelard
31 Déc 2019 Répondre

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. Dgeo Dev
  3 Jan 2020 Répondre
  
  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 😉
Russsssman
8 Jan 2020 Répondre

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. Dgeo Dev
  9 Jan 2020 Répondre
  
  Hello, c’est potentiellement possible mais pas avec ce script 😉
FoxFox
2 Août 2020 Répondre

Bonjour,

le code ne marche plus ? Je ne parviens pas à le faire fonctionner. Merci
1. Dgeo Dev
  3 Août 2020 Répondre
  
  Hello, effectivement le code n’était plus accessible 🙂 c’est désormais fonctionnel ! merci d’avoir trouvé cette coquille 😉
lefort
10 Nov 2020 Répondre

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. Dgeo Dev
  10 Nov 2020 Répondre
  
  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
Clémentine
10 Nov 2020 Répondre

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. Dgeo Dev
  10 Nov 2020 Répondre
  
  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
Dgeo Dev
10 Nov 2020 Répondre

Tuto mis à jour avec une nouvelle intégration plus pratique et modulaire 🙂
waxam
10 Nov 2020 Répondre

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. Dgeo Dev
  11 Nov 2020 Répondre
  
  Hello le mieux est d’attendre la vidéo qui sort lundi 😉
Le Marginal Magnifique
10 Nov 2020 Répondre

Autant ça marchait l’an dernier, autant cette année non !
1. Dgeo Dev
  11 Nov 2020 Répondre
  
  Hello le mieux est d’attendre la vidéo qui sort lundi 😉
Loic Cool
10 Nov 2020 Répondre

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. Dgeo Dev
  11 Nov 2020 Répondre
  
  Hello, yes merci y avait effectivement une coquille 🙂 c’est corrigé
Ad
18 Nov 2020 Répondre

Bonjour,
Effectivement les tutos sont géniaux. La vidéo est-elle déjà en ligne ? Je ne la trouve pas sur Youtube.
1. Dgeo Dev
  19 Nov 2020 Répondre
  
  Hello, oui elle est présente
nora
19 Nov 2020 Répondre

Mercii beaucoup pour le tuto!! Trop bien expliqué. Je l’ai réussi du premier coup 🙂
Eugé
23 Nov 2020 Répondre

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. Dgeo Dev
  24 Nov 2020 Répondre
  
  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 😉
Cyprien_Ecom
24 Nov 2020 Répondre

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. Dgeo Dev
  24 Nov 2020 Répondre
  
  Merci et qu’il en soit de même pour vous 🙂
Tahirou Mballo
24 Nov 2020 Répondre

Un grand merci Dgeo, vraiment constructifs tes tutos. Ton partage du savoir est grandement apprécié.
1. Dgeo Dev
  24 Nov 2020 Répondre
  
  Merci 😉
emma
27 Nov 2020 Répondre

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. Dgeo Dev
  27 Nov 2020 Répondre
  
  Hello, oui c’est normal c’est un script assez gourmand malheureusement 🙁
Marie
27 Nov 2020 Répondre

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. Dgeo Dev
  28 Nov 2020 Répondre
  
  Hello, à non navré ce n’est malheureusement pas possible avec ce tutoriel.
fabien
30 Nov 2020 Répondre

Joli effet merci dgeo un pro 😉
Hic77
2 Déc 2020 Répondre

Bonjour ca marche pas sur mon site, tu peux m’aider s’il te plait?
Alexandra
5 Déc 2020 Répondre

Merci beaucoup ! tout fonctionne correctement et c’est très beau !
Alain
7 Déc 2020 Répondre

Merci beaucoup. Super comme toujours.
Martin
7 Déc 2020 Répondre

Merci beaucoup ! Mais comment faire pour qu’il y ai moins de flocons sur le site?
1. Dgeo Dev
  7 Déc 2020 Répondre
  
  Ah désolé j’ai pas la main la dessus 🙁
Guillaume
12 Déc 2020 Répondre

Hum cela ne marche pas pour moi 🙁 thème Motion, rien ne se passe :(((
1. Dgeo Dev
  14 Déc 2020 Répondre
  
  Hello, je ne connais pas ce thème désolé, le mieux et de demander à leur support
Ridben
21 Déc 2020 Répondre

Hey super! Merci beaucoup
ASecom
6 Jan 2021 Répondre

Salut Dgeo !

Est-ce-que modifier la couleur des flocons est possible ? par exemple en gris ? tout simplement. Merci
Si oui, tu peux m’indiquer la ligne exact ou je pourrais modifier ça. 😉
1. Dgeo Dev
  7 Jan 2021 Répondre
  
  Hello, non navré on ne peut pas avec ce script 🙁
YVEs
11 Mar 2021 Répondre

HELLO , Comment effacé les effets de neige? merci a vous .
1. Dgeo Dev
  12 Mar 2021 Répondre
  
  Bonjour, il suffit de supprimer le code 😉
berny
26 Mar 2021 Répondre

Bonjour, merci a toi pour tout tes tutos au top
j’ai réussi, mais à la base je voulais le faire et changer le code couleur blanc en or pour avoir un effet pailleté. Mais je ne trouve pas ou c’est inscrit white ou le code couleur blanc. C’est pas possible de changer la couleur ? ou alors, vous n’avez pas un tuto paillette je ne trouve nul part
1. Dgeo Dev
  26 Mar 2021 Répondre
  
  Bonjour, non le code est difficilement adaptable car très complexe. Faudrait plutôt adapter celui la en trouvant un autre identifiant de class et changer le fa-heart par un des identifiant sur fontawesome 🙂 https://dgeodev.com/comment-decorer-shopify-saint-valentin-coeurs-tombent/
Ben
19 Oct 2021 Répondre

Bonjour Dgeo, merci pour ton tuto !
J’ai l’impression qu’il ne fonctionne plus : on ne voit pas la neige sur la preview (alors qu’on la voit dans ton tuto vidéo).
Une idée ?
Merci !
1. Dgeo Dev
  20 Oct 2021 Répondre
  
  Hello, merci pour le retour, j’ai mis à jour le tuto ca devrait désormais fonctionner 😉
dams
28 Oct 2021 Répondre

Pfff sa rend trop beau, merci Dgeo ça marche niquel !! Un triple merci à toi. juste dommage qu’on ne peut config un peu tout ça comme les autres codes sur CodePen. J’arrive à les config des fois sur CP, mais pas à les mettre sur mes thèmes mdr. Allez continue de nous régaler, ont attend tes nouveau tuto pr la V2 de Shopif
1. Dgeo Dev
  28 Oct 2021 Répondre
  
  Merci pour le com 🙂 Le code est ultra complexe du coup la personnalisation reste réservées aux développeurs pour le coup 🙁
Thomas
28 Oct 2021 Répondre

Hello, super cela fonctionne mais il y a t-il possibilité de ralentir la neige ?
1. Dgeo Dev
  28 Oct 2021 Répondre
  
  Hello, j’ai réduis légèrement la vitesse. c’est mieux ? 🙂
Thomas
30 Oct 2021 Répondre

Bonjour, oui parfait, je vous remercie 😉
Amrhan
2 Nov 2021 Répondre

hello , quand j’introduit le code au dessus de , la neige tombe mais feature collection et testimonia disparaissent ! j’utilise le theme debutify !
1. Dgeo Dev
  2 Nov 2021 Répondre
  
  Hello, hum aucune idée la désolé, faudrait plutôt demander à leur support qui seront plus apte à répondre 🙂
Sarah
7 Nov 2021 Répondre

Salut dgeo, super comme d’ab tu es le meilleur !!!
Sais tu comment ajouter un icone sur le bouton ajout au panier ? du style un cadi ou un panier dans le bouton avec le ajout au panier ???
1. Dgeo Dev
  8 Nov 2021 Répondre
  
  Hello et merci 😉 généralement c’est inclus dans les thèmes. Speedfly propose plusieurs icônes au besoin. Assez compliqué à faire étant donné qu’il faut que le thème embarque une bibliothèque d’icône comme fontawesome par exemple et injecter l’icone en CSS content
mat
8 Nov 2021 Répondre

Bonsoir, est-ce possible de réduire un peu la densité ? Réduire la vitesse ou moins de flocon ?
Comment faire s’il te plait
1. Dgeo Dev
  8 Nov 2021 Répondre
  
  Bonsoir, non malheureusement car le script est figé
Nass
8 Nov 2021 Répondre

Bonjour, possible de baisser un peu la neige ou pas?
1. Dgeo Dev
  8 Nov 2021 Répondre
  
  Hello, non navré 🙁
Timea Kiss-Fodor
11 Nov 2021 Répondre

Hello, merci beaucoup pour cette vidéo 🙂
Mais … j’ai un problème, j’ai tout fait comme vous et même recommencer à zéro 2 fois mais rien ne ce passe … pas de neige.

Aussi dans votre vidéo le liens à copier pour juste avoir la neige sur la page d’accueil est plus petit que ici.
J’ai essayer le grand d’ici et puis j’ai re essayer en le découpant afin qu’il soit pareil que dans la vidéo.
Mais rien y fait.

Pouvez-vous m’aider ? 🙁

merci, Timea
Pierre
8 Nov 2022 Répondre

Hello,

Merci beaucoup pour ce tuto !

Je l’ai installé sur le thème « Début », ça fonctionne super bien. J’ai voulu l’installé sur le thème « Sense », mais il y a un problème. Quand je scrolle, il y a une partie (en bas) où ça ne s’affiche pas. Est-ce qu’il y a une solution ? Merci d’avance.
1. Dgeo Dev
  12 Nov 2022 Répondre
  
  hello et merci pour le message. Hum ca me dit rien mais je testerai si je trouve une personne avec ce thème et je mettrai le code à jour en conséquence si je trouve la problématique 🙂
  1. Pierre
    23 Nov 2022 Répondre
    
    Bonsoir,
    
    super merci. Pour info, il y a une partie qui ne s’affiche pas sur la version smartphone. Je pense que c’est à la barre du header qui s’enlève quand on scroll. Avez-vous une solution ? Merci beaucoup.
TERM
15 Nov 2022 Répondre

Salut, si je souhaite mettre l’effet neige pendant que 30 secondes ou 1 minute, comment faire le réglage ?
1. Dgeo Dev
  17 Nov 2022 Répondre
  
  Hello à la fin du fichier snow.js rajouter ca :
  setTimeout(function() {
  let delay = 30000;
  setTimeout(function() {
  document.querySelector(‘canvas’).remove();
  }, delay);
  }, 3000);
2. Dgeo Dev
  17 Nov 2022 Répondre
  
  pour 1mn remplacer 30000 par 60000
TERM
17 Nov 2022 Répondre

Salut ca ne marche pas… je l’ai mis a la fin pourtant mais ca me désactive carrément l’effet
1. Dgeo Dev
  17 Nov 2022 Répondre
  
  Etrange j’ai pourtant testé…
Val
21 Nov 2022 Répondre

Bonjour, j’ai appliqué tes explications mais cela ne fonctionne pas. Je suis avec le thème IMPULSE, peut-être un souci de compatibilité?
Ambre
7 Déc 2023 Répondre

Bonjour, j’ai suivi toutes vos explications mais ça ne fonctionne pas. Est-ce qu’il s’agit du thème peut être ? Merci d’avance
1. Dgeo Dev
  11 Déc 2023 Répondre
  
  Bonjour, oui probablement même si en principe c’est assez générique pour que ca fonctionne partout. Le fichier est bien chargé ? au besoin nous pouvons intervenir : https://speed-ecom.eu/support
Kristopher
14 Mai 2024 Répondre

Salut.

Vraiment génial cet Asset !

Ne pourrait-on pas pousser le vice encore plus loin en mettant une condition de « déclencheur » uniquement à une date précise ? 🙂
1. Dgeo Dev
  15 Mai 2024 Répondre
  
  Hello et merci pour le commentaire 🙂
  C’est une bonne idée mais le soucis c’est que ca fait tout de même charger un code / script pour rien toute l’année et d’un point de vue performance c’est pas fou. Mais je peux faire une option pour ca au besoin 😉

Comment l’installer un effet de neige?

Code pour l’avoir partout sur le site

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

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment afficher le stock sur Shopify ?

Comment créer une section Plan de Tarification sur Shopify ?

Comment créer un système de navigation par produit sur shopify ?

Cet article a 99 commentaires

Adam

Dgeo Dev

Rom Ain

Manu

gems

Nurhan

Dgeo Dev

Nurhan

Nurhan

Jo

Sarah

Dgeo Dev

Romain

hugo

Dgeo Dev

yoyo

Le Marginal Magnifique

Dgeo Dev

Le Marginal Magnifique

Christian DAUGAS

Dgeo Dev

Bachir

Dgeo Dev

Pierre

Edouard

Echelard

Dgeo Dev

Russsssman

Dgeo Dev

FoxFox

Dgeo Dev

lefort

Dgeo Dev

Clémentine

Dgeo Dev

Dgeo Dev

waxam

Dgeo Dev

Le Marginal Magnifique

Dgeo Dev

Loic Cool

Dgeo Dev

Ad

Dgeo Dev

nora

Eugé

Dgeo Dev

Cyprien_Ecom

Dgeo Dev

Tahirou Mballo

Dgeo Dev

emma

Dgeo Dev

Marie

Dgeo Dev

fabien

Hic77

Alexandra

Alain

Martin

Dgeo Dev

Guillaume

Dgeo Dev

Ridben

ASecom

Dgeo Dev

YVEs

Dgeo Dev