toNous 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="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style>
.dg-heart:empty { display:block;}
.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 defer>

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

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

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

{% if template.name == "index" %}
{%- render '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 3 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 17 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 🙂

      1. bonjour pourriez vous faire la video avec le theme dawn pour la tombe de coeur car cela ne fonctionne pas non plus cela serait tres gentil de votre part
        bien cordialement

        1. Bonjour et merci pour le commentaire. Cependant le tuto fonctionne très bien sur dawn. Peut être un soucis JS ou un mauvais emplacement du code ?

  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
×
×

Panier