Valentine's Day customization - shower of hearts

Store Design
1

Good morning! I use the Dawn theme, and I wanted to ask if it’s possible to have a Valentine’s Day customization on this theme, essentially a shower of hearts, exclusively for the home page. Thank you very much :slightly_smiling_face:

2

Hello @lvbtq13

I think you need something like example: https://codepen.io/vaaghu/pen/zYKRPEM ?

If you are have technical knowledge you can use the codepen example and use their code it is a combination of CSS, HTML and Javascript or else I would recommend you to approach a developer to help you at a reasonable rate.

Let me know if you need any help.

Thanks

3

Hello,

thanks for your anwer.

I made something like this:

https://lauveaboutique.com/

i modified theme.liquid

{% render ‘christmas_snow2’ %} (i renamed it strangely i know ahah)

and i added a snippet :

/* Stile personalizzato per i cuori */ .heart { color: #ff0000; /* Colore dei cuori */ font-size: 1em; font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; } @keyframes hearts-fall { 0% { top: -10%; } 100% { top: 100%; } } @keyframes hearts-shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } } .heart { position: fixed; top: -10%; z-index: 9999; user-select: none; cursor: default; animation-name: hearts-fall, hearts-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running; } .heart:nth-of-type(0) { left: 1%; animation-delay: 0s, 0s; } .heart:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; } .heart:nth-of-type(2) { left: 20%; animation-delay: 6s, .5s; } .heart:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; } .heart:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; } .heart:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; } .heart:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; } .heart:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; } .heart:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; } .heart:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; } .heart:nth-of-type(10) { left: 25%; animation-delay: 2s, 0s; } .heart:nth-of-type(11) { left: 65%; animation-delay: 4s, 2.5s; }
❤
❤
❤
❤
❤
❤
❤
❤
❤
❤
❤
❤

Do you know how can i show this hearts shower only on the home page? (desktop and mobile)

Thank you

4

Hello @lvbtq13

Add the condition where you called the snippet like below.

{% if template contains ‘index’ %}

{% render ‘christmas_snow2’ %}

{% endif %}

Thanks

5

thanksss