Comment décorer son Shopify pour la Saint-Valentin avec des Coeurs qui tombent

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 Extraits (Snippets) – et cliquez sur « Créer un nouveau extrait extrait 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 Mise en page (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]

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

  1. Fouzine

    27 Jan 2021 Répondre

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

      27 Jan 2021 Répondre

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

    6 Fév 2021 Répondre

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

    1. Dgeo Dev

      7 Fév 2021 Répondre

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

    24 Mar 2021 Répondre

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

      24 Mar 2021 Répondre

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

  4. Cyprien-Ecom

    25 Juil 2021 Répondre

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

    1. Dgeo Dev

      27 Juil 2021 Répondre

      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 🙂

  5. mitigeur doré

    9 Août 2021 Répondre

    On dirait que le code ne s’exécute pas correctement, s’agit-il d’une erreur ?

  6. mj

    28 Jan 2022 Répondre

    Bonjour, comment faire tomber des pétales de roses à la place des coeurs?

    1. Dgeo Dev

      29 Jan 2022 Répondre

      Bonjour, cela demanderait un développement spécifique

  7. camelia

    26 Déc 2022 Répondre

    sa fonctionne pas ,J’ai le thème dawn

  8. hana

    29 Août 2023 Répondre

    Bonjour

    comment enlever les cœurs après svp ? merci

    1. Dgeo Dev

      29 Août 2023 Répondre

      Hello, il suffit de supprimer les codes après la saint valentin 🙂

  9. hana

    30 Août 2023 Répondre

    merci mais c’est dommage la plupart des tuto fonctionne as sur le thème Dawn mais merci quand même : ca fonctionne pas sur mon site malheureusement je suis avec le thème Dawn merci

Laisser un commentaire

Fermer le menu