Nous allons voir dans ce tutoriel comment décorer son site Shopify pour la Saint-Valentin !

Le script va simuler un effet de coeurs qui tombent en continu, ainsi vos clients amoureux aimeront effectuer un achat qui vient du coeur 😀

Comment l’installer un effet de coeurs qui tombent ?

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

Trouvez le dossier Snippets – et cliquez sur « Créer un nouveau snippet et nommez-le « rain-of-hearts » ! maintenant que notre fichier est créé il faut le remplir en copiant le code suivant dans le fichier fraichement créé:

<link
    rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    />
<style>

.dg-heart {
  min-width: 25px;
  min-height: 25px;
  font-size: 21px;
  color: #E31B23;
  position: fixed;
  opacity:0.8;
  z-index:999;
  top:-15vh;
  animation: rain-of-hearts 12s linear 1;
}
@keyframes rain-of-hearts{0%{transform:translateY(-10vh) rotateZ(0)}25%{transform:translateY(27vh) rotateZ(20deg)}50%{transform:translateY(55vh) rotateZ(-20deg)}75%{transform:translateY(90vh) rotateZ(20deg)}100%{transform:translateY(120vh) rotateZ(-20deg)}}


</style>

<script>

function createHearts () {
  const heart  = document.createElement("div");
  heart.classList.add("dg-heart","fa","fa-heart")
  heart.style.left = Math.floor(Math.random()*100)+"vw"
  heart.style.animationDuration = Math.floor(Math.random()*2)+10+"s"
  document.body.appendChild(heart)
}
setInterval(createHearts,500);
var heart = document.getElementsByClassName("dg-heart")
setInterval(()=>{
  for (let i = 0; i < heart.length; i++) {
    if (i > 30) {
      heart[0].remove() 
    }   
  }
},300)

</script>

Activation de l’effet

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

Code pour l’avoir partout sur le site

{%- include 'rain-of-hearts' -%}

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

{% if template.name == "index" %}
{%- include 'rain-of-hearts' -%}
{% endif %}

Il ne vous reste plus qu’à cliquer sur save (enregistrer) et de profiter de ce joli spectacle en vous souhaitant une joyeuse Saint-Valentin ❤️

ps: si vous avez déjà fontawesome sur votre boutique comme sur Speedfly il est recommandé de supprimer la partie du code suivant du 1er script ! question de performance 😉

<link
    rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    />

N’oubliez pas supprimer l’appel du script une fois la saint valentin terminée 😀

Disclaimer: Attention ce genre de script peut ralentir la vitesse de votre site !

Ce tutoriel existe aussi en vidéo

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

🤗 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 8 commentaires

  1. Salut DGEO DEV ! j’ai fais la manip et ca ne fonctionne pas sur mon thème pourtant j’ai le thème Debut.
    Est-ce que ca ne viendrais du faite que le fichier s’appelle ‘run-of-hearts’ et que dans le code c’est ‘rain-of-hearts’ ? Bon moi dans les 2 cas ca ne fonctionne pas lol

    1. Hello, le tuto n’est pas encore officiellement sorti … il est logiquement pas dans la section des tutoriels pour le moment… Bref le mieux est d’attendre le tuto du lundi pour l’installer 😉 ca sera plus clair. Bonne soirée

  2. Salut,
    Ne fonctionne pas avec le Billionaire Theme.
    Un idée peut-être ?

    1. Hello, désolé je ne connais pas tellement ce thème. le mieux serait de demander à leur support 😉 sinon le code est le plus générique possible et il est censé fonctionner partout peu importe le thème

  3. Hello , je voulais savoir si cela étais possible de modifier le svg Heart , avec un autre svg comme par exemple des ‘cadeaux’ pour avoir une pluie de cadeau plutôt qu’une pluie de cœur 🙂 merci bcp

    1. Hello, oui c’est possible en modifiant dans le code le fa-heart et remplacer par une icône fontawesome 😉

  4. Bonjour Dgeo Dev,
    Il paraît que le code ne marche plus sur le thème Debutify

    1. Hello, y a pas de raisons pour que ca ne marche pas car c’est quelque chose de générique. Faudrait voir avec le support du thème car je ne connais pas debutify 🙂

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