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

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

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

    1. Bonjour, cela demanderait un développement spécifique

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

  8. Bonjour

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

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

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